/* ============================================================
   Intro redesign: minimalist, premium, academic.
   Warm ivory, deep navy, restrained gold. Loaded after every other
   stylesheet; scoped to #intro (plus the shared language menu), so
   nothing inside the app changes. Markup and handlers are untouched:
   login / registration work exactly as before.
   ============================================================ */
:root{
  --iv-bg:#FBF7EE; --iv-bg2:#F6EFE0;
  --iv-navy:#0E1F3A; --iv-navy2:#16305A;
  --iv-gold:#B8893B; --iv-gold2:#D6B26A; --iv-gold-soft:rgba(214,178,106,.45);
  --iv-ink:#1B2433; --iv-muted:#5A6474;
}

/* ---------- canvas ---------- */
html body #intro{
  background:
    radial-gradient(1100px 620px at 12% 8%, rgba(214,178,106,.13), transparent 60%),
    radial-gradient(900px 560px at 92% 92%, rgba(214,178,106,.14), transparent 62%),
    linear-gradient(180deg,var(--iv-bg) 0%,var(--iv-bg2) 100%) !important;
  color:var(--iv-ink);
  padding:0 !important;   /* the inner block carries the spacing: no scroll on one screen */
}
/* faint silk lines -- the only decoration */
html body #intro::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23D6B26A' stroke-width='1.1'%3E%3Cpath d='M-50 180 C 300 60, 520 360, 900 220 S 1450 40, 1700 160' opacity='.35'/%3E%3Cpath d='M-50 230 C 320 120, 540 410, 920 270 S 1460 90, 1700 210' opacity='.22'/%3E%3Cpath d='M-80 760 C 260 640, 600 900, 1000 760 S 1500 620, 1700 720' opacity='.3'/%3E%3Cpath d='M-80 810 C 280 700, 620 950, 1020 810 S 1510 670, 1700 770' opacity='.18'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}
html body #intro .bgimg,
html body #intro .bgshade,
html body #intro .aura,
html body #intro .grain,
html body #intro .quote-orb{display:none !important}
/* keep only a few tiny gold motes */
html body #intro #sparkles{z-index:0;position:absolute;inset:0;overflow:hidden;pointer-events:none}
html body #intro .sparkle{--sc:#D6B26A;background:#D6B26A !important;box-shadow:0 0 6px rgba(214,178,106,.55) !important;opacity:.45 !important;width:3px !important;height:3px !important}
html body #intro .sparkle:nth-child(n+15){display:none}

/* ---------- layout: everything on one screen ---------- */
html body #intro .intro-inner{
  zoom:1 !important;transform:none !important;
  position:relative;z-index:1;
  width:100%;max-width:820px;margin:0 auto;
  min-height:100vh;min-height:100dvh;min-height:calc(100dvh / var(--zf,1));   /* the site zooms the page on small phones */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(10px,1.9vh,18px);
  padding:clamp(64px,9vh,88px) 20px calc(clamp(16px,3vh,28px) + env(safe-area-inset-bottom));
  box-sizing:border-box;text-align:center;
}
html body #intro .rlogo{
  width:clamp(104px,15vh,150px) !important;height:clamp(104px,15vh,150px) !important;
  margin:0 0 clamp(2px,1vh,10px) !important;padding:0 !important;border:0 !important;
  border-radius:50% !important;background:transparent !important;
  box-shadow:0 18px 40px -22px rgba(14,31,58,.45),0 0 0 1px rgba(214,178,106,.35) !important;
}
html body #intro .rlogo img{width:100%;height:100%;object-fit:cover;border-radius:50%}

html body #intro h1{
  margin:0 !important;
  font-family:'Playfair Display',Georgia,'Times New Roman',serif !important;
  font-weight:700 !important;
  font-size:clamp(34px,5.6vw,64px) !important;line-height:1.08 !important;letter-spacing:-.5px !important;
  color:var(--iv-navy) !important;-webkit-text-fill-color:var(--iv-navy) !important;
  background:none !important;text-shadow:none !important;max-width:22ch;
}
html body #intro h1 .t2{
  background:linear-gradient(180deg,#C99A48 0%,#B07F31 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
html body #intro .lead{
  margin:0 !important;max-width:560px;
  font:400 clamp(15px,1.55vw,19px)/1.5 Manrope,system-ui,-apple-system,sans-serif !important;
  color:var(--iv-muted) !important;text-shadow:none !important;
}

