/* ---- s02.css ---- */

.pmc-ov{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(26,20,16,.62);backdrop-filter:blur(6px);animation:fade .25s}
.pmc-ov.show{display:flex}
.pmc-card{background:#fff;border-radius:24px;width:100%;max-width:420px;padding:30px 26px 24px;text-align:center;box-shadow:0 40px 80px -30px rgba(26,20,16,.6);animation:rise .45s cubic-bezier(.22,1,.36,1)}
.pmc-ic{width:74px;height:74px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--amber),var(--ranch));box-shadow:0 16px 30px -14px rgba(245,52,10,.55)}
.pmc-card h3{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:9px}
.pmc-card p{font-size:14.5px;line-height:1.55;color:var(--slate)}
.pmc-count{margin:18px auto 2px;max-width:264px}
.pmc-num{font-size:34px;font-weight:800;color:var(--ranch);line-height:1}
.pmc-num span{font-size:14px;font-weight:700;color:var(--muted);margin-left:5px}
.pmc-bar{height:7px;border-radius:999px;background:#f4ebe5;overflow:hidden;margin-top:10px}
.pmc-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--amber),var(--ranch));transition:width 1s linear}
.pmc-row{display:flex;gap:11px;margin-top:22px}
.pmc-row button{flex:1;border:0;font:inherit;font-weight:800;font-size:15px;padding:14px 12px;border-radius:13px;cursor:pointer;transition:.2s;line-height:1.25}
.pmc-row button:hover{transform:translateY(-2px)}
.pmc-no{background:#f2ece6;color:#5b5048}
.pmc-yes{background:linear-gradient(135deg,#ef4444,#c81e1e);color:#fff;box-shadow:0 13px 24px -12px rgba(200,30,30,.6)}
.pmc-stay{background:linear-gradient(135deg,var(--green-l),var(--green-d));color:#fff;box-shadow:0 13px 24px -12px var(--green-glow)}
@media(max-width:480px){.pmc-row{flex-direction:column-reverse}}

/* ---- s03.css ---- */

/* A centred flex layer cannot be scrolled back to its own top: the overflow
   above the centre line is unreachable. Anchor every full-screen layer to the
   top and centre it with auto margins instead - it then scrolls normally as
   soon as the content is taller than the phone screen. */
#intro,.auth-ov,.overlay,.bio-ov,.pmc-ov,#csEditorHost{align-items:flex-start}
.auth-ov,.overlay,.pmc-ov,#csEditorHost{overflow-y:auto}
#intro,.auth-ov,.auth-ok,.overlay,.bio-ov,.pmc-ov,#csEditorHost,.admin-ov{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.intro-inner,.auth-card,.modal,.bio-card,.pmc-card,.cse-box,.admin-login-card{margin-top:auto;margin-bottom:auto}
.auth-ok{justify-content:safe center}

/* dvh follows the phone's shrinking address bar; dividing by the zoom factor
   keeps a full-height box full height at any zoom level */
@supports (height:100dvh){
  #app,#app.show,.main{min-height:100dvh}
  .sidebar{min-height:100dvh;height:100dvh}
  .auth-card{max-height:92dvh}
  .cse-box{max-height:92dvh}
  @media(max-width:820px){
    #app.show .sidebar{height:100dvh}
    .cse-box{max-height:94dvh}
  }
}
/* page zoom scales viewport units too, so a full-height box is divided back out
   (only where zoom is the real mechanism - the transform fallback must not) */
@supports ((height:100dvh) and (zoom:1)){
  #app,#app.show,.main{min-height:calc(100dvh / var(--zf))}
  .sidebar{min-height:calc(100dvh / var(--zf));height:calc(100dvh / var(--zf))}
  .auth-card{max-height:calc(92dvh / var(--zf))}
  .cse-box{max-height:calc(92dvh / var(--zf))}
  @media(max-width:820px){
    #app.show .sidebar{height:calc(100dvh / var(--zf))}
    .cse-box{max-height:calc(94dvh / var(--zf))}
  }
}
/* room for the on-screen home bar */
@media(max-width:820px){
  .content{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  .admin-shell{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .zoom-ctl{bottom:calc(14px + env(safe-area-inset-bottom))}
}
/* tighter frames so full-screen panels fit the phone width */
@media(max-width:620px){
  .auth-ov,.overlay,.bio-ov,.pmc-ov,#csEditorHost{padding:10px 8px calc(26px + env(safe-area-inset-bottom))}
  #intro{padding:16px 12px calc(22px + env(safe-area-inset-bottom))}
  /* on a phone the panel grows and the layer behind it scrolls - one scrollbar,
     not a nested one that traps the finger */
  .auth-card{max-height:none;overflow:visible}
  .bio-card{padding:20px 15px}
  .bio-hero{margin-bottom:16px}
  .bio-hero h2{font-size:20px}
  .bio-ava{width:78px;height:78px;font-size:28px}
  .bio-up{font-size:14px;padding:11px 16px}
  .bio-row{padding:12px 14px;font-size:14.5px}
  .bio-card .close{top:10px;right:10px;width:32px;height:32px;font-size:17px}
  .modal{padding:28px 18px;border-radius:22px}
  .pmc-card{padding:24px 18px 20px;border-radius:20px}
  .cse-box{border-radius:14px}
  /* the landing page already renders at 90% of its own accord - on a phone the
     page zoom does that job, so it must not shrink twice */
  .intro-inner{zoom:1}
}
@media(max-width:620px) and (max-height:640px){.intro-inner{zoom:.86}}

/* ---- s04.css ---- */

#logoBox{cursor:default;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#logoBox.tl-pulse{animation:tlPulse .34s ease}
@keyframes tlPulse{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
.tl-taps{display:flex;gap:6px;justify-content:center;margin:12px auto 0;height:9px;opacity:0;transition:opacity .22s}
.tl-taps.on{opacity:1}
.tl-taps i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.32)}
.tl-taps i.on{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.85)}

.tl-invite{max-width:610px;margin:0 auto 20px;padding:15px 18px;border-radius:16px;text-align:left;
  background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.08));border:1.5px solid rgba(255,255,255,.42);
  color:#fff;box-shadow:0 18px 38px -20px rgba(0,0,0,.72)}
.tl-invite .ti-h{display:flex;align-items:center;gap:9px;font-weight:800;font-size:14px;margin-bottom:4px;opacity:.95}
.tl-invite .ti-h svg{width:19px;height:19px;flex:none}
.tl-invite .ti-nm{font-weight:800;font-size:18px;line-height:1.3;margin:3px 0 5px}
.tl-invite .ti-note{font-size:12.5px;line-height:1.5;opacity:.88}

.tl-up{position:fixed;right:16px;bottom:74px;z-index:117;display:none;align-items:center;gap:8px;
  border:0;font:inherit;font-weight:800;font-size:13.5px;color:#fff;padding:11px 16px;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,var(--amber),var(--ranch));box-shadow:0 16px 32px -14px rgba(245,52,10,.75);transition:.2s}
.tl-up.on{display:inline-flex}
.tl-up:hover{transform:translateY(-2px)}
.tl-up:active{transform:scale(.97)}
.tl-up svg{width:16px;height:16px;flex:none}
@media(max-width:640px){.tl-up{right:10px;bottom:58px;font-size:12.5px;padding:10px 13px}.tl-up .tl-up-t{display:none}}

.tl-share,.tl-diag{background:#0e1b24;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;margin-bottom:18px;color:#cfe3ea}
.tl-share .th{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;color:#fff;margin-bottom:7px}
.tl-share .th svg{width:17px;height:17px;flex:none}
.tl-share .tn{font-size:11.5px;color:#8fa6af;line-height:1.55;margin-bottom:12px}
.tl-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.tl-row.first{border-top:0}
.tl-row .nm{flex:1 1 160px;min-width:0;font-size:13px;font-weight:800;color:#fff;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tl-row .nm .tag{font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:6px;background:rgba(34,197,94,.22);color:#7ee2a4;letter-spacing:.03em}
.tl-row input{flex:2 1 250px;min-width:0;background:#08131a;border:1px solid rgba(255,255,255,.16);border-radius:9px;color:#bcd3dc;font:inherit;font-size:11.5px;padding:8px 10px}
.tl-row button{border:0;font:inherit;font-weight:800;font-size:11.5px;padding:8px 12px;border-radius:9px;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--amber),var(--ranch));display:inline-flex;align-items:center;gap:5px;transition:.2s}
.tl-row button.ghost{background:rgba(255,255,255,.1);color:#cfe3ea}
.tl-row button:hover{transform:translateY(-1px)}
.tl-diag.bad{border-color:rgba(239,68,68,.55);background:#1d1013}
.tl-diag.warn{border-color:rgba(245,158,11,.5);background:#1c1710}
.tl-diag.ok{border-color:rgba(34,197,94,.42)}
.tl-diag .dh{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;color:#fff;margin-bottom:6px}
.tl-diag .dh svg{width:17px;height:17px;flex:none}
.tl-diag .dm{font-size:12.5px;line-height:1.55;color:#e3eef3}
.tl-diag .dk{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:11px;color:#8fa6af}
.tl-diag .dk b{color:#cfe3ea;font-weight:800}
.tl-diag .dfix{margin-top:10px;padding:9px 11px;border-radius:9px;background:rgba(255,255,255,.06);font-size:11.5px;line-height:1.55;color:#cfe3ea}
.tl-diag .dfix b{color:#fff;display:block;margin-bottom:3px}

/* ---- s05.css ---- */

.tl-share summary{list-style:none;cursor:pointer;user-select:none;margin:0}
.tl-share summary::-webkit-details-marker{display:none}
.tl-share .tl-caret{margin-left:auto;font-size:16px;color:#9fb0b6;transition:transform .18s ease}
.tl-share[open] .tl-caret{transform:rotate(180deg)}
.tl-share[open] summary{margin-bottom:7px}
.passport-dl{background:#0e1b24;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;margin:18px 0;color:#cfe3ea}
.passport-dl .pd-h{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;color:#fff;margin-bottom:7px}
.passport-dl .pd-h svg{width:18px;height:18px;flex:none}
.passport-dl .pd-note{font-size:11.5px;color:#8fa6af;line-height:1.5;margin-bottom:12px}
.passport-dl .pd-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.06);font-size:11.5px;color:#cfe3ea;margin-bottom:12px}
.passport-dl .pd-filter b{color:#fff}
.passport-dl .pd-actions{display:flex;gap:8px;flex-wrap:wrap}
.passport-dl .pd-actions button{border:0;font:inherit;font-weight:800;font-size:12px;padding:9px 13px;border-radius:9px;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--amber),var(--ranch));display:inline-flex;align-items:center;gap:6px;transition:.2s}
.passport-dl .pd-actions button.pdf{background:linear-gradient(135deg,#7c3aed,#4f46e5)}
.passport-dl .pd-actions button.excel{background:linear-gradient(135deg,#15803d,#166534)}
.passport-dl .pd-actions button:hover{transform:translateY(-1px)}
@media(max-width:560px){.passport-dl .pd-actions{flex-direction:column}.passport-dl .pd-actions button{justify-content:center}}

/* ---- s06.css ---- */

/* The filter controls should be visually unmistakable without competing with the data. */
.admin-filters{background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(34,197,94,.14));border:1px solid rgba(56,189,248,.55);box-shadow:0 14px 30px -20px rgba(14,165,233,.9),inset 0 1px 0 rgba(255,255,255,.08);position:relative}
.admin-filters:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:linear-gradient(#38bdf8,#22c55e)}
.admin-filters .fl,.admin-filters .fcount{position:relative}
.students-drop{margin:2px 0 16px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);overflow:hidden;box-shadow:0 16px 34px -24px rgba(0,0,0,.8)}
.students-drop-sum{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:15px 17px;color:#fff;font-size:14px;font-weight:800;user-select:none}
.students-drop-sum::-webkit-details-marker{display:none}
.students-drop-count{margin-left:auto;color:#9fb0b6;font-size:12px;font-weight:700}
.students-drop-caret{color:#70d9a0;font-size:17px;transition:transform .18s ease}
.students-drop[open] .students-drop-caret{transform:rotate(180deg)}
.students-drop-body{padding:0 0 2px}
.tl-avg{margin:0 0 18px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.045);overflow:hidden}
.tl-avg summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:14px 16px;color:#fff;font-size:13.5px;font-weight:800;user-select:none}
.tl-avg summary::-webkit-details-marker{display:none}
.tl-avg summary:before{content:"⌁";width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:rgba(56,189,248,.18);color:#7dd3fc;font-size:17px}
.tl-avg summary:after{content:"▾";margin-left:auto;color:#9fb0b6;font-size:16px;transition:transform .18s ease}
.tl-avg[open] summary:after{transform:rotate(180deg)}
.tl-avg .avg-note{padding:0 16px 11px;color:#8fa6af;font-size:11.5px}
.tl-avg .avg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 12px 13px}
.tl-avg .avg-row{min-width:0;padding:10px 11px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(0,0,0,.12)}
.tl-avg .avg-row .al{display:block;color:#b9cbd1;font-size:11.5px;line-height:1.35}
.tl-avg .avg-row .av{display:block;margin-top:4px;color:#fff;font-size:15px;font-weight:800}
.tl-avg .avg-row .an{display:block;margin-top:3px;color:#8fa6af;font-size:10.5px}
.stat-box.risk-stat{padding:0;overflow:hidden}
.risk-stat summary{list-style:none;cursor:pointer;padding:14px 16px;display:block;user-select:none}
.risk-stat summary::-webkit-details-marker{display:none}
.risk-stat .risk-click{display:block;margin-top:6px;color:#7dd3fc;font-size:10.5px;font-weight:800}
.risk-stat .risk-list{padding:0 13px 12px;border-top:1px solid rgba(255,255,255,.11);max-height:210px;overflow:auto}
.risk-stat .risk-person{padding:8px 3px;border-bottom:1px solid rgba(255,255,255,.08);font-size:11.5px;color:#e6eef1;line-height:1.4}
.risk-stat .risk-person:last-child{border-bottom:0}
.risk-stat .risk-person b{display:block;color:#fff;font-size:12px}
.risk-stat .risk-empty{padding:10px 3px;color:#9fb0b6;font-size:11.5px}

/* Display view */
.display-wrap{max-width:720px;margin:0 auto;padding:8px 0 30px}
.display-hero{background:linear-gradient(135deg,#0e7490,#4f46e5);border-radius:20px;padding:23px 22px;color:#fff;box-shadow:0 20px 42px -22px rgba(30,64,175,.65);margin-bottom:16px}
.display-hero .dh-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.17);margin-bottom:12px}
.display-hero h2{font-size:22px;margin:0 0 5px;font-weight:800}.display-hero p{margin:0;color:rgba(255,255,255,.82);font-size:13px;line-height:1.5}
.display-card{background:#fff;border:1px solid #e7edf0;border-radius:18px;padding:18px;box-shadow:0 18px 38px -26px rgba(15,23,42,.5)}
.display-label{display:block;color:#5b6870;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin:0 0 9px}
.display-choice{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:23px}
.display-choice button{border:1.5px solid #dbe4e8;background:#f8fafb;border-radius:12px;padding:13px 12px;text-align:left;color:#334155;font:inherit;font-size:13px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:9px;transition:.18s}
.display-choice button:hover{border-color:#38bdf8;transform:translateY(-1px)}
.display-choice button.on{background:#e0f2fe;border-color:#0284c7;color:#075985;box-shadow:0 8px 18px -13px #0284c7}
.display-choice .dc-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:#fff7ed;color:#f97316;font-size:16px}
.display-choice button.dark .dc-icon{background:#1e293b;color:#e2e8f0}
.display-zoom{display:flex;align-items:center;gap:9px;border-top:1px solid #edf1f2;padding-top:17px}
.display-zoom .dz-name{margin-right:auto;color:#334155;font-size:13px;font-weight:800}
.display-zoom button{width:37px;height:37px;border:0;border-radius:10px;background:#eff6ff;color:#075985;font:inherit;font-size:19px;font-weight:800;cursor:pointer}
.display-zoom button:hover{background:#dbeafe}.display-zoom .dz-level{min-width:62px;text-align:center;color:#334155;font-size:13px;font-weight:800}
/* dark mode: retain the app's existing orange/blue accents but make surfaces readable */
body.tl-dark{background:#0b1220;color:#e5edf2}
body.tl-dark .main{background:#0b1220}
body.tl-dark .topnav,body.tl-dark .back-menu{background:#111827;color:#dbeafe;border-color:#26364b}
body.tl-dark .card,body.tl-dark .display-card,body.tl-dark .pp-card,body.tl-dark .lt-card,body.tl-dark .so-card,body.tl-dark .ag-card,body.tl-dark .hd-card,body.tl-dark .tu-card,body.tl-dark .tt-card,body.tl-dark .tm-card,body.tl-dark .bf-card,body.tl-dark .hl-card{background:#111827;color:#e5edf2;border-color:#26364b}
body.tl-dark .q-title,body.tl-dark .q-sub,body.tl-dark .display-label,body.tl-dark .display-zoom .dz-name,body.tl-dark .display-zoom .dz-level{color:#e5edf2}
body.tl-dark .display-card{box-shadow:0 18px 38px -26px rgba(0,0,0,.9)}
body.tl-dark .display-choice button{background:#172235;border-color:#334155;color:#dbeafe}
body.tl-dark .display-choice button.on{background:#0c4a6e;border-color:#38bdf8;color:#e0f2fe}
body.tl-dark .display-zoom{border-color:#26364b}body.tl-dark .display-zoom button{background:#172a46;color:#bae6fd}
body.tl-dark input,body.tl-dark textarea,body.tl-dark select{background:#172235!important;color:#e5edf2!important;border-color:#334155!important}
body.tl-dark .opt,body.tl-dark .opt-row,body.tl-dark .pp-q,body.tl-dark .lt-q,body.tl-dark .so-q,body.tl-dark .ag-q,body.tl-dark .hd-q,body.tl-dark .tu-q,body.tl-dark .tt-q,body.tl-dark .tm-q,body.tl-dark .bf-q,body.tl-dark .hl-q{background:#172235;border-color:#334155;color:#e5edf2}
@media(max-width:620px){.tl-avg .avg-grid{grid-template-columns:1fr}.display-choice{grid-template-columns:1fr}.display-card{padding:15px}}

/* ---- s07.css ---- */

/* invisible tap progress: the five-tap gesture is still active */
.tl-taps{display:none!important}
/* refresh moved to the sticky top bar */
.top-refresh{border:1px solid var(--line);background:#fff;color:#0f766e;border-radius:10px;min-width:38px;height:36px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:inherit;font-weight:800;font-size:12px;transition:.2s}
.top-refresh:hover{border-color:#14b8a6;background:#f0fdfa;transform:translateY(-1px)}
.top-refresh.spin svg{animation:tlSpin .65s ease}
@keyframes tlSpin{to{transform:rotate(360deg)}}
.admin-btn.security{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff}
.admin-btn.security:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* filtered passport download buttons */
.passport-dl .pd-actions{justify-content:flex-start;align-items:flex-start;gap:10px}
.passport-dl .pd-actions button{min-height:46px;min-width:160px;padding:12px 18px;font-size:13.5px;justify-content:center;box-shadow:0 10px 20px -12px rgba(0,0,0,.65)}
.passport-dl .pd-actions button.word{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.passport-dl .pd-actions button.pdf{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.passport-dl .pd-actions button.excel{background:linear-gradient(135deg,#16a34a,#15803d)}
.passport-dl .pd-actions button:hover{filter:brightness(1.08);transform:translateY(-2px)}
/* Word action inside the consolidated Results view */
.rc-actions{display:flex;justify-content:flex-start;margin-top:12px}
.rc-word{border:0;border-radius:9px;padding:10px 14px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font:inherit;font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:7px;cursor:pointer;box-shadow:0 8px 18px -12px rgba(37,99,235,.9)}
.rc-word:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* Admin security dialog */
.admin-security-ov{position:fixed;inset:0;z-index:180;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,23,.72);backdrop-filter:blur(8px)}
.admin-security-ov.show{display:flex}
.admin-security-card{width:min(520px,100%);background:#fff;border:1px solid #dbe4ea;border-radius:20px;box-shadow:0 36px 90px -30px #000;padding:24px;color:#17202a;animation:rise .35s cubic-bezier(.22,1,.36,1)}
.admin-security-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:15px}
.admin-security-head .sec-ic{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#f59e0b,#ea580c);display:grid;place-items:center;color:#fff;flex:none}
.admin-security-head h3{font-size:20px;line-height:1.2;font-weight:800;margin:0 0 4px;color:#17202a}
.admin-security-head p{font-size:12px;line-height:1.45;color:#64748b;margin:0}
.admin-security-card label{display:block;font-size:12.5px;font-weight:800;color:#334155;margin:13px 0 6px}
.admin-security-card input{width:100%;border:1.5px solid #cbd5e1;border-radius:10px;background:#f8fafc;color:#17202a;font:inherit;font-size:14px;padding:11px 12px;letter-spacing:normal}
.admin-security-card input:focus{outline:none;border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.16)}
.admin-security-card .sec-email{background:#eef2f7;color:#475569}
.admin-security-note{margin-top:13px;padding:10px 12px;border-left:4px solid #f59e0b;background:#fff7ed;color:#7c2d12;border-radius:8px;font-size:11.5px;line-height:1.45}
.admin-security-msg{min-height:18px;margin-top:10px;font-size:12px;font-weight:700;color:#b91c1c}
.admin-security-msg.ok{color:#15803d}
.admin-security-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.admin-security-actions button{border:0;border-radius:10px;padding:11px 16px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.admin-security-actions .sec-cancel{background:#eef2f7;color:#475569}
.admin-security-actions .sec-save{background:linear-gradient(135deg,#f59e0b,#ea580c);color:#fff}
.admin-security-actions button:disabled{opacity:.55;cursor:default}
/* Average test statistics: readable bars instead of a text-only grid. */
.tl-avg{background:rgba(255,255,255,.07)}
.tl-avg .avg-grid{display:grid;grid-template-columns:1fr;gap:9px;padding:0 12px 14px}
.tl-avg .avg-row{padding:11px 12px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(0,0,0,.14)}
.tl-avg .avg-row .al{display:block;color:#dbeafe;font-size:12px;font-weight:800;line-height:1.3}
.tl-avg .avg-row .avg-line{display:flex;align-items:center;gap:9px;margin-top:7px}
.tl-avg .avg-row .avg-track{flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,.13);overflow:hidden}
.tl-avg .avg-row .avg-fill{display:block;height:100%;width:0;border-radius:999px;transition:width .5s ease}
.tl-avg .avg-row .av{display:block;margin:0;min-width:92px;text-align:right;color:#fff;font-size:13px;font-weight:800}
.tl-avg .avg-row .an{display:block;margin-top:4px;color:#9fb0b6;font-size:10.5px}
/* Dark mode: keep all questions and answer choices white with dark, high-contrast text. */
body.tl-dark .q-head,body.tl-dark .q-body,body.tl-dark .opt,body.tl-dark .opt-row,
body.tl-dark .bf-q,body.tl-dark .hl-q,body.tl-dark .lt-q,body.tl-dark .so-q,body.tl-dark .ag-q,body.tl-dark .hd-q,
body.tl-dark .tu-q,body.tl-dark .tt-q,body.tl-dark .tm-q,body.tl-dark .at-q,body.tl-dark .cs-q,body.tl-dark .bs-q,
body.tl-dark .bf-opt,body.tl-dark .hl-opt,body.tl-dark .lt-opt,body.tl-dark .so-opt,body.tl-dark .ag-opt,body.tl-dark .hd-opt,
body.tl-dark .tu-opt,body.tl-dark .tt-opt,body.tl-dark .tm-opt,body.tl-dark .at-num,body.tl-dark .cs-opt,body.tl-dark .tm-opt,
body.tl-dark .tm-instr,body.tl-dark .bf-instr,body.tl-dark .hl-instr,body.tl-dark .lt-instr,body.tl-dark .so-hint,body.tl-dark .hd-instr{
  background:#fff!important;color:#17202a!important;border-color:#cbd5e1!important
}
body.tl-dark .q-title,body.tl-dark .q-sub,body.tl-dark .q-body,body.tl-dark .q-head .q-title,
body.tl-dark .bf-qhead,body.tl-dark .hl-qhead,body.tl-dark .lt-qhead,body.tl-dark .so-qhead,body.tl-dark .ag-qhead,
body.tl-dark .hd-qhead,body.tl-dark .tu-qhead,body.tl-dark .tt-qhead,body.tl-dark .tm-qhead,body.tl-dark .at-poles,
body.tl-dark .cs-qhead,body.tl-dark .tm-qhead span,body.tl-dark .bs-qhead,body.tl-dark .bf-opt .olb,body.tl-dark .hl-opt .olb,
body.tl-dark .lt-opt .olb,body.tl-dark .so-opt .otxt,body.tl-dark .ag-opt,body.tl-dark .hd-opt,body.tl-dark .tu-opt,
body.tl-dark .tt-opt,body.tl-dark .tm-opt,body.tl-dark .cs-ol,body.tl-dark .tm-opt{color:#17202a!important}
body.tl-dark .q-sub,body.tl-dark .bf-progress .bfph,body.tl-dark .hl-progress .hlph,body.tl-dark .lt-progress .lph,
body.tl-dark .hd-progress .hph,body.tl-dark .tm-progress .tph{color:#475569!important}
body.tl-dark .bf-q.locked,body.tl-dark .hl-q.locked,body.tl-dark .lt-q.locked,body.tl-dark .so-q.locked,body.tl-dark .ag-q.locked,
body.tl-dark .hd-q.locked,body.tl-dark .tu-q.locked,body.tl-dark .tt-q.locked,body.tl-dark .tm-q.locked,body.tl-dark .cs-q.locked,
body.tl-dark .bs-q.locked{background:#f8fafc!important;color:#334155!important}
body.tl-dark .bf-lock,body.tl-dark .hl-lock,body.tl-dark .lt-lock,body.tl-dark .so-lock,body.tl-dark .ag-lock,body.tl-dark .hd-lock,
body.tl-dark .tu-lock,body.tl-dark .tt-lock,body.tl-dark .tm-lock,body.tl-dark .cs-lock,body.tl-dark .tm-lock{color:#475569!important}
body.tl-dark .bf-qhead .n,body.tl-dark .hl-qhead .n,body.tl-dark .lt-qhead .n,body.tl-dark .so-qhead .n,
body.tl-dark .ag-qhead .n,body.tl-dark .hd-qhead .n,body.tl-dark .tu-qhead .n,body.tl-dark .tt-qhead .n,
body.tl-dark .tm-qhead .n,body.tl-dark .cs-qhead .n{color:#fff!important}
body.tl-dark .rs-card,body.tl-dark .rs-empty,body.tl-dark .rs-note{background:#fff!important;color:#17202a!important;border-color:#cbd5e1!important}
body.tl-dark .rs-card .rc-nm,body.tl-dark .rs-card .rc-txt,body.tl-dark .rs-card .rc-sc,body.tl-dark .rs-card .rc-hrow span{color:#17202a!important}
body.tl-dark .rs-card .rc-miss,body.tl-dark .rs-card .rc-hads,body.tl-dark .rs-card .rc-scales{color:#334155!important}
body.tl-dark .pp-card,body.tl-dark .pp-q,body.tl-dark .display-card,body.tl-dark .card{color:#17202a}
@media(max-width:620px){.top-refresh span{display:none}.passport-dl .pd-actions button{width:100%;min-width:0}.admin-security-card{padding:20px 16px}}

/* ---- s08.css ---- */

/* Ten-sentence AI interpretation panel */
.tl-ai{margin:15px 0 18px;border:1px solid #cbd5e1;border-radius:14px;background:#f8fafc;color:#17202a;overflow:hidden}
.tl-ai summary{list-style:none;cursor:pointer;padding:13px 15px;font-size:13.5px;font-weight:800;color:#0e7490;display:flex;align-items:center;gap:8px}
.tl-ai summary::-webkit-details-marker{display:none}
.tl-ai summary:after{content:'▾';margin-left:auto;color:#64748b;font-size:16px;transition:transform .18s ease}
.tl-ai[open] summary:after{transform:rotate(180deg)}
.tl-ai ol{margin:0;padding:0 18px 10px 34px}
.tl-ai li{padding:7px 0 7px 2px;border-top:1px solid #e2e8f0;font-size:12.5px;line-height:1.5;color:#334155}
.tl-ai-src{padding:10px 15px;border-top:1px solid #e2e8f0;color:#64748b;font-size:11px;line-height:1.45}
.tl-ai-src a{color:#0369a1;font-weight:800}
body.tl-dark .tl-ai{background:#fff!important;color:#17202a!important;border-color:#cbd5e1!important;box-shadow:0 16px 34px -24px rgba(0,0,0,.8)}
body.tl-dark .tl-ai summary{color:#0e7490!important}
body.tl-dark .tl-ai summary:after{color:#64748b!important}
body.tl-dark .tl-ai li{color:#334155!important;border-color:#e2e8f0!important}
body.tl-dark .tl-ai-src{color:#64748b!important;border-color:#e2e8f0!important}
body.tl-dark .tl-ai-src a{color:#0369a1!important}
@media(max-width:620px){.tl-ai ol{padding-left:29px;padding-right:13px}.tl-ai li{font-size:12px}}

/* ---- s09.css ---- */

/* The logo is slightly larger and the decorative dots are fully removed. */
#sparkles{display:none!important}
.rlogo{width:clamp(98px,24vw,184px);height:clamp(98px,24vw,184px)}
/* Keep the three admin exports large, coloured by file type, and left aligned. */
.passport-dl .pd-actions{justify-content:flex-start!important;align-items:flex-start;flex-wrap:wrap;gap:12px}
.passport-dl .pd-actions button{min-width:170px;min-height:50px;padding:13px 20px;font-size:14px!important}
.passport-dl .pd-actions button.word{background:#2563eb!important;color:#fff!important}
.passport-dl .pd-actions button.pdf{background:#dc2626!important;color:#fff!important}
.passport-dl .pd-actions button.excel{background:#16a34a!important;color:#fff!important}
.rc-actions{justify-content:flex-start!important}
.rc-word{min-height:44px;padding:11px 17px;font-size:13px}
/* Strong, consistent contrast for every test question and answer control in dark mode. */
body.tl-dark .q-head,body.tl-dark .q-body,body.tl-dark .opt,body.tl-dark .opt-row,
body.tl-dark .bf-q,body.tl-dark .hl-q,body.tl-dark .lt-q,body.tl-dark .so-q,body.tl-dark .ag-q,
body.tl-dark .hd-q,body.tl-dark .tu-q,body.tl-dark .tt-q,body.tl-dark .tm-q,body.tl-dark .at-q,
body.tl-dark .cs-q,body.tl-dark .bs-q,body.tl-dark .bf-opt,body.tl-dark .hl-opt,body.tl-dark .lt-opt,
body.tl-dark .so-opt,body.tl-dark .ag-opt,body.tl-dark .hd-opt,body.tl-dark .tu-opt,body.tl-dark .tt-opt,
body.tl-dark .tm-opt,body.tl-dark .at-num,body.tl-dark .cs-opt,body.tl-dark .tm-instr,
body.tl-dark .bf-instr,body.tl-dark .hl-instr,body.tl-dark .lt-instr,body.tl-dark .so-instr,
body.tl-dark .so-hint,body.tl-dark .hd-instr,body.tl-dark .bs-instr{
  background:#fff!important;color:#17202a!important;border-color:#cbd5e1!important
}
body.tl-dark .q-title,body.tl-dark .q-sub,body.tl-dark .q-body *,body.tl-dark .q-head *,
body.tl-dark .bf-qhead,body.tl-dark .hl-qhead,body.tl-dark .lt-qhead,body.tl-dark .so-qhead,
body.tl-dark .ag-qhead,body.tl-dark .hd-qhead,body.tl-dark .tu-qhead,body.tl-dark .tt-qhead,
body.tl-dark .tm-qhead,body.tl-dark .at-poles,body.tl-dark .cs-qhead,body.tl-dark .bs-qhead,
body.tl-dark .opt .label,body.tl-dark .opt-row .rt b,body.tl-dark .opt-row .rt span,
body.tl-dark .bf-opt .olb,body.tl-dark .hl-opt .olb,body.tl-dark .lt-opt .olb,
body.tl-dark .so-opt .otxt,body.tl-dark .ag-opt,body.tl-dark .hd-opt,body.tl-dark .tu-opt,
body.tl-dark .tt-opt,body.tl-dark .tm-opt,body.tl-dark .cs-ol,body.tl-dark .bs-opt,
body.tl-dark .at-poles .pos,body.tl-dark .at-poles .neg{color:#17202a!important}
body.tl-dark .q-body input,body.tl-dark .q-body textarea,body.tl-dark .cs-q input,
body.tl-dark .cs-q textarea,body.tl-dark .bs-q input,body.tl-dark .bs-q textarea{
  background:#fff!important;color:#17202a!important;border-color:#94a3b8!important
}
body.tl-dark .bf-q.locked,body.tl-dark .hl-q.locked,body.tl-dark .lt-q.locked,body.tl-dark .so-q.locked,
body.tl-dark .ag-q.locked,body.tl-dark .hd-q.locked,body.tl-dark .tu-q.locked,body.tl-dark .tt-q.locked,
body.tl-dark .tm-q.locked,body.tl-dark .cs-q.locked,body.tl-dark .bs-q.locked{
  background:#f8fafc!important;color:#334155!important;opacity:.78
}
body.tl-dark .bf-lock,body.tl-dark .hl-lock,body.tl-dark .lt-lock,body.tl-dark .so-lock,
body.tl-dark .ag-lock,body.tl-dark .hd-lock,body.tl-dark .tu-lock,body.tl-dark .tt-lock,
body.tl-dark .tm-lock,body.tl-dark .cs-lock,body.tl-dark .bs-lock{color:#475569!important}
/* AI output is readable in both themes and starts open after completion. */
.tl-ai{background:#f8fafc!important;color:#17202a!important;border-color:#cbd5e1!important}
.tl-ai summary{color:#0e7490!important}
.tl-ai li{color:#334155!important;border-color:#e2e8f0!important}
.tl-ai-src{color:#64748b!important;border-color:#e2e8f0!important}
.tl-ai-src a{color:#0369a1!important}
/* Preserve white numerals/checkmarks on coloured status badges. */
body.tl-dark .q-num,body.tl-dark .opt .tick,body.tl-dark .opt .badge,
body.tl-dark .bf-qhead .n,body.tl-dark .hl-qhead .n,body.tl-dark .lt-qhead .n,
body.tl-dark .so-qhead .n,body.tl-dark .ag-qhead .n,body.tl-dark .hd-qhead .n,
body.tl-dark .tu-qhead .n,body.tl-dark .tt-qhead .n,body.tl-dark .tm-qhead .n,
body.tl-dark .cs-qhead .n,body.tl-dark .at-poles .n{color:#fff!important}

/* ---- s10.css ---- */

/* ---- 2. admin panel readability (larger type) ---- */
.admin-shell{font-size:15px}
.admin-bar h2{font-size:20px!important}
.admin-bar .admin-btn{font-size:14px!important;padding:9px 14px!important}
.admin-filters .fl label{font-size:14px!important}
.admin-filters select{font-size:15px!important;padding:9px 11px!important}
.admin-filters .fcount{font-size:15px!important}
.stats-title{font-size:17px!important}
.stat-box .lbl{font-size:14px!important}
.stat-box .big{font-size:26px!important}
.stat-row .nm,.stat-row .vv{font-size:14px!important}
.students-drop-sum{font-size:16px!important}
.students-drop-count{font-size:14px!important}
.admin-card .ac-nm b{font-size:16px!important}
.admin-card .ac-nm span{font-size:13.5px!important}
.ac-badge{font-size:12.5px!important;padding:4px 9px!important}
.ac-sec h4{font-size:16px!important}
.ac-kv .k{font-size:14px!important}
.ac-kv .v{font-size:14px!important}
.cs-qsc{font-size:12.5px!important}
.tl-avg .avg-row .al{font-size:14px!important}
.tl-avg .avg-row .an{font-size:13px!important}
.tl-avg .avg-note{font-size:13.5px!important}
.risk-stat .risk-person{font-size:13.5px!important}
.risk-stat .risk-empty{font-size:13.5px!important}
.risk-stat .risk-click{font-size:12.5px!important}
.admin-security-card label{font-size:14px!important}
.admin-security-head p{font-size:14px!important}
.admin-security-card input{font-size:15px!important;padding:10px 12px!important}
.tl-share .tn{font-size:13.5px!important}
.tl-row input{font-size:13.5px!important}
.tl-diag .dk{font-size:13px!important}
.passport-dl .pd-note,.passport-dl .pd-filter{font-size:14px!important}
.passport-dl .pd-h{font-size:16px!important}
.cse-body,.cse-body input,.cse-body textarea,.cse-body select{font-size:14.5px!important}
.deadline-card,.deadline-card label,.deadline-card input{font-size:14.5px!important}

/* ---- 3. dark mode: one consistent light field surface everywhere ---- */
body.tl-dark input,body.tl-dark textarea,body.tl-dark select,
body.tl-dark .dd-btn,body.tl-dark .dd-list,body.tl-dark .dd-item{
  background:#ffffff!important;color:#17202a!important;border-color:#cbd5e1!important;
  -webkit-text-fill-color:#17202a!important}
body.tl-dark input::placeholder,body.tl-dark textarea::placeholder{color:#64748b!important}
body.tl-dark .dd-item:hover,body.tl-dark .dd-item.sel{background:#eef2f7!important;color:#17202a!important}
body.tl-dark .auth-card,body.tl-dark .auth-card .field label,body.tl-dark .auth-card .pw-hint,
body.tl-dark .auth-card h2,body.tl-dark .auth-card p{color:#17202a!important}
body.tl-dark .auth-card{background:#ffffff!important}
body.tl-dark .field label{color:#334155!important}

/* top navigation titles visible in dark mode */
body.tl-dark .topnav,body.tl-dark .back-menu{color:#e8f1f8!important}
body.tl-dark .topnav .crumb,body.tl-dark .topnav .crumb *,
body.tl-dark .back-menu,body.tl-dark .back-menu *{color:#e8f1f8!important}
body.tl-dark .topnav .crumb b{color:#ffffff!important}
body.tl-dark .applang{background:#1f2b3d!important;border-color:#31425c!important}
body.tl-dark .applang button{color:#cbd8e6!important}
body.tl-dark .applang button.on{background:#2f4a6d!important;color:#ffffff!important}
body.tl-dark .topnav svg{stroke:#e8f1f8!important}

/* cards were left with a dark background but dark text (unreadable): one light surface */
body.tl-dark .card,body.tl-dark .display-card,body.tl-dark .pp-card,body.tl-dark .pp-q,
body.tl-dark .lt-card,body.tl-dark .so-card,body.tl-dark .ag-card,body.tl-dark .hd-card,
body.tl-dark .tu-card,body.tl-dark .tt-card,body.tl-dark .tm-card,body.tl-dark .bf-card,
body.tl-dark .hl-card,body.tl-dark .at-card,body.tl-dark .cs-card{
  background:#ffffff!important;color:#17202a!important;border-color:#cbd5e1!important}
body.tl-dark .card p,body.tl-dark .card span,body.tl-dark .card div,body.tl-dark .card li,
body.tl-dark .card h2,body.tl-dark .card h3,body.tl-dark .card h4,body.tl-dark .card label,
body.tl-dark .display-card p,body.tl-dark .display-card span,body.tl-dark .display-card div,
body.tl-dark .display-card h2,body.tl-dark .display-card h3,body.tl-dark .display-card label,
body.tl-dark .pp-card p,body.tl-dark .pp-card span,body.tl-dark .pp-card div,
body.tl-dark .pp-card h2,body.tl-dark .pp-card h3,body.tl-dark .pp-card label{color:#17202a!important}
/* keep coloured chips, buttons and badges readable on their own fills */
body.tl-dark .card button,body.tl-dark .display-card button,body.tl-dark .pp-card button,
body.tl-dark .card .badge,body.tl-dark .card .tick,body.tl-dark .th-ic,
body.tl-dark .th-ic *{color:#ffffff!important}

/* ---- s11.css ---- */

/* ===== T36 v3: welcome text, deadline picker, dark menu button, general stats, facts ===== */
.fish-overlay p[data-i18n="welcomeSub"]{display:none!important}

/* --- dark mode: "Menyuga o'tish" button --- */
body.tl-dark .back-menu.to-menu,
body.tl-dark .back-menu.to-menu *{color:#ffffff!important}
body.tl-dark .back-menu.to-menu{
  background:linear-gradient(135deg,#38bdf8,#0ea5e9)!important;border:0!important;
  box-shadow:0 10px 22px -12px rgba(14,165,233,.75)!important}
body.tl-dark .back-menu.to-menu svg{stroke:#ffffff!important}
body.tl-dark .back-menu.to-menu:hover{background:linear-gradient(135deg,#7dd3fc,#38bdf8)!important}
body.tl-dark .admin-btn.menu,body.tl-dark .admin-btn.menu *{color:#ffffff!important}
body.tl-dark .admin-btn.menu{background:linear-gradient(135deg,#38bdf8,#0ea5e9)!important;border:0!important}
body.tl-dark .admin-btn.menu svg{stroke:#ffffff!important}

/* --- deadline picker v2 --- */
.dl-cfg2 .dl2-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.dl-cfg2 .dl2-f{display:flex;flex-direction:column;flex:1 1 190px;min-width:170px}
.dl-cfg2 .dl2-f--t{flex:0 0 130px;min-width:120px}
.dl-cfg2 .dl2-f label{font-size:12px;color:#8fa6af;margin:0 0 4px;font-weight:700}
.dl-cfg2 .dl2-f input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;font-weight:700;
  padding:11px 12px;border:1.5px solid #cfdbe3;border-radius:11px;background:#fff;color:#17202a;min-height:46px}
.dl-cfg2 .dl2-f input:focus{outline:0;border-color:#0f9b8e;box-shadow:0 0 0 3px rgba(15,155,142,.16)}
.dl-cfg2 .dl2-quick{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:11px 0 0}
.dl-cfg2 .dl2-qlbl{font-size:12.5px;font-weight:800;color:#8fa6af}
.dl-cfg2 .dl2-quick button{font:inherit;font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;
  border:1.5px solid #cfe6e3;background:#f2fbfa;color:#0f7a70;cursor:pointer}
.dl-cfg2 .dl2-quick button:hover{background:#0f9b8e;border-color:#0f9b8e;color:#fff}
.dl-cfg2 .dl2-prev{margin:11px 0 0;padding:9px 12px;border-radius:11px;background:#f2fbfa;border:1px solid #d6ece9;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.dl-cfg2 .dl2-prev b{font-size:15.5px;color:#0f4c5c}
.dl-cfg2 .dl2-left{font-size:13px;font-weight:800;color:#0f7a70}
.dl-cfg2 .dl2-warn{font-size:13.5px;font-weight:700;color:#c2410c}
.dl-cfg2 .dl2-hint{font-size:12.5px;color:#8fa6af;margin:7px 0 0}
body.tl-dark .dl-cfg2 .dl2-f label,body.tl-dark .dl-cfg2 .dl2-qlbl,body.tl-dark .dl-cfg2 .dl2-hint{color:#94a3b8!important}
body.tl-dark .dl-cfg2 .dl2-prev{background:#ffffff!important;border-color:#cbd5e1!important}
body.tl-dark .dl-cfg2 .dl2-prev b,body.tl-dark .dl-cfg2 .dl2-left{color:#0f4c5c!important}

/* --- admin general statistics card --- */
.gsx-card{background:#fff;border:1px solid #e2ebf0;border-radius:16px;padding:16px;margin:0 0 16px;
  box-shadow:0 12px 28px -22px rgba(15,76,92,.5)}
.gsx-h{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin:0 0 13px;color:#0f7a70}
.gsx-h b{display:block;font-size:17.5px;color:#0f4c5c}
.gsx-h span{display:block;font-size:13px;color:#7c8d99;font-weight:600}
.gsx-ay{margin-left:auto;font-size:13px;font-weight:800;color:#0f7a70;background:#f2fbfa;
  border:1px solid #d6ece9;border-radius:999px;padding:6px 13px}
.gsx-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.gsx-b{background:#f6fafc;border:1px solid #e4edf2;border-top:4px solid #0f9b8e;border-radius:12px;padding:10px 12px}
.gsx-b span{display:block;font-size:12.5px;color:#7c8d99;font-weight:700}
.gsx-b b{display:block;font-size:24px;color:#12303c;line-height:1.15;margin-top:2px}
.gsx-b b small{font-size:13px;color:#8fa6af}
.gsx-b.warn{border-top-color:#f87171;background:#fff6f6}
.gsx-b.warn b{color:#b3261e}
.gsx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:11px}
.gsx-i{overflow:auto}
.gsx-i.full{grid-column:1/-1}
.gsx-i img{max-width:100%;height:auto!important;border-radius:9px}
.gsx-note{font-size:12.5px;color:#7c8d99;margin:12px 0 0;border-top:1px solid #eef3f6;padding:9px 0 0}
body.tl-dark .gsx-card{background:#ffffff!important;border-color:#cbd5e1!important}
body.tl-dark .gsx-h b,body.tl-dark .gsx-b b{color:#0f4c5c!important}
body.tl-dark .gsx-h span,body.tl-dark .gsx-b span,body.tl-dark .gsx-note{color:#64748b!important}

/* --- Qiziqarli faktlar: flashcards --- */
.tf-wrap{max-width:820px;margin:0 auto}
.tf-hero{background:linear-gradient(135deg,#0f9b8e,#0f4c5c 62%,#1e3a8a);color:#fff;border-radius:20px;
  padding:20px 22px;margin:0 0 15px;position:relative;overflow:hidden;box-shadow:0 18px 36px -24px rgba(15,76,92,.85)}
.tf-hero:after{content:'';position:absolute;right:-40px;top:-60px;width:190px;height:190px;border-radius:50%;
  background:rgba(255,255,255,.10)}
.tf-hero .th-ic{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;color:#fff;margin:0 0 10px}
.tf-hero h2{margin:0;font-size:22px;letter-spacing:-.2px}
.tf-hero p{margin:5px 0 0;font-size:14px;opacity:.92}
.tf-langs{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.tf-lglbl{font-size:12.5px;font-weight:800;color:#7c8d99}
.tf-lg{font:inherit;font-size:13px;font-weight:700;padding:7px 13px;border-radius:999px;cursor:pointer;
  border:1.5px solid #d8e3ea;background:#fff;color:#41525f;transition:.18s}
.tf-lg:hover{border-color:#0f9b8e;color:#0f7a70}
.tf-lg.on{background:linear-gradient(135deg,#0f9b8e,#0f7a70);border-color:transparent;color:#fff;
  box-shadow:0 8px 18px -12px rgba(15,155,142,.9)}
.tf-stage{perspective:1600px;margin:0 0 15px}
.tf-card{position:relative;width:100%;height:370px;transform-style:preserve-3d;cursor:pointer;
  transition:transform .62s cubic-bezier(.22,.8,.24,1)}
.tf-card.flipped{transform:rotateY(180deg)}
.tf-card.in-r{animation:tfInR .38s ease}
.tf-card.in-l{animation:tfInL .38s ease}
@keyframes tfInR{from{opacity:0;transform:translateX(38px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tfInL{from{opacity:0;transform:translateX(-38px) scale(.97)}to{opacity:1;transform:none}}
.tf-face{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:22px;padding:22px 24px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 26px 48px -28px rgba(12,42,56,.75)}
.tf-front{background:linear-gradient(150deg,#12b3a4,#0f7a70 52%,#0f4c5c);color:#fff}
.tf-back{background:linear-gradient(150deg,#ffffff,#f2fbfa 60%,#e8f4fb);color:#14252f;
  transform:rotateY(180deg);border:1.5px solid #cfe6e3;overflow:auto}
.tf-shine{position:absolute;left:-60%;top:-120%;width:55%;height:340%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:rotate(16deg);animation:tfShine 4.6s ease-in-out infinite}
@keyframes tfShine{0%{left:-60%}55%{left:135%}100%{left:135%}}
.tf-back .tf-shine{background:linear-gradient(105deg,transparent,rgba(15,155,142,.09),transparent)}
.tf-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;position:relative}
.tf-badge{font-size:12.5px;font-weight:800;letter-spacing:.4px;padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34)}
.tf-back .tf-badge{background:#0f9b8e;border-color:transparent;color:#fff}
.tf-ic{opacity:.9;animation:tfFloat 4.2s ease-in-out infinite}
@keyframes tfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.tf-t{margin:auto 0;font-size:26px;line-height:1.28;letter-spacing:-.3px;position:relative}
.tf-cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;
  padding:9px 15px;border-radius:999px;align-self:flex-start;position:relative;
  background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.32)}
.tf-back .tf-cta{background:#0f9b8e;border-color:transparent;color:#fff}
.tf-bt{margin:0 0 9px;font-size:19px;line-height:1.3;color:#0f4c5c;position:relative}
.tf-b{margin:0 0 14px;font-size:15.5px;line-height:1.62;color:#26404d;position:relative}
.tf-nav{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.tf-btn{font:inherit;font-size:14.5px;font-weight:800;padding:12px 18px;border-radius:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;border:1.5px solid #d8e3ea;background:#fff;color:#26404d;transition:.16s}
.tf-btn:hover{border-color:#0f9b8e;color:#0f7a70;transform:translateY(-1px)}
.tf-btn.tf-next{margin-left:auto;background:linear-gradient(135deg,#12b3a4,#0f7a70);border-color:transparent;color:#fff;
  box-shadow:0 12px 24px -14px rgba(15,155,142,.95)}
.tf-btn.tf-next:hover{color:#fff}
.tf-btn.tf-rnd{background:#f6fafc}
.tf-prog{display:flex;align-items:center;gap:11px;margin:0 0 9px}
.tf-pbar{flex:1;height:8px;border-radius:999px;background:#e8eff3;overflow:hidden}
.tf-pbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#12b3a4,#0f4c5c);transition:width .32s ease}
.tf-prog span{font-size:13px;font-weight:800;color:#7c8d99;min-width:74px;text-align:right}
.tf-hint{font-size:13px;color:#7c8d99}
.tf-src{font-size:12px;color:#9fb0b6;margin:6px 0 0}
@media(max-width:640px){
  .tf-card{height:420px}
  .tf-t{font-size:22px}
  .tf-face{padding:18px 18px}
  .tf-btn.tf-next{margin-left:0;width:100%;justify-content:center}
  .tf-btn{flex:1;justify-content:center}
}
body.tl-dark .tf-lg{background:#ffffff!important;color:#41525f!important;border-color:#cbd5e1!important}
body.tl-dark .tf-lg.on{background:linear-gradient(135deg,#0f9b8e,#0f7a70)!important;color:#ffffff!important}
body.tl-dark .tf-lglbl,body.tl-dark .tf-hint,body.tl-dark .tf-src,body.tl-dark .tf-prog span{color:#94a3b8!important}
body.tl-dark .tf-btn{background:#ffffff!important;color:#26404d!important;border-color:#cbd5e1!important}
body.tl-dark .tf-btn.tf-next{background:linear-gradient(135deg,#12b3a4,#0f7a70)!important;color:#ffffff!important;border-color:transparent!important}
body.tl-dark .tf-btn svg{stroke:currentColor!important}
body.tl-dark .tf-front,body.tl-dark .tf-front *{color:#ffffff!important}
body.tl-dark .tf-back{background:linear-gradient(150deg,#ffffff,#f2fbfa 60%,#e8f4fb)!important}
body.tl-dark .tf-bt{color:#0f4c5c!important}
body.tl-dark .tf-b{color:#26404d!important}
body.tl-dark .tf-hero,body.tl-dark .tf-hero *{color:#ffffff!important}
body.tl-dark .tf-pbar{background:#334155!important}
.side-item.qf-nav .qf-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:#12b3a4;opacity:.85}


/* ---- s12.css ---- */

:root{--tl-theme-main:#a86645;--tl-theme-soft:#d49a6a;--tl-theme-dark:#2d1e18;--tl-theme-dark2:#4a3026;--tl-theme-grad:linear-gradient(135deg,#2d1e18 0%,#4a3026 52%,#a86645 100%);--tl-theme-softgrad:linear-gradient(135deg,#fff8f3 0%,#f7eadf 100%)}
body.tl-palette .admin-bar,body.tl-palette .display-hero,body.tl-palette .tf-hero,body.tl-palette .gsx-h,body.tl-palette .passport-dl .pd-h,body.tl-palette .back-menu.to-menu,body.tl-palette .admin-btn.security,body.tl-palette .admin-btn.menu-big,body.tl-palette .tl-theme-head,body.tl-palette .tl-new-hero{background:var(--tl-theme-grad)!important}
body.tl-palette .admin-btn.security,body.tl-palette .admin-btn.menu-big,body.tl-palette .back-menu.to-menu{border-color:var(--tl-theme-soft)!important;color:#fff!important}
body.tl-palette .admin-btn.security svg,body.tl-palette .admin-btn.menu-big svg,body.tl-palette .back-menu.to-menu svg{stroke:#fff!important}
.tl-theme-card{margin:0 0 16px;padding:16px 18px;border-radius:18px;background:var(--tl-theme-softgrad);border:1px solid color-mix(in srgb,var(--tl-theme-main) 38%,#fff);box-shadow:0 16px 32px -24px rgba(30,20,12,.45)}
.tl-theme-head{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:13px;color:#fff;margin:-2px -2px 13px}.tl-theme-head b{font-size:16px}.tl-theme-head span{display:block;font-size:12px;opacity:.85;margin-top:2px}.tl-theme-head svg{flex:none}
.tl-theme-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.tl-theme-opt{border:1.5px solid #d7dfe3;border-radius:13px;padding:10px 9px;background:#fff;color:#24323b;font:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;text-align:left;min-height:47px;transition:.18s}.tl-theme-opt:hover{transform:translateY(-1px);border-color:var(--tl-theme-main)}.tl-theme-opt.on{border-color:var(--tl-theme-main);box-shadow:0 0 0 2px color-mix(in srgb,var(--tl-theme-main) 18%,transparent)}.tl-theme-swatch{width:27px;height:27px;border-radius:9px;flex:none;border:1px solid rgba(0,0,0,.12)}.tl-theme-name{font-size:12px;font-weight:800;line-height:1.15}.tl-theme-note{margin-top:10px;color:#5d6970;font-size:12px;line-height:1.4}
.admin-filters .tl-sex-filter select{min-width:150px}.tl-sex-filter label{display:block}
.tl-new-wrap{max-width:760px;margin:0 auto}.tl-new-hero{border-radius:20px;padding:22px;color:#fff;margin-bottom:13px;box-shadow:0 20px 42px -24px rgba(15,23,42,.55)}.tl-new-hero .tl-new-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.16);margin-bottom:11px}.tl-new-hero h2{font-size:22px;margin:0 0 5px}.tl-new-hero p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.86);margin:0}.tl-new-note{padding:12px 14px;border-radius:13px;background:#f8fafc;border:1px solid #e2e8f0;color:#334155;font-size:13px;line-height:1.5;margin-bottom:12px}.tl-new-wrap .tm-q{margin-bottom:9px}.tl-new-result{padding:16px;border-radius:16px;background:linear-gradient(135deg,#ecfdf5,#eff6ff);border:1px solid #b7e4d0;margin:0 0 12px}.tl-new-result.danger{background:linear-gradient(135deg,#fff1f2,#fffbeb);border-color:#fecdd3}.tl-new-result h3{font-size:17px;color:#164e63;margin:0 0 8px}.tl-new-result .tl-result-big{font-size:25px;font-weight:900;color:#0f766e}.tl-new-result.danger .tl-result-big{color:#be123c}.tl-new-result p{font-size:13px;line-height:1.5;color:#334155;margin-top:6px}.tl-domain{margin-top:10px}.tl-domain .drow{display:flex;align-items:center;gap:8px;margin-top:7px}.tl-domain .dname{width:155px;font-size:12px;font-weight:800;color:#334155}.tl-domain .dtrack{height:10px;background:#dbeafe;border-radius:99px;overflow:hidden;flex:1}.tl-domain .dfill{height:100%;border-radius:99px;background:linear-gradient(90deg,#0ea5e9,#14b8a6)}.tl-domain .dval{width:42px;text-align:right;font-size:12px;font-weight:900;color:#0f4c5c}
body.tl-dark .tl-theme-card{background:linear-gradient(135deg,#182536,#24344a);border-color:#38506a}.tl-dark .tl-theme-note{color:#cbd5e1}.tl-dark .tl-theme-opt{background:#172235;color:#e5edf2;border-color:#3b4b61}.tl-dark .tl-theme-opt.on{border-color:var(--tl-theme-soft)}.tl-dark .tl-new-note{background:#172235;color:#dbeafe;border-color:#334155}.tl-dark .tl-new-result{background:linear-gradient(135deg,#12352d,#132a45);color:#e5edf2;border-color:#2d7661}.tl-dark .tl-new-result h3,.tl-dark .tl-new-result p,.tl-dark .tl-domain .dname{color:#e5edf2}.tl-dark .tl-new-result.danger{background:linear-gradient(135deg,#402331,#3d321a);border-color:#8d4559}.tl-dark .tl-new-result .tl-result-big{color:#7dd3fc}.tl-dark .tl-new-result.danger .tl-result-big{color:#fda4af}
@media(max-width:700px){.tl-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tl-domain .dname{width:112px}}

/* ---- s13.css ---- */

/* unified success colour for any chosen or filled option */
.hd-opt.sel,.tu-opt.sel,.tt-opt.sel,.tm-opt.sel,.bf-opt.sel,
.ag-opt.no.sel,.hl-opt.no.sel,.cs-opt.sel{
  border-color:var(--green-l)!important;background:var(--green-soft)!important;color:var(--green-d)!important}
.hd-opt.sel .pt,.bf-opt.sel .lk,.ag-opt.no.sel .ic{background:var(--green)!important;color:#fff!important}
.tu-opt.sel .rd,.tt-opt.sel .rd,.cs-opt.sel .cs-rd{border-color:var(--green)!important}
.tu-opt.sel .rd::after,.tt-opt.sel .rd::after,.cs-opt.sel .cs-rd:after{background:var(--green)!important}
.at-num.sel{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important}
.so-opt.is-most{border-color:var(--green)!important;background:var(--green-soft)!important}
.so-opt.is-least{border-color:var(--green-l)!important;background:#f4fbf6!important;color:var(--green-d)!important}
.pp-photo .prev.has{border-color:var(--green-l)}
.author--foot{margin-top:26px;margin-bottom:0}
body.tl-dark .hd-opt.sel,body.tl-dark .tu-opt.sel,body.tl-dark .tt-opt.sel,body.tl-dark .tm-opt.sel,
body.tl-dark .bf-opt.sel,body.tl-dark .ag-opt.no.sel,body.tl-dark .hl-opt.no.sel,body.tl-dark .cs-opt.sel,
body.tl-dark .so-opt.is-most,body.tl-dark .so-opt.is-least{
  background:rgba(34,197,94,.18)!important;color:#bbf7d0!important;border-color:var(--green-l)!important}

/* ---- s14.css ---- */

.tlgate-back{position:fixed;inset:0;background:rgba(28,20,14,.55);backdrop-filter:blur(4px);z-index:9600;display:none;align-items:center;justify-content:center;padding:22px}
.tlgate-back.show{display:flex}
.tlgate{background:#fff;border-radius:22px;max-width:470px;width:100%;padding:30px 28px;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);text-align:center;animation:tlgIn .3s ease both}
@keyframes tlgIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.tlgate .ic{width:62px;height:62px;border-radius:18px;margin:0 auto 16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--green-l),var(--green-d));color:#fff}
.tlgate h3{margin:0 0 10px;font-size:20px;color:#241812}
.tlgate p{margin:0 0 8px;font-size:14.5px;line-height:1.65;color:#5d4f45}
.tlgate .prog{font-size:13px;font-weight:700;color:var(--green-d);margin:12px 0 4px}
.tlgate .acts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.tlgate .go{border:0;font:inherit;font-weight:800;font-size:16px;padding:15px;border-radius:13px;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--green-l),var(--green-d));box-shadow:0 14px 26px -12px var(--green-glow)}
.tlgate .later{border:1.5px solid #e6ded7;background:#fff;font:inherit;font-weight:700;font-size:14.5px;padding:12px;border-radius:12px;cursor:pointer;color:#7a6a5e}
body.tl-dark .tlgate{background:#241d19;color:#f0e6de}
body.tl-dark .tlgate h3{color:#f7efe8}
body.tl-dark .tlgate p{color:#cdbdb0}
body.tl-dark .tlgate .later{background:transparent;border-color:#3d332c;color:#cdbdb0}

/* ---- s15.css ---- */

.tl-retake-note{font-size:12.5px;line-height:1.6;color:#7a6a5e;background:#f7fbf7;border:1px solid #dcefdd;border-radius:11px;padding:10px 13px;margin-top:10px;display:flex;gap:8px;align-items:flex-start}
.tl-retake-note svg{flex:none;margin-top:2px;color:var(--green-d)}
body.tl-dark .tl-retake-note{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.28);color:#cdbdb0}

/* ---- s16.css ---- */

/* ===== Step 1: keyboard-style press effect + registration review ===== */
.start, #regGo, #loginGo, .auth-btn, #rvwOk, #rvwBack, .auth-ov .close{
  transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
.start:active, #regGo:active, #loginGo:active, .auth-btn:active,
#rvwOk:active, #rvwBack:active{
  transform: translateY(3px) scale(.985);
  box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 3px 9px rgba(0,0,0,.30);
  filter: brightness(.93);
}

.rvw-ov{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(18,11,7,.80); backdrop-filter:blur(8px);
}
.rvw-ov.show{ display:flex; }
.rvw-card{
  background:#fff; color:#1d2a33; border-radius:24px; max-width:520px; width:100%;
  padding:30px 30px 26px; box-shadow:0 40px 90px -30px #000;
  max-height:88vh; overflow:auto;
}
.rvw-card h3{ margin:0 0 4px; font-size:21px; font-weight:800; }
.rvw-card .rvw-sub{ color:#6a7683; font-size:13.5px; margin-bottom:18px; line-height:1.5; }
.rvw-row{
  display:flex; justify-content:space-between; gap:14px; padding:11px 0;
  border-bottom:1px solid #eef1f4; font-size:14.5px;
}
.rvw-row:last-of-type{ border-bottom:0; }
.rvw-row b{ color:#111; font-weight:700; flex:0 0 42%; }
.rvw-row span{ color:#3a4551; text-align:right; }
.rvw-actions{ display:flex; gap:12px; margin-top:22px; }
.rvw-actions button{
  flex:1; border:0; border-radius:14px; padding:14px; font:inherit;
  font-weight:800; font-size:15px; cursor:pointer;
}
#rvwBack{ background:#eef1f4; color:#33404c; }
#rvwOk{ background:linear-gradient(135deg,#22c55e,#15803d); color:#fff; }

/* ---- s17.css ---- */

/* ===== v48: Guruh atmosferasi — interactive sliders ===== */
.v48-at-wrap{max-width:860px;margin:0 auto}
.v48-at-live{position:sticky;top:8px;z-index:5;background:linear-gradient(135deg,#0f2b1c,#123a24);color:#fff;
  border-radius:18px;padding:16px 20px;margin:0 0 18px;box-shadow:0 18px 40px -22px rgba(4,30,16,.6)}
.v48-at-live .lab{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8fe3b4;margin-bottom:8px}
.v48-at-live .nums{display:flex;justify-content:space-between;font-weight:800;font-size:15px;margin-bottom:8px}
.v48-at-live .nums .good{color:#4ade80}
.v48-at-live .nums .bad{color:#fca5a5}
.v48-at-balance{height:12px;border-radius:8px;overflow:hidden;background:#0b1f14;display:flex}
.v48-at-balance i{display:block;height:100%}
.v48-at-balance .g{background:linear-gradient(90deg,#22c55e,#16a34a)}
.v48-at-balance .b{background:linear-gradient(90deg,#f97316,#ef4444)}
.v48-at-live .band{margin-top:9px;font-size:13px;font-weight:700;color:#d7f5e4}
.v48-at-live .prog{margin-top:6px;font-size:11.5px;color:#9fd9bb;font-weight:600}

.v48-at-row{background:#fff;border:1.5px solid #ece5df;border-radius:16px;padding:16px 18px 20px;margin-bottom:12px;transition:border-color .2s}
.v48-at-row.filled{border-color:#bbf7d0}
.v48-at-row .poles{display:flex;justify-content:space-between;gap:12px;font-weight:800;font-size:14px;margin-bottom:6px}
.v48-at-row .poles .pos{color:#15803d}
.v48-at-row .poles .neg{color:#b91c1c;text-align:right}
.v48-at-row .meta{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:#9a8f86;margin-bottom:10px}
.v48-at-row .meta .fav{color:#15803d}
.v48-at-row.unset .meta .fav{color:#9a8f86}

.v48-slider{width:100%;-webkit-appearance:none;appearance:none;height:14px;border-radius:9px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,#22c55e 0%,#eab308 50%,#ef4444 100%)}
.v48-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:#fff;border:3px solid #0e1b24;box-shadow:0 4px 12px -3px rgba(0,0,0,.4);cursor:grab;transition:transform .1s}
.v48-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12)}
.v48-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #0e1b24;box-shadow:0 4px 12px -3px rgba(0,0,0,.4);cursor:grab}
.v48-slider.unset{filter:grayscale(.55) opacity(.8)}
.v48-slider.unset::-webkit-slider-thumb{border-color:#9a8f86}
.v48-at-ticks{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;font-weight:700;color:#b6aca2;padding:0 2px}

.v48-at-result{background:#fff;border:1.5px solid #ece5df;border-radius:18px;padding:20px;margin:6px 0 14px}
.v48-at-result h3{font-size:16px;font-weight:800;color:#241812;margin-bottom:4px}
.v48-at-result .big{font-size:26px;font-weight:800;color:#15803d;margin:6px 0}
.v48-at-result .big.mid{color:#b45309}.v48-at-result .big.low{color:#b91c1c}
.v48-at-bars{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.v48-at-bars .b{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:10px;font-size:12.5px}
.v48-at-bars .b .track{height:10px;border-radius:6px;background:#f1ece7;overflow:hidden}
.v48-at-bars .b .track i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:6px}
.v48-at-bars .b .track i.mid{background:linear-gradient(90deg,#eab308,#d97706)}
.v48-at-bars .b .track i.low{background:linear-gradient(90deg,#f97316,#ef4444)}
.v48-at-bars .b .pct{font-weight:800;text-align:right;color:#5b5048}
@media(max-width:560px){ .v48-at-bars .b{grid-template-columns:96px 1fr 40px} .v48-at-row .poles{font-size:12.5px} }

/* Step 2: remove the descriptive sub-line under each test title (keep instructions) */
.lt-hero>p,.so-hero>p,.ag-hero>p,.hd-hero>p,.hl-hero>p,.tm-hero>p,.bf-hero>p,.at-hero>p,.v48-at-wrap .at-hero>p{ display:none !important; }

/* ---- s18.css ---- */

/* ===== Step 3: Mutaxassis qabuliga yozilish ===== */
.ap-wrap{max-width:920px;margin:0 auto;padding:6px 0 70px}
.ap-hero{background:linear-gradient(135deg,#241812,#3d2110);color:#fff;border-radius:20px;padding:22px 24px;margin-bottom:16px}
.ap-hero .kick{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ffb787;margin-bottom:6px}
.ap-hero h2{font-size:clamp(20px,3vw,26px);font-weight:800;margin-bottom:6px}
.ap-hero p{font-size:14px;line-height:1.5;color:#e9d9cc;max-width:640px}

.ap-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.ap-week{display:flex;background:#f1ece7;border-radius:12px;padding:4px}
.ap-week button{border:0;background:transparent;font:inherit;font-weight:700;font-size:13.5px;color:#6a5c50;
  padding:9px 16px;border-radius:9px;cursor:pointer}
.ap-week button.on{background:#fff;color:#241812;box-shadow:0 2px 8px rgba(0,0,0,.08)}

.ap-days{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.ap-days button{border:1.5px solid #e5ddd5;background:#fff;font:inherit;font-weight:700;font-size:13px;
  color:#4a4038;padding:9px 14px;border-radius:11px;cursor:pointer;min-width:96px;text-align:center}
.ap-days button .d{display:block;font-size:11px;font-weight:600;color:#93857a;margin-top:2px}
.ap-days button.on{border-color:#241812;background:#241812;color:#fff}
.ap-days button.on .d{color:#e9d9cc}

.ap-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;font-size:12.5px;font-weight:600;color:#5b5048}
.ap-legend span{display:flex;align-items:center;gap:6px}
.ap-legend i{width:12px;height:12px;border-radius:4px;display:inline-block}
.ap-legend .free{background:#22c55e}.ap-legend .res{background:#ef4444}.ap-legend .blk{background:#eab308}

.ap-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.ap-slot{border:0;border-radius:13px;padding:14px 10px;font:inherit;font-weight:800;font-size:14px;
  cursor:pointer;color:#fff;text-align:center;line-height:1.25;transition:transform .07s,filter .15s}
.ap-slot small{display:block;font-size:10.5px;font-weight:700;opacity:.9;margin-top:3px}
.ap-slot:active{transform:translateY(2px) scale(.98)}
.ap-slot.free{background:linear-gradient(135deg,#22c55e,#15803d)}
.ap-slot.free:hover{filter:brightness(1.06)}
.ap-slot.res{background:linear-gradient(135deg,#f87171,#dc2626);cursor:not-allowed}
.ap-slot.blk{background:linear-gradient(135deg,#facc15,#d97706);cursor:not-allowed;color:#3a2c00}
.ap-slot.past{background:#d8d0c8;color:#8b8177;cursor:not-allowed}
.ap-slot.mine{background:linear-gradient(135deg,#3b82f6,#1d4ed8);cursor:pointer}

.ap-mine{margin-top:26px}
.ap-mine h3{font-size:15px;font-weight:800;color:#241812;margin-bottom:10px}
.ap-mine-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;
  border:1.5px solid #ece5df;border-radius:14px;padding:13px 15px;margin-bottom:9px}
.ap-mine-row .info b{display:block;font-size:14px;color:#241812}
.ap-mine-row .info span{font-size:12.5px;color:#7a6c60}
.ap-mine-row .info .amsg{display:block;margin-top:4px;font-size:12.5px;color:#2563eb;font-weight:600}
.ap-mine-row .st{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:8px}
.ap-mine-row .st.booked{background:#dcfce7;color:#15803d}
.ap-mine-row .st.cancelled{background:#fee2e2;color:#b91c1c}
.ap-mine-row .st.done{background:#e0e7ff;color:#3730a3}
.ap-x{border:0;background:#f3f4f6;color:#b91c1c;font:inherit;font-weight:800;font-size:12.5px;
  padding:8px 12px;border-radius:9px;cursor:pointer}

/* review modal */
.ap-ov{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(18,11,7,.80);backdrop-filter:blur(8px)}
.ap-ov.show{display:flex}
.ap-card{background:#fff;color:#1d2a33;border-radius:22px;max-width:460px;width:100%;padding:28px}
.ap-card h3{margin:0 0 6px;font-size:20px;font-weight:800}
.ap-card .when{font-size:15px;font-weight:700;color:#241812;margin:12px 0}
.ap-card label{display:block;font-size:12.5px;font-weight:700;color:#6a7683;margin:14px 0 6px}
.ap-card textarea{width:100%;border:1.5px solid #dfe3e8;border-radius:12px;padding:11px;font:inherit;
  font-size:14px;resize:vertical;min-height:74px}
.ap-actions{display:flex;gap:10px;margin-top:18px}
.ap-actions button{flex:1;border:0;border-radius:13px;padding:13px;font:inherit;font-weight:800;font-size:14.5px;cursor:pointer}
.ap-actions .back{background:#eef1f4;color:#33404c}
.ap-actions .go{background:linear-gradient(135deg,#22c55e,#15803d);color:#fff}

/* admin section */
.apA{margin-top:22px;border:1.5px solid #e6ebf0;border-radius:16px;padding:18px;background:#fbfcfd}
.apA h3{margin:0 0 4px;font-size:16px;font-weight:800;color:#1e293b}
.apA .sub{font-size:12.5px;color:#64748b;margin-bottom:12px}
.apA select{border:1.5px solid #cbd5e1;border-radius:10px;padding:9px 12px;font:inherit;font-weight:700;
  font-size:13.5px;background:#fff;color:#1e293b;margin-bottom:14px}
.apA-row{background:#fff;border:1.5px solid #e6ebf0;border-radius:13px;padding:13px 15px;margin-bottom:10px}
.apA-row .top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.apA-row b{font-size:14px;color:#0f172a}
.apA-row .when{font-size:12.5px;color:#475569;font-weight:600}
.apA-row .msg{font-size:12.5px;color:#334155;margin-top:6px}
.apA-row .msg.adm{color:#2563eb}
.apA-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.apA-btns button{border:0;border-radius:9px;padding:8px 12px;font:inherit;font-weight:800;font-size:12px;cursor:pointer}
.apA-btns .cancel{background:#fee2e2;color:#b91c1c}
.apA-btns .move{background:#fef9c3;color:#854d0e}
.apA-btns .msg{background:#dbeafe;color:#1d4ed8}
.apA-empty{font-size:13px;color:#94a3b8;padding:10px 0}

/* ---- s19.css ---- */

/* ===== Step 4a: sidebar dots + top-panel advisor ===== */
/* keep the coloured status dot only on the psychological tests;
   remove it from the reference / results / passport items */
.side-item.rs-nav .rs-dot,
.side-item.pasport-nav .req-dot,
.side-item.dc-nav .dc-dot,
.side-item.qf-nav .qf-dot{ display:none !important; }

/* advisor line in the top panel */
.tn-advisor{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:#6a5c50;
  white-space:nowrap;
}
.tn-advisor b{ color:#241812; font-weight:800; }
@media (max-width:720px){ .tn-advisor{ display:none; } }

/* ---- s20.css ---- */

/* ===== Step 5: student auth — Ism / Familiya + strong password ===== */
.pw-checks{margin-top:8px;display:grid;gap:4px}
.pw-checks .c{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#9a8c7f;transition:color .15s}
.pw-checks .c .b{width:15px;height:15px;border-radius:50%;border:2px solid #d8cec4;display:grid;place-items:center;flex:none;transition:all .15s}
.pw-checks .c .b svg{width:9px;height:9px;stroke:#fff;stroke-width:3.4;opacity:0}
.pw-checks .c.ok{color:#15803d}
.pw-checks .c.ok .b{background:#22c55e;border-color:#22c55e}
.pw-checks .c.ok .b svg{opacity:1}
#fpLink{display:none;margin-top:12px;font-size:13px;font-weight:700;color:#b45309;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#fpLink.show{display:inline-block}
.fp-note{font-size:12px;line-height:1.5;color:#6a7683;background:#f5f2ef;border-radius:12px;padding:11px 13px;margin:10px 0}

/* ---- s21.css ---- */

/* ===== Step 6: dark-mode contrast + rounded corners + sidebar grouping ===== */

/* --- round every rectangular block in the admin panel --- */
#adminShell details,
#adminShell summary,
#adminShell table, #adminShell thead, #adminShell tbody, #adminShell tr,
#adminShell th, #adminShell td,
#adminShell button, #adminShell select, #adminShell input, #adminShell textarea,
#adminShell [class*="card"], #adminShell [class*="stat"], #adminShell [class*="panel"],
#adminShell [class*="tile"], #adminShell [class*="box"], #adminShell [class*="row"],
#adminShell [class*="sec"], #adminShell [class*="grid"] > div,
.apA, .apA-row, .apA-btns button, .ap-slot, .ap-mine-row, .rvw-card, .ap-card{
  border-radius:14px !important;
}
#adminShell [class*="badge"], #adminShell [class*="chip"], #adminShell [class*="pill"],
#adminShell [class*="tag"], #adminShell .ac-badges > *{
  border-radius:999px !important;
}
#adminShell th:first-child{ border-top-left-radius:14px !important; }
#adminShell th:last-child{ border-top-right-radius:14px !important; }

/* --- dark-mode: sane default text colour inside the admin panel --- */
body.tl-dark #adminShell{ color:#e7edf2; }
body.tl-dark #adminShell b,
body.tl-dark #adminShell strong,
body.tl-dark #adminShell h1, body.tl-dark #adminShell h2,
body.tl-dark #adminShell h3, body.tl-dark #adminShell h4,
body.tl-dark #adminShell summary,
body.tl-dark #adminShell label,
body.tl-dark #adminShell th{ color:#f4f8fb !important; }
body.tl-dark #adminShell span,
body.tl-dark #adminShell small,
body.tl-dark #adminShell p,
body.tl-dark #adminShell td{ color:#cdd8e0 !important; }
/* the coloured metric cards: keep their tint but force a readable ink */
body.tl-dark #adminShell [class*="stat"] *,
body.tl-dark #adminShell [class*="card"] [class*="val"],
body.tl-dark #adminShell [class*="card"] b{ color:#f4f8fb !important; }
/* selects / inputs on the dark panel stay dark-on-light of their own */
body.tl-dark #adminShell select,
body.tl-dark #adminShell input,
body.tl-dark #adminShell textarea{
  background:#1b2830 !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
}
body.tl-dark #adminShell option{ background:#1b2830; color:#fff; }

/* --- feat-03 appointment slots: readable in dark mode --- */
body.tl-dark .ap-slot.past{ background:#3b3630 !important; color:#b6ada2 !important; }
body.tl-dark .ap-hero{ background:linear-gradient(135deg,#2a1c14,#40230f) !important; }
body.tl-dark .ap-days button{ background:#1f1b17 !important; color:#e7ddd2 !important; border-color:#4a4038 !important; }
body.tl-dark .ap-days button.on{ background:#e9d9cc !important; color:#241812 !important; }
body.tl-dark .ap-week{ background:#241f1b !important; }
body.tl-dark .ap-week button{ color:#c9bcae !important; }
body.tl-dark .ap-week button.on{ background:#e9d9cc !important; color:#241812 !important; }
body.tl-dark .ap-mine-row{ background:#1e1a17 !important; border-color:#3a332c !important; }
body.tl-dark .ap-mine-row .info b{ color:#f4ece2 !important; }
body.tl-dark .ap-mine-row .info span{ color:#c3b7a9 !important; }

/* --- sidebar: a divider + label before the "services" group --- */
.side-sec.f06-services{ margin-top:6px; }

/* ---- s22.css ---- */

/* ===== Step 7: admin — Talabalar uchun parolni qayta tiklash ===== */
.pr-sec{margin-top:22px;border:1.5px solid #e6ebf0;border-radius:16px;background:#fbfcfd;overflow:hidden}
body.tl-dark .pr-sec{background:#141b22;border-color:#26313b}
.pr-sec > summary{
  list-style:none;cursor:pointer;padding:16px 18px;display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:800;color:#1e293b;user-select:none;
}
body.tl-dark .pr-sec > summary{color:#f4f8fb}
.pr-sec > summary::-webkit-details-marker{display:none}
.pr-sec > summary .chev{margin-left:auto;transition:transform .2s;font-size:13px;opacity:.6}
.pr-sec[open] > summary .chev{transform:rotate(180deg)}
.pr-badge{background:#ef4444;color:#fff;font-size:12px;font-weight:800;border-radius:999px;
  min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center}
.pr-badge.zero{background:#cbd5e1;color:#475569}
.pr-body{padding:0 18px 18px}
.pr-row{background:#fff;border:1.5px solid #e6ebf0;border-radius:13px;padding:13px 15px;margin-bottom:10px}
body.tl-dark .pr-row{background:#1b2330;border-color:#2b3946}
.pr-row .top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.pr-row .who{font-size:14.5px;font-weight:800;color:#0f172a}
body.tl-dark .pr-row .who{color:#f4f8fb}
.pr-row .meta{font-size:12px;color:#64748b;font-weight:600}
.pr-row .desc{font-size:12.5px;color:#334155;margin-top:6px;line-height:1.5}
body.tl-dark .pr-row .desc{color:#c7d2dc}
.pr-row .st{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px}
.pr-row .st.pending{background:#fef9c3;color:#854d0e}
.pr-row .st.approved{background:#dcfce7;color:#15803d}
.pr-row .st.rejected{background:#fee2e2;color:#b91c1c}
.pr-row .st.used{background:#e0e7ff;color:#3730a3}
.pr-btns{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.pr-btns button{border:0;border-radius:10px;padding:9px 14px;font:inherit;font-weight:800;font-size:12.5px;cursor:pointer}
.pr-btns .ok{background:linear-gradient(135deg,#22c55e,#15803d);color:#fff}
.pr-btns .no{background:#fee2e2;color:#b91c1c}
.pr-empty{font-size:13px;color:#94a3b8;padding:8px 0}
.pr-win{font-size:12px;font-weight:700;color:#2563eb;margin-top:4px}

/* ---- s23.css ---- */

/* ===== Step 8: real contrast fix for the coloured admin panels + appt day filter ===== */

/* The admin overlay is ALWAYS dark (rgba(14,20,24,.92)), regardless of the
   app theme. So every coloured panel inside it needs light ink, in both
   light and dark app modes. Do it explicitly instead of guessing. */

/* filter bar */
#adminShell .admin-filters{
  background:linear-gradient(135deg, rgba(14,165,233,.16), rgba(34,197,94,.12)) !important;
}
#adminShell .admin-filters .fl label,
#adminShell .admin-filters label{
  color:#cfe0e8 !important;
}
#adminShell .admin-filters .fcount,
#adminShell .admin-filters span{ color:#dbe7ee !important; }

/* passport-download card */
#adminShell .passport-dl,
#adminShell [class*="passport"]{ }
#adminShell .passport-dl .pd-h,
#adminShell .passport-dl h3,
#adminShell [class*="passport"] h3,
#adminShell [class*="passport"] .pd-h,
#adminShell [class*="pdown"] h3{
  color:#eafaf1 !important;
}
#adminShell .passport-dl .pd-note,
#adminShell [class*="passport"] p,
#adminShell [class*="pdown"] p{ color:#c9d9d1 !important; }
#adminShell .passport-dl .pd-filter,
#adminShell [class*="passport"] [class*="filter"]{ color:#e7f2ec !important; }

/* "Umumiy statistika" heading + the infografika card heading */
#adminShell .stats-title,
#adminShell .stats-title *,
#adminShell [class*="stats-title"],
#adminShell [class*="gs-"] h3,
#adminShell [class*="gs-"] .gs-title,
#adminShell [class*="infograf"] h3{
  color:#eafaf1 !important;
}
#adminShell [class*="gs-"] .gs-sub,
#adminShell [class*="infograf"] .sub{ color:#c9d9d1 !important; }

/* the 5 metric cards + the infografika mini-cards */
#adminShell .stat-card, #adminShell [class*="stat-card"],
#adminShell [class*="gs-card"], #adminShell [class*="gs-tile"]{ color:#e7edf2 !important; }
#adminShell .stat-card b, #adminShell .stat-card .v,
#adminShell [class*="stat-card"] b, #adminShell [class*="gs-card"] b{ color:#ffffff !important; }
#adminShell .stat-card span, #adminShell [class*="stat-card"] span,
#adminShell [class*="gs-card"] span{ color:#c3d0d8 !important; }
/* section sub-headings inside infografika ("Jins taqsimoti" etc.) */
#adminShell [class*="gs-"] h4,
#adminShell [class*="gs-"] [class*="head"]{ color:#8fe3c0 !important; }

/* --- admin header buttons centered --- */
#adminOv .admin-head .sp,
#adminShell .admin-head .sp,
#adminOv .ah-actions,
#adminShell .sp{
  justify-content:center !important;
  flex-wrap:wrap;
}

/* --- appointment admin day cards --- */
.apA-days{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.apA-days button{
  border:1.5px solid #cbd5e1;background:#fff;font:inherit;font-weight:700;font-size:12.5px;
  color:#334155;padding:9px 13px;border-radius:12px;cursor:pointer;min-width:92px;text-align:center;
}
.apA-days button .d{display:block;font-size:11px;font-weight:600;color:#94a3b8;margin-top:2px}
.apA-days button.on{border-color:#1e293b;background:#1e293b;color:#fff}
.apA-days button.on .d{color:#cbd5e1}
.apA-days button.today{box-shadow:0 0 0 2px #22c55e}
body.tl-dark .apA-days button{background:#1b2330;color:#e7edf2;border-color:#2b3946}
body.tl-dark .apA-days button.on{background:#e7edf2;color:#1b2330}
.apA-today{font-size:12px;font-weight:700;color:#64748b;margin-bottom:8px}
body.tl-dark .apA-today{color:#9fb0b6}

/* ---- s24.css ---- */

/* ===== Step 9: one consistent dropdown format for every admin section ===== */
#adminShell .adm-drop{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  margin:0 0 14px;
  overflow:hidden;
  background:rgba(255,255,255,.035);
}
#adminShell .adm-drop > summary{
  list-style:none; cursor:pointer; user-select:none;
  padding:14px 16px;
  font:800 14.5px/1.3 inherit;
  color:#eef4f8;
  display:flex; align-items:center; gap:10px;
}
#adminShell .adm-drop > summary::-webkit-details-marker{ display:none; }
#adminShell .adm-drop > summary .adm-cv{ margin-left:auto; opacity:.55; transition:transform .2s; font-size:13px; }
#adminShell .adm-drop[open] > summary .adm-cv{ transform:rotate(180deg); }
#adminShell .adm-drop > summary .adm-count{
  background:rgba(255,255,255,.14); color:#dbe7ee;
  font-size:12px; font-weight:800; border-radius:999px; padding:2px 9px;
}
/* the wrapped section loses its own frame so the dropdown is the only frame */
#adminShell .adm-drop > .dl-cfg,
#adminShell .adm-drop > .admin-filters,
#adminShell .adm-drop > .passport-dl,
#adminShell .adm-drop > .tl-theme-card,
#adminShell .adm-drop > .f09-stats{
  border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
  margin:0 !important; padding:2px 16px 16px !important;
}
#adminShell .adm-drop > .f09-stats .stats-title{ margin-top:0 !important; }

/* round EVERYTHING rectangular in the admin panel */
#adminShell .stat-box, #adminShell .stat-grid > *,
#adminShell .dl-when-grid > *, #adminShell .dc-field,
#adminShell .admin-card, #adminShell .ac-badge,
#adminShell .tl-row, #adminShell .tl-theme-opt,
#adminShell .pd-actions button, #adminShell .dl-cfg .dc-h,
#adminShell [class*="gs-"] > div, #adminShell .stat-row .bar,
#adminShell .stat-row .bar i{
  border-radius:12px !important;
}
#adminShell .ac-badge{ border-radius:999px !important; }

/* name search field */
#adminShell #f09SearchFl{ flex:1 1 240px; }
#adminShell #f09Search{
  background:#1c2b30; color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:10px; padding:9px 12px; font:inherit; width:100%;
}
#adminShell #f09Search::placeholder{ color:#8fa3ab; }

/* ---- s25.css ---- */

/* ===== Step 10: remove 5-card stats, keep risk list; appt dropdown moved up;
                  admin no-jump refresh; up-button never on intro ===== */

/* the "go up / jump to result" button must never appear over the intro or the
   admin overlay */
#intro:not(.hide) ~ #tlUpBtn,
body:has(#adminOv.show) #tlUpBtn,
body.tl-adminopen #tlUpBtn{ display:none !important; }

/* risk list as its own section */
#adminShell .f10-risk .risk-person{
  display:flex; align-items:flex-start; gap:10px; justify-content:space-between;
  padding:10px 4px; border-bottom:1px solid rgba(255,255,255,.09);
  font-size:12.5px; color:#e6eef1; line-height:1.45;
}
#adminShell .f10-risk .risk-person:last-child{ border-bottom:0; }
#adminShell .f10-risk .risk-person b{ color:#fff; font-size:13px; display:block; }
#adminShell .f10-risk .rp-txt{ min-width:0; }
#adminShell .f10-risk .rp-dl{
  flex:none; border:0; border-radius:9px; padding:7px 11px;
  font:800 11.5px inherit; cursor:pointer;
  background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff;
}
#adminShell .f10-risk .risk-empty{ color:#9fb0b6; font-size:12.5px; padding:8px 4px; }

/* stop the layout jump: the shell keeps a min-height while re-rendering */
#adminShell{ min-height:var(--f10-minh, auto); }

/* ---- s26.css ---- */

/* ===== Step 11: student side of password reset (Tasdiqlanganlar) ===== */
#f11Link{ display:none; margin-top:8px; font-size:13px; font-weight:700;
  color:#15803d; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
#f11Link.show{ display:inline-block; }
.f11-ov{ position:fixed; inset:0; z-index:210; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(18,11,7,.82); backdrop-filter:blur(8px); }
.f11-ov.show{ display:flex; }
.f11-card{ background:#fff; color:#1d2a33; border-radius:22px; max-width:460px; width:100%; padding:28px; }
.f11-card h3{ margin:0 0 6px; font-size:20px; font-weight:800; }
.f11-card .note{ font-size:12px; line-height:1.5; color:#6a7683; background:#f5f2ef; border-radius:12px; padding:11px 13px; margin:10px 0 14px; }
.f11-card .field{ margin-bottom:12px; }
.f11-card label{ display:block; font-size:12.5px; font-weight:700; color:#55606b; margin-bottom:5px; }
.f11-card input{ width:100%; border:1.5px solid #dfe3e8; border-radius:12px; padding:11px; font:inherit; font-size:14px; }
.f11-checks{ margin:8px 0 4px; display:grid; gap:4px; }
.f11-checks .c{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#9a8c7f; }
.f11-checks .c .b{ width:15px; height:15px; border-radius:50%; border:2px solid #d8cec4; flex:none;
  display:grid; place-items:center; }
.f11-checks .c .b::after{ content:''; width:6px; height:6px; border-radius:50%; background:#fff; opacity:0; }
.f11-checks .c.ok{ color:#15803d; }
.f11-checks .c.ok .b{ background:#22c55e; border-color:#22c55e; }
.f11-checks .c.ok .b::after{ opacity:1; }
.f11-count{ font-size:13px; font-weight:800; color:#2563eb; margin:6px 0 2px; }
.f11-actions{ display:flex; gap:10px; margin-top:16px; }
.f11-actions button{ flex:1; border:0; border-radius:13px; padding:13px; font:inherit; font-weight:800; font-size:14.5px; cursor:pointer; }
.f11-actions .back{ background:#eef1f4; color:#33404c; }
.f11-actions .go{ background:linear-gradient(135deg,#22c55e,#15803d); color:#fff; }
.f11-msg{ margin-top:10px; font-size:13px; font-weight:700; }
.f11-msg.err{ color:#b91c1c; } .f11-msg.ok{ color:#15803d; }
/* eye toggle inside the reset password fields */
.f11-pw{ position:relative; }
.f11-pw input{ padding-right:44px; }
.f11-eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px;
  border:0; background:transparent; cursor:pointer; color:#6a7683; display:grid; place-items:center; padding:0; }
.f11-eye:hover{ color:#2563eb; }
.f11-eye svg{ width:22px; height:22px; }
/* congrats popup after a successful reset */
.f11-cong-ov{ position:fixed; inset:0; z-index:230; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(10,26,58,.82); backdrop-filter:blur(8px); }
.f11-cong-ov.show{ display:flex; }
.f11-cong{ background:#fff; color:#1d2a33; border-radius:22px; max-width:420px; width:100%; padding:30px 26px; text-align:center;
  animation:f11CongIn .32s ease both; box-shadow:0 40px 90px -30px rgba(0,0,0,.5); }
@keyframes f11CongIn{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }
.f11-cong .ic{ width:64px; height:64px; border-radius:18px; margin:0 auto 16px; display:grid; place-items:center;
  background:linear-gradient(135deg,#22c55e,#15803d); color:#fff; }
.f11-cong .ic svg{ width:34px; height:34px; }
.f11-cong h3{ margin:0 0 8px; font-size:21px; font-weight:800; }
.f11-cong p{ margin:0 0 16px; font-size:14px; line-height:1.6; color:#5d6a75; }
.f11-cong .pwbox{ display:flex; align-items:center; gap:8px; background:#f5f7fa; border:1.5px solid #e2e8f0;
  border-radius:13px; padding:11px 12px; margin-bottom:16px; }
.f11-cong .pwbox code{ flex:1; text-align:left; font-size:15px; font-weight:700; letter-spacing:.5px;
  color:#1d2a33; word-break:break-all; font-family:ui-monospace,Menlo,Consolas,monospace; }
.f11-cong .cbtn{ border:0; border-radius:10px; padding:9px 13px; font:inherit; font-weight:800; font-size:13px;
  cursor:pointer; color:#fff; background:linear-gradient(135deg,#2563eb,#1d4ed8); flex:none; }
.f11-cong .cbtn.done{ background:linear-gradient(135deg,#22c55e,#15803d); }
.f11-cong .go{ width:100%; border:0; border-radius:13px; padding:14px; font:inherit; font-weight:800; font-size:15px;
  cursor:pointer; color:#fff; background:linear-gradient(135deg,#22c55e,#15803d); }

/* ---- s27.css ---- */

/* ===== Step 12: correlation analytics in the admin panel ===== */
#adminShell .f12 .f12-item{ padding:12px 2px; border-bottom:1px solid rgba(255,255,255,.09); }
#adminShell .f12 .f12-item:last-child{ border-bottom:0; }
#adminShell .f12 .f12-h{ font-size:13px; font-weight:800; color:#eafaf1; margin-bottom:5px; }
#adminShell .f12 .f12-txt{ font-size:12.5px; line-height:1.55; color:#c7d5da; }
#adminShell .f12 .f12-txt b{ color:#8fe3c0; }
#adminShell .f12 .f12-bars{ margin-top:8px; display:grid; gap:6px; }
#adminShell .f12 .f12-bar{ display:grid; grid-template-columns:110px 1fr 42px; align-items:center; gap:8px; font-size:11.5px; color:#cdd8de; }
#adminShell .f12 .f12-bar .t{ height:9px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; }
#adminShell .f12 .f12-bar .t i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,#34d399,#059669); }
#adminShell .f12 .f12-bar .t i.warn{ background:linear-gradient(90deg,#fb923c,#ef4444); }
#adminShell .f12 .f12-none{ font-size:12.5px; color:#9fb0b6; padding:8px 2px; }

/* ---- s28.css ---- */

/* ============================================================
   Step 14 — readable text everywhere on the dark admin panel,
   no phantom auto-refresh, no phone overflow, subtle depth.
   ============================================================ */

/* ---- admin panel: the overlay is ALWAYS dark, so force light ink ---- */
#adminShell{ color:#e9eef2; }  /* plain default — targeted rules live in feat-16 */
#adminShell h1, #adminShell h2, #adminShell h3, #adminShell h4,
#adminShell b, #adminShell strong, #adminShell summary,
#adminShell .admin-bar h2, #adminShell .big, #adminShell .n,
#adminShell [class*="title"], #adminShell [class*="-h"]{
  color:#f7fbfd !important;
}
#adminShell .admin-bar h2{ text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* the header action buttons */
#adminShell .admin-btn, #adminShell .admin-btn *{
  color:#f4f8fa !important;
}
#adminShell .admin-btn:not(.ghost):not(.danger):not(.security){
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}
#adminShell .admin-btn.security{
  background:linear-gradient(180deg,rgba(56,189,248,.28),rgba(56,189,248,.12)) !important;
  border:1px solid rgba(125,211,252,.35) !important;
}

/* form controls keep dark-on-white of their own */
#adminShell input, #adminShell select, #adminShell textarea{
  color:#12202a !important; background:#ffffff !important;
  border:1px solid rgba(0,0,0,.18) !important;
}
#adminShell option{ color:#12202a; background:#fff; }

/* genuine white cards that sit inside the dark panel keep dark text */
#adminShell [style*="background:#fff"], #adminShell [style*="background: #fff"],
#adminShell [style*="background:#fff"] *, #adminShell [style*="background: #fff"] *{
  color:#1b2733 !important;
}
#adminShell .risk-empty, #adminShell .f12-none, #adminShell .apA-empty,
#adminShell .pr-empty{ color:#9fb0b6 !important; }

/* ---- "Menyuga o'tish" and the top-panel advisor: readable ---- */
.back-menu.to-menu, .back-menu.to-menu *{ color:#ffffff !important; }
.back-menu:not(.to-menu), .back-menu:not(.to-menu) *{ color:#1f2a37 !important; }
body.tl-dark .back-menu:not(.to-menu), body.tl-dark .back-menu:not(.to-menu) *{ color:#e6eef6 !important; }
.tn-advisor, .tn-advisor *{ color:#5b5044 !important; }
body.tl-dark .tn-advisor, body.tl-dark .tn-advisor *{ color:#cdd8e0 !important; }

/* ---- phone overflow on the survey / test option rows (root fix) ---- */
.tm-opt, .at-opt, .hd-opt, .lt-opt{ min-width:0 !important; }
.tm-opts{ flex-wrap:wrap !important; }
@media (max-width:620px){
  .tm-opts{ flex-direction:column !important; }
  .tm-opt{ width:100% !important; }
  .tm-hero h2, .bs-hero h2, .ag-hero h2, .hd-hero h2, .lt-hero h2,
  .so-hero h2, .tm-hero h2{
    font-size:clamp(16px,4.6vw,21px) !important;
    line-height:1.25 !important; overflow-wrap:anywhere; hyphens:auto;
  }
  .tm-hero, .bs-hero, .ag-hero, .hd-hero, .lt-hero, .so-hero,
  .tm-wrap, .bs-view, .ag-wrap, .hd-wrap, .lt-wrap{
    max-width:100% !important; box-sizing:border-box;
  }
  .tm-qhead > span:last-child{ overflow-wrap:anywhere; }
}
/* nothing should ever push the page sideways */
html, body{ overflow-x:hidden; }
#app .content{ overflow-x:hidden; }

/* ---- subtle professional depth (no motion cost) ---- */
#adminShell .adm-drop{
  box-shadow:0 10px 26px -18px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
}
#adminShell .adm-drop > summary{ transition:background .15s; }
#adminShell .adm-drop > summary:hover{ background:rgba(255,255,255,.04); }
#adminShell .admin-btn, .start, #loginGo, #regGo{
  box-shadow:0 6px 14px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
#adminShell .admin-btn:active, .start:active, #loginGo:active, #regGo:active{
  transform:translateY(2px);
  box-shadow:0 2px 6px -4px rgba(0,0,0,.5), inset 0 2px 6px rgba(0,0,0,.25);
}

/* ---- s29.css ---- */

#adminShell .pd-actions{display:flex;gap:10px;flex-wrap:wrap}
#adminShell .pd15{border:0;border-radius:12px;padding:11px 16px;font:inherit;font-weight:800;font-size:12.5px;cursor:pointer;color:#fff}
#adminShell .pd15.one{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
#adminShell .pd15.two{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
#adminShell .pd15.three{background:linear-gradient(135deg,#0e9f6e,#057a55)}
#adminShell .pd15:active{transform:translateY(2px)}

/* ---- s30.css ---- */

/* ============================================================
   Step 16 — titles readable everywhere (root fix), stop the
   old auto-recolour flicker, student cards = clean dropdowns,
   3D buttons.
   ============================================================ */

/* ---- gradient / dark headers always take WHITE ink ---- */
#adminShell .admin-bar, #adminShell .admin-bar *,
body.tl-palette .admin-bar, body.tl-palette .admin-bar *,
#adminShell .admin-bar h2,
body.tl-palette .gsx-h, body.tl-palette .gsx-h *,
#adminShell .gsx-h, #adminShell .gsx-h *,
#adminShell .stats-title, #adminShell .stats-title *,
body.tl-palette .passport-dl .pd-h, body.tl-palette .passport-dl .pd-h *,
#adminShell .passport-dl .pd-h, #adminShell .passport-dl .pd-h *,
.back-menu.to-menu, .back-menu.to-menu *,
body.tl-palette .display-hero, body.tl-palette .display-hero *,
body.tl-palette .tf-hero, body.tl-palette .tf-hero *,
.tm-hero, .tm-hero *, .bs-hero, .bs-hero *, .ag-hero, .ag-hero *,
.hd-hero, .hd-hero *, .lt-hero, .lt-hero *, .so-hero, .so-hero *,
.hl-hero, .hl-hero *, .bf-hero, .bf-hero *, .rc-hero, .rc-hero *,
.ap-hero, .ap-hero *, .v48-at-live, .v48-at-live *{
  color:#ffffff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
#adminShell .admin-bar .ab-ic svg{ stroke:#fff !important; }

/* ---- default ink for the dark admin panel body ---- */
#adminShell{ color:#e9eef2; }
#adminShell summary, #adminShell .adm-drop > summary,
#adminShell .adm-drop > summary span, #adminShell .pr-sec > summary{
  color:#eef4f8 !important;
}
#adminShell label, #adminShell .fcount, #adminShell .apA-today,
#adminShell .f12-txt, #adminShell .f12-bar, #adminShell .f12-bar *,
#adminShell .pr-row .meta, #adminShell .pr-row .desc,
#adminShell .apA-row .when, #adminShell .apA-row .msg{
  color:#cdd8e0 !important;
}
#adminShell .f12-h, #adminShell .pr-row .who, #adminShell .apA-row b{ color:#f4f8fb !important; }

/* ---- white cards inside the dark panel keep DARK ink ---- */
#adminShell .admin-card, #adminShell .admin-card *{ color:#1b1712 !important; }
#adminShell .admin-card .ac-nm b{ color:#12100c !important; }
#adminShell .admin-card .ac-nm span{ color:#5b5048 !important; }
#adminShell .admin-card .ac-badge.off{ color:#8a7f74 !important; }
#adminShell .gsx-card, #adminShell .gsx-card *,
#adminShell .gsx-b, #adminShell .gsx-b *{ color:#123038 !important; }
#adminShell .gsx-h b{ color:#fff !important; }
#adminShell .apA-days button, #adminShell .apA-days button *{ color:#33404c !important; }
#adminShell .apA-days button.on, #adminShell .apA-days button.on *{ color:#ffffff !important; }
#adminShell input, #adminShell select, #adminShell textarea{
  color:#12202a !important; background:#fff !important;
}

/* the student-side appointment day cards (not admin) */
.ap-days button, .ap-days button *{ color:#33404c !important; }
.ap-days button.on, .ap-days button.on *{ color:#ffffff !important; }

/* ---- student card: collapsed shows only name; details on "Ko'rish" ---- */
#adminShell .admin-card:not(.open) .ac-badges{ display:none !important; }
#adminShell .admin-card .ac-head{ flex-wrap:wrap; }
#adminShell .ac-tools{
  display:flex; gap:8px; margin-left:auto; align-items:center;
}
#adminShell .ac-see, #adminShell .ac-pdf{
  border:0; border-radius:10px; padding:8px 12px; font:inherit; font-weight:800;
  font-size:12px; cursor:pointer; color:#fff;
}
#adminShell .ac-see{ background:linear-gradient(135deg,#0891b2,#0e7490); }
#adminShell .ac-pdf{ background:linear-gradient(135deg,#7c3aed,#5b21b6); }
#adminShell .admin-card.open .ac-see{ background:linear-gradient(135deg,#334155,#1e293b); }
/* trash: clearly red */
#adminShell .ac-del{
  background:#dc2626 !important; color:#fff !important;
  border:1.5px solid #b91c1c !important;
}
#adminShell .ac-del svg{ stroke:#fff !important; }
#adminShell .ac-del:hover{ background:#b91c1c !important; }

/* ---- 3D buttons everywhere ---- */
#adminShell .admin-btn, #adminShell .admin-btn.menu,
#adminShell .ac-see, #adminShell .ac-pdf, #adminShell .pd15,
#adminShell .adm-drop > summary,
.start, #loginGo, #regGo, .auth-btn, .v44-btn, .wk-go,
.ap-slot, .ap-week button, .ap-days button, .rvw-actions button,
.f11-actions button, .pr-btns button, .apA-btns button{
  box-shadow:0 6px 0 -2px rgba(0,0,0,.28), 0 12px 22px -12px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.22) !important;
  transition:transform .07s ease, box-shadow .12s ease !important;
}
#adminShell .admin-btn:active, #adminShell .admin-btn.menu:active,
#adminShell .ac-see:active, #adminShell .ac-pdf:active, #adminShell .pd15:active,
.start:active, #loginGo:active, #regGo:active, .auth-btn:active,
.ap-slot:active, .rvw-actions button:active, .f11-actions button:active,
.pr-btns button:active, .apA-btns button:active{
  transform:translateY(3px) !important;
  box-shadow:0 2px 0 -1px rgba(0,0,0,.3), 0 4px 10px -6px rgba(0,0,0,.5),
             inset 0 2px 6px rgba(0,0,0,.22) !important;
}
#adminShell .admin-btn.menu, #adminShell .admin-btn.menu *{
  color:#f4f8fa !important;
}
#adminShell .admin-btn.menu{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.07)) !important;
  border:1px solid rgba(255,255,255,.2) !important;
}

/* ---- s31.css ---- */

/* ============================================================
   Step 17
   1. professional PDF reports restored (statistics + full)
   2. "Umumiy statistika" button -> "Faqat statistika"
   3. 3D effect on the currently-chosen sidebar item
   4. admin: hide a test from every student (config/hiddenTests)
   5. colourful status dots on atmos / womenviol / univviol /
      ibodullayev / tobelik
   6. Sozlamalar -> "Xavfsizlik" card
   7. "Tasdiqlanganlar" link shows only after 2 failed logins
   ============================================================ */

/* ---- 3. chosen sidebar item: raised 3D ---- */
.side-item.active{
  transform:translateY(-1px);
  box-shadow:0 9px 0 -3px rgba(120,26,0,.34),
             0 18px 30px -14px rgba(245,52,10,.7),
             inset 0 1px 0 rgba(255,255,255,.38) !important;
  transition:transform .08s ease, box-shadow .15s ease;
}
.side-item.active:active{
  transform:translateY(2px);
  box-shadow:0 3px 0 -2px rgba(120,26,0,.4),
             0 8px 16px -10px rgba(245,52,10,.6),
             inset 0 2px 6px rgba(0,0,0,.25) !important;
}

/* ---- 5. colourful dots on the items that had none ---- */
.side-item.at-nav .at-dot{ display:none !important; }
.side-item.at-nav::after,
.side-item.bs-nav[data-view="womenviol"]::after,
.side-item.bs-nav[data-view="univviol"]::after,
.side-item.bs-nav[data-view="ibodullayev"]::after,
.side-item.bs-nav[data-view="tobelik"]::after{
  content:""; margin-left:auto; width:9px; height:9px; border-radius:50%;
  flex:none; box-shadow:0 0 0 3px rgba(0,0,0,.14);
}
.side-item.at-nav::after{ background:#22c55e; }
.side-item.bs-nav[data-view="womenviol"]::after{ background:#ec4899; }
.side-item.bs-nav[data-view="univviol"]::after{ background:#8b5cf6; }
.side-item.bs-nav[data-view="ibodullayev"]::after{ background:#06b6d4; }
.side-item.bs-nav[data-view="tobelik"]::after{ background:#ef4444; }
.side-item.active::after{ box-shadow:0 0 0 3px rgba(255,255,255,.35) !important; }

/* ---- 4. hidden-from-students test in the sidebar ---- */
.side-item.f17-hidden{ display:none !important; }

/* ---- 4. admin "show / hide tests" section ---- */
.f17-htsec .f17ht-hint{
  font-size:12.5px; color:#64748b; font-weight:600; margin:2px 0 12px; line-height:1.5;
}
body.tl-dark .f17-htsec .f17ht-hint{ color:#9fb0bc; }
.f17-htsec .f17ht-row{
  display:flex; align-items:center; gap:10px; background:#fff;
  border:1.5px solid #e6ebf0; border-radius:12px; padding:11px 13px; margin-bottom:8px;
  font-size:13.5px; cursor:pointer;
}
body.tl-dark .f17-htsec .f17ht-row{ background:#1b2330; border-color:#2b3946; }
.f17-htsec .f17ht-row b{ color:#0f172a; font-weight:700; }
body.tl-dark .f17-htsec .f17ht-row b{ color:#f1f5f9; }
.f17-htsec .f17ht-row input{ width:18px; height:18px; flex:none; cursor:pointer; }
.f17-htsec .f17ht-st{
  margin-left:auto; font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px;
}
.f17-htsec .f17ht-st.on{ background:#dcfce7; color:#15803d; }
.f17-htsec .f17ht-st.off{ background:#fee2e2; color:#b91c1c; }

/* ---- 6. Xavfsizlik card in Sozlamalar ---- */
.f17-xsec{
  margin-top:14px; border-radius:18px; padding:18px 18px 6px;
  background:linear-gradient(160deg,#0f766e0d,#1d4ed80d);
  border:1px solid #cbd5e1;
}
body.tl-dark .f17-xsec{ background:linear-gradient(160deg,#0f766e26,#1d4ed824); border-color:#31425c; }
.f17-xsec .f17-xh{
  display:flex; align-items:center; gap:9px; font-size:16px; font-weight:800;
  color:#0f4c5c; margin:0 0 10px;
}
body.tl-dark .f17-xsec .f17-xh{ color:#8fd3d0; }
.f17-xsec .f17-xh svg{ width:22px; height:22px; stroke:currentColor; flex:none; }
.f17-xsec ul{ margin:0; padding:0 0 0 4px; list-style:none; }
.f17-xsec li{
  position:relative; padding:0 0 12px 22px; font-size:13px; line-height:1.6; color:#334155;
}
body.tl-dark .f17-xsec li{ color:#c7d2dc; }
.f17-xsec li::before{
  content:""; position:absolute; left:2px; top:7px; width:9px; height:9px;
  border-radius:50%; background:#0f9b8e; box-shadow:0 0 0 3px rgba(15,155,142,.18);
}

/* ---- APPOINTMENT VIEW: explicit ink for every part (all themes) ---- */
/* hero (always dark brown gradient) -> light text */
#view-appt .ap-hero,
#view-appt .ap-hero *,
#view-appt .ap-hero h2,
#view-appt .ap-hero p{ color:#ffffff !important; }
#view-appt .ap-hero .kick{ color:#ffcda3 !important; }
#view-appt .ap-hero p{ color:#efe4da !important; }

/* week toggle */
#view-appt .ap-week{ background:#f1ece7 !important; }
#view-appt .ap-week button{ color:#5b4d42 !important; }
#view-appt .ap-week button.on{ background:#ffffff !important; color:#241812 !important; }
body.tl-dark #view-appt .ap-week{ background:#241f1b !important; }
body.tl-dark #view-appt .ap-week button{ color:#d8ccbe !important; }
body.tl-dark #view-appt .ap-week button.on{ background:#e9d9cc !important; color:#241812 !important; }

/* day picker */
#view-appt .ap-days button{ background:#ffffff !important; color:#4a4038 !important; border-color:#e5ddd5 !important; }
#view-appt .ap-days button .d{ color:#8a7c70 !important; }
#view-appt .ap-days button.on{ background:#241812 !important; border-color:#241812 !important; }
#view-appt .ap-days button.on,
#view-appt .ap-days button.on .d,
#view-appt .ap-days button.on *{ color:#ffffff !important; }
body.tl-dark #view-appt .ap-days button{ background:#1f1b17 !important; color:#e7ddd2 !important; border-color:#4a4038 !important; }
body.tl-dark #view-appt .ap-days button .d{ color:#b6ada2 !important; }
body.tl-dark #view-appt .ap-days button.on{ background:#e9d9cc !important; }
body.tl-dark #view-appt .ap-days button.on,
body.tl-dark #view-appt .ap-days button.on .d,
body.tl-dark #view-appt .ap-days button.on *{ color:#241812 !important; }

/* legend */
#view-appt .ap-legend{ color:#5b5048 !important; }
#view-appt .ap-legend span{ color:inherit !important; }
body.tl-dark #view-appt .ap-legend{ color:#c9bcae !important; }

/* slots — keep white on the saturated fills, dark on the pale ones */
#view-appt .ap-slot,
#view-appt .ap-slot small,
#view-appt .ap-slot.free,
#view-appt .ap-slot.free *,
#view-appt .ap-slot.res,
#view-appt .ap-slot.res *,
#view-appt .ap-slot.mine,
#view-appt .ap-slot.mine *{ color:#ffffff !important; }
#view-appt .ap-slot.blk,
#view-appt .ap-slot.blk *{ color:#3a2c00 !important; }
#view-appt .ap-slot.past,
#view-appt .ap-slot.past *{ color:#7c7168 !important; }
body.tl-dark #view-appt .ap-slot.past,
body.tl-dark #view-appt .ap-slot.past *{ color:#b6ada2 !important; }

/* "Mening qabullarim" */
#view-appt .ap-mine h3{ color:#241812 !important; }
body.tl-dark #view-appt .ap-mine h3{ color:#f4ece2 !important; }
#view-appt .ap-mine-row .info b{ color:#241812 !important; }
#view-appt .ap-mine-row .info span{ color:#7a6c60 !important; }
body.tl-dark #view-appt .ap-mine-row .info b{ color:#f4ece2 !important; }
body.tl-dark #view-appt .ap-mine-row .info span{ color:#c3b7a9 !important; }

/* the booking confirmation modal text */
#apOv .ap-card, #apOv .ap-card h3, #apOv .ap-card .when,
#apOv .ap-card label, #apOv .ap-card p{ color:#1b2733 !important; }
#apOv .ap-card .back{ color:#5b4d42 !important; }
body.tl-dark #apOv .ap-card, body.tl-dark #apOv .ap-card h3,
body.tl-dark #apOv .ap-card .when, body.tl-dark #apOv .ap-card label,
body.tl-dark #apOv .ap-card p{ color:#e8eef4 !important; }

/* ================================================================
   ADMIN PANEL — section titles that feat-16 over-whitened.
   These sections are LIGHT cards sitting inside the dark overlay,
   so their headings must be DARK (light only when .tl-dark flips
   the card itself). #adminShell prefix + !important to outrank
   feat-16's blanket #adminShell rules.
   ================================================================ */

/* 1 + 4 — "Talabalar uchun parolni qayta tiklash" /
           "Testlarni ko'rsatish / berkitish" summary titles */
#adminShell .pr-sec > summary,
#adminShell .pr-sec > summary span,
#adminShell #prSec #prTitle,
#adminShell #f17HideSec #f17htTitle{ color:#17202b !important; }
body.tl-dark #adminShell .pr-sec > summary,
body.tl-dark #adminShell .pr-sec > summary span,
body.tl-dark #adminShell #prSec #prTitle,
body.tl-dark #adminShell #f17HideSec #f17htTitle{ color:#eef4f8 !important; }
#adminShell .pr-sec > summary .chev,
#adminShell #f17HideSec > summary .chev{ color:#8a94a0 !important; }

/* 4 — hide-tests body text on the white rows */
#adminShell .f17-htsec .f17ht-hint{ color:#475569 !important; }
#adminShell .f17-htsec .f17ht-row b{ color:#0f172a !important; }
body.tl-dark #adminShell .f17-htsec .f17ht-hint{ color:#9fb0bc !important; }
body.tl-dark #adminShell .f17-htsec .f17ht-row b{ color:#eef2f6 !important; }

/* 2 — custom-section editor: "Testlar va savollar" + its note/list */
#adminShell .cs-cfg .cc-h{ color:#1a1410 !important; }
#adminShell .cs-cfg .cc-h .cc-ic,
#adminShell .cs-cfg .cc-h .cc-ic svg{ color:#2c3e2a !important; stroke:#2c3e2a !important; }
#adminShell .cs-cfg .cc-note{ color:#5c5750 !important; }
#adminShell .cs-cfg .cc-empty{ color:#8a8078 !important; }
#adminShell .cs-cfg .cci-txt b{ color:#1a1410 !important; }
#adminShell .cs-cfg .cci-txt span{ color:#6b625a !important; }

/* 3 — infografika heading "Filtrlangan talabalar bo'yicha yig'ma ko'rsatkichlar"
       (white card -> dark teal ink, matching the body of that card) */
#adminShell .gsx-h,
#adminShell .gsx-h b,
#adminShell .gsx-h *{ color:#0f3d47 !important; }
#adminShell .gsx-h span{ color:#5c7684 !important; }

/* 5 — student-list order circles: white digits on the navy chip */
#adminShell .admin-card .ac-num,
#adminShell .admin-card .ac-num *{ color:#ffffff !important; }
#adminShell .admin-card .ac-num{ background:#1e293b !important; }

/* ---- 1/2. two PDF buttons keep the 3D press ---- */
#adminShell .pd15{ box-shadow:0 5px 0 -2px rgba(0,0,0,.28), 0 12px 20px -12px rgba(0,0,0,.5); }
#adminShell .pd15:active{ transform:translateY(3px); box-shadow:0 2px 0 -1px rgba(0,0,0,.3); }

/* ---- s32.css ---- */

/* ============================================================
   Step 18 — test-section updates
   A. "Men kimman?" (Big Five)  -> 3 options
   B. TTJ so'rovnomasi          -> 2 options + optional last note
   C. "Guruh atmosferasi"       -> smoother sliders
   D. "Shaxs yo'nalganligi"     -> X/Y/Z orientation score + result card
   E. Registration: required sex; girls-only violence surveys
   F. "Agressivlik"             -> per-scale interpretation text
   ============================================================ */

/* ---- C. atmos sliders: smoother thumb + a filled progress track ---- */
.v48-slider{
  position:relative;
  background:
    linear-gradient(90deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.55) var(--v48p,0%),
                          rgba(255,255,255,0) var(--v48p,0%), rgba(255,255,255,0) 100%),
    linear-gradient(90deg,#22c55e 0%,#eab308 50%,#ef4444 100%) !important;
  transition:background .18s ease !important;
}
.v48-slider::-webkit-slider-thumb{
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), border-color .18s ease, box-shadow .18s ease !important;
  will-change:transform;
}
.v48-slider:hover::-webkit-slider-thumb{ transform:scale(1.06); }
.v48-slider:active::-webkit-slider-thumb{ transform:scale(1.18) !important; box-shadow:0 6px 18px -4px rgba(0,0,0,.5) !important; }
.v48-slider::-moz-range-thumb{ transition:transform .16s cubic-bezier(.34,1.56,.64,1), border-color .18s ease !important; }
.v48-at-row{ transition:border-color .25s ease, box-shadow .25s ease !important; }
.v48-at-row .fav, .v48-at-row .v48-at-ticks span{ transition:color .18s ease; }
.v48-at-balance i{ transition:width .35s cubic-bezier(.4,0,.2,1) !important; }

/* ---- D. orientation result card ---- */
.f18-ori{
  background:linear-gradient(135deg,var(--so-soft,#eef6f7),#fff);
  border:1.5px solid var(--so-l,#22b8cf); border-radius:18px;
  padding:18px 20px; margin:6px 0 16px;
}
.f18-ori h3{ font-size:15px; font-weight:800; color:#0f4c5c; margin:0 0 4px; }
.f18-ori .f18-dom{ font-size:13.5px; font-weight:700; color:#155e75; margin:0 0 12px; }
.f18-ori .f18-dom b{ color:#0e7490; }
.f18-ori .f18-bar{ display:grid; grid-template-columns:150px 1fr 62px; align-items:center; gap:10px; margin:8px 0; font-size:12.5px; }
.f18-ori .f18-bar .nm{ font-weight:700; color:#243b42; }
.f18-ori .f18-bar .tk{ height:12px; border-radius:7px; background:#e7eef0; overflow:hidden; }
.f18-ori .f18-bar .tk i{ display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,#0891b2,#0e7490); }
.f18-ori .f18-bar.dom .tk i{ background:linear-gradient(90deg,#f59e0b,#d97706); }
.f18-ori .f18-bar .vl{ text-align:right; font-weight:800; color:#0f4c5c; }
.f18-ori .f18-note{ font-size:12px; line-height:1.55; color:#3f5860; margin-top:10px; }
body.tl-dark .f18-ori{ background:linear-gradient(135deg,#12333b,#0e2229); border-color:#1f5b66; }
body.tl-dark .f18-ori h3{ color:#8fd3d0; }
body.tl-dark .f18-ori .f18-dom, body.tl-dark .f18-ori .f18-bar .nm, body.tl-dark .f18-ori .f18-note{ color:#c3d6da; }
body.tl-dark .f18-ori .f18-bar .tk{ background:#183038; }

/* ---- F. aggression per-scale interpretation ---- */
.f18-agr{ margin-top:12px; }
.f18-agr .f18-adesc{ font-size:11.5px; line-height:1.5; color:#5b6b73; margin:2px 0 10px 2px; }
.f18-agr .f18-asum{
  font-size:12.5px; line-height:1.6; color:#33434a; background:#f4f7f8;
  border-left:4px solid #0f9b8e; border-radius:10px; padding:10px 12px; margin-top:6px;
}
body.tl-dark .f18-agr .f18-adesc{ color:#9db0b7; }
body.tl-dark .f18-agr .f18-asum{ color:#d3dee2; background:#14232a; }

/* ---- E. registration sex field ---- */
#rf_sex .f18-sex-btns{ display:flex; gap:10px; }
#rf_sex .f18-sex-btns button{
  flex:1; border:1.5px solid #d9d2ca; background:#fff; border-radius:12px;
  padding:11px 10px; font:inherit; font-weight:700; font-size:14px; cursor:pointer;
  color:#4a4038; transition:.15s;
}
#rf_sex .f18-sex-btns button.on{ background:linear-gradient(135deg,#0891b2,#0e7490); color:#fff; border-color:transparent; }
#rf_sex.err .f18-sex-btns{ outline:2px solid #ef4444; outline-offset:3px; border-radius:12px; }
body.tl-dark #rf_sex .f18-sex-btns button{ background:#1f1b17; color:#e7ddd2; border-color:#4a4038; }

/* ---- s33.css ---- */

/* ============================================================
   Step 19 — test content updates
   H1. HADS  : 14 real items + per-item wordings + subscale bars
   H2. "Ibodullayev shkalasi" : 20-item Zung/Sung depression scale
   H3. "Tobelik hulqi" : "Hech qachon" moved to the last option
   H4. Merge "Xotin-qizlarga zo'ravonlik" + "Universitetda zo'ravonlik"
   ============================================================ */

/* subscale / result bars shared by HADS + Sung + Tobelik result cards */
.f19-bars{ display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.f19-bar{ display:grid; grid-template-columns:132px 1fr 74px; align-items:center; gap:10px; font-size:12.5px; }
.f19-bar .nm{ font-weight:700; color:#243b42; }
.f19-bar .tk{ height:12px; border-radius:7px; background:#e7eef0; overflow:hidden; }
.f19-bar .tk i{ display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,#22c55e,#16a34a); }
.f19-bar.warn .tk i{ background:linear-gradient(90deg,#f59e0b,#d97706); }
.f19-bar.danger .tk i{ background:linear-gradient(90deg,#ef4444,#b91c1c); }
.f19-bar .vl{ text-align:right; font-weight:800; color:#0f4c5c; }
.f19-note{ font-size:12px; line-height:1.55; color:#3f5860; margin-top:10px; }
.f19-verdict{ font-size:13.5px; font-weight:800; margin:4px 0 2px; }
.f19-verdict.ok{ color:#15803d; } .f19-verdict.warn{ color:#b45309; } .f19-verdict.danger{ color:#b91c1c; }
body.tl-dark .f19-bar .nm, body.tl-dark .f19-note{ color:#c3d6da; }
body.tl-dark .f19-bar .tk{ background:#183038; }

.f19-sung-result, .f19-tob-result{
  background:linear-gradient(135deg,#eef6f7,#fff); border:1.5px solid #22b8cf;
  border-radius:18px; padding:18px 20px; margin:6px 0 14px;
}
.f19-sung-result h3, .f19-tob-result h3{ margin:0 0 4px; font-size:15px; font-weight:800; color:#0f4c5c; }
.f19-sung-result .big, .f19-tob-result .big{ font-size:24px; font-weight:800; color:#0e7490; margin:2px 0 4px; }
body.tl-dark .f19-sung-result, body.tl-dark .f19-tob-result{ background:linear-gradient(135deg,#12333b,#0e2229); border-color:#1f5b66; }
body.tl-dark .f19-sung-result h3, body.tl-dark .f19-tob-result h3{ color:#8fd3d0; }

/* hide the now-merged "Universitetda zo'ravonlik" nav item */
.side-item[data-view="univviol"]{ display:none !important; }

/* ---- s34.css ---- */

/* ============================================================
   Step 20
   1. Big Five 3-option buttons centred
   2. per-test PDF + "Test xulosasi" (drop the AI panel / Word)
   3. "Umumiy statistika va infografika" header always white
   4. registration: first field = name only, drop "hozirgi manzil"
   5. registration "fill all fields" false-positive fixed
   6. page refresh no longer logs the student out
   7. registration + login fully translated
   ============================================================ */

/* 1 — Big Five now has 3 options: fill the row, don't hug the left */
#view-bigfive .bf-opts{ grid-template-columns:repeat(3,1fr) !important; max-width:520px; margin-left:auto; margin-right:auto; }
@media (max-width:620px){ #view-bigfive .bf-opts{ grid-template-columns:repeat(3,1fr) !important; } }
#view-bigfive .bf-opt{ text-align:center; }

/* 3 — infografika header: solid green panel, white ink, every theme */
#adminShell .gsx-h{
  background:var(--tl-theme-grad, linear-gradient(135deg,#2C3E2A,#3D5A3A)) !important;
  border-radius:14px !important; padding:14px 16px !important; margin:0 0 14px !important;
}
#adminShell .gsx-h, #adminShell .gsx-h *{
  color:#ffffff !important; text-shadow:0 1px 2px rgba(0,0,0,.28) !important;
}
#adminShell .gsx-h svg{ stroke:#ffffff !important; }
#adminShell .gsx-h .gsx-ay{ background:rgba(255,255,255,.16) !important; }

/* 2 — "Test xulosasi" card + PDF button */
.f20-hulosa{
  margin-top:12px; border-radius:16px; padding:15px 17px;
  background:linear-gradient(160deg,#0f766e0d,#1d4ed80d); border:1px solid #cbd5e1;
}
body.tl-dark .f20-hulosa{ background:linear-gradient(160deg,#0f766e26,#1d4ed824); border-color:#31425c; }
.f20-hulosa h4{
  margin:0 0 7px; font-size:14.5px; font-weight:800; color:#0f4c5c;
  display:flex; align-items:center; gap:7px;
}
body.tl-dark .f20-hulosa h4{ color:#8fd3d0; }
.f20-hulosa p{ margin:0; font-size:13px; line-height:1.62; color:#334155; }
body.tl-dark .f20-hulosa p{ color:#c7d2dc; }
.test-actions .save-word-btn.word{ background:linear-gradient(135deg,#dc2626,#b91c1c) !important; }

/* 4 — hide the "current address" field */
#rf_resid{ display:none !important; }

/* ---- s35.css ---- */

/* ============================================================
   Step 21 — Temperament: full 80-statement questionnaire
   (Belov "temperament formula"), 4 parts of 20, Ha/Yo'q.
   ============================================================ */
.f21-part{
  margin:18px 0 8px; padding:11px 15px; border-radius:13px;
  background:linear-gradient(135deg,#0f766e,#155e63); color:#fff;
  font-weight:800; font-size:15px; display:flex; align-items:center; gap:9px;
}
.f21-part span{ font-weight:600; font-size:12.5px; opacity:.9; }
body.tl-dark .f21-part{ background:linear-gradient(135deg,#0c5450,#0f4448); }

.f21-tres{ margin-top:4px; }
.f21-tres .f21-dom{ font-size:14px; font-weight:800; color:#0f4c5c; margin:2px 0 10px; }
body.tl-dark .f21-tres .f21-dom{ color:#8fd3d0; }
.f21-tres .f21-bar{ display:grid; grid-template-columns:112px 1fr 66px; align-items:center; gap:10px; margin:7px 0; font-size:12.5px; }
.f21-tres .f21-bar .nm{ font-weight:700; color:#243b42; }
body.tl-dark .f21-tres .f21-bar .nm{ color:#c3d6da; }
.f21-tres .f21-bar .tk{ height:12px; border-radius:7px; background:#e7eef0; overflow:hidden; }
body.tl-dark .f21-tres .f21-bar .tk{ background:#183038; }
.f21-tres .f21-bar .tk i{ display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,#0891b2,#0e7490); }
.f21-tres .f21-bar.dom .tk i{ background:linear-gradient(90deg,#f59e0b,#d97706); }
.f21-tres .f21-bar .vl{ text-align:right; font-weight:800; color:#0f4c5c; }
body.tl-dark .f21-tres .f21-bar .vl{ color:#8fd3d0; }
.f21-tres .f21-note{ font-size:12px; line-height:1.55; color:#3f5860; margin-top:10px; }
body.tl-dark .f21-tres .f21-note{ color:#c3d6da; }

/* ---- s36.css ---- */

/* ============================================================
   Step 22
   1. "Kirish" always orange, "Ro'yxatdan o'tish" always green —
      the admin colour palette can never repaint them.
   2. The admin's chosen palette reaches every student.
   3. Registration "Iltimos, barcha maydonlarni to'ldiring." dead end:
      feat-01's review step validated the OLD single "#ri_fio" field,
      which feat-05 split into #ri_first / #ri_last — so it always
      failed and the real doReg never ran. The review pop-up is
      removed and the legacy field ids are kept in sync.
   ============================================================ */

/* 1 — fixed brand colours for the two entry buttons ------------------ */
.intro-actions .start:not(.reg),
button.start:not(.reg),
#loginGo,
body.tl-palette .intro-actions .start:not(.reg),
body.tl-palette #loginGo,
body.tl-dark #loginGo{
  background:linear-gradient(135deg,#fb923c,#f5340a) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}
.intro-actions .start:not(.reg):hover, #loginGo:hover{
  box-shadow:0 22px 40px -14px rgba(245,52,10,.65) !important;
}
.intro-actions .start.reg,
button.start.reg,
#regGo,
body.tl-palette .intro-actions .start.reg,
body.tl-palette #regGo,
body.tl-dark #regGo{
  background:linear-gradient(135deg,#22c55e,#15803d) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}
.intro-actions .start.reg:hover, #regGo:hover{
  box-shadow:0 22px 40px -14px rgba(21,128,61,.6) !important;
}
.intro-actions .start *, #loginGo *, #regGo *{ color:#ffffff !important; }

/* 3 — the registration review pop-up never shows again */
#rvwOv{ display:none !important; }

/* ---- s37.css ---- */

/* ============================================================
   Step 23 — two contrast corrections
   1. "Uchrashuv vaqtlarini nazorat qilish" sits on a WHITE card,
      but earlier layers forced its text light -> make it dark.
   2. "Umumiy statistika va infografika" title stayed dark because
      feat-17's `.gsx-h b` (1,1,1) outranked feat-20's `.gsx-h *`
      (1,1,0) -> force the whole green header white with a higher
      specificity selector.
   ============================================================ */

/* ---- 1. appointment control panel: dark ink on its white card ---- */
#adminShell #apAdminSec,
#adminShell #apAdminSec div,
#adminShell #apAdminSec span,
#adminShell #apAdminSec b,
#adminShell #apAdminSec p,
#adminShell #apAdminSec label,
#adminShell #apAdminSec .apA-row b,
#adminShell #apAdminSec .apA-row .top b{
  color:#1b2733 !important;
}
#adminShell #apAdminSec .apA-today,
#adminShell #apAdminSec .apA-row .when,
#adminShell #apAdminSec .apA-row .msg,
#adminShell #apAdminSec .apA-empty{
  color:#475569 !important;
}
/* the action pills keep their own ink */
#adminShell #apAdminSec .apA-btns button.cancel{ color:#b91c1c !important; }
#adminShell #apAdminSec .apA-btns button.move{ color:#854d0e !important; }
#adminShell #apAdminSec .apA-btns button.msg{ color:#1e40af !important; }
#adminShell #apAdminSec .apA-btns button{ text-shadow:none !important; }
#adminShell #apAdminSec .apA-days button,
#adminShell #apAdminSec .apA-days button *{ color:#334155 !important; }
#adminShell #apAdminSec .apA-days button .d{ color:#94a3b8 !important; }
#adminShell #apAdminSec .apA-days button.on,
#adminShell #apAdminSec .apA-days button.on *{ color:#ffffff !important; }
#adminShell #apAdminSec .apA-days button.on .d{ color:#cbd5e1 !important; }

/* dark theme: the card goes dark, so flip the ink back */
body.tl-dark #adminShell #apAdminSec,
body.tl-dark #adminShell #apAdminSec div,
body.tl-dark #adminShell #apAdminSec span,
body.tl-dark #adminShell #apAdminSec b,
body.tl-dark #adminShell #apAdminSec .apA-row b,
body.tl-dark #adminShell #apAdminSec .apA-row .top b{
  color:#e7edf2 !important;
}
body.tl-dark #adminShell #apAdminSec .apA-today,
body.tl-dark #adminShell #apAdminSec .apA-row .when,
body.tl-dark #adminShell #apAdminSec .apA-row .msg,
body.tl-dark #adminShell #apAdminSec .apA-empty{
  color:#a9b8c2 !important;
}
body.tl-dark #adminShell #apAdminSec .apA-days button,
body.tl-dark #adminShell #apAdminSec .apA-days button *{ color:#e7edf2 !important; }
body.tl-dark #adminShell #apAdminSec .apA-days button.on,
body.tl-dark #adminShell #apAdminSec .apA-days button.on *{ color:#1b2330 !important; }

/* ---- 2. infografika header: the whole green bar is white ---- */
#adminShell .gsx-card .gsx-h,
#adminShell .gsx-card .gsx-h b,
#adminShell .gsx-card .gsx-h span,
#adminShell .gsx-card .gsx-h div,
#adminShell .gsx-card .gsx-h *,
body.tl-dark #adminShell .gsx-card .gsx-h b,
body.tl-dark #adminShell .gsx-card .gsx-h span,
body.tl-palette #adminShell .gsx-card .gsx-h b,
body.tl-palette #adminShell .gsx-card .gsx-h span{
  color:#ffffff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.3) !important;
}
#adminShell .gsx-card .gsx-h svg{ stroke:#ffffff !important; }
#adminShell .gsx-card .gsx-h .gsx-ay{
  background:rgba(255,255,255,.18) !important; color:#ffffff !important;
}

/* ---- s38.css ---- */

/* ===== intro page: blue palette (scoped to #intro only) ===== */
html body #intro{background:linear-gradient(150deg,#050d1f 0%,#0a1a3a 42%,#0d2350 72%,#071229 100%)}
html body #intro .bgimg{opacity:.07;filter:grayscale(.7) brightness(.8)}
html body #intro .bgshade{background:radial-gradient(circle at 50% 42%,rgba(10,26,58,.30),rgba(4,10,24,.88))}
html body #intro .aura.a1{background:#1d4ed8;opacity:.42}
html body #intro .aura.a2{background:#2563eb;opacity:.38}
html body #intro .aura.a3{background:#1e3a8a;opacity:.45}
html body #intro .intro-inner h1{color:#f2f7ff;letter-spacing:-.6px}
html body #intro .intro-inner h1 .t2{display:block;color:#4da3ff}
html body #intro .lead{color:#b9cbe8}
html body #intro .quote-orb{background:linear-gradient(135deg,rgba(16,42,95,.92),rgba(10,26,60,.92));border:1px solid rgba(120,170,255,.30);backdrop-filter:blur(4px)}
html body #intro .quote-orb::before{background:conic-gradient(from 180deg,transparent,#4da3ff,transparent,#8b5cf6,transparent)}
html body #intro .quote-orb::after{background:rgba(10,26,58,.88)}
html body #intro .quote-content{color:#dce9fb}
html body #intro .quote-content small{color:#6fb0ff}
/* Kirish stays warm, Ro'yxatdan o'tish becomes the blue/violet action */
html body #intro .intro-actions .start.reg,html body #intro button.start.reg{background:linear-gradient(100deg,#2f86ff,#4f6dff 55%,#8b5cf6)!important;box-shadow:0 20px 44px -18px rgba(79,109,255,.75)!important}
html body #intro .start.reg:hover{filter:brightness(1.07)}
html body #intro .author--foot{color:#8fa9cc}
html body #intro .author--foot b{color:#dbe8fb}
html body #intro .rlogo{background:transparent;box-shadow:0 0 60px -6px rgba(90,160,255,.55)}
html body #intro .rlogo img{background:transparent}

/* ---- s39.css ---- */

/* the reset-request rows render on white cards in both themes, so the text
   must stay dark - the old tl-dark rule painted it near-white on white */
#adminShell .pr-row,body.tl-dark #adminShell .pr-row{background:#fff!important;border-color:#e2e8f0!important}
#adminShell .pr-row .who,body.tl-dark #adminShell .pr-row .who{color:#0f172a!important}
#adminShell .pr-row .meta,body.tl-dark #adminShell .pr-row .meta{color:#475569!important}
#adminShell .pr-row .desc,body.tl-dark #adminShell .pr-row .desc{color:#1f2937!important}
#adminShell .pr-row .pr-win,body.tl-dark #adminShell .pr-row .pr-win{color:#1d4ed8!important}
#adminShell .pr-empty,body.tl-dark #adminShell .pr-empty{color:#475569!important}

/* ---- s40.css ---- */

/* "Menyuga o'tish" — same pressed-button 3D as the active sidebar item */
html body .back-menu.to-menu{
  border:0;
  transform:translateY(-2px);
  box-shadow:0 10px 0 -3px rgba(120,26,0,.38),
             0 20px 32px -14px rgba(245,52,10,.7),
             inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .08s ease, box-shadow .15s ease, filter .15s ease;
}
html body .back-menu.to-menu:hover{
  transform:translateY(-3px);
  filter:brightness(1.05);
  box-shadow:0 13px 0 -3px rgba(120,26,0,.4),
             0 26px 38px -14px rgba(245,52,10,.78),
             inset 0 1px 0 rgba(255,255,255,.46);
}
html body .back-menu.to-menu:active{
  transform:translateY(2px);
  box-shadow:0 3px 0 -2px rgba(120,26,0,.45),
             0 8px 16px -10px rgba(245,52,10,.6),
             inset 0 2px 6px rgba(0,0,0,.28);
}

/* ---- s41.css ---- */

/* "Change photo" button in the psychological passport — make the label clearly
   readable (was faint amber, barely visible on the green saved card) */
html body .pp-photo .pbtn{background:#ffffff !important;color:#1a1410 !important;
  border:1.5px solid var(--amber) !important;font-weight:800 !important}
html body .pp-photo .pbtn:hover{background:#fff5ec !important;color:#1a1410 !important}

/* ---- s42.css ---- */

/* #4 — animated gradient shine on every test title card (like the TTJ card) */
.bf-hero,.hl-hero,.lt-hero,.so-hero,.ag-hero,.hd-hero,.tm-hero,.at-hero,.tu-hero,.tt-hero,.cs-hero{position:relative;overflow:hidden}
.bf-hero::before,.hl-hero::before,.lt-hero::before,.so-hero::before,.ag-hero::before,.hd-hero::before,.tm-hero::before,.at-hero::before,.tu-hero::before,.tt-hero::before{
  content:"";position:absolute;top:-40%;left:-60%;width:55%;height:180%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);
  animation:heroShine 5.5s ease-in-out 1s infinite;z-index:0}
.bf-hero>*,.hl-hero>*,.lt-hero>*,.so-hero>*,.ag-hero>*,.hd-hero>*,.tm-hero>*,.at-hero>*,.tu-hero>*,.tt-hero>*{position:relative;z-index:1}
@keyframes heroShine{0%,55%{left:-60%}82%,100%{left:130%}}
@media(prefers-reduced-motion:reduce){.bf-hero::before,.hl-hero::before,.lt-hero::before,.so-hero::before,.ag-hero::before,.hd-hero::before,.tm-hero::before,.at-hero::before,.tu-hero::before,.tt-hero::before{animation:none}}

/* #2 — "Test xulosasi" summary block (replaces the old AI analysis) */
.tl-xulosa{margin-top:14px;border:1px solid #e2e8f0;border-radius:14px;background:linear-gradient(135deg,#f0f9ff,#faf5ff);overflow:hidden}
body.tl-dark .tl-xulosa{background:linear-gradient(135deg,#12202a,#1a1830);border-color:#2b3946}
.tl-xulosa .tx-h{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;color:#0e7490;padding:12px 15px 8px}
body.tl-dark .tl-xulosa .tx-h{color:#5ec9d8}
.tl-xulosa .tx-h svg{width:17px;height:17px;flex:none}
.tl-xulosa .tx-row{display:flex;justify-content:space-between;gap:14px;padding:8px 15px;border-top:1px solid #eef2f6;font-size:13.5px}
body.tl-dark .tl-xulosa .tx-row{border-color:#26313b}
.tl-xulosa .tx-row span{color:#5b6470;font-weight:600}
body.tl-dark .tl-xulosa .tx-row span{color:#9fb0bc}
.tl-xulosa .tx-row b{color:#0f172a;font-weight:800;text-align:right}
body.tl-dark .tl-xulosa .tx-row b{color:#eef4f8}

/* ---- s43.css ---- */

/* #3 — consistent spacing between the admin panel accordion sections */
#adminOv .adm-drop,#adminOv .pr-sec,#adminOv .bc-sec,#adminOv .mm-sec,#adminOv .stf-sec,
#adminOv details.students-drop,#adminOv #f17HideSec,#adminOv .apA{margin-top:16px!important;margin-bottom:16px!important}
#adminOv .admin-bar{margin-bottom:6px}
#adminOv .mm-card h4,#adminOv .mm-card h4 *{color:#111827!important}
#adminOv .mm-card .mm-cnt{color:#475569!important}

/* ---- s44.css ---- */
/* =====================================================================
   s44.css -- admin bar layout + export chooser (see assets/j54.js)
   ===================================================================== */

/* ---- 1 & 2: bell beside the title, actions centred ---- */

/* The title and the bell share a row; the bell sits right after the text.

   The classless selector matters as much as the .ab-title-wrap one. After a
   rebuild the title sits in a bare <div> until j54.js adds the class ~140ms
   later. Measured, that bare div is 182px wide against .ab-title-wrap's
   232px, which is narrow enough to fit beside the 45px icon -- so the bar
   lost a whole row and went 201px -> 152px -> 201px on every render. All of
   that is above the viewport, so the panel below it jumped.

   Giving both the same full-width geometry means the first painted frame
   already matches the final one and the bar height never changes. */
#adminShell .admin-bar > div:not([class]),
#adminShell .admin-bar .ab-title-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  /* Hold the row at the height it ends up once the bell is in it, so
     inserting the bell cannot change the bar either. The bell button is
     16px of icon plus 7px padding each side and a border, which lays the
     row out at 36px -- measured, not guessed: without this the row was 32px
     before the bell and 36px after, and the bar still moved 3px on every
     render. */
  min-height: 36px;
}
#adminShell .admin-bar .ab-title-wrap h2 { margin: 0; }

/* the bell keeps its badge, but drops the wide button padding now that it
   is inline with the heading rather than one of the actions */
#adminShell .admin-bar .ab-title-wrap .adm-bell {
  position: relative;
  padding: 7px;
  min-width: 0;
  flex: none;
  line-height: 0;
}

/* No bell ever occupies space inside .sp.
   The real bell lives in .ab-title-wrap, so anything matching .adm-bell
   inside .sp is j24.js's duplicate: either the one it injects before j54.js
   has moved the first one out, or the zero-size marker j54 leaves to stop it
   injecting again.

   This is a CSS rule rather than more JavaScript because the problem was a
   race. Measured at 375px wide, every render went

       t=179  the innerHTML rebuild wipes the bar (and j54's marker with it)
       t=193  j24 injects a bell into .sp   -> bar 103px -> 151px
       t=327  j54 moves it to the title row -> bar 151px -> 103px

   leaving ~150ms where the bar was 48px taller. On a phone the .sp row wraps,
   so that bell is a whole extra line; it sits ABOVE the viewport and shoves
   the rest of the panel down and back. That was the jump on mobile.
   (At desktop width .sp fits on one line, the bell adds 0px, and nothing
   moves -- which is why this never showed up there.)

   Hiding it in CSS means the duplicate has no height in the first render
   frame, so there is no window to lose the race in. */
#adminShell .admin-bar .sp .adm-bell {
  display: none !important;
}

/* Stack: [icon + title + bell] on one line, actions centred underneath.

   Keyed off the natural markup, NOT off the .ab-stacked / .ab-center classes
   that j54.js adds. Those classes only land once j54 runs, which is ~140ms
   after each rebuild -- so the bar painted in its original one-row layout and
   then restacked, measurably going 151px -> 201px on every single render.
   Every pixel of that is above the viewport, so the whole panel below it
   shifted down. That was the remaining "small jump" on refresh.

   Applying it from the stylesheet means the first painted frame already has
   the final geometry and nothing moves. The class-based selectors are kept
   below purely so j54's classes remain harmless if anything still sets them. */
#adminShell .admin-bar { flex-wrap: wrap; }
#adminShell .admin-bar > .sp,
#adminShell .admin-bar .sp.ab-center {
  margin-left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

/* the media query at s01.css:1512 left-aligns .sp on narrow screens --
   keep it centred there too */
@media (max-width: 760px) {
  #adminShell .admin-bar .sp.ab-center { justify-content: center; }
}

/* ---- 3/4/5: export buttons ----
   s29.css colours .pd15.one/.two/.three, but those class names had to be
   dropped (j34.js's rebindPdf() hunts for them and overwrites the labels and
   handlers). Same colours, restated for the new hooks. */
#adminShell .pd15.x1 { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
#adminShell .pd15.x2 { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
#adminShell .pd15.x3 { background: linear-gradient(135deg, #0e9f6e, #057a55); }
#adminShell .pd15.x5 { background: linear-gradient(135deg, #0891b2, #0e7490); }

/* ---- "Talabalar hisobotini yuklab olish" header ----
   Gives the section an accent bar, a download icon in a tinted badge, and a
   hover/open response, so it reads as the action it is. The icon nudges down
   on hover and again when the section opens -- the same gesture as the
   thing it does. */
#adminShell .adm-drop.pdl-drop {
  border-color: rgba(59, 130, 246, .38);
  background:
    linear-gradient(90deg, rgba(59, 130, 246, .16), rgba(59, 130, 246, 0) 62%),
    rgba(255, 255, 255, .035);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#adminShell .adm-drop.pdl-drop:hover {
  border-color: rgba(96, 165, 250, .62);
  box-shadow: 0 8px 22px -14px rgba(37, 99, 235, .85);
}
#adminShell .adm-drop.pdl-drop > summary {
  position: relative;
  padding-left: 18px;
}
/* accent bar down the left edge */
#adminShell .adm-drop.pdl-drop > summary::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #60a5fa, #2563eb);
}
#adminShell .adm-drop.pdl-drop > summary .pdl-ic {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 4px 10px -4px rgba(29, 78, 216, .9);
  transition: transform .2s ease, box-shadow .2s ease;
}
#adminShell .adm-drop.pdl-drop:hover > summary .pdl-ic {
  transform: translateY(2px);
  box-shadow: 0 7px 14px -5px rgba(29, 78, 216, .95);
}
#adminShell .adm-drop.pdl-drop[open] > summary .pdl-ic {
  transform: translateY(3px);
}
#adminShell .adm-drop.pdl-drop > summary .pdl-ic svg { display: block; }

/* the arrow inside the badge drifts on hover, hinting "downwards" */
@media (prefers-reduced-motion: reduce) {
  #adminShell .adm-drop.pdl-drop,
  #adminShell .adm-drop.pdl-drop > summary .pdl-ic { transition: none; }
  #adminShell .adm-drop.pdl-drop:hover > summary .pdl-ic,
  #adminShell .adm-drop.pdl-drop[open] > summary .pdl-ic { transform: none; }
}

/* ---- 5: export chooser ---- */

.expch-ov {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(6, 14, 30, .72);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: expchIn .16s ease;
}
@keyframes expchIn { from { opacity: 0 } to { opacity: 1 } }

.expch-card {
  background: #ffffff;
  color: #0a0a0a;
  border-radius: 18px;
  padding: 22px;
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  font-family: Manrope, Arial, sans-serif;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
}
.expch-card h3 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 800;
  color: #0f2942;
}
.expch-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: #5b6b78;
  line-height: 1.45;
}
.expch-q {
  font-size: 14px;
  font-weight: 800;
  color: #0f2942;
  margin: 0 0 9px;
}
.expch-dl { margin-top: 16px; }

.expch-opt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border: 2px solid #e2e8f0;
  border-radius: 13px;
  padding: 12px 14px;
  margin-bottom: 9px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.expch-opt:hover { background: #f8fafc; }
.expch-opt.sel { border-color: #2563eb; background: #f5f9ff; }
.expch-opt input { margin-top: 3px; flex: none; accent-color: #2563eb; }
.expch-opt span { display: block; }
.expch-opt b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #0f2942;
}
.expch-opt i {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: #6b7a86;
  margin-top: 2px;
  line-height: 1.4;
}

.expch-go {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 13px 16px;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.expch-go:hover { filter: brightness(1.05); }
.expch-go .expch-range {
  font-weight: 800;
  opacity: .92;
  white-space: nowrap;
}

.expch-close {
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #fb923c, #f97316);
}
.expch-close:hover { filter: brightness(1.05); }

/* The chooser stays white regardless of the viewer's colour scheme.
   It sits over a dark panel, so a light card is what makes it read as a
   modal rather than part of the page behind it -- and the radio options
   need the contrast to be legible at a glance. */

/* ---- s45.css ---- */
/* =====================================================================
   s45.css -- intro "install as an app" button (see assets/j55.js)
   ===================================================================== */

/* Mirrors .lang-dd--intro (s01.css:337), which sits at top/right 26px, so
   the two controls sit symmetrically in the intro's top corners. */
#intro .pwa-install {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #f3e9df;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
#intro .pwa-install:hover {
  background: rgba(255, 255, 255, .2);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8);
}
#intro .pwa-install:active { transform: translateY(2px); }
#intro .pwa-install svg { display: block; flex: none; }

/* a slow pulse so it is noticed without competing with the Kirish buttons */
#intro .pwa-install::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .5);
  opacity: 0;
  animation: pwaPulse 3.4s ease-out infinite;
  pointer-events: none;
}
@keyframes pwaPulse {
  0% { opacity: .55; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.14); }
  100% { opacity: 0; transform: scale(1.14); }
}

@media (max-width: 640px) {
  /* matches the language dropdown's own narrow-screen offsets */
  #intro .pwa-install { top: 16px; left: 16px; font-size: 12px; padding: 8px 13px; }
}

/* The label is the first thing to go, but only when there is genuinely no
   room. 375px is a common phone width (iPhone SE, 12/13 mini) and the label
   plus the language dropdown opposite still fit inside it comfortably, so
   the cut-off sits below that rather than above it. */
@media (max-width: 330px) {
  #intro .pwa-install .pwa-t { display: none; }
  #intro .pwa-install { padding: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  #intro .pwa-install { transition: none; }
  #intro .pwa-install::after { animation: none; opacity: 0; }
}

/* ---- iPhone instructions dialog ---- */

.pwa-ov {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(6, 14, 30, .72);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: pwaIn .16s ease;
}
@keyframes pwaIn { from { opacity: 0 } to { opacity: 1 } }

/* White regardless of colour scheme, for the same reason as the export
   chooser: it sits over a dark page and needs to read as a separate layer. */
.pwa-card {
  background: #ffffff;
  color: #0a0a0a;
  border-radius: 18px;
  padding: 22px;
  width: 100%;
  max-width: 430px;
  max-height: 88vh;
  overflow-y: auto;
  font-family: Manrope, Arial, sans-serif;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
}
.pwa-card h3 {
  margin: 0 0 5px;
  font-size: 19px;
  font-weight: 800;
  color: #0f2942;
}
.pwa-lead {
  margin: 0 0 17px;
  font-size: 13px;
  line-height: 1.5;
  color: #5b6b78;
}

.pwa-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 9px;
  border: 2px solid #e2e8f0;
  border-radius: 13px;
  font-size: 14px;
  line-height: 1.45;
  color: #16324a;
}
.pwa-step b { color: #2563eb; }
.pwa-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 4px 10px -4px rgba(29, 78, 216, .9);
}
.pwa-ic svg { display: block; }

.pwa-note {
  margin: 14px 0 16px;
  padding: 11px 13px;
  border-radius: 11px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-size: 12.5px;
  line-height: 1.5;
  color: #7c4413;
}

.pwa-close {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 13px 16px;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #fb923c, #f97316);
}
.pwa-close:hover { filter: brightness(1.05); }

/* ---- s46.css ---- */
/* ============================================================
   s46.css -- professional free-text answer boxes + the picture
   test's layout.

   .ttarea / .ttsave-btn are the framework's classes for a
   type:'text' question (j03.js renderBSurv, and every BSURVEYS
   test that ends with a free-text question -- womenviol, univviol
   and now huquq). They had no rules anywhere in the stylesheet, so
   every free-text box on the site rendered as a bare, unstyled
   browser textarea. This is the only new rule those older tests
   needed; everything else here is scoped to .huq-* and only
   affects the new picture test.
   ============================================================ */

.ttarea{
  width:100%;box-sizing:border-box;display:block;
  border:1.5px solid var(--line);border-radius:13px;
  padding:12px 14px;margin-top:12px;
  font:inherit;font-size:14.5px;line-height:1.55;color:#1e293b;
  background:#fff;resize:vertical;min-height:90px;
  transition:.18s cubic-bezier(.22,1,.36,1);
}
.ttarea::placeholder{color:#94a3b8}
.ttarea:focus{
  outline:none;border-color:var(--tm-l);background:#fffaf6;
  box-shadow:0 0 0 3px rgba(234,88,12,.15);
}
.ttsave-btn{
  margin-top:10px;border:none;font:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,var(--tm-l),var(--tm-d));
  color:#fff;font-weight:800;font-size:13.5px;
  padding:10px 20px;border-radius:11px;
  transition:.18s cubic-bezier(.22,1,.36,1);
  box-shadow:0 10px 22px -14px var(--tm-glow);
}
.ttsave-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.ttsave-btn:active{transform:translateY(0);filter:brightness(.98)}

/* ---- the picture test: image above a simple, professional answer box ---- */
.huq-q .tm-qhead{margin-bottom:2px}
.huq-body{display:flex;gap:16px;align-items:flex-start;margin-top:10px}
.huq-imgwrap{
  flex:none;width:168px;min-height:126px;border-radius:13px;overflow:hidden;
  border:1.5px solid var(--line);background:#eef2f6;
  box-shadow:0 10px 24px -16px rgba(15,23,42,.35);
  display:flex;align-items:center;justify-content:center;
}
/* object-fit:cover at a short fixed height cropped portrait pictures down to
   a sliver -- picture 8 (the aggression one) lost the face entirely, only
   the legs showed. contain + a generous max-height always shows the whole
   picture instead, which matters here: the student has to react to what is
   actually IN the picture. */
.huq-imgwrap img{display:block;width:100%;height:auto;max-height:210px;object-fit:contain}
.huq-answer{flex:1;min-width:0}
.huq-answer .ttarea{margin-top:0;min-height:126px}
.huq-count{
  margin-top:6px;font-size:11.5px;font-weight:700;color:#94a3b8;
  text-align:right;
}
.huq-q.done .huq-imgwrap{border-color:var(--green-l)}

@media (max-width:520px){
  .huq-body{flex-direction:column}
  .huq-imgwrap{width:100%;min-height:0}
  .huq-imgwrap img{max-height:300px}
}

body.tl-dark .huq-imgwrap{background:#eef2f6!important}

body.tl-dark .ttarea{background:#fff!important;color:#17202a!important;border-color:#cbd5e1!important}
body.tl-dark .ttarea::placeholder{color:#64748b!important}
body.tl-dark .huq-count{color:#475569!important}