/* Nafitha Survey Engine — shared styles
   World: a window (نافذة) opening onto data. Deep-sky navy ink, leaf-green growth,
   daylight paper surfaces, frame-like borders. */
:root{
  --nf-ink:#1d2a5c;          /* navy from logo */
  --nf-ink-2:#3c4a7e;
  --nf-ink-3:#5f6b96;      /* darkened 2026-07-10: 4.8:1 on sky (WCAG AA) */
  --nf-ink-4:#aab2cc;
  --nf-leaf:#3fa33c;         /* green from logo */
  --nf-leaf-dark:#2f8030;
  --nf-leaf-soft:#e8f5e7;
  --nf-sky:#f4f6fb;          /* daylight canvas */
  --nf-pane:#ffffff;         /* window pane */
  --nf-pane-2:#fafbfe;
  --nf-inset:#eef1f8;        /* input wells */
  --nf-frame:rgba(29,42,92,.14);   /* frame borders */
  --nf-frame-soft:rgba(29,42,92,.07);
  --nf-frame-strong:rgba(29,42,92,.30);
  --nf-danger:#c0392b;
  --nf-warn:#8a6114;       /* darkened 2026-07-10: 5:1 on draft-tag bg (WCAG AA) */
  --nf-go:#2f8030;         /* action green: white text passes AA (brand --nf-leaf is for accents/charts) */
  --nf-go-2:#256b26;
  --nf-leaf-deep:#2a7429;  /* green readable on --nf-leaf-soft */
  --nf-shadow:0 1px 2px rgba(29,42,92,.05),0 4px 14px rgba(29,42,92,.06);
  --nf-radius:8px;
  --nf-radius-lg:14px;
  --nf-shadow-lift:0 2px 4px rgba(29,42,92,.06),0 14px 34px rgba(29,42,92,.13);
  --nf-ring:0 0 0 3px rgba(63,163,60,.22);
  --nf-primary:#1d2a5c;      /* brand fill (buttons/accents) — decoupled from ink text */
  --nf-primary-2:#3c4a7e;
  --nf-font:"Thmanyah Sans","Segoe UI","Noto Naskh Arabic",Tahoma,Arial,sans-serif;
  --nf-font-display:"Thmanyah Serif Display",Georgia,serif;
  --sp:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--nf-font);background:var(--nf-sky);color:var(--nf-ink);font-size:14px;line-height:1.5}
[dir=rtl] body, body[dir=rtl]{font-family:var(--nf-font)}
h1,h2,h3,h4{margin:0 0 .4em;font-weight:650;letter-spacing:-.01em}
a{color:var(--nf-ink-2)}
button{font-family:inherit}

/* ---------- chrome ---------- */
.nf-topbar{display:flex;align-items:center;gap:16px;background:var(--nf-pane);border-bottom:1px solid var(--nf-frame);padding:10px 20px;position:sticky;top:0;z-index:50}
.nf-topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--nf-ink);text-decoration:none}
.nf-topbar .brand img{height:34px}
.nf-topbar .brand .ar{font-size:19px;font-family:var(--nf-font-display)}
.nf-topbar .brand .en{font-size:11px;letter-spacing:3px;color:var(--nf-leaf);font-weight:600}
.nf-topbar .spacer{flex:1}
.nf-topbar .meta{color:var(--nf-ink-3);font-size:12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--nf-frame);background:var(--nf-pane);color:var(--nf-ink);
  padding:6px 14px;border-radius:var(--nf-radius);cursor:pointer;font-size:13px;font-weight:500;transition:all .12s ease}
.btn:hover{border-color:var(--nf-frame-strong);background:var(--nf-pane-2)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--nf-primary);border-color:var(--nf-primary);color:#fff}
.btn.primary:hover{background:var(--nf-primary-2)}
.btn.go{background:var(--nf-go);border-color:var(--nf-go);color:#fff}
.btn.go:hover{background:var(--nf-go-2)}
.btn.primary,.btn.go{box-shadow:0 1px 2px rgba(29,42,92,.16)}
.btn.primary:hover,.btn.go:hover{box-shadow:0 4px 12px rgba(29,42,92,.22);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.danger{color:var(--nf-danger);border-color:rgba(192,57,43,.3)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--nf-ink-2)}
.btn.ghost:hover{background:var(--nf-inset)}
.btn.sm{padding:3px 9px;font-size:12px}
.btn.icon{padding:4px 8px}
/* topbar dropdown menus */
.nf-dd{position:relative;display:inline-flex}
.nf-dd-trigger{white-space:nowrap}
.nf-dd.open .nf-dd-trigger{background:var(--nf-inset);color:var(--nf-ink)}
.nf-dd-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:190px;display:none;flex-direction:column;gap:2px;
  background:var(--nf-pane);border:1px solid var(--nf-frame);border-radius:10px;box-shadow:0 10px 28px rgba(29,42,92,.16);padding:6px;z-index:60}