/* ---------- the two actions ---------- */
html body #intro .intro-actions{
  display:grid !important;grid-template-columns:1fr 1fr;gap:16px !important;
  width:100%;max-width:620px !important;margin:clamp(8px,2.4vh,22px) auto 0 !important;
}
html body #intro .intro-actions .start{
  width:100% !important;min-height:58px;margin:0 !important;
  display:flex !important;align-items:center;gap:12px;padding:0 18px !important;
  border-radius:12px !important;cursor:pointer;
  font:700 16.5px/1 Manrope,system-ui,-apple-system,sans-serif !important;letter-spacing:.1px;
  transition:transform .18s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease !important;
  animation:none !important;
}
html body #intro .intro-actions .start:not(.reg){
  background:linear-gradient(180deg,var(--iv-navy2) 0%,var(--iv-navy) 100%) !important;
  color:#fff !important;border:1px solid rgba(214,178,106,.55) !important;
  box-shadow:0 14px 28px -16px rgba(14,31,58,.65),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html body #intro .intro-actions .start.reg{
  background:#FFFDF8 !important;color:var(--iv-navy) !important;
  border:1.5px solid var(--iv-gold2) !important;
  box-shadow:0 12px 26px -20px rgba(14,31,58,.4) !important;
}
html body #intro .intro-actions .start .btn-ic,
html body #intro .intro-actions .start .btn-arrow{color:var(--iv-gold2) !important;background:none !important;box-shadow:none !important;display:flex;align-items:center}
html body #intro .intro-actions .start.reg .btn-ic,
html body #intro .intro-actions .start.reg .btn-arrow{color:var(--iv-gold) !important}
html body #intro .intro-actions .start .btn-div{width:1px;align-self:stretch;margin:14px 2px;background:rgba(214,178,106,.45) !important}
html body #intro .intro-actions .start .btn-label{flex:1;text-align:center;color:inherit !important}
html body #intro .intro-actions .start:hover{transform:translateY(-1px)}
html body #intro .intro-actions .start:not(.reg):hover{box-shadow:0 18px 32px -16px rgba(14,31,58,.75),inset 0 1px 0 rgba(255,255,255,.1) !important}
html body #intro .intro-actions .start.reg:hover{border-color:var(--iv-gold) !important;background:#fff !important}
html body #intro .intro-actions .start:active{transform:translateY(0)}
html body #intro .intro-actions .start:focus-visible{outline:3px solid rgba(214,178,106,.7) !important;outline-offset:3px}
html body #intro .intro-actions .start .btn-arrow{transition:transform .2s ease}
html body #intro .intro-actions .start:hover .btn-arrow{transform:translateX(3px)}

/* supervisors: small and discreet */
html body #intro .author--foot{
  margin:clamp(14px,3.5vh,40px) 0 0 !important;
  font:400 13px/1.5 Manrope,system-ui,sans-serif !important;color:#6B7380 !important;text-shadow:none !important;
}
html body #intro .author--foot b{color:var(--iv-navy) !important;font-weight:600 !important}

/* top corner controls in the same palette */
html body #intro .pwa-dd-btn,
html body #intro .lang-dd-btn{
  background:#FFFDF8 !important;color:var(--iv-navy) !important;
  border:1px solid rgba(214,178,106,.55) !important;box-shadow:0 8px 20px -16px rgba(14,31,58,.45) !important;
}

/* gentle entrance */
@keyframes ivUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html body #intro .intro-inner>*{animation:ivUp .7s cubic-bezier(.2,.7,.2,1) both}
html body #intro .intro-inner>*:nth-child(2){animation-delay:.06s}
html body #intro .intro-inner>*:nth-child(3){animation-delay:.12s}
html body #intro .intro-inner>.intro-actions{animation-delay:.18s}
html body #intro .intro-inner>.author--foot{animation-delay:.26s}

/* ---------- mobile: stacked actions ---------- */
@media (max-width:640px){
  html body #intro .intro-actions{grid-template-columns:1fr;gap:12px !important;max-width:420px !important}
  html body #intro .intro-actions .start{min-height:54px}
  html body #intro h1{font-size:clamp(30px,9vw,40px) !important}
  html body #intro .intro-inner{padding-top:clamp(70px,11vh,96px)}
}
@media (max-height:640px){
  html body #intro .rlogo{width:96px !important;height:96px !important}
  html body #intro .author--foot{margin-top:12px !important}
}
@media (prefers-reduced-motion:reduce){
  html body #intro .intro-inner>*{animation:none}
  html body #intro .intro-actions .start{transition:none !important}
}

