:root{
    --navy:#0b1f4d;
    --navy-700:#13295e;
    --blue:#1d3a8a;
    --blue-500:#2563eb;
    --blue-400:#3b82f6;
    --sky:#e8f0fe;
    --ink:#1e293b;
    --muted:#64748b;
    --line:#e2e8f0;
    --bg:#f4f7fc;
    --radius:14px;
    --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.18);
}
*{box-sizing:border-box}
body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--blue)}
.text-navy{color:var(--navy)!important}
.bg-navy{background:var(--navy)!important}
.btn-primary{
    --bs-btn-bg:var(--blue);--bs-btn-border-color:var(--blue);
    --bs-btn-hover-bg:var(--navy);--bs-btn-hover-border-color:var(--navy);
    --bs-btn-active-bg:var(--navy);--bs-btn-active-border-color:var(--navy);
    --bs-btn-disabled-bg:var(--blue);--bs-btn-disabled-border-color:var(--blue);
}
.btn-outline-primary{
    --bs-btn-color:var(--blue);--bs-btn-border-color:var(--blue);
    --bs-btn-hover-bg:var(--blue);--bs-btn-hover-border-color:var(--blue);
}
.btn{border-radius:10px;font-weight:500}
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-header{background:#fff;border-bottom:1px solid var(--line);font-weight:600}
.form-control,.form-select{border-radius:10px;border-color:var(--line);padding:.55rem .8rem}
.form-control:focus,.form-select:focus{border-color:var(--blue-400);box-shadow:0 0 0 .2rem rgba(37,99,235,.15)}
.badge{font-weight:600;letter-spacing:.2px}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
    width:248px;background:linear-gradient(180deg,var(--navy),var(--navy-700));
    color:#cbd5e1;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;
    z-index:1040;transition:transform .25s ease;
}
.sidebar .brand{
    padding:20px 22px;color:#fff;font-weight:700;font-size:1.1rem;letter-spacing:.3px;
    display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar .brand i{font-size:1.4rem;color:#93c5fd}
.sidebar .nav-section{padding:14px 22px 6px;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:#64748b}
.sidebar a.nav-link{
    color:#cbd5e1;padding:.6rem 22px;display:flex;align-items:center;gap:12px;
    border-left:3px solid transparent;font-size:.94rem;
}
.sidebar a.nav-link i{font-size:1.05rem;width:20px;text-align:center}
.sidebar a.nav-link:hover{background:rgba(255,255,255,.06);color:#fff}
.sidebar a.nav-link.active{background:rgba(59,130,246,.16);border-left-color:var(--blue-400);color:#fff}
.sidebar .sidebar-footer{margin-top:auto;padding:16px 22px;border-top:1px solid rgba(255,255,255,.08);font-size:.85rem}

.content{flex:1;margin-left:248px;min-width:0}
.topbar{
    background:#fff;border-bottom:1px solid var(--line);padding:.75rem 1.25rem;
    display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:1030;
}
.topbar .page-title{font-weight:700;color:var(--navy);font-size:1.15rem;margin:0}
.main{padding:1.5rem}
.avatar{
    width:38px;height:38px;border-radius:50%;background:var(--sky);color:var(--blue);
    display:flex;align-items:center;justify-content:center;font-weight:700;
}
.sidebar-toggle{display:none;background:none;border:0;font-size:1.5rem;color:var(--navy)}
.backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1035}

@media(max-width:991.98px){
    .sidebar{transform:translateX(-100%)}
    .sidebar.open{transform:translateX(0)}
    .content{margin-left:0}
    .sidebar-toggle{display:inline-block}
    .backdrop.show{display:block}
}

/* ---------- Stat cards ---------- */
.stat{display:flex;align-items:center;gap:16px}
.stat .ico{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff}
.stat .num{font-size:1.7rem;font-weight:700;line-height:1;color:var(--navy)}
.stat .lbl{color:var(--muted);font-size:.85rem}

/* ---------- Builder ---------- */
.q-item{
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
    margin-bottom:12px;display:flex;gap:12px;align-items:flex-start;
}
.q-item .drag{cursor:grab;color:#cbd5e1;font-size:1.2rem;padding-top:2px}
.q-item .q-type{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);font-weight:700}
.q-item .q-label{font-weight:600;color:var(--ink)}
.q-item.section-item{background:var(--sky);border-style:dashed}
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.type-card{
    border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;text-align:center;
    transition:all .15s;background:#fff;
}
.type-card:hover{border-color:var(--blue-400);background:var(--sky)}
.type-card i{font-size:1.4rem;color:var(--blue);display:block;margin-bottom:6px}
.type-card span{font-size:.82rem;font-weight:500}
.sortable-ghost{opacity:.4}

/* ---------- Public form ---------- */
.public-wrap{max-width:760px;margin:0 auto;padding:24px 16px 60px}
.public-head{
    background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:16px;
    padding:30px 28px;box-shadow:var(--shadow);
}
.public-head.theme-blue{background:linear-gradient(135deg,#1d3a8a,#3b82f6)}
.public-head.theme-teal{background:linear-gradient(135deg,#0f3d56,#0ea5a4)}
.public-head h1{font-weight:700;font-size:1.55rem;margin:0}
.q-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-top:16px;box-shadow:var(--shadow)}
.q-card .q-num{color:var(--blue);font-weight:700;font-size:.8rem}
.q-card legend,.q-card .q-title{font-weight:600;font-size:1.05rem;margin-bottom:.35rem}
.q-card .help{color:var(--muted);font-size:.9rem;margin-bottom:.85rem}
.req{color:#dc2626}
.section-card{background:var(--sky);border-left:4px solid var(--blue)}
.rating-stars{display:flex;gap:6px;font-size:1.9rem}
.rating-stars input{position:absolute;opacity:0;width:0;height:0}
.rating-stars label{color:#cbd5e1;cursor:pointer;transition:color .12s}
.rating-stars label:hover,.rating-stars label.on{color:#f59e0b}
.scale-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.scale-opt{display:flex;flex-direction:column;align-items:center;gap:4px}
.scale-opt input{margin:0}
.choice-pill{
    display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;
    padding:.6rem .85rem;margin-bottom:8px;cursor:pointer;transition:all .12s;
}
.choice-pill:hover{border-color:var(--blue-400);background:var(--sky)}
.choice-pill.is-invalid{border-color:#dc2626}

/* ---------- Auth ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
    background:linear-gradient(135deg,var(--navy),var(--blue))}
.auth-card{width:100%;max-width:410px;background:#fff;border-radius:18px;box-shadow:0 24px 60px -20px rgba(2,6,23,.6);overflow:hidden}
.auth-card .head{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:30px;text-align:center}
.auth-card .head i{font-size:2.4rem;color:#93c5fd}
.auth-card .body{padding:30px}

.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.empty i{font-size:3rem;color:#cbd5e1;display:block;margin-bottom:12px}
.table thead th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--line)}
.copy-link{font-family:monospace;font-size:.9rem;word-break:break-all}

/* ---------- Linear scale (broadened, mobile-friendly) ---------- */
.scale-widget{margin-top:6px}
.scale-track{display:flex;gap:8px}
.scale-cell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;
    cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:14px 4px;background:#fff;transition:all .12s}
.scale-cell:hover{border-color:var(--blue-400);background:var(--sky)}
.scale-cell input{position:absolute;opacity:0;width:0;height:0}
.scale-dot{width:20px;height:20px;border-radius:50%;border:2px solid #cbd5e1;transition:all .12s}
.scale-cell:hover .scale-dot{border-color:var(--blue)}
.scale-cell input:checked ~ .scale-dot{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 3px var(--sky)}
.scale-cell:has(input:checked){border-color:var(--blue);background:var(--sky)}
.scale-num{font-weight:700;font-size:1rem;color:#0f172a}
.scale-ends{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:var(--muted);font-size:.85rem}

/* ---------- Net Promoter Score ---------- */
.nps-widget{margin-top:6px}
.nps-track{display:flex;flex-wrap:wrap;gap:7px}
.nps-cell{flex:1 1 42px;min-width:40px;cursor:pointer;position:relative}
.nps-cell input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.nps-box{display:flex;align-items:center;justify-content:center;height:50px;border:1.5px solid var(--line);
    border-radius:10px;font-weight:700;font-size:1.05rem;color:#0f172a;background:#fff;transition:all .12s}
.nps-cell:hover .nps-box{border-color:var(--blue-400);background:var(--sky)}
.nps-det input:checked + .nps-box{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:0 5px 14px -5px rgba(220,38,38,.55);transform:translateY(-2px)}
.nps-pas input:checked + .nps-box{background:#f59e0b;border-color:#f59e0b;color:#fff;box-shadow:0 5px 14px -5px rgba(245,158,11,.55);transform:translateY(-2px)}
.nps-pro input:checked + .nps-box{background:#16a34a;border-color:#16a34a;color:#fff;box-shadow:0 5px 14px -5px rgba(22,163,74,.55);transform:translateY(-2px)}
.nps-cell input:focus-visible + .nps-box{outline:2px solid var(--blue-400);outline-offset:2px}
.nps-ends{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:var(--muted);font-size:.85rem}
@media (max-width:520px){
    .nps-track{gap:5px}
    .nps-cell{flex:1 1 38px;min-width:36px}
    .nps-box{height:44px;font-size:.95rem;border-radius:8px}
}

/* ---------- Inline validation feedback ---------- */
.q-jserror{animation:qshake .28s}
@keyframes qshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.q-card:has(.q-jserror){border-color:#fca5a5;box-shadow:0 0 0 2px rgba(220,38,38,.08)}
.likert-row-bad{background:#fef2f2!important}
.likert-row-bad .likert-stmt{color:#b91c1c}
@media (max-width:640px){ .likert-row-bad{outline:1.5px solid #fecaca} }

/* ---------- Likert matrix ---------- */
.likert{overflow-x:auto}
.likert-table{width:100%;border-collapse:collapse;font-size:.92rem}
.likert-table th,.likert-table td{padding:11px 8px;text-align:center;border-bottom:1px solid var(--line)}
.likert-table thead th{color:var(--muted);font-weight:600;font-size:.78rem;vertical-align:bottom;line-height:1.25}
.likert-stmt{text-align:left;font-weight:500;color:#0f172a;min-width:190px}
.likert-opt{display:inline-flex;cursor:pointer}
.likert-opt input{position:absolute;opacity:0;width:0;height:0}
.likert-opt span{width:22px;height:22px;border-radius:50%;border:2px solid #cbd5e1;display:inline-block;transition:all .12s}
.likert-opt:hover span{border-color:var(--blue)}
.likert-opt input:checked + span{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 3px var(--sky)}
.likert tbody tr:hover{background:var(--sky)}
.likert-invalid{outline:2px solid #fecaca;border-radius:10px;padding:4px}

@media (max-width:640px){
    .likert-table thead{display:none}
    .likert-table,.likert-table tbody,.likert-table tr,.likert-table td,.likert-table th{display:block;width:100%}
    .likert-table tr{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
    .likert-table tbody tr:hover{background:#fff}
    .likert-table td{border:0;display:flex;align-items:center;justify-content:space-between;padding:7px 0;text-align:left}
    .likert-table td::before{content:attr(data-label);color:var(--muted);font-size:.9rem;margin-right:12px}
    .likert-stmt{min-width:0;padding:0 0 8px;font-weight:600;border-bottom:1px dashed var(--line);margin-bottom:4px}
    .scale-num{font-size:.9rem}
    .scale-cell{padding:12px 2px}
}

.q-card input[type=file]{max-width:460px}

/* ================= Public form style presets ================= */
body[class*="fstyle-"]{min-height:100vh}
body.fstyle-classic{background:#eef2f8}
body.fstyle-paper{background:#f6f1e7}
body.fstyle-ocean{background:linear-gradient(160deg,#e0f2fe,#eef2ff)}
body.fstyle-sunset{background:linear-gradient(160deg,#ffe9d6,#ffe0ec)}
body.fstyle-forest{background:linear-gradient(160deg,#e6f7ee,#eefbf3)}
body.fstyle-dusk{background:#0f172a}

/* Accent + header per preset (classic & paper keep the chosen header theme) */
.fstyle-ocean{--blue:#0369a1;--blue-400:#0ea5e9;--sky:#e0f2fe}
.fstyle-sunset{--blue:#db2777;--blue-400:#f472b6;--sky:#ffe4ef}
.fstyle-forest{--blue:#047857;--blue-400:#10b981;--sky:#dcfce7}
.fstyle-dusk{--blue:#38bdf8;--blue-400:#7dd3fc;--sky:#0c2436}
.fstyle-ocean  .public-head{background:linear-gradient(135deg,#0369a1,#0ea5e9)!important}
.fstyle-sunset .public-head{background:linear-gradient(135deg,#ea580c,#db2777)!important}
.fstyle-forest .public-head{background:linear-gradient(135deg,#047857,#10b981)!important}
.fstyle-dusk   .public-head{background:linear-gradient(135deg,#1e3a8a,#0ea5e9)!important}
.fstyle-ocean  .btn-primary{background:#0369a1;border-color:#0369a1}
.fstyle-sunset .btn-primary{background:#db2777;border-color:#db2777}
.fstyle-forest .btn-primary{background:#047857;border-color:#047857}
.fstyle-dusk   .btn-primary{background:#0ea5e9;border-color:#0ea5e9}

.fstyle-paper  .q-card{border-color:#ece3d2;box-shadow:0 10px 26px -20px rgba(120,90,40,.55)}
.fstyle-ocean  .q-card{border-color:#cfe8fb}
.fstyle-sunset .q-card{border-color:#fbd5c9}
.fstyle-forest .q-card{border-color:#c9ecd6}

/* Dark preset */
.fstyle-dusk .q-card{background:#1e2a44;border-color:#334155}
.fstyle-dusk .q-title,.fstyle-dusk legend,.fstyle-dusk .q-card .q-title{color:#f1f5f9}
.fstyle-dusk .help,.fstyle-dusk .q-num,.fstyle-dusk .text-muted{color:#94a3b8!important}
.fstyle-dusk .form-control,.fstyle-dusk .form-select{background:#0f172a;border-color:#334155;color:#e2e8f0}
.fstyle-dusk .form-control::placeholder{color:#64748b}
.fstyle-dusk .choice-pill{border-color:#334155;color:#e2e8f0}
.fstyle-dusk .choice-pill:hover{background:#243049}
.fstyle-dusk .scale-cell,.fstyle-dusk .nps-box{background:#0f172a;border-color:#334155;color:#e2e8f0}
.fstyle-dusk .scale-num{color:#e2e8f0}
.fstyle-dusk .likert-table th,.fstyle-dusk .likert-table td{border-color:#334155}
.fstyle-dusk .likert-stmt{color:#e2e8f0}
.fstyle-dusk .likert-table thead th{color:#94a3b8}
.fstyle-dusk .likert tbody tr:hover{background:#243049}
.fstyle-dusk .section-card{background:#243049;border-color:#334155}

/* Swatch previews in survey settings */
.fstyle-swatch{transition:all .12s}
.fstyle-preview{display:block;height:44px;border-radius:6px;padding:5px;overflow:hidden;border:1px solid rgba(0,0,0,.05)}
.fstyle-preview .fp-head{display:block;height:9px;border-radius:3px;margin-bottom:4px}
.fstyle-preview .fp-card{display:block;height:6px;border-radius:2px;margin-bottom:3px;background:#fff}
.fstyle-preview.fstyle-classic{background:#eef2f8}
.fstyle-preview.fstyle-classic .fp-head{background:linear-gradient(135deg,#0b1f4d,#1d3a8a)}
.fstyle-preview.fstyle-paper{background:#f6f1e7}
.fstyle-preview.fstyle-paper .fp-head{background:linear-gradient(135deg,#0b1f4d,#1d3a8a)}
.fstyle-preview.fstyle-paper .fp-card{background:#fffdf8}
.fstyle-preview.fstyle-ocean{background:linear-gradient(160deg,#e0f2fe,#eef2ff)}
.fstyle-preview.fstyle-ocean .fp-head{background:linear-gradient(135deg,#0369a1,#0ea5e9)}
.fstyle-preview.fstyle-sunset{background:linear-gradient(160deg,#ffe9d6,#ffe0ec)}
.fstyle-preview.fstyle-sunset .fp-head{background:linear-gradient(135deg,#ea580c,#db2777)}
.fstyle-preview.fstyle-forest{background:linear-gradient(160deg,#e6f7ee,#eefbf3)}
.fstyle-preview.fstyle-forest .fp-head{background:linear-gradient(135deg,#047857,#10b981)}
.fstyle-preview.fstyle-dusk{background:#0f172a}
.fstyle-preview.fstyle-dusk .fp-head{background:linear-gradient(135deg,#1e3a8a,#38bdf8)}
.fstyle-preview.fstyle-dusk .fp-card{background:#334155}