/* Xineo Form — style principal */
:root{
  --xf-primary:#2B3358;
  --xf-primary-light:#3E4779;
  --xf-accent:#12A594;
  --xf-bg:#F6F7FA;
  --xf-surface:#FFFFFF;
  --xf-text:#1C2333;
  --xf-muted:#6B7280;
  --xf-border:#E4E7EE;
  --xf-danger:#D5473F;
  --xf-radius:8px;
  --xf-font: 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--xf-font);
  background:var(--xf-bg);
  color:var(--xf-text);
  font-size:15px;
  line-height:1.5;
}
a{color:var(--xf-primary);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3{font-weight:700;letter-spacing:-0.01em;margin:0 0 .5em;}

/* ---------- Layout ---------- */
.xf-app{min-height:100vh;display:flex;flex-direction:column;}
.xf-main{flex:1;max-width:1100px;margin:0 auto;padding:32px 20px;width:100%;}

/* ---------- Header ---------- */
.xf-header{
  background:var(--xf-surface);
  border-bottom:1px solid var(--xf-border);
  position:sticky;top:0;z-index:50;
}
.xf-header-inner{
  max-width:1100px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;
}
.xf-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--xf-primary);}
.xf-logo img{height:32px;width:auto;}
.xf-nav{display:flex;align-items:center;gap:22px;}
.xf-nav a{color:var(--xf-text);font-weight:600;font-size:14px;}
.xf-nav a:hover{color:var(--xf-primary);text-decoration:none;}
.xf-burger{display:none;background:none;border:none;font-size:26px;color:var(--xf-primary);cursor:pointer;}

@media (max-width:720px){
  .xf-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--xf-surface);
    border-bottom:1px solid var(--xf-border);
    flex-direction:column;align-items:flex-start;gap:0;
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .xf-nav.open{max-height:400px;padding:10px 20px 16px;}
  .xf-nav a{padding:10px 0;width:100%;border-bottom:1px solid var(--xf-border);}
  .xf-burger{display:block;}
}

/* ---------- Footer ---------- */
.xf-footer{
  border-top:1px solid var(--xf-border);
  background:var(--xf-surface);
  padding:18px 20px;font-size:13px;color:var(--xf-muted);
}
.xf-footer-inner{
  max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:8px;
}
.xf-footer a{color:var(--xf-muted);}
.xf-footer .xf-love i{color:var(--xf-danger);}

/* ---------- Cards / Panels ---------- */
.xf-card{
  background:var(--xf-surface);border:1px solid var(--xf-border);
  border-radius:var(--xf-radius);padding:24px;
}
.xf-card + .xf-card{margin-top:16px;}
.xf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}

/* ---------- Forms (UI) ---------- */
.xf-field{margin-bottom:16px;}
.xf-field label{display:block;font-weight:600;font-size:13px;margin-bottom:6px;}
.xf-field .req{color:var(--xf-danger);}
.xf-input,.xf-textarea,.xf-select{
  width:100%;padding:10px 12px;border:1px solid var(--xf-border);
  border-radius:6px;font-family:var(--xf-font);font-size:14px;background:#fff;color:var(--xf-text);
}
.xf-input:focus,.xf-textarea:focus,.xf-select:focus{
  outline:2px solid var(--xf-accent);outline-offset:1px;border-color:var(--xf-accent);
}
.xf-textarea{min-height:110px;resize:vertical;}
.xf-check-row{display:flex;align-items:flex-start;gap:8px;font-size:13px;}
.xf-check-row input{margin-top:3px;}

.xf-btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 18px;border-radius:6px;border:1px solid transparent;
  font-weight:600;font-size:14px;cursor:pointer;font-family:var(--xf-font);
}
.xf-btn-primary{background:var(--xf-primary);color:#fff;}
.xf-btn-primary:hover{background:var(--xf-primary-light);text-decoration:none;}
.xf-btn-accent{background:var(--xf-accent);color:#fff;}
.xf-btn-outline{background:transparent;border-color:var(--xf-border);color:var(--xf-text);}
.xf-btn-outline:hover{border-color:var(--xf-primary);text-decoration:none;}
.xf-btn-danger{background:var(--xf-danger);color:#fff;}
.xf-btn-sm{padding:6px 12px;font-size:13px;}

.xf-auth-wrap{max-width:420px;margin:40px auto;}
.xf-auth-wrap h1{font-size:22px;}
.xf-muted{color:var(--xf-muted);font-size:13px;}
.xf-alert{padding:12px 14px;border-radius:6px;font-size:14px;margin-bottom:16px;}
.xf-alert-error{background:#FDEDEC;color:var(--xf-danger);border:1px solid #F5C6C2;}
.xf-alert-success{background:#E7F8F4;color:#0C7A6C;border:1px solid #B9EBE1;}

/* ---------- Tables ---------- */
.xf-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.xf-table th,.xf-table td{padding:10px 12px;border-bottom:1px solid var(--xf-border);text-align:left;}
.xf-table th{color:var(--xf-muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;}
.xf-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.xf-badge-ok{background:#E7F8F4;color:#0C7A6C;}
.xf-badge-pending{background:#FFF6E5;color:#A56A00;}
.xf-badge-off{background:#F1F2F5;color:var(--xf-muted);}

/* ---------- Form builder ---------- */
.xf-fb-field{
  display:flex;align-items:center;gap:10px;border:1px solid var(--xf-border);
  border-radius:6px;padding:10px 12px;margin-bottom:8px;background:#fff;
}
.xf-fb-field .type{color:var(--xf-muted);font-size:12px;min-width:80px;}
.xf-fb-field .label{flex:1;font-weight:600;font-size:13.5px;}
.xf-fb-field .actions{display:flex;gap:4px;}
.xf-fb-field .actions button{
  background:none;border:1px solid var(--xf-border);border-radius:4px;
  width:28px;height:28px;cursor:pointer;color:var(--xf-muted);
}
.xf-fb-field .actions button:hover{color:var(--xf-primary);border-color:var(--xf-primary);}

/* ---------- Public embedded form ---------- */
.xf-public-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--xf-border);}
.xf-public-body{max-width:640px;margin:0 auto;padding:28px 20px;}
.xf-public-credit{text-align:center;font-size:11px;color:var(--xf-muted);padding:14px;}