/* ---------- language menu: flag + short code (everywhere) ---------- */
.lang-flag{display:inline-flex;align-items:center;justify-content:center;width:22px;height:15px;flex:none;font-size:0 !important;line-height:0}
.lang-flag svg{width:22px;height:15px;border-radius:3px;box-shadow:0 0 0 .5px rgba(0,0,0,.18);display:block}
.lang-dd-btn{display:inline-flex !important;align-items:center;gap:8px}
.lang-dd-btn .lang-cur{font-weight:800;letter-spacing:.6px;font-size:13px}
.lang-opt{display:flex !important;align-items:center;gap:10px}
.lang-opt .lang-abbr{font-weight:800;font-size:13px;letter-spacing:.6px;min-width:24px;color:inherit}
.lang-opt .lang-name{font-size:12.5px;opacity:.62;font-weight:600}
.lang-opt .lang-check{margin-left:auto}

/* music toggle in the intro palette */
#tlMusicBtn{background:rgba(14,31,58,.88) !important;border-color:rgba(214,178,106,.6) !important}

/* ---------- login / registration windows in the same palette ---------- */
.auth-ov .ah-ic{background:linear-gradient(180deg,#16305A,#0E1F3A) !important;color:#D6B26A !important;box-shadow:0 10px 22px -14px rgba(14,31,58,.6) !important}
.auth-ov .ah-ic svg{stroke:#D6B26A !important}
.auth-ov a,#ai_r_goLogin,#ai_l_goReg{color:#B8893B !important}
.auth-ov .auth-btn{border:1px solid rgba(214,178,106,.55) !important;box-shadow:0 14px 28px -16px rgba(14,31,58,.6) !important}
.auth-ov .field input:focus,.auth-ov .field textarea:focus{border-color:#D6B26A !important;box-shadow:0 0 0 3px rgba(214,178,106,.22) !important}
.field.err textarea{border-color:#ef4444 !important;background:#fef2f2 !important}

/* welcome pop-up after sign-in: same navy + gold */
#authOk .ring{background:linear-gradient(180deg,#16305A,#0E1F3A) !important;box-shadow:0 0 0 10px rgba(214,178,106,.18),0 14px 30px -14px rgba(14,31,58,.6) !important}
#authOk .wk-go{background:linear-gradient(180deg,#16305A,#0E1F3A) !important;color:#fff !important;border:1px solid rgba(214,178,106,.55) !important;box-shadow:0 14px 28px -16px rgba(14,31,58,.6) !important}

/* night mode: a chosen answer stays readable (light text was on a light green tile) */
body.tl-dark .tm-opt.sel, body.tl-dark .bf-opt.sel, body.tl-dark .bs-opt.sel, body.tl-dark .ag-opt.sel, body.tl-dark [class*="-opt"].sel{
  background:#14532d !important;border-color:#22c55e !important;color:#ecfdf5 !important;-webkit-text-fill-color:#ecfdf5 !important}
body.tl-dark .tm-opt.sel *, body.tl-dark [class*="-opt"].sel *{color:#ecfdf5 !important;-webkit-text-fill-color:#ecfdf5 !important}
/* inside the app the right corner holds zoom / scroll-up buttons */
#tlMusicBtn.in-app{left:max(16px,env(safe-area-inset-left));right:auto}
.mbs-card{margin:16px 0;padding:16px 18px;border-radius:14px;border:1px solid rgba(214,178,106,.45);background:#FFFDF8;color:#0E1F3A;display:flex;align-items:center;gap:14px}
.mbs-card b{display:block;font-size:15px}.mbs-card span{font-size:13px;opacity:.7}
.mbs-sw{margin-left:auto;position:relative;width:48px;height:28px;flex:none}
.mbs-sw input{opacity:0;width:0;height:0}
.mbs-sw i{position:absolute;inset:0;border-radius:99px;background:#cbd5e1;transition:.2s;cursor:pointer}
.mbs-sw i:before{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.mbs-sw input:checked+i{background:#16305A}.mbs-sw input:checked+i:before{transform:translateX(20px);background:#D6B26A}
body.tl-dark .mbs-card{background:#16233A;color:#F3EEE3}

/* booking: choose the specialist */
#apOv .ap-spec{margin:10px 0 12px}
#apOv .ap-spec label{display:block;font-weight:800;font-size:13px;margin-bottom:6px}
#apOv .ap-spec-opts{display:flex;gap:8px;flex-wrap:wrap}
#apOv .ap-spec-b{flex:1;min-width:150px;border:1.5px solid #E6DED3;background:#fff;color:#13202E;border-radius:12px;padding:10px 12px;font:700 13.5px Manrope,system-ui,sans-serif;cursor:pointer}
#apOv .ap-spec-b.on{background:#16305A;border-color:#16305A;color:#fff;box-shadow:0 0 0 3px rgba(214,178,106,.35)}

/* admin: temperament detail -- label | bar | value, one line each */
#statsDashSec .pr-sec .stat-row,
details.pr-sec .stat-row{display:grid !important;grid-template-columns:minmax(96px,30%) 1fr auto;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed rgba(148,163,184,.25)}
details.pr-sec .stat-row:last-child{border-bottom:0}
details.pr-sec .stat-row .nm{font-size:13px;font-weight:700;line-height:1.3}
details.pr-sec .stat-row .bar{display:block;height:10px;border-radius:99px;background:rgba(148,163,184,.22);overflow:hidden;min-width:60px}
details.pr-sec .stat-row .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#34d399,#059669)}
details.pr-sec .stat-row .vv{font-size:13px;font-weight:800;white-space:nowrap;text-align:right;min-width:86px;width:auto !important}
details.pr-sec .stat-row > .vv:only-child,
details.pr-sec .stat-row[style*="margin-bottom"] .vv,
details.pr-sec .stat-row[style*="margin-top"] .vv{text-align:left;grid-column:2 / span 2}
details.pr-sec .stat-row[style*="margin-top"] .nm,
details.pr-sec .stat-row[style*="margin-bottom"] .nm{grid-column:1}
@media(max-width:480px){details.pr-sec .stat-row{grid-template-columns:1fr;gap:4px}details.pr-sec .stat-row .vv{text-align:left}details.pr-sec .stat-row > .vv{grid-column:1}}
/* the group-average label is long: give the label column room, keep the value on one line */
details.pr-sec .stat-row[style*="margin-top"] .nm{grid-column:1 / span 1;white-space:normal}
details.pr-sec .stat-row[style*="margin-top"]{grid-template-columns:minmax(150px,42%) 1fr}
details.pr-sec .stat-row[style*="margin-top"] .vv{grid-column:2;text-align:right}
details.pr-sec .stat-row:not([style*="margin"]) .nm{white-space:normal}
/* final: every temperament row = [label 40%][bar][value], the two "summary" rows put the value under the label */
details.pr-sec .stat-row{grid-template-columns:minmax(120px,40%) minmax(60px,1fr) auto !important}
details.pr-sec .stat-row[style*="margin-bottom"],
details.pr-sec .stat-row[style*="margin-top"]{grid-template-columns:minmax(120px,40%) minmax(0,1fr) !important}
details.pr-sec .stat-row[style*="margin-bottom"] .vv,
details.pr-sec .stat-row[style*="margin-top"] .vv{grid-column:2;justify-self:end;text-align:right}
details.pr-sec .stat-row:not([style]) .vv{min-width:86px}

/* admin panel: sections stay hidden until the first cloud load is rendered (no jump on entry) */
#adminOv.adm-loading #adminShell > :not(.admin-bar){visibility:hidden}
#adminOv.adm-loading #adminShell{position:relative}
#adminOv.adm-loading #adminShell::after{content:"Yuklanmoqda…";position:absolute;left:50%;top:140px;transform:translateX(-50%);
  padding:10px 18px 10px 40px;border-radius:999px;font:700 14px Manrope,system-ui,sans-serif;color:#CBD5E1;background:rgba(255,255,255,.06);
  border:1px solid rgba(148,163,184,.3);
  background-image:radial-gradient(circle at 20px 50%,#D6B26A 0 5px,transparent 6px);animation:admPulse 1s ease-in-out infinite}
@keyframes admPulse{50%{opacity:.55}}