/* ============================================================
   Şriftlər — öz serverimizdən. Zalın internetindən asılı deyil.
   Archivo: en (62-125) və qalınlıq (100-900) oxları ilə —
   başlıqlar geniş, mətn normal, etiketlər dar.
   ============================================================ */
@font-face{
  font-family:"Archivo";src:url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";src:url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Mono";src:url("/assets/fonts/mono-latin-ext.woff2") format("woff2");
  font-weight:100 800;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Mono";src:url("/assets/fonts/mono-latin.woff2") format("woff2");
  font-weight:100 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   4SİM Tədbirlər
   Kağız üzərində iş, ekranda proyeksiya.

   İş səthi (telefon, idarə paneli) açıq rəngdədir: uzun oxumaq
   üçün gözü yormur. Yalnız böyük ekran rejimi tünddür — qaranlıq
   zalda proyektor üçün doğru olan budur.
   ============================================================ */

:root{
  /* səth */
  --paper:#EDF1F5;          /* səhifə fonu */
  --paper-2:#E3E9EF;        /* daha dərin sahə */
  --surface:#FFFFFF;        /* kart */
  --surface-2:#F4F7FA;      /* sahə içi (input) */
  --surface-3:#EAEFF4;

  /* mətn */
  --ink:#17334C;            /* əsas mətn — qara deyil, tünd göy */
  --ink-2:#41607C;          /* ikinci dərəcəli */
  --ink-3:#556D86;          /* sönük — hər iki fonda 4.5:1 */

  /* cizgi */
  --edge:#DCE4EC;
  --edge-2:#C7D3DF;

  /* fəaliyyət */
  --brand:#15507E;
  --brand-2:#1B6199;
  --on-brand:#FFFFFF;

  /* qrup rəngləri — ağ üzərində oxunaqlı */
  --g1:#C2453C; --g2:#0F786B; --g3:#8A6210; --v:#57479A;
  --ok:#1E7A57; --warn:#A0700E;

  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --cond:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --r:16px; --r-s:10px;
  --sh-1:0 1px 2px rgba(23,51,76,.05), 0 2px 6px -2px rgba(23,51,76,.07);
  --sh-2:0 2px 4px rgba(23,51,76,.05), 0 12px 30px -14px rgba(23,51,76,.20);
  --sh-3:0 4px 8px rgba(23,51,76,.06), 0 22px 48px -20px rgba(23,51,76,.28);
  --pad:clamp(20px,4vw,36px);

  --e-out:cubic-bezier(.22,.9,.28,1);
  --e-spring:cubic-bezier(.34,1.32,.5,1);
  --t-fast:.16s; --t:.3s; --t-slow:.5s;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;font-weight:400;font-stretch:100%;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overscroll-behavior-y:none;font-variant-numeric:tabular-nums;
}
/* genişlik oxu: başlıqlar açılır, kiçik etiketlər daralır */
h1.hero,.h2,.stat b,.bignum,.dnum,.gbox .num,.stamp .s1,.admbar .ttl,
.join .l h2,.synhd h2,.syncol h3,.focus .fwho,.card .chd2 b,.screen .shd .sttl,
.rhd .who,.empty b,.modal h3,.note h4,.gbox h3,.meta dd,.toast{
  font-stretch:112%;font-weight:700;letter-spacing:-.025em;
}
.eyebrow,.tag,.meta dt,.steps i,.cmeta,.savechip,.foot,.pill,.mini,.stat u,
.recap h4,.rbody section h5,.card h5,.fgrid h5,.syncol .cnt,.syncol li b,
.dk,.sfoot,.joinlink .u,.gtally .lb,.bignum span,.card .chd2 u,.stamp .s2{
  font-stretch:88%;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:var(--brand)}
::selection{background:#CFE3F2;color:var(--ink)}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:5px}

/* ---------- ambient: yalnız böyük ekran rejimində ---------- */
#corridor,.veil{display:none}

.stage{position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column}

/* ---------- letterhead ---------- */
.lh{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--surface);border:1px solid var(--edge);border-top:0;
  border-radius:0 0 var(--r) var(--r);
  padding:13px 20px;margin:0 auto;width:min(1180px,calc(100% - 24px));
  box-shadow:var(--sh-1);animation:lhDrop .6s var(--e-out) both;
}
.lh img{display:block;height:30px;width:auto}
.lh .lh-div{flex:1;height:1px;background:var(--edge)}
@keyframes lhDrop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

/* ---------- şell ---------- */
.wrap{width:min(1180px,calc(100% - 24px));margin:0 auto;flex:1;display:flex;flex-direction:column}
.pad-t{padding-top:clamp(20px,3.4vw,40px)}
.foot{
  width:min(1180px,calc(100% - 24px));margin:0 auto;
  padding:30px 4px calc(32px + env(safe-area-inset-bottom));
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase;
  border-top:1px solid var(--edge);margin-top:34px;
}
.foot button{color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit}
.foot button:hover{color:var(--brand)}

/* ---------- görünüş keçidi ---------- */
.view{display:none}
.view.on{display:block}
.view.on > *{animation:childIn .55s var(--e-out) both;animation-delay:calc(var(--i,0) * 52ms + 70ms)}
.view.on > .subbar{animation:none}
.view.on.bwd > *{animation-name:childBack}
@keyframes childIn{from{opacity:0;transform:translate3d(24px,8px,0)}to{opacity:1;transform:none}}
@keyframes childBack{from{opacity:0;transform:translate3d(-24px,8px,0)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- tipoqrafiya ---------- */
.eyebrow{
  font:600 11.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--g2);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--g2);flex:none;
  box-shadow:0 0 0 4px rgba(15,120,107,.14)}
h1.hero{
  font-family:var(--cond);font-weight:700;letter-spacing:-.022em;line-height:1;
  font-size:clamp(38px,7.6vw,82px);margin:.26em 0 .2em;text-wrap:balance;color:var(--ink);
}
h1.hero .lo{color:var(--ink-3);display:block}
.lede{font-size:clamp(15px,1.5vw,18px);color:var(--ink-2);max-width:60ch;margin:0;line-height:1.65}
.h2{font-family:var(--cond);font-weight:700;font-size:clamp(24px,3.2vw,36px);
  letter-spacing:-.015em;line-height:1.08;margin:0 0 7px;color:var(--ink)}
.sub{color:var(--ink-2);margin:0;font-size:15px;line-height:1.55}

/* ---------- meta ---------- */
.meta{display:flex;gap:0;flex-wrap:wrap;margin:32px 0 0;border-top:1px solid var(--edge);padding:0}
.meta div{padding:15px 24px 15px 0;margin-right:24px;border-right:1px solid var(--edge)}
.meta div:last-child{border-right:0;margin-right:0}
.meta dt{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px}
.meta dd{margin:0;font-family:var(--cond);font-weight:600;font-size:18px;color:var(--ink)}

/* ---------- düymələr ---------- */
.btn{
  display:inline-flex;align-items:center;gap:11px;border-radius:100px;
  padding:15px 26px;font-family:var(--cond);font-weight:700;font-size:17px;
  background:var(--brand);color:var(--on-brand);box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--e-spring),box-shadow var(--t) var(--e-out),background var(--t-fast);
}
.btn:hover{background:var(--brand-2);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px) scale(.982)}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#22456A}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--edge-2)}
.btn.ghost:hover{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--brand)}
.btn.quiet{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)}
.btn.quiet:hover{background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--edge-2)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn .arrow{font-family:var(--mono);font-size:15px;transition:transform .28s var(--e-spring)}
.btn:hover .arrow{transform:translateX(4px)}
.btn.busy{pointer-events:none}
.btn.busy .arrow{display:none}
.btn.busy::after{content:"";width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;animation:spin .7s linear infinite}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px}

/* ---------- marşrut (hero) ---------- */
.route{margin:44px 0 0;position:relative;min-height:74px;padding-bottom:4px}
.route .rail{position:absolute;left:0;right:0;top:26px;height:1px;background:var(--edge-2)}
.route .pulse{display:none}          /* daimi hərəkət yoxdur — göz yorulmasın */
.route .stops{display:flex;justify-content:space-between;position:relative}
.route .stop{display:flex;flex-direction:column;align-items:flex-start;gap:11px;
  flex:1 1 0;max-width:31%;min-width:0}
.route .stop b{width:13px;height:13px;border-radius:50%;background:var(--c);margin-top:20px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 15%,transparent)}
.route .stop span{font-size:11.5px;line-height:1.45;text-transform:uppercase;color:var(--ink-3);
  text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.route .stop:nth-child(2){align-items:center;text-align:center}
.route .stop:nth-child(3){align-items:flex-end;text-align:right}

/* ---------- kart ---------- */
.slip{
  background:var(--surface);color:var(--ink);border:1px solid var(--edge);border-radius:var(--r);
  box-shadow:var(--sh-2);padding:var(--pad);position:relative;overflow:hidden;
}
.slip::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--g1) 0 33.3%,var(--g2) 33.3% 66.6%,var(--g3) 66.6%)}
.slip.acc::before{background:var(--c)}
.slip-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.tag{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- addımlar ---------- */
.steps{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:20px}
.steps i{font-style:normal;display:flex;align-items:center;gap:8px;
  font:600 11px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.steps i em{font-style:normal;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--edge-2);font-size:10.5px;background:var(--surface);
  transition:background .3s var(--e-out),border-color .3s,color .3s}
.steps i.done{color:var(--ink-2)}
.steps i.done em{border-color:var(--g2);color:var(--g2)}
.steps i.now{color:var(--ink)}
.steps i.now em{background:var(--brand);border-color:var(--brand);color:#fff}
.steps s{width:22px;height:1px;background:var(--edge-2);flex:none}

/* ---------- sahələr ---------- */
.field{margin-bottom:22px}
.field label,.cbox label{display:block;font-family:var(--cond);font-weight:700;font-size:16px;
  margin-bottom:7px;color:var(--ink)}
.cbox label{margin-bottom:0}
.savechip[hidden]{display:none}
.hint{display:block;font-size:13.5px;color:var(--ink-2);margin:-2px 0 12px;line-height:1.5}
.inp,.ta{
  width:100%;background:var(--surface-2);border:1.5px solid var(--edge);border-radius:var(--r-s);
  padding:13px 15px;font-size:16px;color:var(--ink);
  transition:border-color .2s var(--e-out),background .2s,box-shadow .2s;
}
.inp::placeholder,.ta::placeholder{color:var(--ink-3)}
.inp:focus,.ta:focus{outline:none;background:var(--surface);border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(21,80,126,.10)}
.ta{min-height:120px;resize:vertical;line-height:1.6}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.err{color:var(--g1);font:600 13px/1.4 var(--sans);margin-top:10px;display:none}
.err.on{display:block}

/* ---------- qrup seçimi ---------- */
.groups{display:grid;gap:14px}
.gbox{
  text-align:left;width:100%;background:var(--surface);border:1px solid var(--edge);
  border-radius:var(--r);padding:20px 22px 20px 22px;color:var(--ink);
  display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:start;
  box-shadow:var(--sh-1);position:relative;overflow:hidden;
  transition:transform .3s var(--e-out),box-shadow .3s var(--e-out),border-color .3s;
  animation:childIn .5s var(--e-out) both;animation-delay:calc(var(--i,0) * 80ms + 210ms);
}
.gbox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c);
  transition:width .3s var(--e-out)}