.nf-dd.open .nf-dd-menu{display:flex}
.nf-dd-menu .btn{justify-content:flex-start;width:100%;border-color:transparent;font-size:13px;padding:7px 10px;color:var(--nf-ink-2)}
.nf-dd-menu .btn:hover{background:var(--nf-inset);color:var(--nf-ink)}

/* ---------- inputs ---------- */
input[type=text],input[type=number],input[type=email],input[type=date],input[type=datetime-local],input[type=password],input[type=url],select,textarea{
  font-family:inherit;font-size:13px;color:var(--nf-ink);background:var(--nf-inset);
  border:1px solid var(--nf-frame-soft);border-radius:var(--nf-radius);padding:7px 10px;outline:none;transition:border .12s,background .12s}
input:focus,select:focus,textarea:focus{border-color:var(--nf-leaf);background:#fff;box-shadow:var(--nf-ring)}
textarea{resize:vertical;min-height:64px}
label.fld{display:block;margin-bottom:10px}
label.fld>span{display:block;font-size:11.5px;font-weight:600;color:var(--nf-ink-2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
label.fld input,label.fld select,label.fld textarea{width:100%}
.check{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:13px;cursor:pointer}
.check input{accent-color:var(--nf-leaf)}

/* ---------- panes / cards ---------- */
.pane{background:var(--nf-pane);border:1px solid var(--nf-frame);border-radius:var(--nf-radius-lg);box-shadow:var(--nf-shadow)}
.pane-pad{padding:18px 20px}
.muted{color:var(--nf-ink-3)}
.tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--nf-inset);color:var(--nf-ink-2)}
.tag.published{background:var(--nf-leaf-soft);color:var(--nf-leaf-deep)}
.tag.draft{background:#fdf3df;color:var(--nf-warn)}
.tag.closed{background:#fbe9e7;color:var(--nf-danger)}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;background:rgba(29,42,92,.35);display:flex;align-items:flex-start;justify-content:center;z-index:200;padding:48px 16px;overflow:auto}
.modal{background:var(--nf-pane);border-radius:8px;box-shadow:0 12px 40px rgba(29,42,92,.25);width:680px;max-width:100%;}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--nf-frame)}
.modal header h3{margin:0;font-size:15px}
.modal .body{padding:18px 20px;max-height:70vh;overflow:auto}
.modal footer{padding:12px 20px;border-top:1px solid var(--nf-frame);display:flex;justify-content:flex-end;gap:8px}
.modal.wide{width:920px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--nf-frame);margin-bottom:16px}
.tabs button{border:none;background:none;padding:9px 16px;cursor:pointer;font-size:13px;color:var(--nf-ink-3);border-bottom:2px solid transparent;font-weight:500;transition:color .12s}
.tabs button:hover{color:var(--nf-ink-2)}
.tabs button.active{color:var(--nf-ink);border-bottom-color:var(--nf-leaf);font-weight:600}

/* ---------- toolbar rows ---------- */
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px}

/* ---------- tables ---------- */
table.nf{width:100%;border-collapse:collapse;font-size:13px}
table.nf th{text-align:start;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--nf-ink-3);padding:8px 10px;border-bottom:1px solid var(--nf-frame)}
table.nf td{padding:8px 10px;border-bottom:1px solid var(--nf-frame-soft);vertical-align:top}
table.nf tr:hover td{background:var(--nf-pane-2)}

/* ---------- toast ---------- */
#toast{position:fixed;bottom:22px;inset-inline-start:50%;transform:translateX(-50%);background:var(--nf-primary);color:#fff;padding:9px 18px;border-radius:6px;font-size:13px;opacity:0;transition:opacity .25s;z-index:500;pointer-events:none}
[dir=rtl] #toast{transform:translateX(50%)}
#toast.show{opacity:1}

