/* Zain surveys. Themes = the eight Zain brand gradients. Every colour below is a variable so a theme can swap them. */
:root{--font:"Zain",ui-sans-serif,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif}
:root,[data-theme=midnight]{
  --bg:linear-gradient(175deg,#0851A3 0%,#162E77 42%,#10064E 100%);
  --ink:#fff;--muted:#BAC4E4;--line:rgba(255,255,255,.24);--card:rgba(255,255,255,.08);--cardline:rgba(255,255,255,.22);
  --field:rgba(255,255,255,.08);--fieldf:rgba(255,255,255,.16);--choice:rgba(255,255,255,.06);--hover:#fff;
  --accent:#C3D95A;--accent-soft:rgba(195,217,90,.16);--on-accent:#14226A;--title:#F06AD3;--btn:#fff;--btnink:#14226A;
  --good:#6FD99A;--bad:#FF8A80;--logo:none;color-scheme:dark;
  --d1:#23AEB7;--d2:#8E9BD0;--d3:#23AEB7;--d4:#fff;--d5:#fff;--d6:#23AEB7}
[data-theme=jade]{--bg:linear-gradient(175deg,#0CA6B6 0%,#006A78 38%,#00343D 100%);--muted:#C5E6EA;--d1:#C3D534;--d2:#9FD9DF;--d3:#C3D534;--d4:#fff;--d5:#fff;--d6:#F6EB69;--title:#F9C6E4}
[data-theme=ultraviolet]{--bg:linear-gradient(175deg,#953092 0%,#692467 45%,#3F133E 100%);--muted:#E4CBE2;--d1:#E27FAF;--d2:#D7A5D5;--d3:#E27FAF;--d4:#fff;--d5:#fff;--d6:#C3D534;--title:#FFC2EC}
/* light themes: navy text on lighter gradients, white cards */
[data-theme=azure],[data-theme=coral],[data-theme=lime],[data-theme=magenta],[data-theme=twilight]{
  --ink:#14226A;--muted:#3E4A86;--line:rgba(20,34,106,.28);--card:rgba(255,255,255,.88);--cardline:rgba(20,34,106,.14);
  --field:#EEF1FA;--fieldf:#E1E7F7;--choice:rgba(20,34,106,.05);--hover:#14226A;--accent:#14226A;--accent-soft:rgba(20,34,106,.12);
  --on-accent:#fff;--title:#AB1368;--btn:#14226A;--btnink:#fff;--good:#14804A;--bad:#B3261E;--logo:invert(1) brightness(.25);color-scheme:light;
  --d1:#14226A;--d2:#AB1368;--d3:#fff;--d4:#14226A;--d5:#fff;--d6:#AB1368}
[data-theme=azure]{--bg:linear-gradient(175deg,#00B7CA 0%,#0282B8 50%,#0853A5 100%);--d1:#fff;--d3:#14226A;--d6:#C3D534}
[data-theme=coral]{--bg:linear-gradient(175deg,#FDF46D 0%,#FABD9F 50%,#F287B7 100%)}
[data-theme=lime]{--bg:linear-gradient(175deg,#C8DB38 0%,#7EBE86 50%,#0CA6B6 100%);--d2:#14226A;--d6:#14226A}
[data-theme=magenta]{--bg:linear-gradient(175deg,#F287B7 0%,#D75193 50%,#BF0075 100%);--d1:#fff;--d2:#fff;--d3:#14226A;--d6:#C3D534}
[data-theme=twilight]{--bg:linear-gradient(175deg,#49C9F5 0%,#8083BF 50%,#953092 100%);--d1:#fff;--d6:#fff}

*{box-sizing:border-box}html,body{margin:0}
body{font:15px/1.5 var(--font);color:var(--ink);background:var(--bg) fixed;min-height:100vh;padding:0 max(16px,env(safe-area-inset-left))}

/* rotating brand elements, each turning on its own */
.deco{pointer-events:none;position:relative;height:150px;max-width:760px;margin:6px auto 0;overflow:hidden}
.deco svg{position:absolute;aspect-ratio:1;fill:var(--c);opacity:var(--o,1);animation:spin var(--t) linear infinite;animation-direction:var(--dir,normal);will-change:transform;bottom:6px;width:var(--w)}
@keyframes spin{to{transform:rotate(360deg)}}
.deco .e3{--c:var(--d1);--o:.85;--t:90s;--w:92px;left:2%}
.deco .e1{--c:var(--d2);--o:.7;--t:80s;--w:84px;left:13%;bottom:30px}
.deco .e4{--c:var(--d3);--o:.85;--t:60s;--dir:reverse;--w:78px;left:21%;bottom:8px}
.deco .e2{--c:var(--d4);--o:.9;--t:36s;--w:52px;left:29%;bottom:52px}
.deco .e5{--c:var(--d5);--o:.55;--t:70s;--dir:reverse;--w:70px;left:33%;bottom:24px}
.deco .e6{--c:var(--d6);--o:.9;--t:28s;--dir:reverse;--w:58px;left:40%;bottom:54px}
/* wide screens: two overlapping clusters in the side margins, never behind text or boxes */
.deco.side{position:fixed;inset:0;height:auto;max-width:none;margin:0;overflow:hidden;z-index:0;--g:calc((100vw - var(--maxw,760px)) / 2);--u:min(calc(var(--g) - 28px),170px)}
.deco.side svg{bottom:auto;left:auto;top:auto;width:calc(var(--u) * var(--k,1));right:calc(14px + var(--u) * var(--p,0))}
.deco.side .e3{--k:1;--p:0;--o:.8;bottom:3vh}
.deco.side .e4{--k:.78;--p:.2;--o:.8;bottom:calc(3vh + var(--u) * .78)}
.deco.side .e1{--k:.62;--p:.38;--o:.7;bottom:calc(3vh + var(--u) * 1.38)}
.deco.side .e2{--k:.42;--p:.05;--o:.9;bottom:calc(3vh + var(--u) * 1.85)}
.deco.side .e5{--k:.7;--p:0;right:auto;left:calc(14px + var(--u) * .1);bottom:8vh}
.deco.side .e6{--k:.52;--p:0;right:auto;left:calc(14px + var(--u) * .42);bottom:calc(8vh + var(--u) * .52)}
@media (prefers-reduced-motion:reduce){.deco svg{animation:none}}

.bar,main{position:relative;z-index:1;max-width:760px;margin:0 auto}
.bar{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.bar .logo{height:22px;width:auto;display:block;filter:var(--logo)}.bar .sep{width:1px;height:20px;background:var(--line)}.bar .prod{font-weight:600;transform:translateY(2px)}
main{padding:28px 0 72px}h1{font-size:26px;line-height:1.2;margin:0;font-weight:600;color:var(--title);text-wrap:balance}.sub{color:var(--muted);margin:8px 0 22px;max-width:62ch}
.prog{height:4px;background:var(--line);border-radius:2px;margin:0 0 22px;overflow:hidden}.prog i{display:block;height:100%;background:var(--accent);width:0;transition:width .25s}
.q{background:var(--card);border:1px solid var(--cardline);border-radius:12px;padding:20px 22px;margin-bottom:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.qt{font-weight:600;font-size:16px;margin:0 0 12px}.qt b{color:var(--bad)}.pts{font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:1px 8px;margin-left:6px;white-space:nowrap}
.choices{display:grid;gap:8px}.choice{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:var(--choice);border:1px solid var(--line);border-radius:8px;padding:10px 14px;min-height:44px;color:inherit;font:inherit;cursor:pointer}
.choice:hover{border-color:var(--hover)}.choice.on{border-color:var(--accent);background:var(--accent-soft)}.mark{width:16px;height:16px;border:1.5px solid var(--muted);flex:none;position:relative}.mark.r{border-radius:50%}.mark.c{border-radius:4px}.choice.on .mark{border-color:var(--accent);background:var(--accent)}.choice.on .mark.c::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--on-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
textarea.in{resize:vertical;min-height:96px}.in{width:100%;background:var(--field);border:1px solid transparent;border-radius:8px;padding:10px 12px;min-height:42px;color:inherit;font:inherit}.in:focus{outline:none;background:var(--fieldf)}.in::placeholder{color:var(--muted);opacity:.8}select.in option{color:#111}
.hint{color:var(--muted);font-size:13px;margin-top:10px}.q.err{border-color:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.35)}.q.err .pickhint{color:#E5484D;font-weight:600}
.err-t{display:inline-block;background:#D92D20;color:#fff;font-weight:600;padding:6px 12px;border-radius:8px;margin-top:12px}.err-t::before{content:"\26A0\FE0E  "}
@keyframes qshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}.q.shake{animation:qshake .55s cubic-bezier(.36,.07,.19,.97) both}
@media (prefers-reduced-motion:reduce){.q.shake{animation:none}.prog i{transition:none}}
.btn{background:var(--btn);color:var(--btnink);border:1px solid var(--btn);border-radius:8px;padding:10px 20px;font:inherit;font-weight:600;min-height:42px;cursor:pointer}.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}.btn:disabled{opacity:.4;cursor:not-allowed}
.nav{display:flex;justify-content:space-between;margin-top:22px}
.score{text-align:center;padding:12px 0 6px}.score b{font-size:44px;font-variant-numeric:tabular-nums}.score span{color:var(--muted);margin-left:10px}
.rv{border-inline-start:3px solid var(--muted)}.rv.correct{border-inline-start-color:var(--good)}.rv.wrong{border-inline-start-color:var(--bad)}.rv.partial{border-inline-start-color:#E8D75A}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--line)}.pill.good{color:var(--good);border-color:var(--good)}.pill.bad{color:var(--bad);border-color:var(--bad)}.pill.warn{color:#B26A00;border-color:#B26A00}
.lost{margin-top:6px;font-weight:600;color:var(--bad)}.k{margin-top:4px}.k b{color:var(--ink)}

/* more question types */
h2.sec{font-size:19px;font-weight:600;margin:26px 0 10px;color:var(--title)}.q.info p{margin:0;color:var(--ink)}
.stars,.faces{display:flex;gap:6px;flex-wrap:wrap}
.star{background:none;border:0;padding:2px;font-size:34px;line-height:1;color:var(--line);cursor:pointer;transition:transform .12s}.star.on{color:#F5B800}.star:hover{transform:scale(1.15)}
.face{background:var(--choice);border:1px solid var(--line);border-radius:12px;font-size:30px;line-height:1;width:54px;height:54px;cursor:pointer;filter:grayscale(.7);transition:transform .12s,filter .12s}.face:hover{transform:scale(1.08)}.face.on{filter:none;border-color:var(--accent);background:var(--accent-soft);transform:scale(1.08)}
.nps{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}.numb{background:var(--choice);border:1px solid var(--line);border-radius:8px;min-height:44px;color:inherit;font:inherit;font-weight:600;cursor:pointer}.numb:hover{border-color:var(--hover)}.numb.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.npsl{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:6px}
.slid{display:flex;gap:16px;align-items:center}.slid input{flex:1;accent-color:var(--accent);min-height:30px}.slid input.idle{opacity:.55}.slid output{min-width:96px;text-align:right;font-weight:600}
.rank{display:grid;gap:8px}.rk{display:flex;align-items:center;gap:12px;background:var(--choice);border:1px solid var(--line);border-radius:8px;padding:8px 10px 8px 14px;min-height:46px;cursor:grab;touch-action:manipulation}.rk.drag{opacity:.45}.rn{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:700;display:grid;place-items:center;flex:none}.rl{flex:1}.rb{display:flex;gap:4px}
.ib{background:none;border:1px solid var(--line);border-radius:6px;width:30px;height:30px;color:var(--ink);cursor:pointer;font-size:15px;line-height:1}.ib:disabled{opacity:.3;cursor:not-allowed}
.sumg,.cg{display:grid;gap:10px}.sumr{display:flex;align-items:center;gap:12px;justify-content:space-between}.sumr .in{width:120px;text-align:right}.sumt.ok{color:var(--good);font-weight:600}
.cg{grid-template-columns:repeat(2,1fr)}.cg label span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}@media (max-width:560px){.cg{grid-template-columns:1fr}.nps{grid-template-columns:repeat(6,1fr)}}
.mx{overflow-x:auto}.mx table{border-collapse:collapse;width:100%;min-width:420px}.mx th,.mx td{padding:8px 6px;text-align:center;font-size:13px;font-weight:600}.mx tbody th{text-align:left;font-weight:500;font-size:14px;padding-right:12px}.mx tbody tr+tr>*{border-top:1px solid var(--line)}.mx input{width:20px;height:20px;accent-color:var(--accent);cursor:pointer}