.gbox:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--edge-2)}
.gbox:hover::before{width:11px}
.gbox:active{transform:translateY(-1px) scale(.99)}
.gbox .num{font-family:var(--cond);font-weight:700;font-size:40px;line-height:.85;color:var(--c);
  letter-spacing:-.03em;padding-top:2px;transition:transform .3s var(--e-out)}
.gbox:hover .num{transform:translateY(-3px)}
.gbox h3{font-family:var(--cond);font-weight:700;font-size:20px;margin:0 0 7px;color:var(--ink)}
.gbox p{margin:0 0 12px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.gbox .kw{display:flex;flex-wrap:wrap;gap:6px}
.gbox .kw span{font:500 11px/1 var(--mono);padding:6px 10px;border-radius:100px;
  background:color-mix(in srgb,var(--c) 9%,#fff);color:var(--c)}
.gbox .go{align-self:center;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--c);font-family:var(--mono);flex:none;
  transition:transform .32s var(--e-spring),background .3s}
.gbox:hover .go{transform:translateX(5px);background:color-mix(in srgb,var(--c) 20%,#fff)}
.gbox.sel{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent),var(--sh-1)}
.gbox.picked{animation:pick .34s var(--e-out) both;z-index:2}
@keyframes pick{0%{transform:none}45%{transform:scale(1.016);box-shadow:var(--sh-3)}100%{transform:scale(.995)}}
.groups.choosing .gbox:not(.picked){opacity:.32;transform:scale(.986);
  transition:opacity .3s var(--e-out),transform .3s var(--e-out)}

/* ---------- fikir lövhələri ---------- */
.board{border:1px solid var(--edge);border-radius:var(--r);padding:20px;margin-bottom:16px;
  background:var(--surface);position:relative;overflow:hidden}
.board::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.bhd{display:flex;align-items:baseline;gap:11px;margin-bottom:5px}
.bhd h3{font-size:19px;margin:0;color:var(--ink);font-stretch:112%;font-weight:700;letter-spacing:-.02em}
.bhd .bn{margin-left:auto;font:600 12px/1 var(--mono);font-stretch:88%;letter-spacing:.08em;
  color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);padding:6px 10px;border-radius:100px}
.bhint{font-size:13.5px;color:var(--ink-2);margin:0 0 14px;line-height:1.5}

.thoughts{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:9px}
.thoughts:empty{margin:0}
.thoughts li{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);
  border:1px solid var(--edge);border-left:3px solid var(--c);border-radius:0 var(--r-s) var(--r-s) 0;
  padding:13px 14px;animation:childIn .38s var(--e-out) both}
.thoughts li p{margin:0;font-size:15.5px;line-height:1.55;flex:1;white-space:pre-wrap;color:var(--ink)}
.thoughts li.fresh{animation:landed .6s var(--e-out) both}
@keyframes landed{0%{opacity:0;transform:translateY(-8px)}
  35%{background:color-mix(in srgb,var(--c) 14%,#fff)}100%{opacity:1;transform:none}}
.tdel{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  color:var(--ink-3);transition:background .2s,color .2s}
.tdel:hover{background:color-mix(in srgb,var(--g1) 12%,#fff);color:var(--g1)}

.more{display:block;width:100%;margin-bottom:10px;padding:10px 14px;border-radius:var(--r-s);
  background:var(--surface-2);border:1px dashed var(--edge-2);color:var(--ink-2);
  font:600 13px/1 var(--sans);transition:background .2s,color .2s,border-color .2s}
.more:hover{background:var(--surface-3);color:var(--ink);border-color:var(--c)}
.board .more:last-child{margin:10px 0 0}

.addbtn{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:100px;
  border:1.5px dashed var(--edge-2);background:transparent;color:var(--ink-2);
  font-family:var(--sans);font-weight:600;font-size:14.5px;
  transition:border-color .22s,color .22s,background .22s}
.addbtn:hover{border-color:var(--c);color:var(--c);background:color-mix(in srgb,var(--c) 6%,#fff);
  border-style:solid}
.addbtn:active{transform:scale(.985)}

.composer{margin-top:4px;animation:childIn .3s var(--e-out) both}
.composer textarea{width:100%;background:var(--surface-2);border:1.5px solid var(--c);
  border-radius:var(--r-s);padding:13px 15px;font-size:16px;color:var(--ink);line-height:1.6;
  min-height:86px;resize:vertical;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 10%,transparent)}
.composer textarea:focus{outline:none;background:var(--surface)}
.crow{display:flex;align-items:center;gap:12px;margin-top:10px}
.btn.small{padding:11px 20px;font-size:15px;background:var(--c);color:#fff}
.btn.small:hover{background:color-mix(in srgb,var(--c) 82%,#000)}
.link{font-size:14px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--ink)}
.ckey{margin-left:auto;font:500 11px/1 var(--mono);font-stretch:88%;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}

/* ---------- göndərmə paneli ---------- */
.subbar{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(237,241,245,0),var(--paper) 40%);
  padding:26px 0 18px;margin-top:8px;z-index:5}
.subbar .in{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.savechip{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:7px}
.savechip b{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block}

/* ---------- möhür ---------- */
.stampwrap{display:grid;place-items:center;padding:10px 0 28px}
.stamp{
  border:3px solid var(--c);color:var(--c);border-radius:10px;padding:14px 24px;text-align:center;
  transform:rotate(-7deg);position:relative;background:color-mix(in srgb,var(--c) 5%,#fff);
  animation:press .62s cubic-bezier(.2,1.5,.35,1) both;
}
.stamp::after{content:"";position:absolute;inset:5px;border-radius:5px;
  border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.stamp::before{content:"";position:absolute;inset:-16px;border-radius:16px;border:2px solid var(--c);
  opacity:0;animation:inkring .85s var(--e-out) .18s both;pointer-events:none}
@keyframes inkring{0%{opacity:.4;transform:scale(.7)}100%{opacity:0;transform:scale(1.1)}}
@keyframes press{0%{opacity:0;transform:rotate(-22deg) scale(2.4)}55%{opacity:1;transform:rotate(-5deg) scale(.96)}
  75%{transform:rotate(-8deg) scale(1.02)}100%{opacity:1;transform:rotate(-7deg) scale(1)}}
.stamp .s1{font-family:var(--cond);font-weight:700;font-size:26px;letter-spacing:.04em;
  text-transform:uppercase;line-height:1}
.stamp .s2{font:600 11px/1.5 var(--mono);letter-spacing:.16em;margin-top:6px}
.recap{border-top:1px solid var(--edge);padding-top:20px;margin-top:6px}
.recap h4{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px}
.recap p{margin:0 0 18px;font-size:15.5px;line-height:1.6;white-space:pre-wrap;color:var(--ink)}

/* ---------- sayğac və bildirişlər ---------- */
.tally{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.tally span{font:500 12px/1 var(--mono);padding:10px 13px;border-radius:100px;
  background:var(--surface);border:1px solid var(--edge);color:var(--ink-2)}
.tally span b{color:var(--ink);font-weight:600}
.notice{width:min(1180px,calc(100% - 24px));margin:12px auto 0;display:flex;gap:11px;align-items:flex-start;
  background:#FDF4E0;border:1px solid #E9D3A0;border-radius:var(--r-s);
  padding:13px 16px;font-size:13.5px;line-height:1.55;color:#6B4E10}
.notice b{font-family:var(--cond);font-weight:700;color:#513A06;flex:none}
.editbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:20px;
  background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-s);padding:14px 17px}
.editbar span{font-size:14px;color:var(--ink-2)}
.editbar button{font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);margin-left:auto}
.editbar button:hover{text-decoration:underline}
.spinner{width:15px;height:15px;border:2px solid var(--edge-2);border-top-color:var(--brand);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- ana səhifə düyməsi ---------- */
.homebtn{display:inline-flex;align-items:center;gap:9px;flex:none;margin-left:6px;padding:9px 16px 9px 13px;
  border-radius:100px;border:1px solid var(--edge);background:var(--surface-2);color:var(--ink-2);
  font-family:var(--sans);font-weight:600;font-size:13.5px;
  transition:background .22s,color .22s,border-color .22s}
.homebtn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.ic-home{width:15px;height:15px;flex:none;background:currentColor;
  clip-path:polygon(50% 0,100% 42%,88% 42%,88% 100%,60% 100%,60% 64%,40% 64%,40% 100%,12% 100%,12% 42%,0 42%)}
@media(max-width:560px){ .homebtn span{display:none} .homebtn{padding:9px 11px} }

/* ---------- idarə sətri: masa və bölmə nişanları ---------- */
.gbadge,.kbadge{font:600 11px/1 var(--mono);font-stretch:88%;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 10px;border-radius:100px;flex:none}
.gbadge{background:var(--c);color:#fff}
.kbadge{background:color-mix(in srgb,var(--c) 11%,#fff);color:var(--c);
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.rtext{margin:0;font-size:15.5px;line-height:1.58;color:var(--ink);white-space:pre-wrap}

/* ---------- ekran: bölmə sayğacları və tək fikir ---------- */
.kindtally{display:flex;gap:14px;margin-top:auto;padding-top:26px;border-top:1px solid var(--edge)}
.kindtally div{flex:1}
.kindtally b{display:block;font-size:clamp(28px,3vw,44px);line-height:1;color:var(--c);
  font-stretch:112%;font-weight:700;letter-spacing:-.03em}
.kindtally span{display:block;margin-top:7px;font:600 11px/1.3 var(--mono);font-stretch:88%;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.focus.one{justify-content:center}
.fbig{margin:0;font-size:var(--fs);line-height:1.28;color:var(--ink);white-space:pre-wrap;
  font-stretch:104%;font-weight:600;letter-spacing:-.02em;max-width:24ch;
  overflow-wrap:anywhere}
@media(max-width:900px){ .fbig{max-width:none} }

/* ---------- çəkilən nişanlar ---------- */
.arrow{display:inline-block;width:.52em;height:.52em;border-right:2.2px solid currentColor;
  border-top:2.2px solid currentColor;transform:rotate(45deg);margin-left:1px;
  transition:transform .28s var(--e-spring)}
.arrow.up{transform:rotate(-45deg)}
.arrow.back{transform:rotate(-135deg)}
.btn:hover .arrow{transform:rotate(45deg) translate(3px,-3px)}
.btn:hover .arrow.up{transform:rotate(-45deg) translate(3px,3px)}
.gbox .go .arrow{width:.42em;height:.42em;border-width:2px}
.gbox:hover .go .arrow{transform:rotate(45deg) translate(2px,-2px)}
.ic-star{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;
  background:currentColor;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.mini:not(.on) .ic-star{background:none;box-shadow:inset 0 0 0 1.2px currentColor;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.ic-tick{display:block;width:8px;height:5px;border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-top:-2px}
.ic-plus{display:inline-block;width:13px;height:13px;flex:none;position:relative}
.ic-plus::before,.ic-plus::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.ic-plus::before{left:0;right:0;top:5.5px;height:2px}
.ic-plus::after{top:0;bottom:0;left:5.5px;width:2px}
.ic-x{display:inline-block;width:11px;height:11px;flex:none;position:relative}
.ic-x::before,.ic-x::after{content:"";position:absolute;left:0;right:0;top:4.5px;height:2px;
  background:currentColor;border-radius:2px}
.ic-x::before{transform:rotate(45deg)} .ic-x::after{transform:rotate(-45deg)}

/* ============================================================
   İdarə paneli — açıq səth
   ============================================================ */
.admbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:28px 0 24px}
.admbar .ttl{font-family:var(--cond);font-weight:700;font-size:26px;margin-right:auto;color:var(--ink)}
.pill{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 13px;
  border-radius:100px;border:1px solid var(--edge);background:var(--surface);color:var(--ink-2);
  display:inline-flex;gap:8px;align-items:center}
.pill.live{border-color:#B5DFCB;background:#EFF9F4;color:#186A4B}
.pill.live b{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:blink 2.2s infinite}
.pill.off{border-color:#EFC5C1;background:#FDF1F0;color:#9C332B}
.pill.off b{background:var(--g1);animation:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--edge);margin-bottom:24px}
.tabs button{padding:12px 16px;font-family:var(--cond);font-weight:600;font-size:15px;
  color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
.tab{display:none} .tab.on{display:block;animation:fade .35s var(--e-out) both}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);padding:17px 19px;
  box-shadow:var(--sh-1)}
.stat u{text-decoration:none;font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:11px}
.stat b{font-family:var(--cond);font-weight:700;font-size:34px;line-height:1;display:block;color:var(--ink)}
.stat.c b{color:var(--c)}
.bar{height:5px;border-radius:4px;background:var(--surface-3);margin-top:13px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--c);border-radius:4px;transition:width .6s var(--e-out)}

.toolrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.sinp{background:var(--surface);border:1px solid var(--edge);border-radius:100px;
  padding:11px 17px;font-size:14px;min-width:210px;flex:1;color:var(--ink)}
.sinp:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(21,80,126,.10)}
.seg{display:flex;background:var(--surface-3);border:1px solid var(--edge);border-radius:100px;padding:3px}
.seg button{padding:8px 15px;border-radius:100px;font:600 12.5px/1 var(--cond);color:var(--ink-2);
  transition:background .2s,color .2s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.seg button.on[data-c]{background:var(--c);color:#fff}

.rows{display:grid;gap:12px}
.row{background:var(--surface);border:1px solid var(--edge);border-left:4px solid var(--c);
  border-radius:var(--r-s);padding:17px 18px;display:grid;gap:12px;box-shadow:var(--sh-1)}
.row.pin{background:#F2F9FD;border-color:#BFDCEF;border-left-color:var(--c)}
.rhd{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rhd .who{font-family:var(--cond);font-weight:700;font-size:17px;color:var(--ink)}
.rhd .org{font-size:13px;color:var(--ink-3)}
.rhd .dk{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--c);margin-left:auto}
.rbody{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rbody section h5{font:600 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 7px}
.rbody section p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap}
.ract{display:flex;gap:8px;flex-wrap:wrap}
.mini{font:600 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:9px 12px;
  border-radius:100px;border:1px solid var(--edge);background:var(--surface);color:var(--ink-2);
  transition:border-color .2s,color .2s,background .2s}
.mini:hover{border-color:var(--brand);color:var(--brand)}
.mini.warn:hover{border-color:var(--g1);color:var(--g1);background:#FDF4F3}
.mini.on{background:var(--brand);border-color:var(--brand);color:#fff}
.empty{border:1px dashed var(--edge-2);border-radius:var(--r);padding:46px 22px;text-align:center;
  color:var(--ink-2);background:var(--surface)}
.empty b{display:block;font-family:var(--cond);font-weight:700;font-size:20px;color:var(--ink);margin-bottom:7px}

.note{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);padding:20px;
  box-shadow:var(--sh-1)}
.note h4{font-family:var(--cond);font-weight:700;font-size:17px;margin:0 0 8px;color:var(--ink)}
.note p{margin:0 0 14px;font-size:14px;color:var(--ink-2);line-height:1.6}
.dump{width:100%;min-height:240px;background:var(--surface-2);border:1px solid var(--edge);
  border-radius:var(--r-s);padding:15px;font:400 12.5px/1.7 var(--mono);color:var(--ink);resize:vertical}

.syncols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.syncol h3{font-family:var(--cond);font-weight:700;font-size:clamp(19px,2vw,26px);margin:0 0 4px;color:var(--ink)}
.syncol .cnt{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px;display:block}
.syncol ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.syncol li{background:var(--surface);border:1px solid var(--edge);border-left:4px solid var(--c);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:14px 16px;font-size:15px;line-height:1.55;
  color:var(--ink);white-space:pre-wrap}
.syncol li b{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--c);margin-bottom:8px}

/* ---------- səhifələmə ---------- */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--edge)}
.pnum,.pbtn{min-width:38px;height:38px;padding:0 11px;border-radius:10px;border:1px solid var(--edge);
  background:var(--surface);color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;
  font:600 14px/1 var(--sans);font-variant-numeric:tabular-nums;
  transition:background .2s,color .2s,border-color .2s,transform .16s var(--e-spring)}
.pnum:hover,.pbtn:not(:disabled):hover{border-color:var(--brand);color:var(--brand);background:var(--surface-2)}
.pnum:active,.pbtn:not(:disabled):active{transform:scale(.94)}
.pnum.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pbtn:disabled{opacity:.35;pointer-events:none}
.pbtn .arrow{width:.5em;height:.5em;border-width:2px;margin:0}
.pgap{color:var(--ink-3);padding:0 3px;font-weight:600}
.prange{margin-left:auto;font:500 11.5px/1 var(--mono);font-stretch:88%;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
@media(max-width:620px){
  .prange{margin-left:0;width:100%;order:-1;margin-bottom:10px}
  .pnum,.pbtn{min-width:42px;height:42px}
}

/* ---------- sintez sütunları öz içində sürüşür ---------- */
#admin-synth .syncol ul{max-height:min(58vh,520px);overflow:auto;padding-right:4px}
#admin-synth .syncol ul::-webkit-scrollbar{width:8px}
#admin-synth .syncol ul::-webkit-scrollbar-thumb{background:var(--edge-2);border-radius:8px}
#admin-synth .syncol ul::-webkit-scrollbar-track{background:transparent}

/* ---------- modal / toast ---------- */
.modal{position:fixed;inset:0;z-index:90;background:rgba(23,51,76,.45);backdrop-filter:blur(4px);
  display:none;place-items:center;padding:20px}
.modal.on{display:grid;animation:fade .25s var(--e-out) both}
.modal .box{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);
  padding:28px;width:min(720px,100%);max-height:86vh;overflow:auto;box-shadow:var(--sh-3)}
.modal h3{font-family:var(--cond);font-weight:700;font-size:24px;margin:0 0 6px;color:var(--ink)}
.modal p{color:var(--ink-2);font-size:14.5px;margin:0 0 16px;line-height:1.6}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);z-index:120;
  background:var(--ink);color:#fff;border-radius:100px;padding:14px 24px;
  font-family:var(--cond);font-weight:600;font-size:15px;box-shadow:var(--sh-3);
  opacity:0;pointer-events:none;transition:opacity .28s var(--e-out),transform .34s var(--e-spring)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   Böyük ekran — zalın proyektoru üçün
   İşıqlı səth: müasir konfrans zalları qaranlıq deyil, və
   qalan interfeyslə eyni dildə danışır. Yazı ölçüləri
   arxa cərgədən oxunacaq qədər böyükdür.
   ============================================================ */
.screen{
  position:fixed;inset:0;z-index:60;display:none;flex-direction:column;overflow:hidden;
  background:var(--paper);color:var(--ink);
  background-image:repeating-linear-gradient(0deg,transparent 0 71px,rgba(23,51,76,.032) 71px 72px);
}
.screen.on{display:flex;animation:fade .4s var(--e-out) both}
.screen .shd{display:flex;align-items:center;gap:20px;padding:18px 32px;flex:none;
  background:var(--surface);border-bottom:1px solid var(--edge);box-shadow:var(--sh-1)}
.screen .shd .lhs{display:flex;align-items:center;gap:14px;flex:none;
  padding-right:20px;border-right:1px solid var(--edge)}
.screen .shd .lhs img{height:30px;display:block}
.screen .shd .sttl{font-size:clamp(19px,1.5vw,24px);color:var(--ink);line-height:1.1}
.screen .shd .sttl small{display:block;font:600 10.5px/1.3 var(--mono);letter-spacing:.16em;
  font-stretch:88%;text-transform:uppercase;color:var(--g2);margin-bottom:4px}
.screen .shd .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.sbody{flex:1;min-height:0;overflow:hidden;position:relative;display:flex;flex-direction:column}
.join,.wall,.focus,.syn{flex:1;min-height:0;width:100%}
.sfoot{flex:none;padding:12px 32px;border-top:1px solid var(--edge);background:var(--surface);
  display:flex;gap:16px;align-items:center;font:500 11.5px/1 var(--mono);font-stretch:88%;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex-wrap:wrap}
.sfoot .kb{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.sfoot kbd{font:inherit;border:1px solid var(--edge-2);border-radius:5px;padding:3px 7px;
  margin-right:5px;background:var(--surface-2);color:var(--ink-2)}

/* --- qoşulma --- */
.join{height:100%;display:grid;grid-template-columns:1.02fr .98fr}
.join .l{padding:min(6vh,64px) min(5vw,64px);display:flex;flex-direction:column;justify-content:center}
.join .l h2{font-size:clamp(38px,5.6vw,80px);line-height:.96;margin:0 0 20px;
  color:var(--ink);text-wrap:balance}
.join .l p{font-size:clamp(16px,1.5vw,21px);color:var(--ink-2);margin:0 0 34px;max-width:33ch;line-height:1.5}
.joinlink{background:var(--surface);border:1px solid var(--edge);color:var(--ink);
  border-radius:var(--r);padding:24px 28px;display:flex;gap:26px;align-items:center;
  max-width:660px;box-shadow:var(--sh-2)}
.joinlink .qr{width:146px;height:146px;flex:none;display:grid;place-items:center;background:#fff;
  border-radius:8px}
.joinlink .qr img{width:100%;height:100%;display:block}
.joinlink .u{font:600 10.5px/1 var(--mono);font-stretch:88%;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.joinlink .a{font:500 clamp(14px,1.15vw,17px)/1.45 var(--mono);word-break:break-all;color:var(--ink)}
.join .r{border-left:1px solid var(--edge);padding:min(5vh,48px) min(4vw,48px);
  overflow:hidden;display:flex;flex-direction:column;background:var(--surface)}
.bignum{font-size:clamp(76px,12vw,180px);line-height:.8;display:flex;align-items:baseline;gap:18px;
  color:var(--brand);animation:fade .5s var(--e-out) both}
.bignum span{font:500 clamp(14px,1.4vw,20px)/1 var(--mono);font-stretch:88%;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.gtally{display:grid;gap:12px;margin-top:30px}
.gtally div{display:flex;align-items:center;gap:14px}
.gtally .lb{font:600 13px/1 var(--mono);font-stretch:88%;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);width:34px;flex:none}
.gtally .tr{flex:1;height:12px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.gtally .tr i{display:block;height:100%;background:var(--c);border-radius:6px;
  transition:width .7s var(--e-out)}
.gtally .n{font-size:22px;width:38px;text-align:right;color:var(--ink);font-stretch:112%;font-weight:700}
.namewall{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px;align-content:flex-start;
  overflow:hidden;flex:1;padding-top:26px;border-top:1px solid var(--edge)}
.namewall span{font-size:clamp(14px,1.05vw,17px);font-weight:600;padding:10px 15px;border-radius:100px;
  border:1.5px solid color-mix(in srgb,var(--c) 45%,transparent);color:var(--c);
  background:color-mix(in srgb,var(--c) 7%,#fff);animation:pop .45s var(--e-spring) both}
@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

/* --- divar --- */
.wall{height:100%;overflow:hidden;padding:26px 32px}
.wallmove{will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
.wallcols{padding-bottom:20px}   /* dövrənin bağlanma yeri — blokun hündürlüyünə daxildir */
.wallcols{columns:3;column-gap:20px}
.card{break-inside:avoid;background:var(--surface);border:1px solid var(--edge);
  border-left:6px solid var(--c);border-radius:12px;padding:20px 22px;margin:0 0 20px;
  display:inline-block;width:100%;box-shadow:var(--sh-1);
  animation:cardIn .5s var(--e-out) both;animation-delay:calc(var(--i,0) * 38ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.card .chd2{display:flex;align-items:baseline;gap:11px;margin-bottom:14px;flex-wrap:wrap;
  padding-bottom:11px;border-bottom:1px solid var(--edge)}
.card .chd2 b{font-size:21px;color:var(--ink)}
.card .chd2 i{font-style:normal;font:500 12px/1 var(--mono);font-stretch:88%;color:var(--ink-3)}
.card .chd2 u{text-decoration:none;margin-left:auto;font:600 11.5px/1 var(--mono);font-stretch:88%;
  color:var(--c);letter-spacing:.08em}
.card section{margin-bottom:14px}
.card section:last-child{margin-bottom:0}
.card h5{font:600 10.5px/1 var(--mono);font-stretch:88%;letter-spacing:.15em;text-transform:uppercase;
  color:var(--c);margin:0 0 8px}
.card p{margin:0;font-size:17px;line-height:1.5;color:var(--ink);white-space:pre-wrap}
.card.star{border-color:var(--brand);box-shadow:0 0 0 2px rgba(21,80,126,.16),var(--sh-2)}

/* --- fokus --- */
.focus{height:100%;display:flex;flex-direction:column;justify-content:center;
  padding:min(5vh,54px) min(6vw,84px);position:relative}
.focus .fhd{display:flex;align-items:center;gap:18px;margin-bottom:min(4vh,38px);flex-wrap:wrap;
  padding-bottom:20px;border-bottom:2px solid var(--c)}
.focus .fdot{width:18px;height:18px;border-radius:50%;background:var(--c);flex:none}
.focus .fwho{font-size:clamp(28px,3.4vw,50px);line-height:1;color:var(--ink)}
.focus .forg{font:500 clamp(12px,1.1vw,16px)/1 var(--mono);font-stretch:88%;
  letter-spacing:.08em;color:var(--ink-3)}
.focus .fdk{margin-left:auto;font:600 clamp(11px,1vw,15px)/1 var(--mono);font-stretch:88%;
  letter-spacing:.1em;color:var(--c)}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:min(3vw,44px);flex:0 1 auto;min-height:0}
.fgrid section{min-width:0;overflow:hidden}
.fgrid h5{font:600 clamp(10px,.95vw,13px)/1 var(--mono);font-stretch:88%;letter-spacing:.17em;
  text-transform:uppercase;color:var(--c);margin:0 0 15px}
.fgrid p{margin:0;font-size:var(--fs,clamp(18px,1.85vw,30px));line-height:1.4;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere;font-weight:450}
.fprog{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--surface-3)}
.fprog i{display:block;height:100%;background:var(--c);width:0}

/* --- sintez --- */
.syn{height:100%;overflow:auto;padding:28px 32px 44px}
.synhd{display:flex;align-items:center;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.synhd h2{font-size:clamp(26px,3vw,42px);margin:0;color:var(--ink)}
.syn .syncol h3{font-size:clamp(20px,2.1vw,30px)}
.syn .syncol li{font-size:clamp(15px,1.15vw,18px);box-shadow:var(--sh-1)}
.screen .empty{background:var(--surface)}

/* ============================================================
   Telefon
   ============================================================ */
@media(max-width:1300px){ .wallcols{columns:2} }
@media(max-width:1000px){ .join{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .join .r{border-left:0;border-top:1px solid var(--edge)} }
@media(max-width:980px){ .syncols{grid-template-columns:1fr} }
@media(max-width:900px){ .fgrid{grid-template-columns:1fr;gap:20px} }
@media(max-width:820px){ .rbody{grid-template-columns:1fr} }
@media(max-width:760px){ .wallcols{columns:1} }
@media(max-width:680px){ .route{display:none} }
@media(max-width:640px){ .steps i span{display:none} .steps s{width:14px} }
@media(max-width:620px){
  .grid2{grid-template-columns:1fr;gap:0}
  .gbox{grid-template-columns:44px 1fr;gap:13px;padding:17px 17px 17px 18px}
  .gbox .go{display:none} .gbox .num{font-size:32px}
  .gbox:hover{transform:none;box-shadow:var(--sh-1)}
  .gbox:hover::before{width:6px}
  .lh img{height:23px} .lh{padding:11px 14px}
  .meta div{padding:12px 17px 12px 0;margin-right:17px}
  .meta dd{font-size:16px}
  .cbox{padding:17px 16px}
  h1.hero{font-size:clamp(34px,8.4vw,52px)}
  .subbar{position:static;background:none;padding:22px 0 calc(14px + env(safe-area-inset-bottom))}
  .subbar .in{flex-direction:column-reverse;align-items:stretch}
  .subbar .btn{justify-content:center;padding:17px 26px;font-size:18px}
  .view.on > *{animation-duration:.42s;animation-delay:calc(var(--i,0) * 38ms + 40ms)}
  .gbox{animation-delay:calc(var(--i,0) * 60ms + 150ms)}
  .slip{box-shadow:var(--sh-1)}
}
@media(hover:none){
  .chip{padding:11px 15px;font-size:13.5px}
  .chip:hover{background:var(--surface-3);color:var(--ink-2);border-color:transparent}
  .btn:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    animation-delay:0ms !important;transition-duration:.001ms !important}
}
@media print{ body{background:#fff} .screen{display:none !important} }

/* ============================================================
   Təqdimat slaydları — zal üçün, pult ilə idarə olunur
   ============================================================ */
.deck{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.slide{flex:1;min-height:0;display:flex;flex-direction:column;
  padding:min(6vh,58px) min(6vw,80px) min(3vh,26px);
  animation:slideIn .42s var(--e-out) both}
@keyframes slideIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

.shead{display:flex;align-items:baseline;gap:16px;flex:none;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:min(4vh,30px);border-bottom:3px solid var(--c)}
.skind{font-size:clamp(24px,3.1vw,46px);font-stretch:112%;font-weight:700;
  letter-spacing:-.025em;color:var(--c);line-height:1}
.sgrp{font:600 clamp(11px,1.05vw,15px)/1 var(--mono);font-stretch:88%;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.scount{margin-left:auto;font-size:clamp(24px,2.6vw,40px);font-stretch:112%;font-weight:700;
  color:var(--c);letter-spacing:-.03em;line-height:1}

/* slayd 1 — başlıq */
.slide.title{justify-content:center}
.seyebrow{font:600 clamp(11px,1.05vw,15px)/1 var(--mono);font-stretch:88%;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g2);margin:0 0 min(5vh,40px)}
.tnum{font-size:clamp(90px,15vw,230px);line-height:.78;color:var(--c);
  font-stretch:112%;font-weight:700;letter-spacing:-.055em;margin-bottom:.06em}
.slide.title h1{font-size:clamp(34px,5.4vw,78px);line-height:1.02;margin:0 0 min(3vh,26px);
  color:var(--ink);font-stretch:112%;font-weight:700;letter-spacing:-.03em;max-width:20ch}
.tq{font-size:clamp(16px,1.6vw,25px);color:var(--ink-2);margin:0;max-width:56ch;line-height:1.45}

/* slayd 2 — statistika */
.sbig{display:grid;grid-template-columns:repeat(3,1fr);gap:min(3vw,40px);flex:none;
  margin-bottom:min(6vh,52px)}
.sbig b{display:block;font-size:clamp(56px,8.4vw,130px);line-height:.85;color:var(--c);
  font-stretch:112%;font-weight:700;letter-spacing:-.05em}
.sbig b i{font-style:normal;font-size:.44em;letter-spacing:-.02em;margin-left:.04em}
.sbig span{display:block;margin-top:12px;font:600 clamp(11px,1.05vw,15px)/1.3 var(--mono);
  font-stretch:88%;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.sbreak{display:grid;gap:min(2.4vh,20px);margin-top:auto}
.sbreak div{display:flex;align-items:center;gap:min(2vw,24px)}
.sbreak .bl{font-size:clamp(17px,1.7vw,27px);font-stretch:112%;font-weight:700;
  color:var(--c);width:clamp(150px,17vw,290px);flex:none;letter-spacing:-.02em}
.sbreak .bt{flex:1;height:clamp(14px,1.5vw,22px);border-radius:100px;background:var(--surface-3);overflow:hidden}
.sbreak .bt i{display:block;height:100%;background:var(--c);border-radius:100px;
  transition:width .6s var(--e-out)}
.sbreak .bv{font-size:clamp(22px,2.4vw,38px);font-stretch:112%;font-weight:700;color:var(--ink);
  width:2.4em;text-align:right;letter-spacing:-.03em}

/* slayd 3-5 — bir bölmənin bütün fikirləri */
.sitems{flex:1;min-height:0;overflow:hidden;margin:0;padding:0;list-style:none;
  columns:var(--cols,1);column-gap:min(3.4vw,48px)}
.sitems li{break-inside:avoid;position:relative;padding:0 0 0 clamp(24px,2.2vw,38px);
  margin:0 0 clamp(11px,1.5vh,22px);font-size:var(--fs);line-height:1.38;color:var(--ink);
  letter-spacing:-.005em}
.sitems li::before{content:"";position:absolute;left:0;top:.52em;width:clamp(11px,1vw,17px);height:2px;
  background:var(--c);border-radius:2px}
.sitems li.star{color:var(--c);font-weight:600}
.snone{color:var(--ink-3);font-size:clamp(16px,1.5vw,22px);margin:0}

/* slayd 6 — üçü birlikdə */
.tcols{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:min(2.6vw,36px)}
.tcols section{min-width:0;display:flex;flex-direction:column;min-height:0}
.tcols h4{flex:none;display:flex;align-items:baseline;gap:10px;margin:0 0 14px;padding-bottom:11px;
  border-bottom:2px solid var(--c);font-size:clamp(15px,1.5vw,23px);color:var(--c);
  font-stretch:112%;font-weight:700;letter-spacing:-.02em;text-transform:uppercase}
.tcols h4 b{margin-left:auto;font:600 clamp(12px,1.1vw,17px)/1 var(--mono);font-stretch:88%}
.tcols ul{flex:1;min-height:0;overflow:hidden;list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(7px,.9vh,12px);align-content:start}
.tcols li{font-size:var(--fs);line-height:1.4;color:var(--ink);padding:0 0 0 13px;position:relative}
.tcols li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:2px;
  background:var(--c);border-radius:2px}

/* naviqasiya zolağı */
.deckbar{flex:none;display:flex;align-items:center;gap:16px;justify-content:center;
  padding:0 min(6vw,80px) min(2.4vh,20px)}
.dnav{width:46px;height:46px;border-radius:50%;border:1px solid var(--edge-2);background:var(--surface);
  color:var(--ink-2);display:grid;place-items:center;
  transition:background .2s,color .2s,border-color .2s,transform .16s var(--e-spring)}
.dnav:not(:disabled):hover{background:var(--brand);border-color:var(--brand);color:#fff}
.dnav:not(:disabled):active{transform:scale(.92)}
.dnav:disabled{opacity:.3;pointer-events:none}
.dnav .arrow{width:.44em;height:.44em;border-width:2.4px;margin:0;font-size:20px}
.dots{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:center}
.dots span{width:9px;height:9px;border-radius:50%;background:var(--edge-2);cursor:pointer;
  transition:background .25s,transform .25s var(--e-spring),width .25s}
.dots span.first{box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--edge-2)}
.dots span:hover{transform:scale(1.35)}
.dots span.on{background:var(--brand);width:26px;border-radius:100px}
.dots span.on.first{box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--brand)}
.dprog{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--surface-3)}
.dprog i{display:block;height:100%;background:var(--brand);transition:width .4s var(--e-out)}

/* ekranı söndürmək (pultda B düyməsi) */
body.blanked .screen::after{content:"";position:fixed;inset:0;z-index:80;background:#08121C;
  animation:fade .2s var(--e-out) both}

@media(max-width:900px){
  .sbig{grid-template-columns:1fr;gap:18px}
  .sbig b{font-size:clamp(44px,12vw,80px)}
  .tcols{grid-template-columns:1fr;overflow:auto}
  .sitems{columns:1 !important}
  .sbreak .bl{width:auto;flex:1}
}

/* ============================================================
   Tədbirlər və platformalar
   ============================================================ */
.ic-swap{display:inline-block;width:14px;height:14px;flex:none;position:relative}
.ic-swap::before,.ic-swap::after{content:"";position:absolute;left:0;right:0;height:2px;
  background:currentColor;border-radius:2px}
.ic-swap::before{top:3px} .ic-swap::after{bottom:3px}

.evrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 16px;margin-bottom:10px;
  background:var(--surface-2);border:1px solid var(--edge);border-radius:var(--r-s);
  border-left:4px solid var(--edge-2);transition:border-color .2s,background .2s}
.evrow.on{border-left-color:var(--ok);background:#F1F9F5;border-color:#BFE3D0}
.evmain{min-width:0;flex:1}
.evmain b{display:block;font-size:16.5px;font-stretch:112%;letter-spacing:-.015em;color:var(--ink)}
.evmain span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px}
.evmain i{display:block;font:500 11px/1.4 var(--mono);font-stretch:88%;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-top:6px;font-style:normal}
.evnow{font:600 11px/1 var(--mono);font-stretch:88%;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 12px;border-radius:100px;background:var(--ok);color:#fff;flex:none}

.edrow{display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px;margin-bottom:8px;align-items:center}
.edcard{background:var(--surface-2);border:1px solid var(--edge);border-radius:var(--r-s);
  padding:14px;margin-bottom:10px;display:grid;gap:8px}
.edhd{display:flex;align-items:center;gap:10px}
.edhd b{font:600 12px/1 var(--mono);font-stretch:88%;letter-spacing:.1em;color:var(--ink-3)}
.edhd .tdel{margin-left:auto}
#event-editor .field{margin-bottom:14px}
#event-editor h4{margin-bottom:10px}

/* --- ekran: platformalar --- */
.plat{flex:1;min-height:0;display:flex;flex-direction:column;padding:min(5vh,48px) min(5vw,64px)}
.plathd{flex:none;margin-bottom:min(4vh,34px)}
.plathd h2{font-size:clamp(30px,4vw,60px);margin:0 0 10px;color:var(--ink);
  font-stretch:112%;font-weight:700;letter-spacing:-.03em}
.plathd p{margin:0;font-size:clamp(15px,1.5vw,21px);color:var(--ink-2)}
.platgrid{flex:1;min-height:0;display:grid;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  grid-template-rows:repeat(var(--rows,1),minmax(0,1fr));
  gap:min(2vw,24px);overflow:auto;align-content:stretch}
.platcard{background:var(--surface);border:1px solid var(--edge);border-top:5px solid var(--c);
  border-radius:var(--r);padding:min(2.4vh,22px);display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--sh-1);min-width:0;
  animation:cardIn .5s var(--e-out) both;animation-delay:calc(var(--i,0) * 70ms)}
.pqr{background:#fff;border-radius:10px;padding:8px;align-self:center;flex:0 1 auto;
  width:min(calc((62vh - 90px) / var(--rows,1)), 190px, 100%);aspect-ratio:1}
.platcard{overflow:hidden}
.platgrid[style*="--rows:2"] .platcard,
.platgrid[style*="--rows:3"] .platcard{gap:11px;padding:min(1.8vh,16px)}
.pqr img{width:100%;height:100%;display:block}
.pbody{min-width:0}
.platcard h3{font-size:clamp(17px,1.6vw,26px);margin:0 0 8px;color:var(--ink);
  font-stretch:112%;font-weight:700;letter-spacing:-.02em}
.platcard p{margin:0 0 12px;font-size:clamp(13px,1.15vw,17px);line-height:1.45;color:var(--ink-2)}
.purl{font:500 clamp(11px,1vw,14px)/1.3 var(--mono);font-stretch:88%;color:var(--c);
  word-break:break-all}
@media(max-width:900px){ .platgrid{grid-template-columns:1fr;overflow:auto} .edrow{grid-template-columns:1fr} }

/* slayd yenidən çəkiləndə (məsələn R ilə) animasiya təkrarlanmır */
.slide.still{animation:none}

/* təqdimat gedərkən yeni qeyd gəldiyini bildirən kiçik nişan */
.stale{position:absolute;right:min(6vw,80px);bottom:calc(min(2.4vh,20px) + 62px);
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;
  background:var(--surface);border:1px solid var(--edge-2);color:var(--ink-2);
  font:600 12.5px/1 var(--sans);box-shadow:var(--sh-2);
  animation:staleIn .35s var(--e-out) both;z-index:3}
.stale:hover{border-color:var(--brand);color:var(--brand)}
.stale kbd{font:600 11px/1 var(--mono);border:1px solid var(--edge-2);border-radius:5px;
  padding:3px 6px;background:var(--surface-2)}
@keyframes staleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){ .stale{right:16px;bottom:78px} }

/* ekran başlığı: tədbirin adı dəyişkəndir, məhsulun adı sabit */
.screen .shd .sttl #s-title{display:block}
.evnow-pill{max-width:min(42vw,460px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-color:var(--edge-2);background:var(--surface-2);color:var(--ink-2)}

/* ============================================================
   Tədbirin öz rəngləri — səhifə hamar keçidlə dəyişir
   ============================================================ */
body,.slip,.lh,.gbox,.board,.note,.stat,.row,.card,.foot,.btn,.pill,
.screen,.syncol li,.thoughts li,.inp,.ta,.sinp,.seg,.empty{
  transition:background-color .55s var(--e-out),color .55s var(--e-out),
             border-color .55s var(--e-out),box-shadow .55s var(--e-out);
}
body.theme-swap .stage{animation:themeMorph .8s var(--e-out) both}
@keyframes themeMorph{
  0%{opacity:.35;transform:scale(.994)}
  55%{opacity:1}
  100%{opacity:1;transform:none}
}
body[data-mood="fun"]{--r:20px;--r-s:14px}
body[data-mood="fun"] h1.hero{letter-spacing:-.035em}
body[data-mood="fun"] .btn{padding:16px 30px;font-size:18px}

/* ============================================================
   Viktorina — telefon
   ============================================================ */
.qz-join .inp{font-size:20px;padding:16px 18px;text-align:center}
.qz-me{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--edge);
  border-radius:100px;padding:9px 16px 9px 9px;margin-bottom:16px;box-shadow:var(--sh-1)}
.qz-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--c);color:#fff;font-weight:700;font-size:16px}
.qz-me b{font-size:16px;font-stretch:112%}
.qz-score{margin-left:auto;font:600 15px/1 var(--mono);color:var(--brand)}
.qz-wait{text-align:center;padding:44px 24px}
.qz-pulse{width:56px;height:56px;border-radius:50%;margin:0 auto 22px;background:var(--brand);
  animation:qpulse 1.6s var(--e-out) infinite}
@keyframes qpulse{0%{transform:scale(.8);opacity:.55}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.qz-qtext{font-size:clamp(19px,5vw,26px);line-height:1.3;font-stretch:112%;font-weight:700;
  letter-spacing:-.02em;margin:6px 0 18px;color:var(--ink)}
.qz-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qz-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:clamp(110px,24vw,150px);border-radius:var(--r);background:var(--c);color:#fff;
  padding:16px 12px;box-shadow:var(--sh-2);
  transition:transform .16s var(--e-spring),opacity .25s,filter .25s}
.qz-tile:active{transform:scale(.96)}
.qz-tile:disabled{opacity:.4}
.qz-tile.picked{opacity:1;outline:4px solid var(--ink);outline-offset:3px}
.qz-lab{font-size:16px;font-weight:600;text-align:center;line-height:1.25}
.qz-shape{width:26px;height:26px;background:#fff;flex:none;opacity:.95}
.tri .qz-shape{clip-path:polygon(50% 0,100% 100%,0 100%)}
.dia .qz-shape{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.cir .qz-shape{border-radius:50%}
.sqr .qz-shape{border-radius:4px}
.qz-result{text-align:center;padding:40px 24px}
.qz-result.good{border-color:var(--ok);box-shadow:0 0 0 3px rgba(30,122,87,.16),var(--sh-2)}
.qz-result.bad{border-color:var(--g1);box-shadow:0 0 0 3px rgba(194,69,60,.14),var(--sh-2)}
.qz-mark{display:grid;place-items:center;margin-bottom:14px}
.ic-tick.big,.ic-x.big{width:44px;height:44px;color:var(--ok)}
.ic-tick.big{border-width:5px;height:24px;margin:0}
.qz-result.bad .ic-x.big{color:var(--g1)}
.ic-x.big::before,.ic-x.big::after{top:19px;height:5px}
.qz-plus{font-size:clamp(38px,11vw,64px);font-stretch:112%;font-weight:700;letter-spacing:-.04em;
  color:var(--ok);margin:6px 0 10px;line-height:1}
.qz-result.bad .qz-plus{color:var(--g1)}

/* ============================================================
   Viktorina — zalın ekranı
   ============================================================ */
.qs{flex:1;min-height:0;display:flex;flex-direction:column;padding:min(4.5vh,44px) min(5vw,64px)}
.qs.lobby{display:grid;grid-template-columns:1fr 1fr;gap:min(4vw,56px);padding:0}
.qs-l{padding:min(6vh,60px) min(5vw,60px);display:flex;flex-direction:column;justify-content:center}
.qs-l h2{font-size:clamp(38px,5.6vw,84px);line-height:.98;margin:0 0 26px;color:var(--ink);
  font-stretch:112%;font-weight:700;letter-spacing:-.03em}
.qs-r{border-left:1px solid var(--edge);background:var(--surface);
  padding:min(5vh,48px) min(4vw,48px);display:flex;flex-direction:column;overflow:hidden}
.qs-names{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px;align-content:flex-start;overflow:hidden;flex:1}
.qs-names span{font-size:clamp(14px,1.1vw,18px);font-weight:600;padding:9px 15px;border-radius:100px;
  color:#fff;background:var(--c);animation:pop .4s var(--e-spring) both}
.qs-top{display:flex;align-items:flex-start;gap:min(3vw,34px);flex:none;margin-bottom:min(3vh,24px)}
.qs-no{font:600 clamp(12px,1.1vw,16px)/1 var(--mono);font-stretch:88%;letter-spacing:.14em;
  color:var(--ink-3);padding-top:.6em}
.qs-q{flex:1;font-size:clamp(26px,3.6vw,58px);line-height:1.08;margin:0;color:var(--ink);
  font-stretch:112%;font-weight:700;letter-spacing:-.03em}
.qs-timer{position:relative;width:clamp(70px,7vw,110px);height:clamp(70px,7vw,110px);flex:none}
.qs-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.qs-timer circle{fill:none;stroke-width:4}
.qs-timer .tr{stroke:var(--surface-3)}
.qs-timer .tv{stroke:var(--brand);stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.qs-timer.hot .tv{stroke:var(--g1)}
.qs-timer b{position:absolute;inset:0;display:grid;place-items:center;
  font-size:clamp(26px,2.8vw,44px);font-stretch:112%;font-weight:700;color:var(--ink)}
.qs-timer.hot b{color:var(--g1)}
.qs-img{flex:1 1 0;min-height:0;position:relative;overflow:hidden;
  margin-bottom:min(2.4vh,20px);border-radius:var(--r)}
.qs-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  border-radius:var(--r);will-change:transform;backface-visibility:hidden}
.qs-tiles{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:min(1.6vw,18px)}
.qs-tiles.small .qs-tile{min-height:clamp(64px,7vh,92px)}
.qs-tile{display:flex;align-items:center;gap:16px;background:var(--c);color:#fff;border-radius:var(--r);
  padding:min(2.2vh,22px) min(1.8vw,24px);min-height:clamp(88px,11vh,140px);
  box-shadow:var(--sh-2);transition:opacity .4s,transform .4s var(--e-out),filter .4s}
.qs-tile .qz-shape{width:clamp(22px,2vw,32px);height:clamp(22px,2vw,32px)}
.qs-lab{flex:1;font-size:clamp(17px,1.8vw,30px);font-weight:600;line-height:1.2}
.qs-cnt{font:700 clamp(18px,2vw,32px)/1 var(--cond);font-stretch:112%;
  background:rgba(255,255,255,.25);padding:8px 14px;border-radius:100px}
.qs-tile.dim{opacity:.3;filter:grayscale(.6);transform:scale(.97)}
.qs-tile.ok{outline:5px solid var(--ink);outline-offset:4px;transform:scale(1.02)}
.qs-foot{flex:none;padding-top:min(2.2vh,18px);font:600 clamp(13px,1.3vw,19px)/1 var(--sans);
  color:var(--ink-2);text-align:center}
.qs-foot b{color:var(--brand);font-size:1.25em}
.qs.board h2,.qs.final h2{font-size:clamp(30px,4vw,58px);margin:0 0 min(3.4vh,28px);color:var(--ink);
  font-stretch:112%;font-weight:700;letter-spacing:-.03em}
.qs-rows{list-style:none;margin:0;padding:0;display:grid;gap:min(1.6vh,14px);flex:1;min-height:0;align-content:start}
.qs-rows li{display:flex;align-items:center;gap:min(2vw,22px);background:var(--surface);
  border:1px solid var(--edge);border-left:7px solid var(--c);border-radius:var(--r);
  padding:min(1.9vh,18px) min(2vw,24px);animation:rowIn .5s var(--e-out) both;
  animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rowIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.qs-rows .r{font:700 clamp(18px,1.9vw,30px)/1 var(--cond);font-stretch:112%;color:var(--ink-3);width:1.6em}
.qs-rows b{flex:1;font-size:clamp(19px,2.1vw,34px);font-stretch:112%;font-weight:700;color:var(--ink)}
.qs-rows .s{font:700 clamp(19px,2.1vw,34px)/1 var(--cond);font-stretch:112%;color:var(--brand)}
.qs-rows.small li{padding:min(1.2vh,12px) min(1.6vw,18px)}
.qs-rows.small b,.qs-rows.small .s{font-size:clamp(15px,1.5vw,22px)}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:min(2vw,26px);align-items:end;
  flex:1;min-height:0;margin-bottom:min(3vh,24px)}
.pod{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;height:100%}
.pod .pn{font-size:clamp(17px,1.9vw,30px);font-stretch:112%;font-weight:700;color:var(--ink);
  text-align:center;line-height:1.15}
.pod .ps{font:700 clamp(16px,1.6vw,26px)/1 var(--cond);font-stretch:112%;color:var(--brand)}
.pod .pbar{width:100%;background:var(--c);border-radius:var(--r) var(--r) 0 0;display:grid;
  place-items:center;color:#fff;animation:grow .7s var(--e-out) both}
.pod.p1 .pbar{height:56%} .pod.p2 .pbar{height:78%} .pod.p3 .pbar{height:40%}
.pod .pbar b{font-size:clamp(30px,4vw,64px);font-stretch:112%;font-weight:700}
@keyframes grow{from{transform:scaleY(.1);transform-origin:bottom;opacity:0}to{transform:none;opacity:1}}
.pod.empty{visibility:hidden}
@media(max-width:900px){
  .qs.lobby{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .qs-r{border-left:0;border-top:1px solid var(--edge)}
  .qs-tiles{grid-template-columns:1fr}
  .podium{grid-template-columns:1fr;align-items:stretch}
  .pod .pbar{height:auto !important;padding:14px;border-radius:var(--r)}
}

/* ---------- viktorinada lövhə elementləri gizlənir ---------- */
body.is-quiz #resume-bar,
body.is-quiz .route,
body.is-quiz [data-tab="t-answers"],
body.is-quiz [data-tab="t-synth"],
body.is-quiz #t-answers,
body.is-quiz #t-synth{ display:none !important }

/* ---------- oyunun idarə zolağı ---------- */
body.is-quiz #s-mode{background:transparent;border:0;padding:0;gap:8px}
#s-mode [data-do],#s-mode [data-plat]{
  padding:10px 16px;border-radius:100px;font:600 13.5px/1 var(--sans);
  background:var(--surface-2);border:1px solid var(--edge);color:var(--ink-2);
  transition:background .2s,color .2s,border-color .2s,transform .16s var(--e-spring)}
#s-mode [data-do]:hover,#s-mode [data-plat]:hover{border-color:var(--brand);color:var(--brand)}
#s-mode [data-do]:active,#s-mode [data-plat]:active{transform:scale(.95)}
#s-mode .qz-main{background:var(--brand);border-color:var(--brand);color:#fff;
  padding:11px 22px;font-size:14.5px;box-shadow:var(--sh-1)}
#s-mode .qz-main:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
#s-mode .warn:hover{border-color:var(--g1);color:var(--g1)}

/* ============================================================
   Tədbirdən tədbirə keçid
   Örtük transform ilə sürüşür (clip-path deyil) — bütün ekranın
   yenidən boyanmasına ehtiyac qalmır, hərəkət qrafik kartındadır.
   ============================================================ */
#morph{
  position:fixed;inset:0;z-index:200;pointer-events:none;
  background:var(--m-bg,#EDF1F5);
  display:grid;place-items:center;
  transform:translate3d(0,100%,0);
  will-change:transform;backface-visibility:hidden;
  visibility:hidden;
}
#morph::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 55% at 50% 45%,
    color-mix(in srgb, var(--m-fg,#15507E) 15%, transparent), transparent 70%);
}
#morph .mk{
  position:relative;z-index:1;
  font-family:var(--cond);font-weight:700;font-stretch:112%;
  font-size:clamp(24px,3.4vw,52px);letter-spacing:-.03em;
  color:var(--m-fg,#15507E);opacity:0;
  transition:opacity .26s var(--e-out);
  text-align:center;padding:0 8vw;text-wrap:balance;
}
/* aşağıdan qalxıb ekranı örtür */
#morph.on{
  visibility:visible;
  transform:translate3d(0,0,0);
  transition:transform .38s cubic-bezier(.6,.02,.3,1);
}
#morph.on .mk{opacity:1;transition-delay:.14s}
/* eyni istiqamətdə davam edib yuxarı çıxır — yeni səhifə üzə çıxır */
#morph.on.open{
  transform:translate3d(0,-100%,0);
  transition:transform .6s cubic-bezier(.3,.02,.2,1);
}
#morph.on.open .mk{opacity:0;transition-delay:0s}

@media(prefers-reduced-motion:reduce){ #morph{display:none} }

/* ---------- viktorina sualları — redaktor ---------- */
.qcard{border-left-width:5px}
.qcard .edhd{gap:8px}
.qmove{display:flex;gap:4px;margin-left:auto}
.qmove .tdel[disabled]{opacity:.25;pointer-events:none}
.qimg{display:grid;grid-template-columns:150px 1fr;gap:14px;margin-top:12px;align-items:start}
.qprev{aspect-ratio:16/10;border-radius:var(--r-s);border:1.5px dashed var(--edge-2);
  background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.qprev span{font:500 12px/1.3 var(--sans);color:var(--ink-3);text-align:center;padding:8px}
.qprev.has{border-style:solid;border-color:var(--edge)}
.qprev img{width:100%;height:100%;object-fit:cover;display:block}
.upl{position:relative;cursor:pointer}
.upst{font:500 12px/1 var(--mono);color:var(--ink-3);display:inline-flex;align-items:center;gap:7px}
.qans{display:grid;gap:8px;margin-top:12px}
.qa{display:flex;align-items:center;gap:10px}
.qa input[type=radio]{width:20px;height:20px;accent-color:var(--c);flex:none;cursor:pointer}
.qshape{width:32px;height:32px;border-radius:9px;background:var(--c);display:grid;place-items:center;flex:none}
.qshape .qz-shape{width:15px;height:15px}
.qa .inp{flex:1}
@media(max-width:620px){ .qimg{grid-template-columns:1fr} .qprev{max-width:220px} }

/* ---------- şəkil kəsmə (Guess Who) ---------- */
.qprev.cropping{position:relative;aspect-ratio:auto;max-height:280px;background:#0B1D2E}
.qprev.cropping img{width:100%;height:auto;max-height:280px;object-fit:contain;opacity:.45;
  user-select:none;-webkit-user-drag:none}
.cropbox{position:absolute;border:2px solid #fff;border-radius:4px;cursor:move;
  box-shadow:0 0 0 9999px rgba(8,20,32,.5);touch-action:none}
.cropbox .ch{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--brand);cursor:nwse-resize;touch-action:none}
.crophint{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2);
  background:var(--surface-2);border-radius:var(--r-s);padding:9px 12px}

/* ekranda: cavab açılanda tam şəkil */
.qs-img.full{box-shadow:var(--sh-2);background:var(--surface-2)}
@keyframes revealImg{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.qs-img.opening{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 35%,transparent),var(--sh-3)}
.qs-imgtag{position:absolute;left:14px;top:14px;z-index:2;
  font:600 11px/1 var(--mono);font-stretch:88%;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--brand);padding:7px 12px;border-radius:100px}

/* ---------- yüklənmə ekranı (eyni örtük, ilk kadrdan) ---------- */
#morph.boot{
  visibility:visible;
  transform:translate3d(0,0,0);
  /* ad və rəng tədbir gələndə hamar dəyişsin */
  transition:background-color .5s var(--e-out);
}
#morph.boot .mk{opacity:1;transition:opacity .45s var(--e-out),color .5s var(--e-out)}
#morph.boot.open{transition:transform .6s cubic-bezier(.3,.02,.2,1)}
.bdots{position:absolute;bottom:14vh;display:flex;gap:9px;z-index:1}
.bdots i{width:8px;height:8px;border-radius:50%;background:var(--m-fg,#15507E);opacity:.25;
  animation:bdot 1.15s var(--e-out) infinite}
.bdots i:nth-child(2){animation-delay:.16s}
.bdots i:nth-child(3){animation-delay:.32s}
@keyframes bdot{0%,70%,100%{opacity:.22;transform:translateY(0)}35%{opacity:.9;transform:translateY(-6px)}}
#morph.open .bdots{opacity:0;transition:opacity .2s}
@media(prefers-reduced-motion:reduce){ #morph.boot{display:none} }

/* ============================================================
   Etiketlər monospace-dən çıxarılır.
   Mono yalnız MƏLUMAT üçün qalır: qeyd nömrələri, saatlar,
   klaviatura düymələri, ünvanlar. Adlar və başlıqlar üçün
   Archivo-nun dar variantı işlədilir — daha səliqəli oxunur.
   ============================================================ */
.eyebrow,
.seyebrow,
.tag,
.meta dt,
.steps i,
.savechip,
.stat u,
.recap h4,
.rbody section h5,
.card h5,
.fgrid h5,
.syncol .cnt,
.syncol li b,
.gtally .lb,
.bignum span,
.kindtally span,
.joinlink .u,
.route .stop span,
.skind, .sgrp,
.pill,
.mini,
.bhd .bn,
.qs-no,
.dppl u,
.upst,
.ckey,
.gbox .kw span,
.tally span,
.editbar button,
.gbadge, .kbadge,
.screen .shd .sttl small,
.qz-me .qz-score,
.card .chd2 i,
.focus .forg{
  font-family:var(--cond);
  font-stretch:88%;
  font-weight:600;
}

/* mono-nun geniş hərf aralığı Archivo üçün çox olur — yığılır */
.eyebrow{letter-spacing:.11em}
.seyebrow{letter-spacing:.12em}
.tag,.meta dt,.stat u,.recap h4,.rbody section h5,.card h5,.fgrid h5,
.syncol .cnt,.syncol li b,.gtally .lb,.joinlink .u,.dppl u,.kindtally span{letter-spacing:.1em}
.route .stop span,.steps i,.qs-no{letter-spacing:.08em}
.pill,.mini,.savechip,.bhd .bn,.skind,.sgrp{letter-spacing:.06em}
.gbox .kw span,.tally span,.gbadge,.kbadge{letter-spacing:.04em}
.editbar button{letter-spacing:.05em}
.card .chd2 i,.focus .forg{letter-spacing:.07em}
.screen .shd .sttl small{letter-spacing:.11em}
.qz-me .qz-score{letter-spacing:0;font-weight:700}
.bignum span{letter-spacing:.09em}

/* altlıq: böyük hərflər və mono əvəzinə sadə, oxunaqlı yazı */
.foot{
  font-family:var(--cond);
  font-stretch:92%;
  font-weight:500;
  font-size:13px;
  letter-spacing:0;
  text-transform:none;
}
.foot button{font-weight:600}

/* ekranın alt zolağı da eyni cür — yalnız <kbd> mono qalır */
.sfoot{
  font-family:var(--cond);
  font-stretch:88%;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:none;
  font-size:12.5px;
}
.sfoot kbd{font-family:var(--mono);font-size:11px;letter-spacing:.02em}

/* ============================================================
   Jeopardy
   ============================================================ */
.jz{flex:1;min-height:0;display:grid;grid-template-columns:1fr 300px;gap:min(2.4vw,28px);
  padding:min(3.4vh,26px) min(3vw,34px)}
.jzboard{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:min(1.2vw,14px);min-height:0}
.jzcol{display:grid;grid-template-rows:auto repeat(5,minmax(0,1fr));gap:min(1vh,10px);min-height:0}
.jzcat{background:var(--brand);color:#fff;border-radius:var(--r-s);display:grid;place-items:center;
  text-align:center;padding:min(1.6vh,14px) 10px;font-stretch:112%;font-weight:700;
  font-size:clamp(13px,1.3vw,20px);line-height:1.15;letter-spacing:-.01em}
.jztile{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r-s);
  font-stretch:112%;font-weight:700;font-size:clamp(20px,2.6vw,42px);color:var(--brand);
  letter-spacing:-.03em;box-shadow:var(--sh-1);
  transition:transform .16s var(--e-spring),background .2s,color .2s,box-shadow .2s}
.jztile:hover:not(.used){background:var(--brand);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-2)}
.jztile:active:not(.used){transform:scale(.97)}
.jztile.used{background:var(--surface-3);border-style:dashed;color:transparent;box-shadow:none;pointer-events:none}
.jzside{display:flex;flex-direction:column;gap:min(2vh,18px);min-height:0;overflow:hidden}
.joinlink.small{padding:14px;gap:14px}
.joinlink.small .qr{width:88px;height:88px}
.joinlink.small .a{font-size:11.5px}

.jz.clue{grid-template-columns:1fr;justify-items:center;align-content:center;text-align:center;
  padding:min(5vh,50px) min(6vw,80px)}
.jzhd{display:flex;align-items:center;gap:min(2vw,22px);margin-bottom:min(3.4vh,28px)}
.jzcatname{font-stretch:88%;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-size:clamp(12px,1.2vw,17px)}
.jzval{font-stretch:112%;font-weight:700;font-size:clamp(26px,3vw,48px);color:var(--brand);letter-spacing:-.03em}
.jzclue{font-size:clamp(24px,3.4vw,54px);line-height:1.22;font-stretch:104%;font-weight:600;
  color:var(--ink);margin:0;max-width:22ch;letter-spacing:-.02em}
.jzans{margin:min(4vh,34px) 0 0;font-size:clamp(22px,3vw,46px);font-stretch:112%;font-weight:700;
  color:var(--ok);letter-spacing:-.02em;animation:revealImg .45s var(--e-out) both}
.jzbuzzed{margin-top:min(4vh,32px);min-height:64px;display:grid;place-items:center}
.jzwho{font-stretch:112%;font-weight:700;font-size:clamp(22px,2.6vw,40px);color:#fff;background:var(--c);
  padding:12px 28px;border-radius:100px;animation:pop .4s var(--e-spring) both}
.jzhint{color:var(--ink-3);font-size:clamp(14px,1.4vw,20px)}
#s-mode .ok{border-color:#B5DFCB;background:#EFF9F4;color:#186A4B}
#s-mode .ok:hover{background:var(--ok);border-color:var(--ok);color:#fff}

/* telefonun düyməsi */
.jz-cat{text-align:center;font-stretch:88%;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:8px 0 18px;font-size:13px}
.jz-buzz{width:100%;aspect-ratio:1/.72;border-radius:26px;background:var(--brand);color:#fff;
  box-shadow:0 14px 0 -2px color-mix(in srgb,var(--brand) 62%,#000),var(--sh-3);
  font-stretch:112%;font-weight:700;font-size:clamp(38px,13vw,72px);letter-spacing:.04em;
  display:grid;place-items:center;transition:transform .1s,box-shadow .1s}
.jz-buzz:active{transform:translateY(9px);box-shadow:0 5px 0 -2px color-mix(in srgb,var(--brand) 62%,#000)}
.jz-buzz:disabled{opacity:.55}
@media(max-width:1000px){ .jz{grid-template-columns:1fr} .jzside{display:none} }

/* ---------- format seçimi ---------- */
.fmtpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fmtbtn{text-align:left;padding:13px 15px;border-radius:var(--r-s);border:1.5px solid var(--edge);
  background:var(--surface);transition:border-color .2s,background .2s,transform .16s var(--e-spring)}
.fmtbtn b{display:block;font-stretch:112%;font-weight:700;font-size:15px;color:var(--ink);margin-bottom:3px}
.fmtbtn span{display:block;font-size:12px;line-height:1.4;color:var(--ink-3)}
.fmtbtn:hover{border-color:var(--brand)}
.fmtbtn:active{transform:scale(.98)}
.fmtbtn.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,#fff);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.fmtbtn.on b{color:var(--brand)}

/* ---------- jeopardy redaktoru ---------- */
.jcard .edhd{gap:10px}
.jname{flex:1;font-stretch:112%;font-weight:700}
.jclues{display:grid;gap:10px;margin-top:12px}
.jclue{display:grid;grid-template-columns:84px 1fr 92px;gap:10px;align-items:start;
  background:var(--surface-2);border:1px solid var(--edge);border-radius:var(--r-s);padding:10px}
.jval{text-align:center;font-stretch:112%;font-weight:700;font-size:17px;color:var(--brand)}
.jfields{display:grid;gap:8px;min-width:0}
.jmeta{display:flex;gap:6px;align-items:center}
.jtime{text-align:center;padding:11px 6px}
@media(max-width:700px){ .jclue{grid-template-columns:1fr;gap:8px} .jmeta{justify-content:flex-end} }

/* aparıcı düyməsi: oyun başlamağa hazır deyilsə */
#s-mode .qz-main.blocked{background:var(--surface-2);border-color:var(--edge-2);color:var(--g1);
  font-size:13px;cursor:not-allowed}
#s-mode .qz-main.blocked:hover{background:var(--surface-2);color:var(--g1)}

/* ---------- Jeopardy: komanda oyunu ---------- */
.jzturn{background:var(--surface);border:1px solid var(--edge);border-left:6px solid var(--c);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh-1)}
.jzturn .u{display:block;font-stretch:88%;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-size:10.5px;margin-bottom:6px}
.jzturn b{font-stretch:112%;font-weight:700;font-size:clamp(17px,1.7vw,26px);color:var(--c)}
.qs-rows li.now{box-shadow:0 0 0 2px var(--c)}
.jztile.miss{background:color-mix(in srgb,var(--g1) 16%,#fff);border-color:var(--g1);
  border-style:solid;color:transparent;position:relative}
.jztile.miss::after{content:"";position:absolute;left:22%;right:22%;top:calc(50% - 1.5px);height:3px;
  background:var(--g1);border-radius:2px;transform:rotate(-12deg)}
.jzteam{margin-left:auto;font-stretch:112%;font-weight:700;font-size:clamp(15px,1.5vw,24px);
  color:#fff;background:var(--c);padding:8px 18px;border-radius:100px}
.jz.clue.good{background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 9%,transparent),transparent 40%)}
.jz.clue.bad{background:linear-gradient(180deg,color-mix(in srgb,var(--g1) 9%,transparent),transparent 40%)}
.jzverdict{margin:min(2vh,16px) 0 0;font-stretch:112%;font-weight:700;
  font-size:clamp(20px,2.4vw,38px);letter-spacing:-.02em}
.jz.clue.good .jzverdict{color:var(--ok)} .jz.clue.bad .jzverdict{color:var(--g1)}

/* çarx */
.wheelbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(3vh,26px)}
.wheelbox h2{font-stretch:112%;font-weight:700;font-size:clamp(26px,3.4vw,52px);margin:0;color:var(--ink)}
.wheel{position:relative;width:min(52vh,440px);aspect-ratio:1}
.wheel svg{width:100%;height:100%;transform:rotate(0deg);filter:drop-shadow(0 18px 40px rgba(23,51,76,.28))}
.wheel svg.go{transform:rotate(var(--spin));transition:transform 4s cubic-bezier(.17,.67,.16,1)}
.wpin{position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:0;height:0;z-index:2;
  border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid var(--ink)}
.wname{margin:0;min-height:1.4em;font-stretch:112%;font-weight:700;
  font-size:clamp(22px,3vw,44px);color:var(--brand);opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--e-out),transform .45s var(--e-out)}
.wname.on{opacity:1;transform:none}

/* komandanın telefonundakı mini lövhə */
.jz-turn{text-align:center;font-stretch:112%;font-weight:700;font-size:18px;color:var(--brand);margin:6px 0 14px}
.jz-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.jz-mcol{display:grid;gap:6px}
.jz-mcat{font-size:11px;font-weight:600;text-align:center;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.05em;min-height:2.4em;display:grid;place-items:center;line-height:1.2}
.jz-mtile{padding:14px 6px;border-radius:10px;background:var(--brand);color:#fff;
  font-stretch:112%;font-weight:700;font-size:17px;transition:transform .14s var(--e-spring)}
.jz-mtile:active:not(:disabled){transform:scale(.94)}
.jz-mtile:disabled{background:var(--surface-3);color:var(--ink-3)}
.qz-wait.good{border-color:var(--ok);box-shadow:0 0 0 3px rgba(30,122,87,.16),var(--sh-2)}
.qz-wait.bad{border-color:var(--g1);box-shadow:0 0 0 3px rgba(194,69,60,.14),var(--sh-2)}

/* ============================================================
   Mahnı Jeopardy
   ============================================================ */

/* ------------------------------------------------ redaktor: mahnı seçimi */
.ic-play{display:inline-block;width:0;height:0;flex:none;
  border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

.jstoggle{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;margin:6px 0 4px;
  background:var(--surface-2);border:1px solid var(--edge);border-radius:var(--r-s);cursor:pointer;
  font-size:14px;line-height:1.45;color:var(--ink-2)}
.jstoggle input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--brand)}
.jstoggle b{color:var(--ink)}

.jcard.song .jclue{grid-template-columns:84px 1fr 92px}
.jsong{margin-top:10px;padding:12px;background:var(--surface-2);
  border:1px solid var(--edge);border-radius:var(--r-s)}

.jstrim{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.jstrim.empty{gap:12px}
.jsplay{display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:9px 14px;border-radius:99px;background:var(--brand);color:#fff;
  font:600 13px/1 var(--sans,inherit);box-shadow:var(--sh-1);transition:transform .15s var(--e-spring)}
.jsplay:active{transform:scale(.96)}
.jsbar{flex:1 1 220px;min-width:180px}
.jscrub{width:100%;accent-color:var(--brand);cursor:pointer}
.jstime{display:flex;justify-content:space-between;gap:10px;margin-top:2px;
  font:500 11px/1.3 var(--mono);color:var(--ink-3)}
.jsnum{display:flex;flex-direction:column;gap:4px;flex:none;
  font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.jsnum .inp{width:96px;padding:8px 9px}
.jshint{margin:9px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}

/* ------------------------------------------------ redaktor: variantlar */
.jopts{margin-top:12px;display:grid;gap:7px}
.joptshd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.jopt{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:var(--r-s);
  border:1px solid var(--edge);background:var(--surface);cursor:pointer;transition:border-color .18s,background .18s}
.jopt.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 7%,var(--surface))}
.jopt input[type=radio]{flex:none;width:16px;height:16px;accent-color:var(--c)}
.jopt .qshape{flex:none;display:grid;place-items:center;width:26px;height:26px;
  border-radius:6px;background:var(--c)}
.jopt .inp{flex:1;border:0;background:transparent;padding:7px 2px}
.jopt .inp:focus{box-shadow:none}

/* ------------------------------------------------ ekran: səslənən mahnı */
.jz.clue.song{align-content:center}
.jzsong{width:min(760px,80vw);margin:0 auto min(3vh,26px)}
.jz-songcard{display:grid;gap:min(2.4vh,20px);justify-items:center}
.jz-songcard .eq{display:flex;align-items:flex-end;gap:min(1vw,10px);height:min(16vh,130px)}
.jz-songcard .eq i{width:min(1.5vw,16px);border-radius:99px;background:var(--brand);opacity:.32;
  height:22%;transform-origin:bottom}
.jz-songcard.on .eq i{animation:eqb 1.05s ease-in-out infinite;opacity:1}
.jz-songcard.on .eq i:nth-child(1){animation-delay:-.9s} .jz-songcard.on .eq i:nth-child(2){animation-delay:-.15s}
.jz-songcard.on .eq i:nth-child(3){animation-delay:-.55s} .jz-songcard.on .eq i:nth-child(4){animation-delay:-.3s}
.jz-songcard.on .eq i:nth-child(5){animation-delay:-.75s} .jz-songcard.on .eq i:nth-child(6){animation-delay:-.05s}
.jz-songcard.on .eq i:nth-child(7){animation-delay:-.45s} .jz-songcard.on .eq i:nth-child(8){animation-delay:-.65s}
.jz-songcard.on .eq i:nth-child(9){animation-delay:-.2s}
@keyframes eqb{0%,100%{height:20%}50%{height:100%}}
@media(prefers-reduced-motion:reduce){ .jz-songcard.on .eq i{animation:none;height:60%} }

.jzwave{width:min(560px,70vw);height:7px;border-radius:99px;background:var(--edge-2);overflow:hidden}
.jzwave span{display:block;height:100%;width:0;border-radius:99px;background:var(--brand);
  transition:width .12s linear}
.jz-sndrow{display:flex;align-items:center;gap:14px;min-height:2px}

/* telefondakı kiçik variant */
.jz-songcard.mini{gap:12px;margin:16px 0 18px}
.jz-songcard.mini .eq{height:46px;gap:5px}
.jz-songcard.mini .eq i{width:6px}
.jz-songcard.mini .jzwave{width:min(240px,64vw);height:5px}
.jz-songcard.mini .jz-mute{font-size:12.5px}

.jz.clue.song .jzclue{font-size:clamp(20px,2.4vw,36px);color:var(--ink-2);font-weight:600}
.jzopts{width:min(1100px,88vw);margin:min(3vh,26px) auto 0}
.jzopts .qs-tile{min-height:clamp(60px,8vh,104px)}
.qs-tile.wrong{outline:5px solid var(--g1);outline-offset:4px;opacity:.85;filter:none}
.jzopts.two{grid-template-columns:1fr}

/* ------------------------------------------------ telefon */
.jz-note{margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--ink-3)}

.qz-leave{margin-left:10px;flex:none;font:600 11.5px/1 var(--mono);letter-spacing:.04em;
  color:var(--ink-3);background:transparent;border:1px solid var(--edge);border-radius:99px;
  padding:6px 10px;cursor:pointer;transition:color .18s,border-color .18s}
.qz-leave:hover{color:var(--ink);border-color:var(--ink-3)}