/* ================= BUILDER ================= */
.builder-wrap{display:grid;grid-template-columns:236px 1fr 360px;gap:0;height:calc(100vh - 56px)}
.builder-side{border-inline-end:1px solid var(--nf-frame);background:var(--nf-pane);overflow:auto;padding:14px 12px}
.builder-main{overflow:auto;padding:22px 28px;background:var(--nf-sky)}
.builder-props{border-inline-start:1px solid var(--nf-frame);background:var(--nf-pane);overflow:auto;padding:16px}
.builder-props h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--nf-ink-2);border-bottom:1px solid var(--nf-frame);padding-bottom:9px;margin-bottom:12px}
.qcat{margin-bottom:16px}
.qcat>h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--nf-ink-3);margin:0 0 7px;font-weight:700}
.qtype{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:7px;cursor:grab;font-size:12.5px;color:var(--nf-ink-2);border:1px solid transparent;transition:background .12s,border-color .12s,transform .06s}
.qtype:hover{background:var(--nf-inset);border-color:var(--nf-frame-soft)}
.qtype:active{cursor:grabbing;transform:scale(.98)}
.qtype .qicon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--nf-leaf-soft);color:var(--nf-leaf-dark);font-weight:700;font-size:12px;flex:none}

.block-card{background:var(--nf-pane);border:1px solid var(--nf-frame);border-radius:var(--nf-radius-lg);margin-bottom:18px;box-shadow:var(--nf-shadow)}
.block-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--nf-frame-soft);background:linear-gradient(to bottom,var(--nf-pane-2),var(--nf-pane));border-radius:var(--nf-radius-lg) var(--nf-radius-lg) 0 0}
.block-head .bh-title{font-weight:650;font-size:14.5px;border:none;background:transparent;flex:1;color:var(--nf-ink);padding:2px 6px}
.block-head .bh-title:focus{outline:1px solid var(--nf-frame);border-radius:4px;background:#fff}
.block-body{padding:12px 16px}
.block-foot{padding:9px 16px;border-top:1px dashed var(--nf-frame-soft)}
.block-card.collapsed .block-body,.block-card.collapsed .block-foot{display:none}

.qcard{border:1px solid var(--nf-frame-soft);border-radius:8px;padding:11px 13px;margin-bottom:9px;background:var(--nf-pane);cursor:pointer;position:relative;transition:border-color .12s,box-shadow .12s}
.qcard:hover{border-color:var(--nf-frame);box-shadow:var(--nf-shadow)}
.qcard.selected{border-color:var(--nf-leaf);box-shadow:0 0 0 2px var(--nf-leaf-soft),var(--nf-shadow)}
.qcard .qhead{display:flex;align-items:baseline;gap:8px}
.qcard .qcode{font-size:11px;font-weight:700;color:var(--nf-leaf-dark);background:var(--nf-leaf-soft);padding:1px 7px;border-radius:4px;white-space:nowrap}
.qcard .qtext{flex:1;font-weight:500;overflow:hidden}
.qcard .qtext p{margin:0}
.qcard .qmeta{font-size:11px;color:var(--nf-ink-4);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.qcard .qactions{position:absolute;top:6px;inset-inline-end:8px;display:none;gap:2px;background:var(--nf-pane);border:1px solid var(--nf-frame-soft);border-radius:5px;padding:1px}
.qcard:hover .qactions{display:flex}
.qcard .qactions button{border:none;background:none;cursor:pointer;font-size:12px;padding:3px 6px;color:var(--nf-ink-3);border-radius:4px}
.qcard .qactions button:hover{background:var(--nf-inset);color:var(--nf-ink)}
.qcard.dragover{border-top:2px solid var(--nf-leaf)}
.qcard .qdrag{cursor:grab;color:var(--nf-ink-4);font-size:14px;line-height:1;padding:0 2px;user-select:none;flex:none}
.qcard .qdrag:active{cursor:grabbing}
.qcard.dragging{opacity:.45}
.qcard.drop-above{box-shadow:0 -3px 0 -1px var(--nf-leaf)}
.qcard.drop-below{box-shadow:0 3px 0 -1px var(--nf-leaf)}
.page-break{display:flex;align-items:center;gap:8px;color:var(--nf-ink-4);font-size:11px;margin:6px 0;letter-spacing:1px;text-transform:uppercase}
.page-break::before,.page-break::after{content:"";flex:1;border-top:1px dashed var(--nf-frame)}
.logic-badge{font-size:10.5px;background:#eef4ff;color:#3a5bb8;padding:1px 6px;border-radius:4px}
.drop-hint{border:2px dashed var(--nf-frame);border-radius:var(--nf-radius-lg);padding:18px;text-align:center;color:var(--nf-ink-4);font-size:13px;background:var(--nf-pane-2)}
/* empty + loading states */
.nf-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:52px 24px;color:var(--nf-ink-3)}
.nf-empty .ico{width:56px;height:56px;border-radius:16px;background:var(--nf-inset);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--nf-ink-4);margin-bottom:14px}
.nf-empty .t{font-family:var(--nf-font-display);font-size:18px;font-weight:700;color:var(--nf-ink-2);margin-bottom:5px}
.nf-empty .s{font-size:13px;color:var(--nf-ink-3);max-width:340px;line-height:1.6}
.nf-empty.sm{padding:34px 16px}
.nf-empty.sm .ico{width:44px;height:44px;border-radius:12px;font-size:20px;margin-bottom:11px}
.nf-empty.sm .t{font-size:15px}
.nf-loading{display:flex;flex-direction:column;align-items:center;gap:13px;padding:48px 24px;color:var(--nf-ink-3);font-size:13px}
.nf-spinner{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--nf-inset);border-top-color:var(--nf-leaf);animation:nf-spin .7s linear infinite}
@keyframes nf-spin{to{transform:rotate(360deg)}}

/* option editor */
.opt-row{display:flex;gap:6px;align-items:center;margin-bottom:5px}
.opt-row input[type=text]{flex:1}
.opt-row .drag{cursor:grab;color:var(--nf-ink-4)}
.opt-row button{border:none;background:none;cursor:pointer;color:var(--nf-ink-4);font-size:13px}
.opt-row button:hover{color:var(--nf-danger)}

/* rich text mini-toolbar */
.rt-toolbar{display:flex;gap:3px;margin-bottom:4px;flex-wrap:wrap;align-items:center}
.rt-toolbar button{border:1px solid var(--nf-frame-soft);background:var(--nf-pane);border-radius:4px;cursor:pointer;font-size:12px;width:26px;height:24px}
.rt-toolbar button:hover{background:var(--nf-inset)}
.rt-toolbar .rt-ctl{height:24px;border:1px solid var(--nf-frame-soft);border-radius:4px;background:var(--nf-pane);font-size:11.5px;padding:0 4px;cursor:pointer}
.rt-toolbar .rt-color{display:inline-flex;align-items:center;justify-content:center;position:relative;width:26px;height:24px;border:1px solid var(--nf-frame-soft);border-radius:4px;background:var(--nf-pane);cursor:pointer;font-size:12px;overflow:hidden}
.rt-toolbar .rt-color span{pointer-events:none;font-weight:700}
.rt-toolbar .rt-color input[type=color]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;padding:0;border:none}
.rt-toolbar .rt-color.rt-hl{background:var(--nf-leaf-soft)}
.rt-edit{border:1px solid var(--nf-frame-soft);border-radius:var(--nf-radius);background:var(--nf-inset);padding:8px 10px;min-height:54px;font-size:13px}
.rt-edit:focus{outline:none;border-color:var(--nf-ink-3);background:#fff}
.other-input{display:block;margin:4px 0 8px 26px;padding:6px 9px;border:1px solid var(--nf-frame);border-radius:6px;font-size:13px;width:min(340px,100%)}
.other-input:focus{outline:none;border-color:var(--nf-leaf)}
html[dir=rtl] .other-input{margin-left:0;margin-right:26px}
.opt-row.opt-other .tag{background:var(--nf-leaf-soft);color:var(--nf-leaf-deep)}
.run-q.nf-bad{outline:2px solid #e7503a;outline-offset:5px;border-radius:6px}
.nf-qfix{color:#a1271b;background:#fdecea;border:1px solid #f0b4ab;border-radius:6px;padding:7px 10px;margin-top:7px;font-size:13px;font-weight:600}
.run-q.nf-soft{outline:2px solid #e3b341;outline-offset:5px;border-radius:6px}

/* logic editor */
.logic-rule{border:1px solid var(--nf-frame-soft);border-radius:6px;padding:10px;margin-bottom:8px;background:var(--nf-pane-2)}
.logic-rule .row{margin-bottom:6px}
.cond-row{display:flex;gap:6px;margin-bottom:6px;align-items:center;flex-wrap:wrap}

/* ================= RUNTIME ================= */
.run-shell{max-width:760px;margin:0 auto;padding:24px 16px 72px}
.run-header{display:flex;align-items:center;gap:14px;padding:0 0 16px;border-bottom:2px solid var(--nf-primary);margin-bottom:6px}
.run-header img{height:48px}
.run-header h1{font-family:var(--nf-font-display);font-size:23px;margin:0;flex:1;letter-spacing:-.01em}
.run-progress{height:6px;background:var(--nf-inset);border-radius:99px;margin:16px 0 24px;overflow:hidden}
.run-progress>div{height:100%;background:var(--nf-go);border-radius:99px;transition:width .35s cubic-bezier(.2,.7,.2,1)}
.run-q{background:var(--nf-pane);border:1px solid var(--nf-frame);border-radius:var(--nf-radius-lg);padding:20px 22px;margin-bottom:16px;box-shadow:var(--nf-shadow)}
.run-q .qtitle{font-size:16px;font-weight:600;margin-bottom:5px;line-height:1.5}
.run-q .qtitle .req{color:var(--nf-danger)}
.run-q .qtip{font-size:12.5px;color:var(--nf-ink-3);margin-bottom:12px}
.run-q .qerror{color:var(--nf-danger);font-size:12.5px;margin-top:8px;display:none}
.run-q.invalid{border-color:rgba(192,57,43,.5)}
.run-q.invalid .qerror{display:block}
.run-q.heading{background:transparent;border:none;box-shadow:none;padding:6px 2px}
.run-nav{display:flex;justify-content:space-between;margin-top:24px;gap:10px}
.run-footer{margin-top:32px;color:var(--nf-ink-3);font-size:12px;text-align:center}
.choice{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--nf-frame-soft);border-radius:10px;margin-bottom:7px;cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s;background:var(--nf-pane-2)}
.choice:hover{border-color:var(--nf-ink-4);background:var(--nf-pane)}
.choice.on{border-color:var(--nf-leaf);background:var(--nf-leaf-soft);box-shadow:0 0 0 1px var(--nf-leaf)}
.choice input{accent-color:var(--nf-leaf)}
.choice-h{display:flex;gap:8px;flex-wrap:wrap}
.choice-h .choice{flex:1;min-width:110px}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 12px}
.alt-rows .choice:nth-child(even){background:var(--nf-inset)}
.stars{display:flex;gap:6px;font-size:30px;cursor:pointer;direction:ltr}
.stars span{color:var(--nf-ink-4);transition:color .1s,transform .1s}
.stars span.on{color:#e8b40c}
.stars span:hover{transform:scale(1.15)}
.smileys{display:flex;gap:14px;font-size:32px;cursor:pointer;direction:ltr}
.smileys span{filter:grayscale(1);opacity:.55;transition:all .12s}
.smileys span.on,.smileys span:hover{filter:none;opacity:1;transform:scale(1.12)}
.thumbs{display:flex;gap:16px;font-size:30px}
.thumbs button{border:1px solid var(--nf-frame);background:var(--nf-pane);border-radius:8px;padding:8px 22px;cursor:pointer;font-size:28px;opacity:.6}
.thumbs button.on{opacity:1;border-color:var(--nf-leaf);background:var(--nf-leaf-soft)}
.nps-scale{display:flex;gap:4px;direction:ltr;flex-wrap:wrap}
.nps-scale button{width:40px;height:40px;border:1px solid var(--nf-frame);background:var(--nf-pane);border-radius:6px;cursor:pointer;font-weight:600;font-size:14px;color:var(--nf-ink-2)}
.nps-scale button:hover{border-color:var(--nf-ink-3)}
.nps-scale button.on{background:var(--nf-primary);color:#fff;border-color:var(--nf-primary)}
.nps-labels{display:flex;justify-content:space-between;font-size:11.5px;color:var(--nf-ink-3);margin-top:5px;direction:ltr}
.slider-wrap{display:flex;align-items:center;gap:12px}
.slider-wrap input[type=range]{flex:1;accent-color:var(--nf-leaf)}
.slider-val{min-width:46px;text-align:center;font-weight:700;background:var(--nf-inset);border-radius:5px;padding:4px 8px}
table.matrix{width:100%;border-collapse:collapse;font-size:13px}
table.matrix th{font-size:12px;font-weight:600;color:var(--nf-ink-2);padding:7px 6px;text-align:center}
table.matrix td{padding:7px 6px;text-align:center;border-top:1px solid var(--nf-frame-soft)}
table.matrix td.rowlab{text-align:start;font-weight:500}
table.matrix tr:nth-child(even) td{background:var(--nf-pane-2)}
table.matrix input[type=radio],table.matrix input[type=checkbox]{accent-color:var(--nf-leaf);width:16px;height:16px}
table.matrix input[type=text]{width:100%;min-width:70px;padding:4px 6px}
.rank-list{list-style:none;margin:0;padding:0}
.rank-list li{display:flex;align-items:center;gap:10px;border:1px solid var(--nf-frame-soft);background:var(--nf-pane-2);border-radius:6px;padding:8px 12px;margin-bottom:6px;cursor:grab}
.rank-list li .num{width:24px;height:24px;border-radius:50%;background:var(--nf-primary);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:700}
.rank-list li.dragging{opacity:.4}
.csum-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.csum-row input{width:90px}
.csum-total{margin-top:8px;font-weight:600}
.csum-total.bad{color:var(--nf-danger)}
.img-grid{display:flex;gap:10px;flex-wrap:wrap}
.img-cell{border:2px solid var(--nf-frame-soft);border-radius:8px;padding:6px;cursor:pointer;text-align:center;width:140px}
.img-cell img{max-width:100%;border-radius:4px}
.img-cell.on{border-color:var(--nf-leaf);background:var(--nf-leaf-soft)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.lang-pick{display:flex;gap:8px;justify-content:flex-end;margin-bottom:8px}
.lang-pick button{border:1px solid var(--nf-frame);background:var(--nf-pane);border-radius:99px;padding:3px 14px;cursor:pointer;font-size:12.5px}
.lang-pick button.on{background:var(--nf-primary);color:#fff;border-color:var(--nf-primary)}
.thank-card{background:var(--nf-pane);border:1px solid var(--nf-frame);border-radius:var(--nf-radius-lg);padding:44px 40px;text-align:center;box-shadow:var(--nf-shadow-lift)}
.captcha-box{display:flex;align-items:center;gap:10px}
.captcha-box .challenge{font-size:18px;font-weight:700;letter-spacing:3px;background:var(--nf-inset);padding:8px 16px;border-radius:6px;user-select:none;font-style:italic}

/* focus mode: one question at a time */
body.focus-mode .run-q{min-height:200px}

/* ================= ANALYTICS ================= */
.an-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:13px;margin-bottom:22px}
.an-card{background:var(--nf-pane);border:1px solid var(--nf-frame);border-radius:var(--nf-radius-lg);padding:16px 18px;box-shadow:var(--nf-shadow);position:relative;overflow:hidden;transition:box-shadow .16s ease,transform .16s ease}
.an-card:hover{box-shadow:var(--nf-shadow-lift);transform:translateY(-1px)}
.an-card::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--nf-leaf)}
.an-card .num{font-family:var(--nf-font-display);font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.an-card .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--nf-ink-3);margin-top:5px}
.an-q{background:var(--nf-pane);border:1px solid var(--nf-frame);border-radius:var(--nf-radius-lg);margin-bottom:16px;box-shadow:var(--nf-shadow);transition:box-shadow .16s ease}
.an-q:hover{box-shadow:var(--nf-shadow-lift)}
.an-q header{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--nf-frame-soft)}
.an-q header .tag{background:var(--nf-leaf-soft);color:var(--nf-leaf-dark)}
.an-q header .t{flex:1;font-weight:600;font-size:14px}
.an-q .body{padding:16px 18px}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.bar-row .lbl{width:180px;font-size:12.5px;text-align:end;color:var(--nf-ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .track{flex:1;background:var(--nf-inset);border-radius:99px;height:24px;position:relative;overflow:hidden}
.bar-row .fill{height:100%;background:var(--nf-primary);border-radius:99px;min-width:3px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.bar-row .val{width:92px;font-size:12px;color:var(--nf-ink-2);font-variant-numeric:tabular-nums;font-weight:600}
.view-toggle{display:flex;gap:0;border:1px solid var(--nf-frame);border-radius:99px;overflow:hidden;padding:2px;background:var(--nf-inset)}
.view-toggle button{border:none;background:transparent;padding:3px 12px;cursor:pointer;font-size:11.5px;color:var(--nf-ink-3);border-radius:99px;transition:all .12s}
.view-toggle button.active{background:var(--nf-pane);color:var(--nf-ink);box-shadow:0 1px 2px rgba(29,42,92,.14);font-weight:600}
.pie-wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.pie-legend{font-size:12.5px}
.pie-legend div{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.pie-legend .sw{width:12px;height:12px;border-radius:3px}
.filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--nf-pane);border:1px solid var(--nf-frame);border-radius:var(--nf-radius-lg);padding:11px 15px;margin-bottom:18px;box-shadow:var(--nf-shadow)}
.filter-chip{display:inline-flex;gap:6px;align-items:center;background:var(--nf-leaf-soft);color:var(--nf-leaf-dark);border-radius:99px;padding:4px 12px;font-size:12px;font-weight:600}
.filter-chip button{border:none;background:none;cursor:pointer;color:inherit;font-weight:700}

/* ================= HOME ================= */
.home-wrap{max-width:1060px;margin:0 auto;padding:32px 20px 64px}
.home-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.home-head h1{font-family:var(--nf-font-display);font-size:29px;font-weight:700;letter-spacing:-.02em;margin:0}
.home-head .sub{color:var(--nf-ink-3);font-size:13px;margin-top:5px}
.survey-row{display:flex;align-items:center;gap:16px;background:var(--nf-pane);border:1px solid var(--nf-frame);border-radius:var(--nf-radius-lg);padding:15px 20px;margin-bottom:11px;box-shadow:var(--nf-shadow);transition:box-shadow .16s ease,border-color .16s ease,transform .16s ease}
.survey-row:hover{box-shadow:var(--nf-shadow-lift);border-color:var(--nf-frame-strong);transform:translateY(-1px)}
.survey-row .name{font-weight:650;font-size:15.5px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.survey-row .sub{font-size:12px;color:var(--nf-ink-3);margin-top:4px}
.survey-row .stats{text-align:center;min-width:64px;padding:0 6px;border-inline-start:1px solid var(--nf-frame-soft)}
.survey-row .stats .n{font-family:var(--nf-font-display);font-weight:700;font-size:21px;line-height:1.1;font-variant-numeric:tabular-nums}
.survey-row .stats .l{font-size:10px;color:var(--nf-ink-3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.survey-row a.btn[href^="/builder"]{background:var(--nf-primary);border-color:var(--nf-primary);color:#fff;box-shadow:0 1px 2px rgba(29,42,92,.16)}
.survey-row a.btn[href^="/builder"]:hover{background:var(--nf-primary-2)}
.survey-row a.btn[href^="/distribute"],.survey-row a.btn[href^="/analytics"],.survey-row a.btn[href^="/s/"]{border-color:transparent;background:transparent;color:var(--nf-ink-2)}
.survey-row a.btn[href^="/distribute"]:hover,.survey-row a.btn[href^="/analytics"]:hover,.survey-row a.btn[href^="/s/"]:hover{background:var(--nf-inset);color:var(--nf-ink)}
.survey-row .btn.icon{opacity:.3;transition:opacity .14s ease}
.survey-row:hover .btn.icon{opacity:.7}
.survey-row .btn.icon:hover{opacity:1}
@media (max-width:980px){.builder-wrap{grid-template-columns:200px 1fr}.builder-props{position:fixed;inset-inline-end:0;top:56px;bottom:0;width:340px;z-index:60;box-shadow:-6px 0 24px rgba(29,42,92,.15)}}
@media (max-width:640px){.cols-2,.cols-3{grid-template-columns:1fr}.bar-row .lbl{width:110px}}

/* ============ QuestionPro-style Logic modal ============ */
.lg-qbanner{background:var(--nf-inset,#f4f6fb);border:1px solid var(--nf-frame-soft);border-radius:6px;padding:9px 12px;margin-bottom:12px;font-size:13px}
.lg-qbanner-lbl{color:var(--nf-ink-3);margin-inline-end:6px}
.lg-typerow{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.lg-typesel{min-width:220px;font-weight:600;padding:7px 10px;border:1px solid var(--nf-frame);border-radius:6px;background:var(--nf-pane)}
.lg-help{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--nf-ink-2);color:#fff;font-size:11px;cursor:help}
.lg-editor{min-height:120px}
.lg-table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:13px}
.lg-table th{text-align:start;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--nf-ink-2);font-weight:700;padding:6px 8px;border-bottom:2px solid var(--nf-frame)}
.lg-table td{padding:7px 8px;border-bottom:1px solid var(--nf-frame-soft);vertical-align:middle}
.lg-sel,.lg-in{padding:5px 8px;border:1px solid var(--nf-frame);border-radius:5px;background:var(--nf-pane);font-size:13px;max-width:100%}
.lg-sel{min-width:150px}
.lg-in{width:100%}.lg-in.sm{width:90px}
.lg-va{display:flex;align-items:center;gap:5px}.lg-va .lg-in.sm{width:80px}
.lg-default{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--nf-pane-2);border:1px solid var(--nf-frame-soft);border-radius:6px;padding:9px 12px;margin-top:8px}
.lg-default-lbl{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--nf-ink-2)}
.lg-criteria{border:1px solid var(--nf-frame);border-radius:7px;padding:12px;margin-bottom:10px;background:var(--nf-pane-2)}
.lg-criteria-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.lg-criteria-tag{background:var(--nf-leaf-soft);color:var(--nf-leaf-dark);font-weight:700;font-size:11.5px;padding:3px 9px;border-radius:20px}
.lg-if{display:flex;gap:8px;align-items:flex-start}
.lg-if-lbl{font-weight:800;color:var(--nf-leaf-dark);padding-top:6px}
.lg-if-conds{flex:1}
.lg-then{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed var(--nf-frame-soft);font-size:13px}
.lg-airow{display:flex;gap:8px;margin-bottom:12px}
.lg-aiinput{flex:1;padding:8px 12px;border:1px solid var(--nf-frame);border-radius:20px;background:var(--nf-pane);font-size:13px}
.lg-toggle-row{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:13px;flex-wrap:wrap}
.lg-on{color:var(--nf-leaf-dark);font-weight:600}
.lg-switch{position:relative;width:40px;height:22px;border-radius:20px;border:none;background:var(--nf-frame-strong);cursor:pointer;transition:background .15s;padding:0;flex:none}
.lg-switch.on{background:var(--nf-leaf)}
.lg-switch span{position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:inset-inline-start .15s}
.lg-switch.on span{inset-inline-start:20px}
.lg-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;margin-inline-end:12px}
.lg-optpick{display:flex;flex-wrap:wrap;gap:6px 16px;margin:6px 0 4px;padding:8px;background:var(--nf-pane);border:1px solid var(--nf-frame-soft);border-radius:6px}
.lg-exrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:13px}
.lg-code{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;border:1px solid var(--nf-frame);border-radius:6px;padding:8px;margin:6px 0 12px;background:#fbfbfd}
.qa-logic{font-size:11px!important;font-weight:600;color:var(--nf-leaf-dark)!important}
.dyn-comments{margin-top:8px}
.dyn-comment{display:block;margin-top:6px}
.dyn-comment>span{display:block;font-size:12px;color:var(--nf-ink-2);margin-bottom:3px}
html[dir=rtl] .lg-switch span{inset-inline-start:auto;inset-inline-end:2px}
html[dir=rtl] .lg-switch.on span{inset-inline-start:auto;inset-inline-end:20px}

/* ================= DARK THEME ================= */
[data-theme=dark]{
  --nf-ink:#e8ebf3;--nf-ink-2:#b9c0d6;--nf-ink-3:#8b93ad;--nf-ink-4:#5f6884;
  --nf-primary:#4a5fa8;--nf-primary-2:#5d72bd;
  --nf-leaf:#4cb849;--nf-leaf-dark:#6ec96b;--nf-leaf-soft:#183a1c;
  --nf-sky:#0e1424;--nf-pane:#161d30;--nf-pane-2:#1b2338;--nf-inset:#1b2238;
  --nf-frame:rgba(255,255,255,.11);--nf-frame-soft:rgba(255,255,255,.06);--nf-frame-strong:rgba(255,255,255,.24);
  --nf-danger:#e06a5d;--nf-warn:#d3a24a;
  --nf-go:#4cb849;--nf-go-2:#6ec96b;--nf-leaf-deep:#6ec96b;
  --nf-shadow:0 1px 2px rgba(0,0,0,.45),0 6px 18px rgba(0,0,0,.5);
}
[data-theme=dark] input:focus,[data-theme=dark] select:focus,[data-theme=dark] textarea:focus,
[data-theme=dark] .rt-edit:focus,[data-theme=dark] .block-head .bh-title:focus{background:var(--nf-pane-2)}
[data-theme=dark] .block-head{background:var(--nf-pane-2)}
[data-theme=dark] .tag.draft{background:#33280f;color:#e0b769}
[data-theme=dark] .tag.closed{background:#3a1f1c;color:#e88b7f}
[data-theme=dark] .logic-badge{background:#1e2a4d;color:#9db2e8}
[data-theme=dark] .nf-qfix{background:#3a1f1c;color:#f0b4ab;border-color:#5a2e28}
[data-theme=dark] .lg-code{background:#0f1626}
[data-theme=dark] .stars span.on{color:#e8b40c}

/* collaboration indicator: never wrap the topbar */
#presence{display:inline-block;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
/* undo toast: needs to be clickable */
#toast.show{pointer-events:auto}
#toast .toast-undo{background:none;border:none;color:#fff;font-weight:700;text-decoration:underline;cursor:pointer;font-size:13px;margin-inline-start:8px;padding:0}
/* ---------- a11y: keyboard focus + screen-reader utilities ---------- */
:focus-visible{outline:2px solid var(--nf-leaf);outline-offset:2px}
.choice:focus-within{box-shadow:var(--nf-ring);border-color:var(--nf-leaf)}
.stars span:focus-visible,.smileys span:focus-visible{outline:2px solid var(--nf-leaf);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* dark theme: green buttons carry dark text (white on #4cb849 fails AA) */
[data-theme=dark] .btn.go{color:#0e1424}