@import url('./sections/00-foundation-theme.css?v=05fdda4b6e');@import url('./sections/04-quickball-core.css?v=821470a364');@import url('./sections/05-premium-dashboard-syllabus.css?v=3e775d7e1b');@import url('./sections/06-quickball-mobile-experience.css?v=f479f6dc7b');@import url('./sections/09-dr-noob-signature.css?v=20260530-tooltips');@import url('../designs/home/nature-sanctuary/nature-sanctuary.css?v=ce03b582ac');@import url('../designs/qbank/focus-room/focus-room.css?v=b08a1ae72b');@import url('../designs/personalization.css?v=44b4a3e059');




/*
 * Noob Doctor app stylesheet manifest.
 * Keep these imports in order; later files intentionally override earlier ones.
 */
/* Theme tokens, global base, focus mode, shared animations */
/* ===== MODAL ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease)
}
.modal-overlay.visible{opacity:1;pointer-events:auto}
.modal-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-flat);
  padding:36px;width:92%;max-width:540px;text-align:center;
  animation:fadeScale .4s var(--ease);box-shadow:var(--shadow-flat);
  color:var(--text);font-family:var(--font-body, 'Inter', sans-serif);
  max-height:calc(100dvh - 40px);overflow:auto;
}
.modal-icon{font-size:64px;margin-bottom:12px;animation:float 6s ease-in-out infinite}
.modal-card h2{font-size:24px;font-weight:800;color:var(--text);margin-bottom:4px;font-family:var(--font-heading, 'Inter', sans-serif);line-height:1.35}
.modal-sub{color:var(--muted);font-size:14px;margin-bottom:24px}
.form-group{text-align:left;margin-bottom:16px}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.form-group .req{color:var(--accent-focus)}
.form-group .opt{color:var(--muted);opacity:0.7}
.form-group input,.form-group select{width:100%;padding:13px 16px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font-body, 'Inter', sans-serif);font-size:15px;outline:none;transition:all .2s}
.form-group input:focus,.form-group select:focus{border-color:var(--accent-calm);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-calm) 20%, transparent)}
.form-group input::placeholder{color:var(--muted);opacity:0.6}
.form-error{color:var(--accent-focus);font-size:12px;margin-top:6px;display:none;font-weight:500}
.onboarding-check-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}
.onboarding-check{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--bg);
  color:var(--text);
  cursor:pointer;
  font-size:13px;
  font-weight:750;
  padding:10px 12px;
  transition:border-color .2s,background .2s
}
.onboarding-check:has(input:checked){
  border-color:var(--accent-calm);
  background:color-mix(in srgb,var(--accent-calm) 10%,var(--bg))
}
.onboarding-check input{
  width:16px;
  height:16px;
  accent-color:var(--accent-calm);
  padding:0
}
.onboarding-inline-auth{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px
}
.onboarding-otp-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  margin-top:8px
}
.mini-auth-btn{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--text);
  color:var(--bg);
  cursor:pointer;
  font-family:var(--font-body, 'Inter', sans-serif);
  font-size:13px;
  font-weight:800;
  min-height:44px;
  padding:0 13px;
  white-space:nowrap;
  transition:transform .2s,box-shadow .2s,opacity .2s
}
.mini-auth-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.mini-auth-btn:disabled{cursor:not-allowed;opacity:.62;transform:none;box-shadow:none}
.onboarding-auth-status{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  margin-top:7px;
  min-height:16px
}
.onboarding-auth-status.good{color:var(--accent-calm)}
.onboarding-auth-status.bad{color:var(--accent-focus)}
.phone-recaptcha{min-height:1px}
.btn-glow{
  width:100%;padding:14px;border:none;border-radius:8px;font-family:var(--font-body, 'Inter', sans-serif);
  font-size:15px;font-weight:600;cursor:pointer;color:#fff;
  background:var(--accent-calm);
  transition:all .2s;margin-top:8px;
  box-shadow:0 2px 4px rgba(0,0,0,0.1)
}
.btn-glow:hover{transform:translateY(-1px);background:color-mix(in srgb, var(--text) 10%, var(--accent-calm));box-shadow:0 4px 8px rgba(0,0,0,0.15)}
#profileModal.profile-onboarding-overlay{
  background:rgba(19,23,26,.56);
  backdrop-filter:blur(14px) saturate(1.05);
  padding:18px;
}
#profileModal .profile-onboarding-card{
  --onb-ink:#17201b;
  --onb-muted:#6c746c;
  --onb-line:rgba(23,32,27,.12);
  --onb-panel:rgba(255,255,255,.72);
  --onb-mint:#66a982;
  --onb-blue:#5477a5;
  --onb-coral:#d97463;
  position:relative;
  width:min(1120px,calc(100vw - 36px));
  max-width:1120px;
  min-height:min(720px,calc(100dvh - 36px));
  max-height:calc(100dvh - 36px);
  overflow:hidden;
  padding:18px;
  text-align:left;
  color:var(--onb-ink);
  background:
    radial-gradient(circle at 8% 12%,rgba(102,169,130,.18),transparent 28%),
    radial-gradient(circle at 94% 8%,rgba(84,119,165,.16),transparent 26%),
    linear-gradient(140deg,#fffdf8 0%,#f7f3eb 48%,#eef4f0 100%);
  border:1px solid rgba(255,255,255,.72);
  border-radius:8px;
  box-shadow:0 36px 110px rgba(6,10,12,.35),0 2px 10px rgba(6,10,12,.12);
}
#profileModal .profile-onboarding-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.58),transparent 34%,rgba(255,255,255,.2));
}
.onboarding-orbit-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.72;
  background:
    linear-gradient(90deg,rgba(23,32,27,.055) 1px,transparent 1px),
    linear-gradient(0deg,rgba(23,32,27,.04) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 48%,#000 0%,rgba(0,0,0,.72) 46%,transparent 86%);
}
.onboarding-topbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.onboarding-brand-lockup{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.onboarding-brand-logo{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:8px;
  background:rgba(255,255,255,.64);
  border:1px solid rgba(23,32,27,.09);
  padding:5px;
}
.onboarding-brand-lockup span{
  display:block;
  color:var(--onb-ink);
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.1;
}
.onboarding-brand-lockup strong{
  display:block;
  color:var(--onb-muted);
  font-size:12px;
  font-weight:750;
  line-height:1.4;
  margin-top:2px;
}
.onboarding-progress{
  width:min(240px,30vw);
  height:5px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(23,32,27,.1);
}
.onboarding-progress span{
  display:block;
  width:20%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--onb-mint),var(--onb-blue),var(--onb-coral));
  transition:width .34s cubic-bezier(.16,1,.3,1);
}
.onboarding-stage{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(190px,.72fr) minmax(360px,1.28fr) minmax(240px,.86fr);
  gap:14px;
  min-height:calc(min(720px,100dvh - 36px) - 88px);
}
.onboarding-companion-panel,
.onboarding-flow-panel,
.onboarding-avitan-panel{
  min-width:0;
  border:1px solid rgba(23,32,27,.1);
  border-radius:8px;
  background:var(--onb-panel);
  box-shadow:0 18px 56px rgba(46,42,34,.08);
}
.onboarding-companion-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:14px;
  padding:20px;
  overflow:hidden;
}
.onboarding-qb-avatar{
  position:relative;
  width:86px;
  height:74px;
  border-radius:28px;
  background:linear-gradient(145deg,#090d12,#1c2531);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 22px 44px rgba(22,26,32,.32),0 0 0 12px rgba(102,169,130,.08);
  animation:onboardingQuickballFly .72s cubic-bezier(.16,1,.3,1) both,onboardingQuickballFloat 4.6s ease-in-out infinite .72s;
}
.onboarding-qb-avatar::before{
  content:"";
  position:absolute;
  inset:9px 11px auto;
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.03));
}
.onboarding-qb-eye{
  position:absolute;
  top:30px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#24f2e4;
  box-shadow:0 0 14px rgba(36,242,228,.86);
}
.onboarding-qb-eye-left{left:26px}
.onboarding-qb-eye-right{right:26px}
.onboarding-qb-shadow{
  position:absolute;
  left:50%;
  bottom:-24px;
  width:74px;
  height:12px;
  border-radius:999px;
  background:rgba(22,26,32,.16);
  filter:blur(5px);
  transform:translateX(-50%);
}
.onboarding-agent-label{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  border:1px solid rgba(23,32,27,.12);
  border-radius:999px;
  padding:5px 9px;
  color:var(--onb-muted);
  background:rgba(255,255,255,.58);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.onboarding-speech{
  position:relative;
  width:100%;
  margin:0;
  color:var(--onb-ink);
  font-size:15px;
  font-weight:750;
  line-height:1.55;
  text-align:center;
}
.onboarding-flow-panel{
  display:flex;
  flex-direction:column;
  padding:26px;
  overflow:auto;
}
#profileModal .profile-onboarding-card h2{
  margin:0 0 8px;
  color:var(--onb-ink);
  font-size:clamp(25px,2.4vw,36px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:0;
}
#profileModal .profile-onboarding-card .modal-sub{
  margin:0 0 20px;
  color:var(--onb-muted);
  font-size:14px;
  font-weight:650;
  line-height:1.5;
}
.onboarding-step{
  display:none;
  animation:onboardingStepIn .3s cubic-bezier(.16,1,.3,1) both;
}
.profile-onboarding-card[data-step="language"] .onboarding-step[data-step="language"],
.profile-onboarding-card[data-step="mode"] .onboarding-step[data-step="mode"],
.profile-onboarding-card[data-step="tone"] .onboarding-step[data-step="tone"],
.profile-onboarding-card[data-step="identity"] .onboarding-step[data-step="identity"],
.profile-onboarding-card[data-step="contact"] .onboarding-step[data-step="contact"],
.profile-onboarding-card[data-step="exam"] .onboarding-step[data-step="exam"]{
  display:block;
}
.onboarding-choice-grid{
  display:grid;
  gap:10px;
}
.language-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.tone-grid{
  grid-template-columns:1fr;
}
.onboarding-choice{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:76px;
  border:1px solid rgba(23,32,27,.12);
  border-radius:8px;
  background:rgba(255,255,255,.62);
  cursor:pointer;
  transition:transform .18s,box-shadow .18s,border-color .18s,background .18s;
}
.onboarding-choice:hover{
  transform:translateY(-1px);
  border-color:rgba(84,119,165,.34);
  box-shadow:0 12px 28px rgba(43,49,46,.08);
}
.onboarding-choice input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.onboarding-choice span{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  width:100%;
  padding:13px 14px;
}
.onboarding-choice b{
  color:var(--onb-ink);
  font-size:14px;
  font-weight:900;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.onboarding-choice small{
  margin-top:6px;
  color:var(--onb-muted);
  font-size:11px;
  font-weight:750;
  line-height:1.25;
}
.onboarding-choice:has(input:checked){
  border-color:color-mix(in srgb,var(--onb-mint) 72%,var(--onb-blue));
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(238,248,242,.9));
  box-shadow:0 0 0 3px rgba(102,169,130,.16),0 16px 32px rgba(54,83,70,.1);
}
.tone-choice{min-height:84px}
.onboarding-avitan-intro{
  border:1px solid rgba(84,119,165,.18);
  border-radius:8px;
  background:linear-gradient(135deg,rgba(84,119,165,.1),rgba(102,169,130,.08));
  padding:14px 15px;
  margin-bottom:16px;
}
.onboarding-avitan-intro span{
  display:block;
  color:var(--onb-blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.onboarding-avitan-intro p{
  margin:0;
  color:var(--onb-ink);
  font-size:13px;
  line-height:1.45;
  font-weight:650;
}
#profileModal .profile-onboarding-card .form-group label{
  color:var(--onb-muted);
}
#profileModal .profile-onboarding-card .form-group label .opt{
  display:inline;
  padding:0;
  border:0;
  background:transparent;
  animation:none;
  cursor:inherit;
}
#profileModal .profile-onboarding-card .form-group{
  margin-bottom:12px;
}
#profileModal .profile-onboarding-card .form-group input,
#profileModal .profile-onboarding-card .form-group select{
  background:rgba(255,255,255,.68);
  border-color:rgba(23,32,27,.12);
  color:var(--onb-ink);
}
#profileModal .profile-onboarding-card .form-group input:focus,
#profileModal .profile-onboarding-card .form-group select:focus{
  border-color:var(--onb-blue);
  box-shadow:0 0 0 3px rgba(84,119,165,.16);
}
#profileModal .profile-onboarding-card .onboarding-check{
  background:rgba(255,255,255,.62);
  border-color:rgba(23,32,27,.12);
}
#profileModal .profile-onboarding-card .onboarding-check:has(input:checked){
  border-color:var(--onb-mint);
  background:rgba(235,248,241,.88);
}
#profileModal .profile-onboarding-card .google-signin-btn{
  margin:0;
  border-color:rgba(23,32,27,.12);
  background:rgba(255,255,255,.72);
}
#profileModal .profile-onboarding-card .auth-divider{
  margin:17px 0;
}
#profileModal .profile-onboarding-card .mini-auth-btn{
  background:#17201b;
  color:#fffdf8;
}
#profileModal .phone-recaptcha{
  min-height:0;
}
#profileModal .onboarding-otp-row[hidden]{
  display:none !important;
}
#profileModal.visible ~ #quickBall,
#profileModal.visible ~ #quickBallPanel,
#profileModal.visible ~ #quickBallOverlay{
  display:none !important;
}
body:has(#profileModal.visible) #leftNavigationRail{
  display:none !important;
}
body:has(#profileModal.visible) #pwa-install-banner{
  display:none !important;
}
.onboarding-controls{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  margin-top:auto;
  padding-top:18px;
}
.onboarding-back-btn{
  min-height:46px;
  border:1px solid rgba(23,32,27,.12);
  border-radius:8px;
  background:rgba(255,255,255,.58);
  color:var(--onb-ink);
  cursor:pointer;
  font:800 14px var(--font-body, 'Inter', sans-serif);
  padding:0 18px;
  transition:transform .18s,box-shadow .18s,opacity .18s;
}
.onboarding-back-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(43,49,46,.1);
}
.onboarding-back-btn[hidden]{
  display:block;
  opacity:0;
  pointer-events:none;
}
#profileModal .profile-onboarding-card .btn-glow{
  min-height:46px;
  margin:0;
  background:linear-gradient(135deg,#17201b,#315745 54%,#5477a5);
  box-shadow:0 14px 34px rgba(48,74,63,.24);
  font-weight:850;
}
.onboarding-avitan-panel{
  display:flex;
  flex-direction:column;
  padding:20px;
  opacity:.58;
  transform:translateY(6px);
  transition:opacity .28s,transform .28s,box-shadow .28s;
}
.onboarding-avitan-panel.active{
  opacity:1;
  transform:translateY(0);
  box-shadow:0 22px 70px rgba(63,78,95,.14),0 0 0 3px rgba(84,119,165,.08);
}
.onboarding-avitan-panel h3{
  margin:16px 0 8px;
  color:var(--onb-ink);
  font-size:20px;
  line-height:1.15;
  font-weight:900;
}
.onboarding-avitan-panel p{
  margin:0 0 16px;
  color:var(--onb-muted);
  font-size:13px;
  line-height:1.55;
  font-weight:650;
}
.onboarding-memory-list{
  display:grid;
  gap:8px;
  margin-top:auto;
}
.onboarding-memory-list span{
  display:grid;
  gap:3px;
  border:1px solid rgba(23,32,27,.1);
  border-radius:8px;
  background:rgba(255,255,255,.56);
  padding:10px;
}
.onboarding-memory-list b{
  color:var(--onb-muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.onboarding-memory-list small{
  min-width:0;
  color:var(--onb-ink);
  font-size:13px;
  font-weight:850;
  line-height:1.2;
  overflow-wrap:anywhere;
}
@keyframes onboardingQuickballFly{
  from{opacity:0;transform:translate(-88px,36px) scale(.72) rotate(-10deg);filter:blur(6px)}
  to{opacity:1;transform:translate(0,0) scale(1) rotate(0);filter:blur(0)}
}
@keyframes onboardingQuickballFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes onboardingStepIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.landing-onboarding-card{
  text-align:left;
  border:1px solid color-mix(in srgb, var(--border) 78%, var(--text));
  border-radius:12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--bg)),var(--surface));
  padding:16px;
  margin:-8px 0 18px;
  box-shadow:0 18px 44px rgba(0,0,0,.08)
}
.landing-onboarding-card[hidden]{display:none}
#profileModal .landing-onboarding-card{border-radius:8px}
.landing-onboarding-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:10px
}
.landing-onboarding-score{
  color:var(--text);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 8px;
  font-size:12px;
  letter-spacing:0
}
.landing-onboarding-score.muted{color:var(--muted)}
.landing-onboarding-title{
  color:var(--text);
  font-size:18px;
  font-weight:850;
  line-height:1.18;
  margin-bottom:7px
}
.landing-onboarding-focus{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  margin-bottom:14px
}
.landing-onboarding-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:14px
}
.landing-onboarding-stats span{
  min-width:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--bg);
  padding:9px 8px
}
.landing-onboarding-stats b{
  display:block;
  color:var(--text);
  font-size:13px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.landing-onboarding-stats small{
  display:block;
  color:var(--muted);
  font-size:10px;
  font-weight:750;
  margin-top:4px;
  text-transform:uppercase;
  letter-spacing:.04em
}
.landing-onboarding-loop{
  display:grid;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
  color:var(--text);
  font-size:12px;
  line-height:1.35
}
.landing-onboarding-loop li{
  position:relative;
  padding-left:16px
}
.landing-onboarding-loop li::before{
  content:'';
  position:absolute;
  left:0;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-calm)
}
/* Modal shell, original profile onboarding base, landing card */
/* ===== APP LAYOUT ===== */
.app-layout{display:grid;grid-template-columns:var(--sW) var(--sbW) 1fr var(--asW);height:100vh;overflow:hidden;max-height:100vh}
html.app-boot-ready .app-layout{animation:appShellEnter .48s cubic-bezier(.16,1,.3,1) both}
@keyframes appShellEnter{from{opacity:0;transform:translateY(8px) scale(.996);filter:blur(3px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
/* ===== SERVER BAR ===== */
.server-bar{background:var(--bg1);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;overflow-y:auto;overflow-x:hidden;z-index:20}
#serverList{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.server-icon{position:relative;width:48px;height:48px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.si-inner{width:48px;height:48px;border-radius:24px;background:var(--bg5);display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .2s var(--ease);border:2px solid transparent}
.server-icon:hover .si-inner{border-radius:16px;background:var(--acD);border-color:var(--ac);transform:scale(1.05)}
.server-icon.active .si-inner{border-radius:16px;background:var(--ac);border-color:var(--ac);box-shadow:var(--glow)}
.home-si{font-size:26px}
.si-pill{position:absolute;left:0;width:4px;border-radius:0 4px 4px 0;background:var(--t1);transition:all .2s var(--ease);height:0}
.server-icon:hover .si-pill{height:20px;top:50%;transform:translateY(-50%)}
.server-icon.active .si-pill{height:36px;top:50%;transform:translateY(-50%);background:var(--acL)}
.si-divider{width:32px;height:2px;background:var(--bdL);margin:6px 0;border-radius:1px}
/* ==============================================
   SIDEBAR HIERARCHY - VISUAL HIERARCHY REDESIGN
   Level 1: Subject (largest, boldest)
   Level 2: System (smaller, semi-bold)
   Level 3: Chapter (medium, regular)
   Level 4: Topic (smallest, lightest)
   ============================================== */
/* ===== TYPOGRAPHY SCALE ===== */
:root{
  --h1-size:18px;/* Subject */
  --h1-weight:700;
  --h2-size:15px;/* System */
  --h2-weight:600;
  --h3-size:13px;/* Chapter */
  --h3-weight:500;
  --h4-size:12px;/* Topic */
  --h4-weight:400;

  /* Indentation per level */
  --indent-1:0px;
  --indent-2:12px;
  --indent-3:24px;
  --indent-4:36px;

  /* Vertical spacing */
  --space-subject:20px;
  --space-system:16px;
  --space-chapter:8px;
  --space-topic:4px;

  /* Icon sizes */
  --icon-subject:22px;
  --icon-system:14px;
  --icon-chapter:10px;
  --icon-topic:6px;

  /* Border radius */
  --r-subject:10px;
  --r-system:8px;
  --r-chapter:6px;
  --r-topic:4px;
}
/* ===== CHANNEL SIDEBAR BASE ===== */
.channel-sidebar{background:var(--bg2);display:flex;flex-direction:column;height:100vh;overflow:hidden;border-right:1px solid var(--bd);z-index:15;position:relative;max-height:100vh}
.sb-header{padding:14px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;min-height:var(--hH);flex-shrink:0}
.sb-header h2{font-size:15px;font-weight:800;background:linear-gradient(135deg,var(--ac),var(--pk));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-close{display:none;background:none;border:none;color:var(--t2);font-size:18px;cursor:pointer}
.channel-list{flex:1;height:calc(100vh - 52px);min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 12px;pointer-events:auto}
/* ==============================================
   LEVEL 1: SUBJECT (Highest Level)
   - Largest, boldest, most prominent
   - Solid background with colored accent
   - Stands out as primary navigation
   ============================================== */
.ch-subject-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  margin-bottom:var(--space-subject);
  background:var(--bg4);
  border-radius:var(--r-subject);
  border-left:3px solid var(--ac);
  cursor:pointer;
  transition:all .2s var(--ease)
}
.ch-subject-header:hover{
  background:var(--bgH);
  transform:translateX(2px)
}
.ch-subject-header.active{
  background:var(--acD);
  border-left-color:var(--acL)
}
.ch-subject-icon{
  font-size:var(--icon-subject);
  flex-shrink:0
}
.ch-subject-name{
  font-size:var(--h1-size);
  font-weight:var(--h1-weight);
  color:var(--t1);
  flex:1;
  overflow-wrap:break-word;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.ch-subject-collapse{
  background:none;
  border:none;
  color:var(--t3);
  font-size:12px;
  cursor:pointer;
  padding:6px;
  border-radius:4px;
  transition:all .15s
}
.ch-subject-collapse:hover{
  background:var(--bg5);
  color:var(--t2)
}
/* Subject progress indicator */
.ch-subject-progress{
  font-size:11px;
  font-weight:600;
  color:var(--acL);
  background:var(--acD);
  padding:3px 8px;
  border-radius:10px
}
/* ==============================================
   LEVEL 2: SYSTEM (Second Level)
   - Smaller than Subject, distinctly different
   - Uses outline/secondary styling
   - Collapsible group beneath Subject
   ============================================== */
.ch-system{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  margin:0 0 var(--space-system) var(--indent-2);
  background:var(--bg3);
  border-radius:var(--r-system);
  cursor:pointer;
  transition:all .15s var(--ease);
  border:1px solid transparent
}
.ch-system:hover{
  background:var(--bgH);
  border-color:var(--bd)
}
.ch-system.open{
  background:var(--bgH);
  border-color:var(--bd)
}
.ch-system-icon{
  font-size:var(--icon-system);
  color:var(--t3);
  transition:transform .2s var(--ease);
  flex-shrink:0
}
.ch-system.open .ch-system-icon{transform:rotate(90deg)}
.ch-system-name{
  font-size:var(--h2-size);
  font-weight:var(--h2-weight);
  color:var(--t2);
  flex:1
}
.ch-system:hover .ch-system-name,
.ch-system.open .ch-system-name{
  color:var(--t1)
}
/* System item count */
.ch-system-count{
  font-size:10px;
  font-weight:600;
  color:var(--t3);
  background:var(--bg5);
  padding:2px 8px;
  border-radius:10px
}
/* Sub-items container */
.ch-system-items{
  display:none;
  padding-left:8px;
  margin-bottom:8px
}
.ch-system-items.expanded{display:block}
/* ==============================================
   LEVEL 3: CHAPTER (Third Level)
   - Medium size, visually lighter
   - Clear separation from System
   - Slight indent for grouping
   ============================================== */
.ch-chapter{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  margin:0 0 var(--space-chapter) var(--indent-3);
  border-radius:var(--r-chapter);
  cursor:pointer;
  transition:all .12s ease;
  border-left:2px solid transparent
}
.ch-chapter:hover{
  background:var(--bg1)
}
.ch-chapter.active{
  background:var(--acD);
  border-left-color:var(--ac)
}
/* Arrow indicator for expandable chapters */
.ch-chapter-arrow{
  font-size:var(--icon-chapter);
  color:var(--t3);
  transition:transform .2s;
  flex-shrink:0;
  width:12px;
  text-align:center
}
.ch-chapter.open .ch-chapter-arrow{transform:rotate(90deg)}
.ch-chapter-name{
  font-size:var(--h3-size);
  font-weight:var(--h3-weight);
  color:var(--t2);
  flex:1
}
.ch-chapter:hover .ch-chapter-name,
.ch-chapter.active .ch-chapter-name{color:var(--t1)}
/* Topic count badge */
.ch-chapter-badge{
  font-size:9px;
  font-weight:600;
  color:var(--t3);
  background:var(--bg5);
  padding:2px 6px;
  border-radius:8px
}
.ch-chapter-topics{
  display:none;
  padding-left:20px;
  margin-top:4px
}
.ch-chapter.open .ch-chapter-topics{display:block}
/* ==============================================
   LEVEL 4: TOPIC (Lowest Level)
   - Smallest, lightest weight
   - Subtle hover states
   - Priority indicators (dot system)
   ============================================== */
.ch-topic{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  margin:0 0 var(--space-topic) var(--indent-4);
  border-radius:var(--r-topic);
  cursor:pointer;
  transition:all .12s ease;
  border-left:2px solid transparent
}
.ch-topic:hover{
  background:var(--bg1)
}
.ch-topic.active{
  background:var(--acD);
  border-left:2px solid var(--ac)
}
/* Priority dot indicator */
.ch-topic-dot{
  width:var(--icon-topic);
  height:var(--icon-topic);
  border-radius:50%;
  flex-shrink:0
}
.ch-topic-dot.red{background:var(--rd)}
.ch-topic-dot.purple{background:#a855f7}
.ch-topic-dot.orange{background:#f97316}
.ch-topic-dot.default{background:var(--t3)}
.ch-topic-dot.green{background:var(--gr)}
/* Priority styling */
.ch-topic[data-priority="red"] .ch-topic-name{color:var(--rd);font-weight:500}
.ch-topic[data-priority="purple"] .ch-topic-name{color:#c084fc;font-weight:500}
.ch-topic[data-priority="orange"] .ch-topic-name{color:#fb923c;font-weight:500}
.ch-topic-name{
  font-size:var(--h4-size);
  font-weight:var(--h4-weight);
  color:var(--t3);
  flex:1
}
.ch-topic:hover .ch-topic-name,
.ch-topic.active .ch-topic-name{color:var(--t2)}
/* ==============================================
   LEGACY CATEGORY (Fallback for non-hierarchical)
   ============================================== */
.ch-cat{
  font-size:11px;
  font-weight:700;
  color:var(--t3);
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:16px 8px 8px;
  margin-top:12px
}
/* Legacy item style (fallback) */
button.ch-item{
  border:none;
  background:none;
  font-family:inherit;
  text-align:left;
  width:100%
}
.ch-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:var(--rS);
  cursor:pointer;
  color:var(--t2);
  font-size:13px;
  font-weight:500;
  transition:all .15s var(--ease);
  margin:2px 0
}
.ch-item:hover{background:var(--bgH);color:var(--t1)}
.ch-item:focus-visible{outline:2px solid var(--ac, #7C5CF0);outline-offset:2px;border-radius:var(--rS)}
.ch-item.active{background:var(--acD);color:var(--t1);font-weight:600}
.ch-item .ch-hash{
  font-size:16px;
  font-weight:700;
  color:var(--t3);
  width:18px;
  flex-shrink:0
}
.ch-item.active .ch-hash{color:var(--acL)}
.ch-item .ch-name{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.ch-item .ch-badge{
  font-size:9px;
  font-weight:700;
  background:var(--bg5);
  color:var(--t2);
  padding:2px 6px;
  border-radius:10px;
  flex-shrink:0
}
.ch-item .ch-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* Topic view in main content */
.main-body.topic-active{overflow:hidden;padding:0;display:flex;flex-direction:column}
.main-body.topic-active .topic-view{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:0}
.topic-view{padding:0;position:relative}
/* ===== SLIM INLINE TOPIC HEADER ===== */
.topic-header-compact{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 14px;
  margin:0;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--bd);
  border-radius:0;
  min-height:36px;
  flex-shrink:0
}
.thc-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1
}
.thc-priority{
  width:8px;
  height:8px;
  min-width:8px;
  border-radius:50%;
  flex-shrink:0;
  box-shadow:0 0 8px currentcolor
}
.thc-info{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
  flex:1;
  flex-wrap:nowrap
}
.thc-title{
  font-size:14px;
  font-weight:700;
  color:var(--t1);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin:0;
  line-height:1.3
}
.thc-path{
  font-size:10px;
  color:var(--t3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.2px
}
/* ===== FLOATING ACTION TOOLBAR ===== */
.thc-actions{
  display:flex;
  align-items:center;
  gap:2px;
  margin-left:auto;
}
.notes-action-toolbar{
  display:none;
}
.nat-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:none;
  background:transparent;
  color:var(--t3);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s ease;
  padding:0;
  position:relative
}
.nat-btn svg{
  width:18px;
  height:18px;
  stroke:currentcolor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.nat-btn:hover{
  background:var(--bgH);
  color:var(--t1);
  transform:scale(1.08)
}
.nat-btn.nat-accent{
  color:var(--acL)
}
.nat-btn.nat-accent:hover{
  background:var(--acD);
  color:var(--ac)
}
.nat-divider{
  width:1px;
  height:20px;
  background:var(--bd);
  margin:0 4px;
  flex-shrink:0
}
/* Legacy topic-header fallback */
.topic-header{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--bd)}
.topic-priority{display:inline-block;padding:4px 10px;border-radius:12px;font-size:10px;font-weight:700;color:#fff;margin-bottom:8px}
.topic-header h2{font-size:22px;color:var(--t1);margin:8px 0}
.topic-path{font-size:12px;color:var(--t3)}
/* Sidebar Footer */
.sb-footer{padding:10px 12px;border-top:1px solid var(--bd);background:var(--bg1)}
.user-panel{display:flex;align-items:center;gap:10px}
.user-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--pk));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-status{font-size:10px;color:var(--t3)}
.user-edit{background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;padding:4px;border-radius:4px;transition:all .15s}
.user-edit:hover{color:var(--t1);background:var(--bgH)}
/* ===== MAIN CONTENT ===== */
.main-content{display:flex;flex-direction:column;overflow:hidden;background:var(--bg3)}
.main-header{height:var(--hH);min-height:var(--hH);padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bd);background:var(--bg3);z-index:10}
.app-layout.app-home-active .main-header,
.app-layout.quickball-active.app-home-active .main-header,
.app-layout.app-your-space-active .main-header,
.app-layout.quickball-active.app-your-space-active .main-header,
.app-layout.app-qbank-active .main-header,
.app-layout.quickball-active.app-qbank-active .main-header,
.app-layout.app-test-series-active .main-header,
.app-layout.quickball-active.app-test-series-active .main-header{display:none !important}
.mh-left{display:flex;align-items:center;gap:6px}
.mob-menu{display:none;background:none;border:none;color:var(--t2);font-size:20px;cursor:pointer;padding:4px 8px;margin-right:4px}
.mh-hash{font-size:18px;font-weight:700;color:var(--t3)}
.main-header h3{font-size:15px;font-weight:700}
.mh-right{display:flex;align-items:center;gap:4px}
.mh-btn{background:none;border:none;font-size:17px;cursor:pointer;padding:6px 8px;border-radius:var(--rS);transition:all .15s;color:var(--t2)}
.mh-btn:hover{background:var(--bgH)}
.main-body{flex:1;overflow-y:auto;padding:20px 24px}
/* ===== ANALYTICS SIDEBAR ===== */
.sidebar-float-btn{
  position:absolute;
  left:-14px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--bg3);
  border:1px solid var(--bd);
  color:var(--t3);
  font-size:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:16;
  transition:all .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  padding:0
}
.sidebar-float-btn:hover{
  background:var(--acD);
  border-color:var(--ac);
  color:var(--ac);
  transform:translateY(-50%) scale(1.1)
}
/* Hide in quickball mode — the compact header has 📊 */
.app-layout.quickball-active .sidebar-float-btn{display:none}
.analytics-sidebar{background:var(--bg2);display:flex;flex-direction:column;overflow:visible;border-left:1px solid var(--bd);z-index:15;position:relative}
.as-header{height:var(--hH);min-height:var(--hH);padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bd)}
.as-header h3{font-size:14px;font-weight:700}
.as-close{display:none;background:none;border:none;color:var(--t2);font-size:18px;cursor:pointer}
.as-body{flex:1;overflow-y:auto;padding:14px}
/* Analytics header */
.a-header{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--bd)}
.a-title{font-size:14px;font-weight:700;color:var(--t1)}
.a-level{font-size:11px;color:var(--t3);margin-top:2px}
/* Analytics cards */
.a-stats{display:grid;grid-template-columns: 2fr 1.2fr;gap:8px;margin-bottom:14px}
.a-stat{background:var(--bg4);border-radius:var(--r);padding:12px 10px;text-align:center;border:1px solid var(--bd)}
.a-val{font-size:20px;font-weight:800;color:var(--acL)}
.a-lbl{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.a-gr{color:var(--gr)!important}
.a-rd{color:var(--rd)!important}
.a-ac{color:var(--acL)!important}
.a-chart{background:var(--bg4);border-radius:var(--r);padding:14px;margin-bottom:10px;border:1px solid var(--bd)}
.a-chart h4{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.a-weak{background:var(--bg4);border-radius:var(--r);padding:14px;border:1px solid var(--bd);margin-bottom:10px}
.a-weak h4{font-size:11px;font-weight:700;color:var(--yl);margin-bottom:8px}
.weak-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px;color:var(--t2)}
.weak-item .w-em{font-size:14px}
.weak-item .w-pct{margin-left:auto;font-weight:700;color:var(--rd)}
.a-progress-list{max-height:200px;overflow-y:auto}
.a-progress-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg2);border-radius:var(--rS);margin-bottom:6px;font-size:12px}
.a-progress-item.correct{border-left:3px solid var(--gr)}
.a-progress-item.wrong{border-left:3px solid var(--rd)}
.a-pi-num{font-weight:700;color:var(--t3);min-width:30px}
.a-pi-text{flex:1;color:var(--t2)}
.a-pi-status{font-weight:700;color:var(--t3)}
/* App layout, server/channel sidebars, main content, analytics */
/* ===== DASHBOARD VIEW ===== */
.dash-welcome{
  background:linear-gradient(135deg,rgba(124,92,240,.15),rgba(244,114,182,.1));
  border:1px solid var(--bd);border-radius:var(--rL);padding:28px 24px;margin-bottom:20px;
  position:relative;overflow:hidden
}
.dash-welcome::after{content:'';position:absolute;top:-30%;right:-10%;width:200px;height:200px;background:radial-gradient(circle,var(--acG),transparent 70%);pointer-events:none}
.dash-welcome h1{font-size:22px;font-weight:900;margin-bottom:4px;line-height:1.35}
.dash-welcome h1 span{background:linear-gradient(135deg,var(--ac),var(--pk));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dash-welcome p{color:var(--t2);font-size:13px}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.ds{background:var(--bg4);border:1px solid var(--bd);border-radius:var(--r);padding:18px 14px;text-align:center;transition:all .2s}
.ds:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:var(--glow)}
.ds-val{font-size:26px;font-weight:900}
.ds-lbl{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.ds-ac .ds-val{color:var(--acL)}
.ds-gr .ds-val{color:var(--gr)}
.ds-rd .ds-val{color:var(--rd)}
.ds-yl .ds-val{color:var(--yl)}
.dash-section{margin-bottom:20px}
.dash-section h3{font-size:14px;font-weight:700;color:var(--t2);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
.subj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.subj-card{background:var(--bg4);border:1px solid var(--bd);border-radius:var(--r);padding:16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.subj-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--subj-color,var(--ac));opacity:0;transition:opacity .2s}
.subj-card:hover{border-color:var(--ac);transform:translateY(-3px);box-shadow:var(--glow)}
.subj-card:hover::before{opacity:1}
.subj-card .sc-emoji{font-size:28px;margin-bottom:8px}
.subj-card .sc-name{font-size:13px;font-weight:700;margin-bottom:6px}
.subj-card .sc-bar{height:4px;background:var(--bg1);border-radius:2px;overflow:hidden;margin-bottom:6px}
.subj-card .sc-fill{height:100%;border-radius:2px;background:var(--subj-color,var(--ac));transition:width 1s}
.subj-card .sc-info{font-size:10px;color:var(--t3);display:flex;justify-content:space-between}
.recent-list{display:flex;flex-direction:column;gap:8px}
.recent-item{display:flex;align-items:center;gap:12px;background:var(--bg4);border:1px solid var(--bd);border-radius:var(--r);padding:12px 14px;transition:all .15s}
.recent-item:hover{border-color:var(--ac)}
.ri-emoji{font-size:20px;flex-shrink:0}
.ri-info{flex:1;min-width:0}
.ri-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri-detail{font-size:10px;color:var(--t3);margin-top:2px}
.ri-score{font-size:16px;font-weight:800;color:var(--acL)}
/* ===== MODE SELECTION ===== */
.mode-hero{text-align:center;padding:20px 0 16px}
.mode-hero .mh-emoji{font-size:48px;animation:float 6s ease-in-out infinite;margin-bottom:8px}
.mode-hero h2{font-size:20px;font-weight:800;margin-bottom:4px}
.mode-hero p{color:var(--t2);font-size:13px}
.mode-stats{display:flex;gap:8px;margin:12px 0}
.ms{flex:1;background:var(--bg4);border:1px solid var(--bd);border-radius:var(--rS);padding:10px 8px;text-align:center}
.ms .mv{font-size:18px;font-weight:800;color:var(--acL)}
.ms .ml{font-size:9px;color:var(--t3);margin-top:2px;text-transform:uppercase}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.mode-card{background:var(--bg4);border:2px solid var(--bd);border-radius:var(--r);padding:20px 14px;text-align:center;cursor:pointer;transition:all .2s}
.mode-card:hover{border-color:var(--ac);transform:translateY(-3px);box-shadow:var(--glow)}
.mode-card.hl{border-color:rgba(124,92,240,.3);background:linear-gradient(135deg,var(--bg4),var(--acD))}
.mc-icon{font-size:28px;margin-bottom:8px}
.mc-name{font-size:14px;font-weight:700;margin-bottom:4px}
.mc-desc{font-size:11px;color:var(--t2);margin-bottom:6px}
.mc-count{font-size:10px;color:var(--acL);font-weight:600}
.mode-extra{display:flex;flex-direction:column;gap:8px;margin-top:12px}
/* ===== QUIZ VIEW ===== */
.quiz-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.quiz-top .qt-cat{font-size:13px;font-weight:700;color:var(--acL)}
.quiz-top .qt-prog{font-size:12px;color:var(--t2)}
.qt-quit{background:none;border:none;color:var(--t2);font-family:Inter;font-size:13px;font-weight:600;cursor:pointer;padding:6px 10px;border-radius:var(--rS);transition:all .15s}
.qt-quit:hover{background:var(--rdD);color:var(--rd)}
.quiz-nav{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.quiz-nav .timer-wrap{flex:1}
.timer-bar{height:6px;background:var(--bg1);border-radius:3px;overflow:hidden}
.timer-fill{height:100%;border-radius:3px;transition:width 1s linear,background .5s;background:var(--gr)}
.timer-fill.warn{background:var(--yl)}
.timer-fill.danger{background:var(--rd)}
.q-arrow{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg5);color:var(--acL);font-size:14px;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;padding:0}
.q-arrow:hover{background:var(--ac);color:#fff}
.q-arrow:disabled{opacity:.2;cursor:default;background:var(--bg5);color:var(--acL)}
.q-arrow.vis{display:flex}
.timer-text{text-align:center;font-size:22px;font-weight:800;margin-bottom:12px}
.timer-text.warn{color:var(--yl)}
.timer-text.danger{color:var(--rd);animation:pulse .5s infinite}
.q-card{background:var(--bg4);border:1px solid var(--bd);border-radius:var(--r);padding:24px;margin-bottom:14px;animation:slideUp .4s var(--ease)}
.q-num{font-size:10px;color:var(--acL);font-weight:700;letter-spacing:1px;margin-bottom:10px;text-transform:uppercase}
.q-text{font-size:15px;font-weight:600;line-height:1.7}
.opts{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.opt{background:var(--bg4);border:2px solid var(--bd);border-radius:var(--r);padding:14px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:14px;animation:slideUp .4s var(--ease);animation-fill-mode:both}
.opt:nth-child(1){animation-delay:.05s}
.opt:nth-child(2){animation-delay:.1s}
.opt:nth-child(3){animation-delay:.15s}
.opt:nth-child(4){animation-delay:.2s}
.opt:hover{border-color:var(--ac);background:var(--bg5)}
.opt.selected{border-color:var(--ac);background:var(--acD)}
.opt.correct{border-color:var(--gr);background:var(--grD);animation:pulse .4s}
.opt.wrong{border-color:var(--rd);background:var(--rdD);animation:shake .4s}
.opt.disabled{pointer-events:none;opacity:.6}
.opt.correct.disabled,.opt.wrong.disabled{opacity:1}
.ol{width:30px;height:30px;border-radius:50%;background:var(--bg5);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}
.opt.correct .ol{background:var(--gr);color:#fff}
.opt.wrong .ol{background:var(--rd);color:#fff}
.ot{font-size:13px;line-height:1.5}
.exp-card{background:linear-gradient(135deg,var(--bg4),var(--bg5));border:1px solid rgba(124,92,240,.2);border-left:4px solid var(--gr);border-radius:var(--r);padding:16px;margin:12px 0;animation:slideUp .4s var(--ease);display:none}
.exp-card.vis{display:block}
.exp-card .exp-t{font-size:11px;font-weight:800;color:var(--gr);letter-spacing:1px;margin-bottom:8px}
.exp-card .exp-txt{font-size:12px;line-height:1.7;color:var(--t1)}
.exp-card .exp-rev{margin-top:10px;padding:8px 12px;background:var(--acD);border-radius:var(--rS);font-size:11px;color:var(--acL);font-weight:600}
/* ===== RESULTS VIEW ===== */
.res-container{text-align:center;padding:20px 0;animation:fadeIn .5s var(--ease);max-width:550px;margin:0 auto}
.res-emoji{font-size:72px;animation:bounceIn .6s var(--ease);margin-bottom:12px}
.res-title{font-size:22px;font-weight:900;margin-bottom:4px}
.res-score{font-size:44px;font-weight:900;background:linear-gradient(135deg,var(--ac),var(--pk));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.res-sub{color:var(--t2);font-size:13px;margin:6px 0 20px}
.res-breakdown{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:16px 0}
.rb{background:var(--bg4);border-radius:var(--r);padding:14px;text-align:center;border:1px solid var(--bd)}
.rb .rv{font-size:22px;font-weight:800}
.rb .rl{font-size:10px;color:var(--t2);margin-top:4px;text-transform:uppercase}
.rb.gr .rv{color:var(--gr)}
.rb.rd .rv{color:var(--rd)}
.rb.yl .rv{color:var(--yl)}
.res-bar-wrap{margin:20px 0}
.res-bar-label{text-align:left;font-size:11px;color:var(--t2);margin-bottom:6px;font-weight:600}
.res-bar-outer{height:26px;background:var(--bg1);border-radius:13px;overflow:hidden}
.res-bar-inner{height:100%;border-radius:13px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;font-size:11px;font-weight:800;color:#fff;transition:width 2s cubic-bezier(.25,.46,.45,.94);width:0}
.res-bar-inner.anim{width:var(--tw)}
.personality{background:var(--bg4);border-radius:var(--rL);padding:24px;margin:20px 0;border:1px solid var(--bd);animation:slideUp .6s var(--ease) .5s both}
.personality .pe{font-size:48px;margin-bottom:10px}
.personality .pl{font-size:17px;font-weight:800;color:var(--acL);margin-bottom:6px}
.personality .pr{font-size:13px;color:var(--t2);line-height:1.6;font-style:italic}
.res-btns{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.btn-p,.btn-o,.btn-s,.btn-d{width:100%;padding:14px;border:none;border-radius:var(--r);font-family:Inter;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s}
.btn-p{background:linear-gradient(135deg,var(--ac),var(--acL));color:#fff}
.btn-p:hover{transform:translateY(-2px);box-shadow:var(--glow)}
.btn-o{background:transparent;border:2px solid var(--ac);color:var(--acL)}
.btn-o:hover{background:var(--acD)}
.btn-s{background:linear-gradient(135deg,var(--gr),var(--cy));color:#fff}
.btn-d{background:linear-gradient(135deg,var(--rd),#fb923c);color:#fff}
/* ===== LEADERBOARD ===== */
.lb-list{display:flex;flex-direction:column;gap:8px;max-width:600px}
.lb-item{display:flex;align-items:center;gap:14px;background:var(--bg4);border:1px solid var(--bd);border-radius:var(--r);padding:12px 16px;animation:slideUp .3s var(--ease);animation-fill-mode:both}
.lb-rank{font-size:18px;font-weight:900;width:36px;text-align:center}
.lb-rank.gold{color:#fbbf24}
.lb-rank.silver{color:#9ca3af}
.lb-rank.bronze{color:#f97316}
.lb-info{flex:1;min-width:0}
.lb-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-detail{font-size:11px;color:var(--t3);margin-top:2px}
.lb-score{font-size:17px;font-weight:800;color:var(--acL)}
.lb-empty{text-align:center;color:var(--t2);padding:40px 0;font-size:14px}
.lb-clear{margin-top:16px}
/* ===== CONFETTI ===== */
.confetti-piece{position:fixed;top:-10px;animation:confetti 3s ease-in forwards;z-index:1000;border-radius:2px}
/* ===== CONTENT HUB ===== */
.hub-tabs{display:flex;gap:4px;position:sticky;top:0;z-index:5;background:var(--bg3);border-bottom:1px solid var(--bd);margin:-20px -24px 16px;padding:12px 24px}
.hub-tab{flex:1;padding:10px 8px;border-radius:var(--rS);background:var(--bg4);color:var(--t2);font-family:Inter;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s var(--ease);display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--bd)}
.hub-tab:hover{background:var(--bg5);color:var(--t1);border-color:var(--ac)}
.hub-tab.active{background:var(--acD);color:var(--acL);border-color:var(--ac);box-shadow:0 0 12px var(--acG)}
.hub-tab .ht-icon{font-size:18px}
.hub-tab .ht-label{font-size:11px;letter-spacing:.3px}
.hub-tab .ht-badge{font-size:9px;background:var(--bg5);padding:1px 6px;border-radius:8px;color:var(--t3);margin-top:1px}
.hub-tab.active .ht-badge{background:rgba(124,92,240,.25);color:var(--acL)}
.hub-section{margin-bottom:24px;animation:fadeIn .4s var(--ease)}
.hub-section-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--bd)}
.hub-section-head h3{font-size:14px;font-weight:700;color:var(--t1)}
.hub-section-head .hs-icon{font-size:18px}
.hub-section-head .hs-count{margin-left:auto;font-size:11px;color:var(--t3);background:var(--bg5);padding:2px 8px;border-radius:10px}
/* Topic Dashboard */
.topic-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.topic-stat{background:var(--bg4);border:1px solid var(--bd);border-radius:var(--r);padding:14px 10px;text-align:center}
.ts-val{font-size:22px;font-weight:900}
.ts-lbl{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.ts-ac .ts-val{color:var(--acL)}
.ts-gr .ts-val{color:var(--gr)}
.ts-rd .ts-val{color:var(--rd)}
.topic-progress{background:var(--bg4);border:1px solid var(--bd);border-radius:var(--r);padding:14px;margin-bottom:8px}
.tp-bar{height:8px;background:var(--bg1);border-radius:4px;overflow:hidden;margin:8px 0}
.tp-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ac),var(--acL));transition:width 1s var(--ease)}
.tp-info{display:flex;justify-content:space-between;font-size:11px;color:var(--t2)}
/* Video Cards */
.video-grid{display:flex;flex-direction:column;gap:10px}
.video-card{background:var(--bg4);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;transition:all .2s var(--ease);cursor:pointer}
.video-card:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:var(--glow)}
.video-card.playing{border-color:var(--ac);box-shadow:var(--glow)}
.vc-header{display:flex;align-items:center;gap:12px;padding:14px 16px}
.vc-play{width:36px;height:36px;border-radius:50%;background:var(--rdD);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;border:2px solid var(--rd);transition:all .2s}
.video-card:hover .vc-play{background:var(--rd);border-color:var(--rd)}
.video-card.playing .vc-play{background:var(--ac);border-color:var(--ac)}
.vc-info{flex:1;min-width:0}
.vc-title{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-meta{font-size:10px;color:var(--t3);margin-top:2px;display:flex;gap:8px}
.vc-dur{color:var(--acL)}
.video-player{display:none;padding:0}
.video-player.open{display:block}
.video-player iframe{width:100%;aspect-ratio:16/9;border:none;border-radius:0 0 var(--r) var(--r)}
/* Note Cards */
.note-grid{display:flex;flex-direction:column;gap:8px}
.note-card{display:flex;align-items:center;gap:12px;background:var(--bg4);border:1px solid var(--bd);border-radius:var(--r);padding:14px 16px;transition:all .2s var(--ease);cursor:pointer}
.note-card:hover{border-color:var(--ac);transform:translateY(-2px)}
.nc-icon{font-size:20px;flex-shrink:0}
.nc-info{flex:1;min-width:0}
.nc-title{font-size:13px;font-weight:600;color:var(--t1)}
.nc-desc{font-size:10px;color:var(--t3);margin-top:2px}
.nc-arrow{color:var(--t3);font-size:14px}
/* Coming Soon State */
.coming-soon{text-align:center;padding:30px 20px;background:var(--bg4);border:2px dashed var(--bd);border-radius:var(--rL);color:var(--t3)}
.coming-soon .cs-icon{font-size:36px;margin-bottom:8px;opacity:.6}
.coming-soon .cs-text{font-size:13px;font-weight:600;margin-bottom:4px;color:var(--t2)}
.coming-soon .cs-sub{font-size:11px}
/* ===== DRAWER OVERLAY ===== */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-overlay.vis{opacity:1;pointer-events:auto}
/* ===== RESPONSIVE ===== */
@media(max-width:1200px){
  .app-layout{grid-template-columns:var(--sW) var(--sbW) 1fr !important}
  .analytics-sidebar{display:none !important;position:fixed !important;right:0;top:0;bottom:0;width:var(--asW);z-index:60}
  .analytics-sidebar.open{display:flex !important;animation:slideInRight .3s var(--ease)}
  .as-close{display:block}
}
@media(max-width:768px){
  :root{--mob-sW:56px}

  /* === GLOBAL MOBILE OVERFLOW PREVENTION === */
  html,body{overflow-x:hidden !important;max-width:100vw !important}

  /* Force 2-column grid: thin server bar + main content ONLY */
  .app-layout{
    grid-template-columns:var(--mob-sW) 1fr !important;
    height:100vh;
    width:100vw !important;max-width:100vw !important;
    overflow:hidden !important
  }

  /* Server bar — thin vertical strip */
  .server-bar{
    position:sticky;top:0;height:100vh;
    width:var(--mob-sW) !important;min-width:var(--mob-sW);max-width:var(--mob-sW);
    flex-direction:column;padding:8px 0;z-index:40;
    border-right:1px solid var(--bd);border-top:none;
    gap:4px;overflow-y:auto;overflow-x:hidden;
    background:var(--bg1);align-items:center;
    flex-shrink:0
  }
  #serverList{flex-direction:column;width:100%;gap:4px;align-items:center}
  .server-icon{width:40px;height:40px}
  .si-inner{width:40px;height:40px;font-size:16px;border-radius:20px}
  .si-pill{display:block}
  .si-divider{width:28px;height:2px;margin:4px 0}

  /* Channel sidebar — hidden by default, fixed overlay when open */
  .channel-sidebar{
    display:none !important;
    position:fixed !important;left:var(--mob-sW);top:0;bottom:0;
    width:260px;z-index:55;
    overflow-y:auto !important
  }
  .channel-sidebar.open{
    display:flex !important;
    animation:slideInLeft .3s var(--ease)
  }
  .sb-close{display:block}

  /* Mobile menu hamburger */
  .mob-menu{display:block}

  /* Main content area — force to fill remaining grid space, clip horizontal only */
  .main-content{
    min-width:0 !important;max-width:calc(100vw - var(--mob-sW)) !important;
    width:calc(100vw - var(--mob-sW)) !important;
    overflow-x:hidden !important;overflow-y:hidden !important;
    grid-column:2;
    box-sizing:border-box
  }
  .main-body{padding:14px 12px;overflow-x:hidden !important;overflow-y:auto !important;max-width:100%;-webkit-overflow-scrolling:touch}

  /* === ANALYTICS SIDEBAR — completely hidden === */
  .analytics-sidebar{
    display:none !important;position:fixed !important;
    right:-100vw !important;top:0;bottom:0;width:85vw !important;
    max-width:320px;z-index:60;
    visibility:hidden
  }
  .analytics-sidebar.open{
    display:flex !important;
    right:0 !important;
    visibility:visible;
    animation:slideInRight .3s var(--ease)
  }
  .as-close{display:block}

  /* Hide the float collapse button on mobile */
  .sidebar-float-btn{display:none !important}

  /* === ALL SLIDE-OUT PANELS — force hidden until .open === */
  .notes-reader:not(.open){
    right:-200vw !important;
    visibility:hidden !important
  }
  /* UCP handles its own mobile styles in ucp.css */

  /* When panels ARE open on mobile — full width */
  .notes-reader.open{
    right:0 !important;
    visibility:visible !important;
    width:100vw !important;max-width:100vw !important
  }
  #mcqPanel:not(.open){right:-200vw !important;visibility:hidden !important}
  #mcqPanel.open{right:0 !important;visibility:visible !important;width:100vw !important;max-width:100vw !important}
  .mcq-panel-header,.mcq-scroll-list{width:100% !important}

  /* Settings panel — handled by ucp.css */

  /* Dashboard cards layout */
  .dash-welcome{padding:20px 16px;margin-bottom:14px;max-width:100%;overflow:hidden}
  .dash-welcome h1{font-size:18px}
  .dash-welcome p{font-size:12px;overflow-wrap:break-word}
  .dash-stats{grid-template-columns: 2fr 1.2fr;gap:8px;margin-bottom:14px;max-width:100%}
  .ds{padding:14px 10px;min-width:0;overflow:hidden}
  .ds-val{font-size:20px}
  .mode-grid{grid-template-columns:1fr}
  .subj-grid{grid-template-columns: 2fr 1.2fr;gap:8px;max-width:100%}
  .subj-card{padding:12px;min-width:0}
  .subj-card .sc-emoji{font-size:24px;margin-bottom:6px}
  .subj-card .sc-name{font-size:12px}

  /* Topic views */
  .topic-stats{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .topic-stat{padding:10px 6px;min-width:0}
  .ts-val{font-size:18px}

  /* === MOBILE TOPIC/NOTES VIEW — Premium Reading Experience === */

  /* Remove excess padding when viewing notes */
  .main-body.topic-active,
  .main-content:has(.topic-view) .main-body{
    padding:0 !important;
    overflow-y:auto
  }

  /* Topic view — edge-to-edge */
  .topic-view{
    padding:0 !important;
    max-width:100%;
    box-sizing:border-box
  }

  /* Compact topic header — mobile */
  .topic-header-compact{
    padding:6px 10px !important;
    gap:6px !important;
    min-height:32px !important
  }
  .thc-title{font-size:12px !important}
  .thc-path{display:none !important}

  /* Floating toolbar — bottom on mobile */
  .notes-action-toolbar{
    position:fixed !important;
    right:auto !important;
    bottom:12px !important;
    top:auto !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    flex-direction:row !important;
    padding:6px 10px !important;
    border-radius:999px !important;
    gap:2px !important
  }
  .nat-divider{
    width:1px !important;
    height:20px !important;
    margin:0 4px !important
  }
  /* Hide Immersive button on mobile */
  #immersiveBtn{
    display:none !important
  }

  /* Safety: prevent immersive split-view from ever rendering on mobile */
  .topic-view.immersive-mode{
    position:relative !important;
    padding:0 !important
  }
  .immersive-right,.immersive-divider{
    display:none !important
  }

  /* Section checklist — fit mobile */
  .section-checklist{
    position:fixed !important;
    top:auto !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-height:60vh !important;
    border-radius:16px 16px 0 0 !important;
    z-index:100 !important;
    box-shadow:0 -4px 24px rgba(0,0,0,0.4) !important
  }

  /* Results view */
  .res-breakdown{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .rb{padding:10px}
  .rb .rv{font-size:18px}

  /* Prevent any horizontal overflow on all sections */
  .dash-section,.hub-section,.hub-tabs{max-width:100%;overflow:hidden;box-sizing:border-box}
}
/* Small phones */
@media(max-width:400px){
  :root{--mob-sW:48px}
  .server-icon{width:36px;height:36px}
  .si-inner{width:36px;height:36px;font-size:14px;border-radius:18px}
  .dash-stats{grid-template-columns: 2fr 1.2fr;gap:6px}
  .ds-val{font-size:18px}
  .subj-grid{grid-template-columns:1fr;gap:8px}
  .main-body{padding:10px 8px}
}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* ===== MCQ PANEL ===== */
#mcqPanel{
  position:fixed;top:0;right:-400px;width:400px;height:100vh;background:var(--bg2);z-index:200;
  transition:right 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s ease-out;
  display:flex;flex-direction:column;border-left:1px solid var(--bd)
}
#mcqPanel.open{right:0}
#mcqPanel.resizing{transition:none !important}
#mcqPanel.fullscreen{width:75% !important}
#mcqOverlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:199;opacity:0;pointer-events:none;
  transition:opacity 0.3s
}
#mcqOverlay.vis{opacity:1;pointer-events:all}
/* AVITAN CSS extracted */
/* Resize handle */
.mcq-resize-handle{position:absolute;left:0;top:0;bottom:0;width:16px;cursor:ew-resize;z-index:10;background:transparent;}
.mcq-resize-handle::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(148,163,184,0.15);transition:all 0.2s;}
.mcq-resize-handle:hover::before,.mcq-resize-handle:active::before{background:var(--ac);width:4px;}
.mcq-resize-handle::after{display:none;}
.mcq-resize-handle:hover::after,.mcq-resize-handle:active::after{opacity:0.6}
/* Fullscreen button */
.mcq-fullscreen-btn{font-size:20px;background:none;border:none;cursor:pointer;opacity:0.5;transition:opacity 0.2s}
.mcq-fullscreen-btn:hover{opacity:1}
.mcq-panel-list{padding:16px;overflow-y:auto;flex:1}
.mcq-panel-item{
  display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg1);border:1px solid var(--bd);
  border-radius:var(--rS);margin-bottom:10px;cursor:pointer;transition:all 0.2s
}
.mcq-panel-item:hover{border-color:var(--ac);background:var(--bg3)}
.mcq-panel-item.correct{border-color:var(--gr);background:rgba(52,211,153,0.1)}
.mcq-panel-item.wrong{border-color:var(--rd);background:rgba(248,113,113,0.1)}
.mcq-panel-num{font-size:12px;font-weight:700;color:var(--t3)}
.mcq-panel-q{flex:1;font-size:13px;line-height:1.4}
.mcq-panel-status{font-size:16px;font-weight:700}
.mcq-panel-item.correct .mcq-panel-status{color:var(--gr)}
.mcq-panel-item.wrong .mcq-panel-status{color:var(--rd)}
/* Topic Header Button */
.topic-mcq-btn{
  margin-left:12px;padding:8px 16px;background:var(--ac);color:#fff;border:none;border-radius:var(--rS);
  font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s
}
.topic-mcq-btn:hover{background:var(--acL)}
.topic-sections-btn{
  padding:8px 16px;background:var(--bg3);color:var(--t2);border:1px solid var(--bd);border-radius:var(--rS);
  font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s
}
.topic-sections-btn:hover{background:var(--bg2);border-color:var(--ac)}
.topic-fullscreen-btn,.topic-hide-sidebars-btn{padding:8px 12px;background:var(--bg3);color:var(--t2);border:1px solid var(--bd);border-radius:var(--rS);font-size:13px;cursor:pointer;transition:all 0.2s}
.topic-fullscreen-btn:hover,.topic-hide-sidebars-btn:hover{background:var(--acL);border-color:var(--ac)}
.topic-view.fullscreen-mode{padding:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background:var(--bg1);display:flex}
.topic-view.fullscreen-mode .topic-header{position:absolute;top:0;left:0;right:0;background:var(--bg2);padding:10px 20px;border-bottom:1px solid var(--bd);z-index:10}
.topic-view.fullscreen-mode iframe{position:absolute;top:60px;left:0;width:60%!important;height:calc(100vh - 60px)!important;border-radius:0!important}
.section-checklist{position:absolute;top:60px;left:20px;width:340px;max-height:450px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rS);z-index:50;box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.section-checklist-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--bd);font-weight:700;font-size:14px;background:var(--bg3);border-radius:var(--rS) var(--rS) 0 0}
.section-checklist-header button{background:none;border:none;color:var(--t2);cursor:pointer;font-size:18px;padding:0;line-height:1}
.section-checklist-body{padding:12px;max-height:380px;overflow-y:auto}
.checklist-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--rS);margin-bottom:4px;cursor:pointer;transition:all 0.2s;border:1px solid transparent}
.checklist-item.major{background:linear-gradient(135deg,var(--bg3),var(--bg2));border-color:var(--ac);padding:12px 14px;margin-bottom:8px}
.checklist-item.major .checklist-text{font-weight:600;font-size:14px;color:var(--t1)}
.checklist-item.sub{background:var(--bg1);padding:8px 12px;margin-left:8px}
.checklist-item.sub .checklist-text{font-size:12px;color:var(--t2)}
.checklist-item:hover{background:var(--bg3)}
.checklist-item.checked.major{background:linear-gradient(135deg,rgba(52,211,153,0.15),rgba(52,211,153,0.08));border-color:var(--gr)}
.checklist-item.checked.sub{background:rgba(52,211,153,0.1)}
.checklist-item.checked .checklist-box{border-color:var(--gr);background:var(--gr)}
.checklist-item.checked .checklist-text{color:var(--t1)}
.checklist-box{width:18px;height:18px;min-width:18px;border:2px solid var(--bd);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;transition:all 0.2s}
.checklist-text{font-size:13px;color:var(--t1);flex:1;line-height:1.3}
/* MCQ Panel Filter */
.mcq-filter-bar{
  display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--bd);background:var(--bg1)
}
.mcq-filter-btn{
  flex:1;padding:10px 8px;background:var(--bg2);color:var(--t2);border:1px solid var(--bd);
  border-radius:var(--rS);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s
}
.mcq-filter-btn:hover{background:var(--bg3);color:var(--t1)}
.mcq-filter-btn.active{background:var(--ac);color:#fff;border-color:var(--ac)}
/* Continuous Scroll MCQ Panel - content on LEFT, empty space on RIGHT */
.mcq-panel-header{padding:16px 20px 16px 20px;border-bottom:1px solid var(--bd);width:340px}
.mcq-panel-progress{height:6px;background:var(--bg2);border-radius:3px;overflow:hidden}
.mcq-panel-progress-fill{height:100%;background:var(--gr);transition:width 0.3s}
.mcq-panel-stats{font-size:12px;color:var(--t3);margin-top:8px}
.mcq-scroll-list{padding:16px 20px 16px 20px;overflow-y:auto;height:calc(100vh - 140px);width:340px}
.mcq-card{background:var(--bg1);border:1px solid var(--bd);border-radius:var(--rS);margin-bottom:16px;padding:14px;width:100%;box-sizing:border-box}
/* Fullscreen - wider content but still left-aligned with space on right */
/* Fullscreen - wider but still left-aligned */
#mcqPanel.fullscreen .mcq-panel-header{width:340px}
#mcqPanel.fullscreen .mcq-scroll-list{width:340px}
#mcqPanel.fullscreen .mcq-card{width:100%}
.mcq-card.answered{border-color:var(--t3)}
.mcq-card-num{font-size:12px;font-weight:700;color:var(--t3);margin-bottom:8px}
.mcq-card-q{font-size:14px;line-height:1.4;margin-bottom:12px}
.mcq-card-opts{display:flex;flex-direction:column;gap:8px}
.mcq-card-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rS);cursor:pointer;transition:all 0.2s}
.mcq-card-opt:hover:not(.disabled){border-color:var(--ac);background:var(--bg3)}
.mcq-card-opt.disabled{pointer-events:none;opacity:0.6}
.mcq-card-opt.correct{border-color:var(--gr);background:rgba(52,211,153,0.15)}
.mcq-card-opt.wrong{border-color:var(--rd);background:rgba(248,113,113,0.15)}
.mcq-card-letter{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--bg3);border-radius:50%;font-size:12px;font-weight:700;color:var(--t2)}
.mcq-card-opt.correct .mcq-card-letter{background:var(--gr);color:#fff}
.mcq-card-opt.wrong .mcq-card-letter{background:var(--rd);color:#fff}
.mcq-card-text{flex:1;font-size:13px;line-height:1.3}
.mcq-card-exp{margin-top:12px;padding:12px;background:var(--bg2);border-radius:var(--rS);border-left:3px solid var(--ac)}
.mcq-card-exp.correct{background:rgba(52,211,153,0.1);border-left-color:var(--gr)}
.mcq-card-exp.wrong{background:rgba(248,113,113,0.1);border-left-color:var(--rd)}
.mcq-exp-title{font-size:13px;font-weight:700;margin-bottom:6px}
.mcq-exp-title.correct{color:var(--gr)}
.mcq-exp-title.wrong{color:var(--rd)}
.mcq-exp-text{font-size:12px;line-height:1.5;color:var(--t2)}
/* ===== QUICK SEARCH / EXPLAIN ===== */
#explainPanel{
  position:fixed;top:0;right:-440px;width:420px;height:100vh;background:var(--bg2);z-index:220;
  transition:right 0.35s cubic-bezier(0.4,0,0.2,1),width 0.2s ease-out;
  display:flex;flex-direction:column;border-left:1px solid var(--bd)
}
#explainPanel.open{right:0}
#explainPanel.resizing{transition:none !important}
#explainPanel.fullscreen{width:75% !important}
#explainOverlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:219;opacity:0;pointer-events:none;
  transition:opacity 0.3s
}
#explainOverlay.vis{opacity:1;pointer-events:all}
.explain-chip{
  position:fixed;display:flex;gap:4px;align-items:center;padding:6px;background:rgba(31,31,58,.96);
  border:1px solid var(--bdL);border-radius:var(--rS);box-shadow:0 10px 34px rgba(0,0,0,.34);
  z-index:500;opacity:0;pointer-events:none;transform:translateY(6px) scale(.98);
  transition:opacity .16s ease,transform .16s ease;backdrop-filter:blur(18px)
}
.explain-chip.vis{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.explain-chip button{
  border:1px solid transparent;background:var(--bg4);color:var(--t1);font-family:Inter;font-size:11px;
  font-weight:800;border-radius:var(--rS);padding:7px 9px;cursor:pointer;transition:all .15s ease
}
.explain-chip button:hover{background:var(--acD);border-color:var(--ac);color:var(--acL)}
.explain-launcher{
  position:fixed;left:24px;bottom:100px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,rgba(124,92,240,.34),rgba(34,211,238,.2));color:#fff;font-size:21px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:500;box-shadow:0 6px 26px rgba(124,92,240,.28);
  opacity:.92;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;backdrop-filter:blur(16px)
}
.explain-launcher:hover{transform:scale(1.08);opacity:1;box-shadow:0 8px 34px rgba(124,92,240,.42)}
.explain-content{padding:16px 18px 22px;color:var(--t1)}
.explain-section{
  background:var(--bg1);border:1px solid var(--bd);border-radius:var(--rS);padding:14px;margin-bottom:12px
}
.explain-section-title{
  font-size:10px;font-weight:900;color:var(--acL);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px
}
.explain-definition p{font-size:14px;line-height:1.55;color:var(--t1);margin:0}
.explain-bullets,.explain-steps{margin:0;padding-left:20px;color:var(--t2);font-size:13px;line-height:1.6}
.explain-bullets li,.explain-steps li{margin-bottom:6px}
.explain-source-row{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.explain-source-badge,.explain-nmc-badge{
  display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800;
  background:var(--acD);color:var(--acL);border:1px solid rgba(124,92,240,.24)
}
.explain-nmc-badge{background:var(--grD);color:var(--gr);border-color:rgba(52,211,153,.24)}
.explain-mcq-list{display:flex;flex-direction:column;gap:10px}
.explain-mcq-card{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--rS);padding:12px}
.explain-mcq-meta{font-size:10px;color:var(--t3);font-weight:800;margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.explain-mcq-q{font-size:13px;line-height:1.45;color:var(--t1);margin-bottom:8px}
.explain-mcq-answer{font-size:12px;font-weight:800;color:var(--gr);margin-bottom:6px}
.explain-mcq-exp{font-size:12px;line-height:1.5;color:var(--t2)}
.explain-empty{font-size:12px;color:var(--t3);padding:12px;border:1px dashed var(--bd);border-radius:var(--rS);text-align:center}
.explain-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px}
.explain-action-btn{
  min-height:38px;border:1px solid var(--bd);background:var(--bg4);color:var(--t1);border-radius:var(--rS);
  font-family:Inter;font-size:12px;font-weight:800;cursor:pointer;transition:all .15s ease;padding:8px
}
.explain-action-btn:hover{border-color:var(--ac);background:var(--acD)}
.explain-action-btn.primary{background:var(--ac);border-color:var(--ac);color:#fff}
.explain-action-btn.done{border-color:var(--gr);color:var(--gr);background:var(--grD)}
.explain-disclaimer{padding:12px 0 2px;text-align:center;font-size:11px;color:var(--t3)}
@media(max-width:768px){
  #explainPanel{
    top:auto !important;right:0 !important;bottom:-110vh !important;width:100vw !important;max-width:100vw !important;
    height:100dvh !important;border-left:0;border-top:1px solid var(--bd);border-radius:16px 16px 0 0;
    transition:bottom .35s cubic-bezier(.4,0,.2,1)
  }
  #explainPanel.open{right:0 !important;bottom:0 !important;visibility:visible !important}
  #explainPanel:not(.open){right:0 !important;bottom:-110vh !important;visibility:hidden !important}
  #explainResizeHandle,#explainFullscreenBtn{display:none}
  .explain-chip{max-width:calc(100vw - 16px);flex-wrap:wrap;justify-content:center}
  .explain-launcher{left:auto;right:16px;bottom:84px;width:42px;height:42px;font-size:19px}
  .explain-content{padding:14px 14px 24px}
  .explain-actions{grid-template-columns:1fr}
}
/* Dashboard basics, quiz/results, content hub, MCQ/search panels */
/* Quickball layout override, orb, panel, subject switcher */
/* Premium dashboard and syllabus surfaces */
/* Quickball nav text, clock widget, mobile-first experience */
/* ===== IMMERSIVE PROFILE ONBOARDING ===== */
#profileModal.profile-onboarding-overlay {
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  background:
    linear-gradient(128deg, #08100f 0%, #132219 42%, #162b41 72%, #2a1f24 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:has(#profileModal.visible) #appLayout {
  filter: blur(10px) saturate(.82);
  opacity: .18;
  pointer-events: none;
}
#profileModal .profile-onboarding-card {
  --onb-ink: #f7fbf7;
  --onb-muted: rgba(247, 251, 247, .68);
  --onb-line: rgba(255, 255, 255, .18);
  --onb-panel: rgba(255, 255, 255, .08);
  --onb-mint: #40e0b8;
  --onb-blue: #7ab7ff;
  --onb-coral: #ff8f7a;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  padding: clamp(18px, 3.2vw, 48px) !important;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .032) 1px, transparent 1px),
    linear-gradient(128deg, #08100f 0%, #132219 42%, #162b41 72%, #2a1f24 100%);
  background-size: 72px 72px, 72px 72px, auto;
  color: var(--onb-ink);
}
#profileModal .profile-onboarding-card::after {
  display: none;
}
.onboarding-orbit-bg {
  opacity: .48;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .12) 42%, transparent 43%),
    linear-gradient(64deg, transparent 0%, rgba(64, 224, 184, .1) 58%, transparent 59%);
  background-size: 260px 100%, 340px 100%;
  mask-image: none;
}
.onboarding-topbar {
  margin: 0;
}
.onboarding-brand-logo {
  background: rgba(255, 255, 255, .84);
  border-color: rgba(255, 255, 255, .32);
}
.onboarding-brand-lockup span {
  color: rgba(255, 255, 255, .92);
}
.onboarding-brand-lockup strong {
  color: rgba(255, 255, 255, .58);
}
.onboarding-progress {
  width: min(310px, 34vw);
  background: rgba(255, 255, 255, .14);
}
.onboarding-stage {
  display: block;
  min-height: calc(100dvh - clamp(82px, 10vh, 116px));
}
.onboarding-companion-panel,
.onboarding-flow-panel,
.onboarding-avitan-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.onboarding-companion-panel {
  position: absolute;
  left: 0;
  bottom: clamp(30px, 9vh, 86px);
  width: min(198px, 16vw);
  min-height: 0;
  display: block;
  padding: 0;
  pointer-events: none;
}
#profileModal .onboarding-companion-panel {
  display: none;
}
.onboarding-qb-avatar {
  display: none;
}
.onboarding-agent-label {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.onboarding-speech {
  width: auto;
  margin-top: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-size: 14px;
  font-weight: 750;
  text-align: left;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .16);
}
.onboarding-flow-panel {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(760px, calc(100vw - 500px));
  max-height: calc(100dvh - 132px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible;
}
.profile-onboarding-card[data-step="language"] .onboarding-flow-panel,
.profile-onboarding-card[data-step="tone"] .onboarding-flow-panel {
  top: 50%;
}
.profile-onboarding-card[data-avitan-active="true"] .onboarding-flow-panel {
  left: 45%;
  top: 54%;
  width: min(600px, calc(100vw - 560px));
}
#profileModal .profile-onboarding-card h2 {
  max-width: 740px;
  margin-bottom: 10px;
  color: #fff;
  font-size: clamp(34px, 5.2vw, 70px);
  line-height: .96;
  text-wrap: balance;
}
#profileModal .profile-onboarding-card[data-avitan-active="true"] h2 {
  max-width: 600px;
  font-size: clamp(32px, 4vw, 54px);
}
#profileModal .profile-onboarding-card .modal-sub {
  max-width: 620px;
  margin-bottom: 28px;
  color: rgba(247, 251, 247, .7);
  font-size: 15px;
  font-weight: 650;
}
#profileModal .profile-onboarding-card[data-avitan-active="true"] .modal-sub {
  margin-bottom: 18px;
}
.onboarding-choice-grid {
  gap: 10px;
}
.language-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tone-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.onboarding-choice,
#profileModal .profile-onboarding-card .form-group input,
#profileModal .profile-onboarding-card .form-group select,
#profileModal .profile-onboarding-card .google-signin-btn,
#profileModal .profile-onboarding-card .onboarding-check,
.onboarding-avitan-intro,
.onboarding-memory-list span,
.onboarding-back-btn {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .075);
  color: #fff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .14);
}
.onboarding-choice {
  min-height: 52px;
  border-radius: 8px;
}
.tone-choice {
  min-height: 74px;
}
.onboarding-choice span {
  padding: 10px 12px;
}
.onboarding-choice b,
.onboarding-memory-list small {
  color: #fff;
}
.onboarding-choice small,
.onboarding-memory-list b,
#profileModal .profile-onboarding-card .form-group label {
  color: rgba(247, 251, 247, .62);
}
.onboarding-choice:hover {
  border-color: rgba(122, 183, 255, .48);
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .2);
}
.onboarding-choice:has(input:checked),
#profileModal .profile-onboarding-card .onboarding-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--onb-mint) 62%, var(--onb-blue));
  background: rgba(64, 224, 184, .13);
  box-shadow: 0 0 0 2px rgba(64, 224, 184, .18), 0 18px 52px rgba(0, 0, 0, .22);
}
.profile-onboarding-card[data-step="language"] .onboarding-choice,
.profile-onboarding-card[data-step="tone"] .onboarding-choice,
.profile-onboarding-card[data-step="identity"] .form-group,
.profile-onboarding-card[data-step="contact"] .form-group,
.profile-onboarding-card[data-step="contact"] .google-signin-btn,
.profile-onboarding-card[data-step="exam"] .onboarding-check,
.profile-onboarding-card[data-step="exam"] .landing-onboarding-card {
  animation: onboardingGlassRise .46s cubic-bezier(.16, 1, .3, 1) both;
}
.profile-onboarding-card[data-step="language"] .onboarding-choice:nth-child(1),
.profile-onboarding-card[data-step="tone"] .onboarding-choice:nth-child(1) { animation-delay: .72s; }
.profile-onboarding-card[data-step="language"] .onboarding-choice:nth-child(2),
.profile-onboarding-card[data-step="tone"] .onboarding-choice:nth-child(2) { animation-delay: .8s; }
.profile-onboarding-card[data-step="language"] .onboarding-choice:nth-child(3),
.profile-onboarding-card[data-step="tone"] .onboarding-choice:nth-child(3) { animation-delay: .88s; }
.profile-onboarding-card[data-step="language"] .onboarding-choice:nth-child(n+4) { animation-delay: .96s; }
#profileModal .profile-onboarding-card .form-group {
  margin-bottom: 10px;
}
#profileModal .profile-onboarding-card .form-group input,
#profileModal .profile-onboarding-card .form-group select {
  min-height: 50px;
  border-radius: 8px;
}
#profileModal .profile-onboarding-card .form-group input::placeholder {
  color: rgba(247, 251, 247, .46);
}
#profileModal .profile-onboarding-card .form-group input:focus,
#profileModal .profile-onboarding-card .form-group select:focus {
  border-color: var(--onb-blue);
  background: rgba(255, 255, 255, .13);
  box-shadow: 0 0 0 3px rgba(122, 183, 255, .18);
}
.onboarding-avitan-intro {
  margin-bottom: 14px;
}
.onboarding-avitan-intro span {
  color: var(--onb-blue);
}
.onboarding-avitan-intro p {
  color: rgba(255, 255, 255, .82);
}
#profileModal .profile-onboarding-card .google-signin-btn {
  min-height: 50px;
  justify-content: center;
}
#profileModal .profile-onboarding-card .auth-divider {
  color: rgba(247, 251, 247, .58);
}
#profileModal .profile-onboarding-card .auth-divider::before,
#profileModal .profile-onboarding-card .auth-divider::after {
  border-color: rgba(255, 255, 255, .16);
}
#profileModal .profile-onboarding-card .mini-auth-btn {
  background: linear-gradient(135deg, rgba(64, 224, 184, .86), rgba(122, 183, 255, .72));
  color: #07100f;
}
.onboarding-controls {
  margin-top: 22px;
  padding-top: 0;
}
.onboarding-controls:has(.onboarding-back-btn[hidden]) {
  grid-template-columns: 1fr;
}
.onboarding-back-btn {
  color: rgba(255, 255, 255, .82);
}
.onboarding-back-btn[hidden] {
  display: none !important;
}
#profileModal .profile-onboarding-card .btn-glow {
  min-height: 48px;
  background: linear-gradient(135deg, #38d8b3, #7ab7ff 56%, #ff8f7a);
  color: #07100f;
  box-shadow: 0 18px 54px rgba(64, 224, 184, .18);
}
.onboarding-avitan-panel {
  position: absolute;
  top: clamp(104px, 18vh, 168px);
  right: clamp(22px, 4vw, 64px);
  width: min(320px, 24vw);
  min-height: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .075);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(18px);
}
.onboarding-avitan-panel.active {
  opacity: 1;
  transform: translateX(0);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .22);
}
.onboarding-avitan-panel h3 {
  color: #fff;
  font-size: 18px;
}
.onboarding-avitan-panel p {
  color: rgba(247, 251, 247, .68);
  font-size: 12px;
}
.onboarding-memory-list {
  gap: 6px;
}
.onboarding-memory-list span {
  padding: 8px 9px;
  box-shadow: none;
}
.landing-onboarding-card {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .075);
  color: #fff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.landing-onboarding-title,
.landing-onboarding-score {
  color: #fff;
}
.landing-onboarding-card li,
.landing-onboarding-meta span,
.landing-onboarding-head {
  color: rgba(247, 251, 247, .66);
}
#profileModal.visible ~ #quickBallPanel,
#profileModal.visible ~ #quickBallOverlay {
  display: none !important;
}
#profileModal.visible ~ #quickBall.onboarding-flight,
body:has(#profileModal.visible) #quickBall.onboarding-flight {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: grab !important;
  transform: scale(1) !important;
  z-index: 2147483647 !important;
  transition:
    left .86s cubic-bezier(.16, 1, .3, 1),
    top .86s cubic-bezier(.16, 1, .3, 1),
    opacity .28s ease,
    transform .34s cubic-bezier(.34, 1.56, .64, 1),
    width .42s cubic-bezier(.16, 1, .3, 1),
    height .42s cubic-bezier(.16, 1, .3, 1) !important;
}
body:has(#profileModal.visible) #quickBall.onboarding-flight.idle {
  opacity: 1 !important;
  transform: scale(1) !important;
}
body:has(#profileModal.visible) #quickBall.onboarding-flight .quickball-orb {
  box-shadow:
    0 18px 56px rgba(0, 0, 0, .34),
    0 0 34px rgba(64, 224, 184, .32),
    inset 0 0 22px rgba(122, 183, 255, .12);
  animation: onboardingRealQuickballFloat 4.2s ease-in-out infinite;
}
body:has(#profileModal.visible) .qb-speech {
  z-index: 2147483647;
  left: clamp(20px, 3vw, 40px) !important;
  top: clamp(132px, 25vh, 182px) !important;
  max-width: min(218px, calc(100vw - 34px));
  border-color: rgba(255, 255, 255, .18);
  background: rgba(8, 16, 15, .78);
  color: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  text-align: left;
  transform: none !important;
}
body:has(#profileModal.visible) .qb-speech.vis {
  transform: none !important;
}
body:has(#profileModal.visible) .qb-speech::after {
  display: none;
}
@keyframes onboardingGlassRise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes onboardingRealQuickballFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-9px) rotate(1deg); }
}
@media (max-width: 1060px) {
  .onboarding-flow-panel {
    width: min(650px, calc(100vw - 390px));
  }

  .language-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .onboarding-avitan-panel {
    width: min(270px, 25vw);
  }

  .onboarding-companion-panel {
    width: min(156px, 15vw);
  }

  body:has(#profileModal.visible) .qb-speech {
    max-width: min(166px, calc(100vw - 34px));
  }
}
@media (max-width: 900px) {
  #profileModal .profile-onboarding-card {
    overflow: auto;
    padding: 14px !important;
  }

  .onboarding-stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 34px;
  }

  .onboarding-flow-panel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-height: none;
    transform: none;
    margin-top: 26px;
  }

  .profile-onboarding-card[data-avitan-active="true"] .onboarding-flow-panel {
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
  }

  #profileModal .profile-onboarding-card[data-avitan-active="true"] h2 {
    max-width: 100%;
    font-size: clamp(30px, 10vw, 44px);
  }

  .onboarding-companion-panel {
    position: relative;
    left: auto;
    bottom: auto;
    order: -1;
    width: min(520px, calc(100vw - 28px));
    margin-top: 12px;
  }

  .onboarding-speech {
    max-width: calc(100% - 86px);
  }

  body:has(#profileModal.visible) .qb-speech {
    display: none;
  }

  .onboarding-avitan-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 16px;
    transform: translateY(10px);
  }

  .onboarding-avitan-panel.active {
    transform: translateY(0);
  }

  #profileModal .profile-onboarding-card h2 {
    font-size: clamp(32px, 10vw, 52px);
  }

  .language-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tone-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .onboarding-topbar {
    gap: 12px;
  }

  .onboarding-progress {
    width: 100%;
  }

  .onboarding-speech {
    max-width: calc(100% - 74px);
    font-size: 13px;
  }

  .onboarding-choice {
    min-height: 50px;
  }

  .onboarding-controls {
    grid-template-columns: 1fr;
  }
}
/* ===== PREMIUM WHITE PROFILE ONBOARDING ===== */
#profileModal.profile-onboarding-overlay {
  background: #fbfaf7 !important;
}
body:has(#profileModal.visible) #appLayout {
  opacity: 0;
  filter: none;
}
#profileModal .profile-onboarding-card {
  --onb-ink: #101214;
  --onb-muted: #697077;
  --onb-line: rgba(16, 18, 20, .11);
  --onb-panel: rgba(255, 255, 255, .82);
  --onb-mint: #1fcaa5;
  --onb-blue: #458cce;
  --onb-coral: #ef7970;
  background:
    linear-gradient(180deg, #fff 0%, #fbfaf7 58%, #f4f1eb 100%) !important;
  color: var(--onb-ink);
}
#profileModal .profile-onboarding-card[data-step="welcome"] {
  background: #fff !important;
  overflow: hidden;
}
#profileModal .profile-onboarding-card[data-step="mode"] {
  overflow: hidden;
}
#profileModal .profile-onboarding-card[data-step="welcome"] .onboarding-topbar,
#profileModal .profile-onboarding-card[data-step="welcome"] .onboarding-flow-panel,
#profileModal .profile-onboarding-card[data-step="welcome"] .onboarding-avitan-panel,
#profileModal .profile-onboarding-card[data-step="welcome"] .onboarding-orbit-bg,
#profileModal .profile-onboarding-card[data-step="welcome"] .onboarding-controls {
  display: none !important;
}
#profileModal .profile-onboarding-card:not([data-step="welcome"]) .onboarding-orbit-bg {
  display: block;
  opacity: .42;
  background:
    linear-gradient(90deg, rgba(16, 18, 20, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16, 18, 20, .03) 1px, transparent 1px);
  background-size: 88px 88px;
}
.onboarding-brand-logo {
  background: #fff;
  border-color: rgba(16, 18, 20, .08);
  box-shadow: 0 10px 30px rgba(16, 18, 20, .08);
}
.onboarding-brand-lockup span {
  color: var(--onb-ink);
}
.onboarding-brand-lockup strong {
  color: var(--onb-muted);
}
.onboarding-progress {
  background: rgba(16, 18, 20, .08);
}
.onboarding-flow-panel {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 420px));
}
.profile-onboarding-card[data-step="mode"] .onboarding-flow-panel {
  top: 55%;
  width: min(560px, calc(100vw - 72px));
  text-align: center;
}
.profile-onboarding-card[data-step="language"] .onboarding-flow-panel {
  top: 54%;
  width: min(820px, calc(100vw - 360px));
}
.profile-onboarding-card[data-avitan-active="true"] .onboarding-flow-panel {
  left: 42%;
  top: 54%;
  width: min(620px, calc(100vw - 560px));
}
#profileModal .profile-onboarding-card h2 {
  color: var(--onb-ink);
  font-size: clamp(42px, 5.3vw, 74px);
  font-weight: 850;
  letter-spacing: 0;
}
#profileModal .profile-onboarding-card[data-avitan-active="true"] h2 {
  font-size: clamp(34px, 4.2vw, 58px);
}
#profileModal .profile-onboarding-card .modal-sub {
  color: var(--onb-muted);
  font-size: 16px;
  font-weight: 560;
}
.mode-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 520px;
  margin: 0 auto;
}
.mode-choice {
  min-height: 128px;
  text-align: center;
}
.mode-choice span {
  align-items: center;
}
.mode-choice b {
  font-size: 24px;
}
.mode-choice small {
  font-size: 13px;
}
.language-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.onboarding-choice,
#profileModal .profile-onboarding-card .form-group input,
#profileModal .profile-onboarding-card .form-group select,
#profileModal .profile-onboarding-card .google-signin-btn,
#profileModal .profile-onboarding-card .onboarding-check,
.onboarding-avitan-intro,
.onboarding-memory-list span,
.onboarding-back-btn {
  box-sizing: border-box;
  border-color: rgba(16, 18, 20, .1);
  background: rgba(255, 255, 255, .76);
  color: var(--onb-ink);
  box-shadow: 0 18px 52px rgba(16, 18, 20, .07);
}
.onboarding-choice b,
.onboarding-memory-list small {
  color: var(--onb-ink);
}
.onboarding-choice small,
.onboarding-memory-list b,
#profileModal .profile-onboarding-card .form-group label {
  color: var(--onb-muted);
}
.onboarding-choice:hover {
  border-color: rgba(16, 18, 20, .22);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 22px 60px rgba(16, 18, 20, .09);
}
.onboarding-choice:has(input:checked),
#profileModal .profile-onboarding-card .onboarding-check:has(input:checked) {
  border-color: rgba(16, 18, 20, .82);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(16, 18, 20, .08), 0 24px 70px rgba(16, 18, 20, .1);
}
#profileModal .profile-onboarding-card .form-group input::placeholder {
  color: rgba(16, 18, 20, .38);
}
#profileModal .profile-onboarding-card .form-group input:focus,
#profileModal .profile-onboarding-card .form-group select:focus {
  border-color: rgba(16, 18, 20, .86);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(16, 18, 20, .08);
}
.onboarding-avitan-intro {
  background: #fff;
}
.onboarding-avitan-intro span {
  color: var(--onb-muted);
}
.onboarding-avitan-intro p {
  color: var(--onb-ink);
}
.identity-sequence {
  display: grid;
  gap: 12px;
}
.identity-question-card {
  border: 1px solid rgba(16, 18, 20, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 52px rgba(16, 18, 20, .07);
  color: var(--onb-ink);
  overflow: hidden;
  animation: onboardingGlassRise .42s cubic-bezier(.16, 1, .3, 1) both;
}
.identity-question-card.is-waiting {
  display: none;
}
.identity-question-card.is-complete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: rgba(238, 250, 244, .9);
  border-color: rgba(31, 202, 165, .26);
}
.identity-card-head {
  display: grid;
  gap: 5px;
  padding: 16px 18px 0;
}
.identity-question-card.is-complete .identity-card-head {
  padding: 14px 16px;
}
.identity-card-head span,
.identity-card-registered span,
.identity-sequence-complete span {
  color: var(--onb-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.identity-card-head strong {
  color: var(--onb-ink);
  font-size: 22px;
  line-height: 1.08;
}
.identity-question-card.is-complete .identity-card-head strong {
  font-size: 16px;
}
.identity-card-head small {
  color: var(--onb-muted);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.35;
}
.identity-question-card.is-complete .identity-card-head small {
  display: none;
}
.identity-card-body {
  display: grid;
  gap: 10px;
  padding: 16px 18px 18px;
}
.identity-card-body label {
  color: var(--onb-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
}
#profileModal .profile-onboarding-card .identity-card-body input,
#profileModal .profile-onboarding-card .identity-card-body select {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(16, 18, 20, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  color: var(--onb-ink);
  font: 650 15px var(--font-body, 'Inter', sans-serif);
  padding: 0 16px;
  outline: none;
}
#profileModal .profile-onboarding-card .identity-card-body input:focus,
#profileModal .profile-onboarding-card .identity-card-body select:focus {
  border-color: rgba(16, 18, 20, .86);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(16, 18, 20, .08);
}
#profileModal .profile-onboarding-card .identity-card-body input::placeholder {
  color: rgba(16, 18, 20, .38);
}
.identity-submit-btn {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: #090a0b;
  color: #fff;
  box-shadow: 0 16px 44px rgba(16, 18, 20, .14);
  cursor: pointer;
  font: 850 14px var(--font-body, 'Inter', sans-serif);
  transition: transform .18s ease, box-shadow .18s ease;
}
.identity-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 60px rgba(16, 18, 20, .18);
}
.identity-card-registered {
  display: none;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  min-width: 164px;
  padding: 14px 16px;
  color: var(--onb-ink);
}
.identity-question-card.is-complete .identity-card-body {
  display: none;
}
.identity-question-card.is-complete .identity-card-registered {
  display: flex;
}
.identity-card-registered b,
.identity-sequence-complete b {
  color: var(--onb-ink);
  font-size: 15px;
  line-height: 1.2;
}
.identity-sequence-complete {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(31, 202, 165, .28);
  border-radius: 8px;
  background: rgba(238, 250, 244, .92);
  box-shadow: 0 18px 52px rgba(16, 18, 20, .07);
  animation: onboardingGlassRise .34s cubic-bezier(.16, 1, .3, 1) both;
}
.identity-sequence-complete[hidden] {
  display: none !important;
}
.profile-onboarding-card[data-step="identity"] .onboarding-flow-panel {
  top: clamp(132px, 18vh, 150px);
  width: min(472px, calc(100vw - 560px));
  transform: translateX(-50%);
}
.profile-onboarding-card[data-step="contact"] .onboarding-flow-panel {
  top: clamp(132px, 18vh, 150px);
  width: min(472px, calc(100vw - 560px));
  transform: translateX(-50%);
}
.profile-onboarding-card[data-step="contact"] .onboarding-step[data-step="contact"] {
  position: relative;
  z-index: 20;
}
.profile-onboarding-card[data-step="contact"] .onboarding-controls {
  position: relative;
  z-index: 1;
  transition: opacity .16s ease, filter .16s ease;
}
.profile-onboarding-card[data-step="contact"]:has(.phone-country-picker.is-open) .onboarding-controls {
  opacity: .16;
  filter: blur(1px);
  pointer-events: none;
}
#profileModal .profile-onboarding-card[data-step="identity"] #profileModalTitle,
#profileModal .profile-onboarding-card[data-step="identity"] #profileModalSubtitle,
#profileModal .profile-onboarding-card[data-step="identity"] .onboarding-avitan-intro,
#profileModal .profile-onboarding-card[data-step="identity"] .identity-sequence-complete,
#profileModal .profile-onboarding-card[data-step="identity"] .onboarding-avitan-panel h3,
#profileModal .profile-onboarding-card[data-step="identity"] .onboarding-avitan-panel p,
#profileModal .profile-onboarding-card[data-step="contact"] #profileModalTitle,
#profileModal .profile-onboarding-card[data-step="contact"] #profileModalSubtitle,
#profileModal .profile-onboarding-card[data-step="contact"] .onboarding-avitan-panel h3,
#profileModal .profile-onboarding-card[data-step="contact"] .onboarding-avitan-panel p {
  display: none !important;
}
#profileModal .profile-onboarding-card[data-step="identity"] .onboarding-topbar .onboarding-progress,
#profileModal .profile-onboarding-card[data-step="contact"] .onboarding-topbar .onboarding-progress {
  display: none;
}
.profile-onboarding-card[data-step="identity"] .identity-sequence {
  gap: 0;
}
.profile-onboarding-card[data-step="identity"] .identity-question-card {
  border-color: rgba(16, 18, 20, .08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(16, 18, 20, .06);
}
.profile-onboarding-card[data-step="contact"] .contact-question-card {
  border-color: rgba(16, 18, 20, .08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(16, 18, 20, .06);
  overflow: visible;
}
.profile-onboarding-card[data-step="identity"] .identity-question-card.is-complete {
  display: none;
}
.profile-onboarding-card[data-step="identity"] .identity-card-head {
  padding: 16px 16px 0;
}
.profile-onboarding-card[data-step="contact"] .identity-card-head {
  padding: 16px 16px 0;
}
.profile-onboarding-card[data-step="identity"] .identity-card-head span,
.profile-onboarding-card[data-step="identity"] .identity-card-head small,
.profile-onboarding-card[data-step="identity"] .identity-card-body label,
.profile-onboarding-card[data-step="contact"] .identity-card-head span,
.profile-onboarding-card[data-step="contact"] .identity-card-head small {
  display: none;
}
.profile-onboarding-card[data-step="identity"] .identity-card-head strong {
  font-size: 21px;
  line-height: 1.1;
}
.profile-onboarding-card[data-step="contact"] .identity-card-head strong {
  font-size: 21px;
  line-height: 1.1;
}
.profile-onboarding-card[data-step="identity"] .identity-card-body {
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 10px;
  align-items: center;
  padding: 14px 16px 16px;
}
#profileModal .profile-onboarding-card[data-step="identity"] .identity-card-body input,
#profileModal .profile-onboarding-card[data-step="identity"] .identity-card-body select {
  min-height: 46px;
  border-radius: 8px;
  background: #fff;
}
.profile-onboarding-card[data-step="contact"] .contact-card-body {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
  overflow: visible;
}
.profile-onboarding-card[data-step="contact"] .contact-route-row,
#profileModal .profile-onboarding-card[data-step="contact"] .onboarding-otp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 10px;
  align-items: center;
  margin: 0;
  overflow: visible;
}
#profileModal .profile-onboarding-card[data-step="contact"] .onboarding-otp-row[hidden] {
  display: none !important;
}
.profile-onboarding-card[data-step="contact"] .contact-route-field {
  box-sizing: border-box;
  display: grid;
  gap: 3px;
  min-height: 56px;
  border: 1px solid rgba(16, 18, 20, .1);
  border-radius: 8px;
  background: #fff;
  padding: 8px 13px 7px;
  overflow: visible;
}
.profile-onboarding-card[data-step="contact"] .contact-route-field span {
  color: var(--onb-muted);
  font: 850 10px/1.1 var(--font-body, 'Inter', sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
}
#profileModal .profile-onboarding-card[data-step="contact"] .contact-route-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--onb-ink);
  font: 650 15px var(--font-body, 'Inter', sans-serif);
  padding: 0;
  outline: none;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-number-composer {
  display: grid;
  grid-template-columns: minmax(104px, .34fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-picker {
  position: relative;
  z-index: 20;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-picker.is-open {
  z-index: 60;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-button {
  appearance: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(16, 18, 20, .12);
  border-radius: 9px;
  background: linear-gradient(180deg, #fff 0%, #f5f3ee 100%);
  color: var(--onb-ink);
  cursor: pointer;
  font: 850 12px var(--font-body, 'Inter', sans-serif);
  padding: 0 9px 0 10px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-button:hover,
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-picker.is-open .phone-country-button {
  border-color: rgba(16, 18, 20, .36);
  background: #fff;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-button:focus-visible {
  border-color: rgba(16, 18, 20, .82);
  box-shadow: 0 0 0 3px rgba(16, 18, 20, .08), inset 0 1px 0 rgba(255, 255, 255, .85);
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-button span:not(.phone-country-chevron),
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-option span {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  opacity: .7;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease, opacity .16s ease;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-picker.is-open .phone-country-chevron {
  opacity: 1;
  transform: translateY(2px) rotate(225deg);
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% + 8px);
  left: 0;
  display: none;
  width: min(264px, calc(100vw - 84px));
  max-height: 206px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(16, 18, 20, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 22px 50px rgba(16, 18, 20, .18), 0 3px 12px rgba(16, 18, 20, .08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-picker.is-open .phone-country-menu {
  display: grid;
  gap: 3px;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-option {
  appearance: none;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--onb-ink);
  cursor: pointer;
  font: 850 12px var(--font-body, 'Inter', sans-serif);
  padding: 7px 8px;
  text-align: left;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-option small {
  color: rgba(16, 18, 20, .52);
  font: 700 11px var(--font-body, 'Inter', sans-serif);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-option:hover,
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-option:focus-visible {
  background: rgba(16, 18, 20, .055);
  outline: none;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-option.is-selected {
  background: #101214;
  color: #fff;
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-country-option.is-selected small {
  color: rgba(255, 255, 255, .68);
}
#profileModal .profile-onboarding-card[data-step="contact"] .phone-number-composer input {
  min-width: 0;
}
#profileModal .profile-onboarding-card[data-step="contact"] .contact-route-field:focus-within {
  border-color: rgba(16, 18, 20, .86);
  box-shadow: 0 0 0 3px rgba(16, 18, 20, .08);
}
#profileModal .profile-onboarding-card[data-step="contact"] .contact-route-field input::placeholder {
  color: rgba(16, 18, 20, .38);
}
.profile-onboarding-card[data-step="contact"] .onboarding-auth-status,
.profile-onboarding-card[data-step="contact"] .phone-recaptcha {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  min-height: 0;
}
.profile-onboarding-card[data-step="identity"] .identity-submit-btn {
  display: inline-grid;
  place-items: center;
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  border-radius: 8px;
  padding: 0;
}
.profile-onboarding-card[data-step="contact"] .identity-submit-btn {
  display: inline-grid;
  place-items: center;
  width: 46px;
  min-width: 46px;
  min-height: 46px;
  border-radius: 8px;
  padding: 0;
}
.profile-onboarding-card[data-step="identity"] .identity-submit-btn svg,
.profile-onboarding-card[data-step="contact"] .identity-submit-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.profile-onboarding-card[data-step="identity"] .identity-submit-btn:hover svg,
.profile-onboarding-card[data-step="contact"] .identity-submit-btn:hover svg {
  transform: translateX(2px);
}
.profile-onboarding-card[data-step="identity"] .onboarding-avitan-panel {
  top: clamp(132px, 18vh, 150px);
  width: min(300px, 22vw);
  padding: 18px 12px 12px;
  border-radius: 8px;
  overflow: hidden;
  position: absolute;
}
.profile-onboarding-card[data-step="contact"] .onboarding-avitan-panel {
  top: clamp(132px, 18vh, 150px);
  width: min(300px, 22vw);
  padding: 18px 12px 12px;
  border-radius: 8px;
  overflow: hidden;
  position: absolute;
}
.profile-onboarding-card[data-step="identity"] .onboarding-avitan-panel::before,
.profile-onboarding-card[data-step="contact"] .onboarding-avitan-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: rgba(16, 18, 20, .08);
}
.profile-onboarding-card[data-step="identity"] .onboarding-avitan-panel::after,
.profile-onboarding-card[data-step="contact"] .onboarding-avitan-panel::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--onb-mint), var(--onb-blue), var(--onb-coral));
}
.profile-onboarding-card[data-step="identity"] .onboarding-avitan-panel::after {
  width: 60%;
}
.profile-onboarding-card[data-step="contact"] .onboarding-avitan-panel::after {
  width: 80%;
}
.profile-onboarding-card[data-step="identity"] .onboarding-avitan-panel.active {
  transform: translateX(0);
}
.profile-onboarding-card[data-step="contact"] .onboarding-avitan-panel.active {
  transform: translateX(0);
}
.profile-onboarding-card[data-step="identity"] .onboarding-memory-list {
  gap: 8px;
}
.profile-onboarding-card[data-step="contact"] .onboarding-memory-list {
  gap: 8px;
}
.profile-onboarding-card[data-step="identity"] .onboarding-memory-list span {
  border-radius: 8px;
  padding: 10px 11px;
  box-shadow: none;
}
.profile-onboarding-card[data-step="contact"] .onboarding-memory-list span {
  border-radius: 8px;
  padding: 10px 11px;
  box-shadow: none;
}
body:has(#profileModal .profile-onboarding-card[data-step="identity"]) .qb-speech,
body:has(#profileModal .profile-onboarding-card[data-step="contact"]) .qb-speech {
  display: none !important;
}
.profile-onboarding-card[data-step="identity"] .onboarding-memory-list span:has(#avitanMemoryTone),
.profile-onboarding-card[data-step="identity"] .onboarding-memory-list span:has(#avitanMemoryContact),
.profile-onboarding-card[data-step="identity"] .onboarding-memory-list span:has(#avitanMemoryExam),
.profile-onboarding-card[data-step="contact"] .onboarding-memory-list span:has(#avitanMemoryTone),
.profile-onboarding-card[data-step="contact"] .onboarding-memory-list span:has(#avitanMemoryExam) {
  display: none;
}
.onboarding-memory-list span.is-fresh {
  animation: avitanMemoryPulse .82s cubic-bezier(.16, 1, .3, 1);
}
@keyframes avitanMemoryPulse {
  0% { border-color: rgba(31, 202, 165, .18); transform: translateY(0); }
  35% { border-color: rgba(31, 202, 165, .66); transform: translateY(-2px); }
  100% { border-color: rgba(16, 18, 20, .1); transform: translateY(0); }
}
.onboarding-controls {
  align-items: stretch;
}
#profileModal .profile-onboarding-card .btn-glow,
#profileModal .profile-onboarding-card .mini-auth-btn {
  background: #090a0b;
  color: #fff;
  box-shadow: 0 18px 52px rgba(16, 18, 20, .16);
}
.onboarding-back-btn {
  color: var(--onb-ink);
}
.onboarding-avitan-panel {
  box-sizing: border-box;
  top: clamp(112px, 18vh, 160px);
  right: clamp(28px, 5vw, 92px);
  width: min(360px, 26vw);
  border-color: rgba(16, 18, 20, .09);
  background: rgba(246, 246, 244, .88);
  box-shadow: 0 32px 90px rgba(16, 18, 20, .08);
}
.onboarding-avitan-panel h3 {
  color: var(--onb-ink);
}
.onboarding-avitan-panel p {
  color: var(--onb-muted);
}
.landing-onboarding-card {
  border-color: rgba(16, 18, 20, .09);
  background: #fff;
  color: var(--onb-ink);
  box-shadow: 0 18px 52px rgba(16, 18, 20, .07);
}
.landing-onboarding-title,
.landing-onboarding-score {
  color: var(--onb-ink);
}
.landing-onboarding-card li,
.landing-onboarding-meta span,
.landing-onboarding-head {
  color: var(--onb-muted);
}
body:has(#profileModal.visible) #quickBall.onboarding-flight .quickball-orb {
  box-shadow:
    0 24px 70px rgba(16, 18, 20, .14),
    0 0 34px rgba(31, 202, 165, .22),
    inset 0 0 22px rgba(69, 140, 206, .1);
}
body:has(#profileModal.visible) .qb-speech {
  left: clamp(28px, 5vw, 72px) !important;
  top: clamp(130px, 23vh, 190px) !important;
  max-width: min(300px, calc(100vw - 34px));
  border-color: rgba(16, 18, 20, .08);
  background: rgba(255, 255, 255, .92);
  color: var(--onb-ink);
  box-shadow: 0 24px 70px rgba(16, 18, 20, .1);
}
body:has(#profileModal .profile-onboarding-card[data-step="welcome"]) .qb-speech {
  display: block !important;
  left: 50% !important;
  top: calc(42vh + 74px) !important;
  max-width: min(430px, calc(100vw - 40px));
  padding: 15px 18px;
  text-align: center;
  transform: translateX(-50%) !important;
}
body:has(#profileModal .profile-onboarding-card[data-step="welcome"]) .qb-speech.vis {
  transform: translateX(-50%) !important;
}
.onboarding-ready-btn {
  position: fixed;
  left: 50%;
  top: calc(42vh + 160px);
  z-index: 2147483647;
  min-width: 148px;
  min-height: 46px;
  padding: 0 28px;
  border: 1px solid rgba(16, 18, 20, .1);
  border-radius: 999px;
  background: #090a0b;
  color: #fff;
  box-shadow: 0 18px 52px rgba(16, 18, 20, .14);
  cursor: pointer;
  font: 850 13px/1 var(--font-body, 'Inter', sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: opacity .34s ease, transform .34s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease;
}
.onboarding-ready-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.onboarding-ready-btn:hover {
  box-shadow: 0 24px 70px rgba(16, 18, 20, .18);
  transform: translateX(-50%) translateY(-1px);
}
.onboarding-ready-btn[hidden] {
  display: none !important;
}
body:has(#profileModal .profile-onboarding-card[data-avitan-active="true"]) .qb-speech {
  left: clamp(22px, 3vw, 44px) !important;
  top: clamp(188px, 31vh, 238px) !important;
  max-width: min(190px, calc(100vw - 34px));
}
@media (max-width: 1060px) {
  .profile-onboarding-card[data-step="language"] .onboarding-flow-panel {
    width: min(720px, calc(100vw - 72px));
  }

  .profile-onboarding-card[data-avitan-active="true"] .onboarding-flow-panel {
    width: min(580px, calc(100vw - 420px));
  }

  .onboarding-avitan-panel {
    width: min(300px, 28vw);
  }
}
@media (max-width: 900px) {
  .onboarding-flow-panel,
  .profile-onboarding-card[data-step="mode"] .onboarding-flow-panel,
  .profile-onboarding-card[data-step="language"] .onboarding-flow-panel,
  .profile-onboarding-card[data-avitan-active="true"] .onboarding-flow-panel {
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
  }

  #profileModal .profile-onboarding-card h2,
  #profileModal .profile-onboarding-card[data-avitan-active="true"] h2 {
    font-size: clamp(34px, 11vw, 52px);
  }

  .mode-grid,
  .language-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mode-choice {
    min-height: 104px;
  }

  .onboarding-avitan-panel {
    width: 100%;
  }

  .profile-onboarding-card[data-step="identity"] .onboarding-avitan-panel {
    position: relative;
    left: 0;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    transform: translateY(0);
  }

  .profile-onboarding-card[data-step="identity"] .onboarding-avitan-panel.active {
    transform: translateY(0);
  }

  .profile-onboarding-card[data-step="contact"] .onboarding-avitan-panel {
    position: relative;
    left: 0;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 100%;
    transform: translateY(0);
  }

  .profile-onboarding-card[data-step="contact"] .onboarding-avitan-panel.active {
    transform: translateY(0);
  }

  .identity-question-card.is-complete {
    grid-template-columns: 1fr;
  }

  .identity-card-registered {
    align-items: flex-start;
    min-width: 0;
    padding-top: 0;
  }

  body:has(#profileModal .profile-onboarding-card[data-step="welcome"]) .qb-speech {
    display: block !important;
    top: calc(33vh + 74px) !important;
  }

  .onboarding-ready-btn {
    top: calc(33vh + 164px);
  }
}
@media (min-width: 721px) and (max-width: 900px) {
  .profile-onboarding-card[data-step="identity"] .onboarding-flow-panel,
  .profile-onboarding-card[data-step="contact"] .onboarding-flow-panel,
  .profile-onboarding-card[data-step="identity"] .onboarding-avitan-panel,
  .profile-onboarding-card[data-step="contact"] .onboarding-avitan-panel {
    width: min(590px, calc(100vw - 140px));
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 560px) {
  .mode-grid {
    grid-template-columns: 1fr;
  }

  .language-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mode-choice {
    min-height: 84px;
  }
}
/* Immersive and premium white profile onboarding */
/* ================== URL INPUT MODAL (GLASSMORPHISM) ================== */
.url-input-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.url-input-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.url-input-box {
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  padding: 32px;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.2), inset 0 0 0 1px rgba(255,255,255,0.05);
  width: 90%;
  max-width: 460px;
  transform: translateY(30px) scale(0.95);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  opacity: 0;
}
.url-input-modal.active .url-input-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.url-input-box h3 {
  margin: 0 0 16px 0;
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--text);
}
.url-input-field {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  margin-bottom: 24px;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.url-input-field:focus {
  border-color: var(--secondary);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary) 20%, transparent);
}
.url-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
/* ================== FLOATING PiP VIDEO PLAYER (Multi-instance, headerless) ================== */
.pip-window {
  position: fixed;
  z-index: 9999999;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset;
  cursor: grab;
  transition: box-shadow 0.25s, border-color 0.25s;
}
.pip-window:hover {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.pip-window:active { cursor: grabbing; }
.pip-window iframe { width: 100%; height: 100%; display: block; border: 0; pointer-events: auto; }
.pip-drag-overlay { position: absolute; inset: 0; z-index: 3; cursor: grab; display: none; }
.pip-window.dragging .pip-drag-overlay { display: block; cursor: grabbing; }
.pip-hover-controls {
  position: absolute; top: 8px; right: 8px; display: flex; gap: 5px; z-index: 4;
  opacity: 0; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.pip-window:hover .pip-hover-controls { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pip-hc-btn {
  width: 28px; height: 28px; border: none; border-radius: 8px;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.85); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; line-height: 1;
}
.pip-hc-btn:hover { background: rgba(255,255,255,0.2); color: #fff; transform: scale(1.1); }
.pip-hc-btn.pip-close-btn:hover { background: rgba(239,68,68,0.8); }
.pip-resize-handle {
  position: absolute; bottom: 0; right: 0; width: 20px; height: 20px;
  cursor: nwse-resize; z-index: 5;
}
.pip-resize-handle::after {
  content: ''; position: absolute; bottom: 4px; right: 4px;
  width: 10px; height: 10px;
  border-right: 2px solid rgba(255,255,255,0.25);
  border-bottom: 2px solid rgba(255,255,255,0.25);
  border-radius: 0 0 3px 0; opacity: 0; transition: opacity 0.2s;
}
.pip-window:hover .pip-resize-handle::after { opacity: 1; }
/* Inline player embed (in sidebar thumbnail card) */
.video-inline-player {
  position: relative; border-radius: 12px; overflow: hidden;
  margin-bottom: 12px; background: #000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.video-iframe-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  overflow: hidden;
}
.video-iframe-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-inline-popout {
  position: absolute; bottom: 6px; right: 6px; width: 26px; height: 26px;
  border: none; border-radius: 8px; background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px); color: #fff; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s, transform 0.15s, background 0.15s; z-index: 2;
}
.video-inline-player:hover .video-inline-popout { opacity: 1; }
.video-inline-popout:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
.video-inline-collapse {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border: none; border-radius: 8px; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px); color: rgba(255,255,255,0.85); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s, background 0.15s; z-index: 2;
}
.video-inline-player:hover .video-inline-collapse { opacity: 1; }
.video-inline-collapse:hover { background: rgba(239,68,68,0.7); }
@media (max-width: 768px) { .pip-window { max-width: calc(100vw - 16px); } }
/* ===== GOOGLE AUTH UI ===== */
.google-signin-btn{width:100%;padding:13px 16px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-family:var(--font-body, 'Inter', sans-serif);font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:all .25s var(--ease);margin-bottom:8px}
.google-signin-btn:hover{border-color:var(--accent-calm);background:color-mix(in srgb, var(--accent-calm) 8%, var(--bg));box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-calm) 15%, transparent);transform:translateY(-1px)}
.google-signin-btn:active{transform:translateY(0)}
.google-signin-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.google-signin-btn .google-icon{flex-shrink:0}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:12px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.user-av-img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--ac);flex-shrink:0}
.user-sync-badge{font-size:12px;margin-left:4px;vertical-align:middle}
/* LATEST UPDATES FEED */
.pd-metrics-updates-wrapper {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 24px;
}
@media(max-width: 900px) {
    .pd-metrics-updates-wrapper {
        grid-template-columns: 1fr;
    }
}
.pd-updates-half {
    display: flex;
    flex-direction: column;
}
.pd-updates-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 110px;
    overflow-y: auto;
    border: none;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.pd-updates-list::-webkit-scrollbar {
    width: 4px;
}
.pd-updates-list::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 4px;
}
.pd-update-item {
    display: flex;
    flex-direction: column;
    padding: 0;
    border: none;
}
.pd-update-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.pd-update-type {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    background: var(--surface-2) !important;
    color: var(--text) !important;
}
.pd-update-type.note {
    background: color-mix(in srgb, var(--secondary) 15%, transparent);
    color: var(--secondary);
}
.pd-update-type.feature {
    background: color-mix(in srgb, var(--accent-calm) 15%, transparent);
    color: var(--accent-calm);
}
.pd-update-date {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 10px !important;
    color: var(--muted) !important;
}
.pd-update-title {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    margin-bottom: 2px !important;
    letter-spacing: -0.2px;
}
.pd-update-desc {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 11.5px !important;
    color: var(--muted) !important;
    line-height: 1.35 !important;
}
/* =============================================
   DOMAIN SELECTOR — Premium Universe Gate
   ============================================= */
.domain-selector-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg0, #0f0f1a);
    overflow-y: auto;
    animation: ds-fadeIn 0.5s ease;
}
.domain-selector-overlay.ds-exit {
    animation: ds-fadeOut 0.4s ease forwards;
}
@keyframes ds-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ds-fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.03); }
}
.ds-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 24px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.ds-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ds-logo {
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 0 20px rgba(124, 92, 240, 0.4));
    animation: ds-logoPulse 3s ease-in-out infinite;
}
@keyframes ds-logoPulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(124, 92, 240, 0.4)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 30px rgba(124, 92, 240, 0.6)); }
}
.ds-title {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 32px;
    font-weight: 800;
    color: var(--t1, #eef0f6);
    letter-spacing: -0.5px;
    margin: 0;
}
.ds-subtitle {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 500;
    color: var(--t2, #8b8da8);
    margin: 0;
    letter-spacing: 0.3px;
}
.ds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}
@media (max-width: 768px) {
    .ds-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .ds-container { padding: 32px 16px; gap: 28px; }
    .ds-title { font-size: 26px; }
}
@media (max-width: 480px) {
    .ds-grid { grid-template-columns: 1fr; gap: 10px; }
}
.ds-card {
    position: relative;
    background: var(--bg2, #1b1b32);
    border: 1px solid var(--bd, rgba(255,255,255,0.06));
    border-radius: 16px;
    padding: 28px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    animation: ds-cardSlideUp 0.6s ease backwards;
}
@keyframes ds-cardSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
.ds-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.ds-card:active {
    transform: translateY(-1px) scale(0.98);
}
.ds-card-glow {
    position: absolute;
    inset: 0;
    background: var(--card-gradient);
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: 16px;
}
.ds-card:hover .ds-card-glow {
    opacity: 0.08;
}
.ds-card-locked {
    cursor: default;
    opacity: 0.5;
}
.ds-card-locked:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--bd);
}
.ds-card-locked:hover .ds-card-glow {
    opacity: 0;
}
.ds-card-icon {
    font-size: 36px;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.ds-card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ds-card-title {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--t1, #eef0f6);
    margin: 0;
    letter-spacing: -0.2px;
}
.ds-card-tagline {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 500;
    color: var(--t2, #8b8da8);
    margin: 0;
}
.ds-card-stats {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 600;
    color: var(--t3, #7a7c98);
    margin-top: 4px;
}
.ds-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 2;
}
.ds-badge-live {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.2);
}
.ds-badge-soon {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}
.ds-footer-text {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 13px;
    color: var(--t3, #7a7c98);
    text-align: center;
    margin: 0;
    max-width: 500px;
    line-height: 1.5;
}
[data-theme='light'] .domain-selector-overlay {
    background: var(--bg0, #f0f2f5);
}
[data-theme='light'] .ds-card {
    background: var(--bg4, #fff);
    border-color: var(--bd, rgba(0,0,0,0.08));
}
[data-theme='light'] .ds-card:hover {
    border-color: rgba(0,0,0,0.15);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
/* ===== PWA INSTALL BANNER ===== */
#pwa-install-banner {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 100300;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface, #1E1E1E);
    border: 1px solid var(--border, rgba(255,255,255,0.09));
    border-radius: var(--radius-flat, 12px);
    box-shadow: var(--shadow-flat, 0 1px 2px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.3));
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 14px;
    color: var(--text, #E6E6E6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: pwa-slide-in 0.3s var(--ease, cubic-bezier(.4,0,.2,1));
}
@keyframes pwa-slide-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
#pwa-install-btn {
    padding: 6px 16px;
    background: var(--ac, #7c5cf0);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
#pwa-install-btn:hover { opacity: 0.85; }
#pwa-dismiss-btn {
    background: none;
    border: none;
    color: var(--t2, #8b8da8);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
#pwa-dismiss-btn:hover { color: var(--t1, #eef0f6); }
/* ===== BRAND LOGO STYLES ===== */
.modal-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
}
.server-logo {
    width: 26px;
    height: 26px;
    object-fit: contain;
    transition: transform .2s var(--ease, cubic-bezier(.4,0,.2,1));
}
.server-icon:hover .server-logo {
    transform: scale(1.08);
}
.ds-logo img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}
/* URL/video modals, auth UI, device selection, PWA, brand logo */
/* =============================================
   Assessment Hub - Minimalist Flat Design
   ============================================= */

/* Ensure the hub background matches the Notes interface (yellowish/flat) */
.main-content:has(.assess-shell) {
  background: var(--bg, #FAF9F6) !important;
}

.main-body:has(.qbank-practice-shell) {
  padding: 0 !important;
  box-sizing: border-box;
}

.main-content:has(.qbank-single-mode),
.main-body:has(.qbank-single-mode),
.main-content:has(.qbank-analytics-collapsed),
.main-body:has(.qbank-analytics-collapsed) {
  overflow-x: hidden;
  overflow-x: clip;
}

@media (min-width: 769px) {
  .main-body:has(.qbank-practice-shell) {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body.wm-dock-active .main-body:has(.qbank-practice-shell.qbank-avitan-sidecar-active) {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

.assess-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 0 60px;
  color: var(--text, var(--t1));
  font-family: var(--font-body);
}

/* Typography */
.assess-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary, var(--t3));
  margin-bottom: 12px;
}

.assess-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 0 32px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.05));
  margin-bottom: 32px;
}

.assess-topbar h1 {
  font-family: var(--font-heading);
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text, var(--t1));
}

/* Actions (Flat & Sleek) */
.assess-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.assess-action,
.assess-wide-action {
  border: none;
  background: transparent;
  color: var(--text, var(--t1));
  border-radius: 999px;
  min-height: 44px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.assess-action:hover,
.assess-wide-action:hover {
  background: var(--focus-tint, rgba(0,0,0,0.05));
  color: var(--accent-focus, var(--ac));
}

.assess-action.secondary {
  color: var(--muted, var(--t2));
  font-weight: 600;
}

.assess-action:disabled,
.assess-wide-action:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: transparent !important;
  color: var(--muted) !important;
}

/* Metrics (Borderless) */
.assess-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 0 48px;
}

.assess-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assess-metric-value {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--text, var(--t1));
  line-height: 1;
}

.assess-metric-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, var(--t3));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Bands & Lists */
.assess-band {
  margin-top: 48px;
}

.assess-band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.05));
  padding-bottom: 12px;
}

.assess-band-head h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, var(--t1));
  font-family: var(--font-heading);
}

.assess-band-head span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, var(--t3));
}

/* Test Series — Compact Dashboard */
.test-series-shell {
  padding-top: 18px;
}

.test-series-header {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.4fr) auto;
  gap: 22px;
  align-items: end;
  padding: 10px 0 18px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.07));
}

.test-series-header.compact {
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

.test-series-title {
  min-width: 0;
}

.test-series-title .assess-kicker {
  margin-bottom: 6px;
}

.test-series-title h1 {
  font-family: var(--font-heading);
  font-size: 38px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--text, var(--t1));
}

.test-series-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 14px;
  align-items: end;
}

.test-series-header.compact .test-series-metrics {
  grid-template-columns: repeat(auto-fit, minmax(74px, max-content));
  justify-content: end;
}

.test-series-metric {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.test-series-metric b {
  color: var(--text, var(--t1));
  font-family: var(--font-heading);
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
}

.test-series-metric span {
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.test-series-band {
  margin-top: 28px;
}

.test-series-band-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
}

.test-series-empty-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}

.test-series-empty-row b {
  font-size: 15px;
  font-weight: 800;
  color: var(--text, var(--t1));
}

.test-series-empty-row span {
  color: var(--muted, var(--t2));
  font-size: 13px;
  line-height: 1.4;
}

.assess-subject-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 32px;
}

/* Subject Rows (Sleek List) */
.assess-subject-row {
  width: 100%;
  min-height: 72px;
  border: none;
  background: transparent;
  color: var(--text, var(--t1));
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  border-radius: 16px;
  transition: all 0.2s ease;
}

.assess-subject-row:hover {
  background: var(--focus-tint, rgba(0,0,0,0.03));
  transform: translateX(4px);
}

.assess-subject-mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--secondary, var(--ac));
  font-weight: 800;
  font-size: 15px;
  font-family: var(--font-heading);
}

.assess-subject-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.assess-subject-name {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assess-subject-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, var(--t3));
}

.assess-subject-count {
  min-width: 42px;
  text-align: right;
  font-size: 24px;
  font-weight: 300;
  color: var(--muted, var(--t2));
}

/* QBank overview — compact practice dashboard */
.qbank-overview-shell {
  max-width: 1320px;
  padding-top: 10px;
}

.qbank-overview-header {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(420px, 1.5fr) auto;
  gap: 18px;
  align-items: end;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.qbank-overview-title {
  min-width: 0;
}

.qbank-overview-title .assess-kicker {
  margin-bottom: 4px;
}

.qbank-overview-title h1 {
  font-family: var(--font-heading);
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text, var(--t1));
}

.qbank-overview-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, max-content));
  justify-content: end;
  gap: 18px;
}

.qbank-overview-metric {
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: end;
}

.qbank-overview-metric b {
  color: var(--text, var(--t1));
  font-size: 21px;
  line-height: 1;
  font-weight: 800;
}

.qbank-overview-metric span {
  color: var(--muted, var(--t3));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.qbank-overview-workbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.qbank-overview-filter-head {
  display: grid;
  gap: 2px;
}

.qbank-overview-filter-head b,
.qbank-overview-next > span {
  color: var(--text, var(--t1));
  font-size: 13px;
  font-weight: 800;
}

.qbank-overview-filter-head span {
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 700;
}

.qbank-overview-filter-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.qbank-overview-filter-group {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.qbank-overview-filter-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  min-height: 28px;
  margin: 0 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--secondary, #5B7DB1) 62%, transparent);
}

.qbank-overview-workbar .assess-filter-pill {
  min-height: 28px;
  border: 0;
  border-radius: 0;
  padding: 0 4px;
  background: transparent;
  color: var(--muted, var(--t2));
}

.qbank-overview-workbar .assess-filter-pill:hover {
  color: var(--text, var(--t1));
  text-decoration: underline;
  text-underline-offset: 5px;
}

.qbank-overview-workbar .assess-filter-pill.active {
  background: transparent;
  color: #2563eb;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.qbank-overview-next {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  white-space: nowrap;
}

.qbank-overview-next > span {
  color: var(--muted, var(--t2));
}

.qbank-overview-subjects {
  margin-top: 22px;
}

.qbank-overview-section-head {
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.qbank-overview-shell .assess-subject-list {
  gap: 4px 24px;
}

.qbank-overview-shell .assess-subject-row {
  min-height: 54px;
  grid-template-columns: 36px minmax(0, 1fr) minmax(46px, max-content);
  gap: 12px;
  padding: 8px 0;
  border-radius: 0;
}

.qbank-overview-shell .assess-subject-row:hover {
  background: transparent;
  color: #2563eb;
  transform: none;
}

.qbank-overview-shell .assess-subject-mark {
  width: 32px;
  height: 32px;
  color: var(--subject-accent, var(--secondary));
  font-size: 13px;
}

.qbank-overview-shell .assess-subject-name {
  font-size: 15px;
}

.qbank-overview-shell .assess-subject-sub {
  font-size: 12px;
}

.qbank-overview-shell .assess-subject-count {
  min-width: 46px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text, var(--t1));
}

/* QBank browse — compact topic chooser */
.qbank-browse-shell {
  max-width: 1320px;
  padding-top: 10px;
}

.qbank-browse-header {
  display: grid;
  grid-template-columns: minmax(160px, 0.72fr) minmax(420px, 1.35fr) auto;
  gap: 18px;
  align-items: end;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.qbank-browse-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.qbank-browse-title > div {
  min-width: 0;
}

.qbank-browse-title .assess-kicker {
  margin-bottom: 4px;
}

.qbank-browse-title h1 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-heading);
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text, var(--t1));
}

.qbank-browse-back {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, var(--t2));
  padding: 0;
  cursor: pointer;
}

.qbank-browse-back:hover {
  color: #2563eb;
}

.qbank-browse-back-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qbank-browse-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, max-content));
  justify-content: end;
  gap: 18px;
}

.qbank-browse-metric {
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: end;
}

.qbank-browse-metric b {
  color: var(--text, var(--t1));
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.qbank-browse-metric span {
  color: var(--muted, var(--t3));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.qbank-browse-workbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.qbank-browse-filter-head {
  display: grid;
  gap: 2px;
}

.qbank-browse-filter-head b {
  color: var(--text, var(--t1));
  font-size: 13px;
  font-weight: 800;
}

.qbank-browse-filter-head span,
.qbank-browse-summary {
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 700;
}

.qbank-browse-summary {
  justify-self: end;
  white-space: nowrap;
}

.qbank-browse-tabs {
  min-width: 0;
  margin: 0;
  gap: 14px;
}

.qbank-browse-tabs .assess-pill {
  min-height: 28px;
  border-radius: 0;
  padding: 0 3px;
  background: transparent;
  color: var(--muted, var(--t2));
}

.qbank-browse-tabs .assess-pill:hover {
  color: var(--text, var(--t1));
  text-decoration: underline;
  text-underline-offset: 5px;
}

.qbank-browse-tabs .assess-pill.active {
  background: transparent;
  color: #2563eb;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.qbank-browse-topic-tree {
  margin-top: 14px;
}

.qbank-browse-system {
  margin-bottom: 14px;
}

.assess-tree-head.qbank-browse-system-head {
  padding: 10px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.12));
  font-size: 15px;
}

.assess-tree-head.qbank-browse-system-head b {
  font-size: 14px;
}

.assess-tree-chapter.qbank-browse-chapter {
  padding: 12px 0;
}

.assess-tree-chapter-title.qbank-browse-chapter-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.assess-tree-chapter-title.qbank-browse-chapter-title b {
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.qbank-browse-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}

.assess-topic-item.qbank-browse-topic-item {
  min-width: 0;
  min-height: 38px;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.05));
}

.assess-topic-item.qbank-browse-topic-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assess-topic-item.qbank-browse-topic-item b {
  flex: 0 0 auto;
  max-width: 48%;
  overflow: hidden;
  color: var(--muted, var(--t2));
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assess-topic-item.qbank-browse-topic-item:hover {
  color: #2563eb;
}

/* QBank builder — compact custom block controls */
.qbank-builder-shell {
  max-width: 1320px;
  padding-top: 10px;
}

.qbank-builder-header {
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(420px, 1.25fr) auto;
  gap: 18px;
  align-items: end;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.qbank-builder-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.qbank-builder-title > div {
  min-width: 0;
}

.qbank-builder-title .assess-kicker {
  margin-bottom: 4px;
}

.qbank-builder-title h1 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-heading);
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--text, var(--t1));
}

.qbank-builder-back {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, var(--t2));
  padding: 0;
  cursor: pointer;
}

.qbank-builder-back:hover {
  color: #2563eb;
}

.qbank-builder-back-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qbank-builder-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, max-content));
  justify-content: end;
  gap: 18px;
}

.qbank-builder-metric {
  min-width: 0;
  display: grid;
  gap: 3px;
  align-content: end;
}

.qbank-builder-metric b {
  color: var(--text, var(--t1));
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.qbank-builder-metric span {
  color: var(--muted, var(--t3));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.qbank-builder-panel {
  display: grid;
  gap: 12px;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.qbank-builder-mode {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.qbank-builder-mode > span,
.qbank-builder-scope .assess-control > span,
.qbank-builder-controls .assess-control > span {
  color: var(--text, var(--t1));
  font-size: 13px;
  font-weight: 800;
}

.qbank-builder-mode label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted, var(--t2));
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.qbank-builder-mode input {
  accent-color: #2563eb;
}

.qbank-builder-mode b {
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 800;
}

.qbank-builder-scope {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 18px;
  align-items: end;
}

.qbank-builder-controls {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(170px, 1fr) minmax(120px, 0.5fr) minmax(120px, max-content);
  gap: 18px;
  align-items: end;
}

.qbank-builder-scope .assess-control,
.qbank-builder-controls .assess-control {
  min-width: 0;
  gap: 6px;
}

.qbank-builder-scope .assess-control select,
.qbank-builder-controls .assess-control input,
.qbank-builder-controls .assess-control select {
  height: 36px;
  border-bottom-width: 1px;
  font-size: 15px;
}

.qbank-builder-scope .assess-control select,
.qbank-builder-controls .assess-control select {
  color: var(--text, var(--t1));
  background: var(--bg, #FAF9F6);
}

.qbank-builder-scope .assess-control select option,
.qbank-builder-controls .assess-control select option {
  color: var(--text, #1f2933);
  background: var(--bg, #FAF9F6);
}

.qbank-builder-scope .assess-control select:focus,
.qbank-builder-controls .assess-control input:focus,
.qbank-builder-controls .assess-control select:focus {
  border-bottom-color: #2563eb;
}

.qbank-builder-scope .assess-control select:focus-visible,
.qbank-builder-controls .assess-control input:focus-visible,
.qbank-builder-controls .assess-control select:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

.qbank-builder-start {
  min-height: 36px;
  height: 36px;
  border-radius: 0;
  background: transparent;
  color: #2563eb;
  padding: 0 2px;
  text-align: left;
}

.qbank-builder-start:hover {
  background: transparent;
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.qbank-builder-history {
  display: grid;
  gap: 0;
  padding: 12px 0 0;
}

.qbank-builder-history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  color: var(--muted, var(--t2));
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qbank-builder-history-head b {
  color: var(--text, var(--t1));
  font-size: 12px;
  letter-spacing: 0;
}

.qbank-builder-history-list {
  display: grid;
}

.qbank-history-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(420px, 1.6fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
}

.qbank-history-main,
.qbank-history-stats,
.qbank-history-actions {
  min-width: 0;
}

.qbank-history-main {
  display: grid;
  gap: 2px;
}

.qbank-history-main span,
.qbank-history-main em,
.qbank-history-stats span,
.qbank-history-stats strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qbank-history-main span {
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qbank-history-main b {
  min-width: 0;
  color: var(--text, var(--t1));
  font-size: 13px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qbank-history-main em {
  color: var(--muted, var(--t2));
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.qbank-history-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(54px, max-content));
  gap: 12px;
  align-items: center;
  color: var(--muted, var(--t2));
  font-size: 12px;
  font-weight: 800;
}

.qbank-history-stats strong {
  color: #2563eb;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.qbank-history-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.qbank-history-actions button {
  min-height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #2563eb;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.qbank-history-actions button:hover {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.qbank-builder-empty {
  margin-top: 18px;
  padding: 20px 0;
}

/* Pills and Filters */
.assess-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 24px 0 32px;
}

.assess-pill {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, var(--t2));
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}

.assess-pill:hover {
  color: var(--text, var(--t1));
}

.assess-pill.active {
  background: var(--focus-tint, rgba(0,0,0,0.05));
  color: var(--accent-focus, var(--ac));
}

/* Empty States (Clean Text) */
.assess-empty-state {
  margin-top: 32px;
  padding: 48px 0;
  text-align: left;
}

.assess-empty-state h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  font-family: var(--font-heading);
}

.assess-empty-state p {
  color: var(--muted, var(--t2));
  font-size: 15px;
  line-height: 1.6;
  max-width: 680px;
}

/* Forms and Inputs */
.assess-builder {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: end;
}

.assess-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.assess-control label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, var(--t3));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.assess-control input,
.assess-control select {
  width: 100%;
  height: 48px;
  border: none;
  border-bottom: 2px solid var(--border, rgba(0,0,0,0.1));
  background: transparent;
  color: var(--text, var(--t1));
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s;
}

.assess-control input:focus-visible,
.assess-control select:focus-visible {
  border-bottom-color: var(--accent-focus, var(--ac));
  outline: 2px solid var(--accent-focus, var(--ac));
  outline-offset: 2px;
  border-radius: 4px;
}

.assess-control input:focus,
.assess-control select:focus {
  border-bottom-color: var(--accent-focus, var(--ac));
}

.assess-wide-action {
  height: 48px;
  background: var(--focus-tint, rgba(0,0,0,0.05));
  color: var(--accent-focus, var(--ac));
}

/* Templates / History */
.assess-template-list,
.assess-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assess-template-card {
  border: none;
  background: transparent;
  padding: 24px 16px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
  border-radius: 16px;
  transition: background 0.2s;
}

.assess-template-card:hover {
  background: var(--focus-tint, rgba(0,0,0,0.02));
}

.assess-template-exam {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  color: var(--secondary, var(--ac));
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.assess-template-main h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  font-family: var(--font-heading);
}

.assess-template-main p {
  font-size: 14px;
  color: var(--muted, var(--t3));
  font-weight: 500;
}

.assess-template-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: flex-end;
}

.assess-template-stats span {
  font-size: 14px;
  color: var(--muted, var(--t2));
}

.assess-template-stats b {
  color: var(--text, var(--t1));
  font-size: 16px;
  font-weight: 600;
}

.assess-history-item {
  min-height: 64px;
  border: none;
  background: transparent;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.05));
  font-size: 15px;
}

/* Loading */
.assess-loading {
  min-height: min(620px, calc(100vh - 160px));
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(360px, 1.22fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(32px, 7vw, 76px) 0;
  color: var(--muted, var(--t2));
  font-size: 15px;
  font-weight: 600;
}

.assess-loading-copy {
  max-width: 390px;
}

.assess-loading-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 14px;
  color: var(--secondary, #5B7DB1);
  font-size: 13px;
  font-weight: 800;
}

.assess-loading-title {
  max-width: 14ch;
  color: var(--text, var(--t1));
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
}

.assess-loading-copy p {
  max-width: 36ch;
  margin-top: 12px;
  color: var(--muted, var(--t2));
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

.assess-loading-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  margin-top: 20px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--border, rgba(0,0,0,0.08)) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg, #FAF9F6) 72%, #fff 28%);
  color: var(--text, var(--t1));
  font-size: 13px;
  font-weight: 700;
}

.assess-loading-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-calm, #87A96B);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-calm, #87A96B) 16%, transparent);
  animation: assess-loading-dot 1.4s ease-in-out infinite;
}

.assess-loading-rail {
  position: relative;
  width: min(280px, 100%);
  height: 6px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border, rgba(0,0,0,0.08)) 62%, transparent);
}

.assess-loading-rail span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 44%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-calm, #87A96B), var(--secondary, #5B7DB1));
  animation: assess-loading-rail 1.65s cubic-bezier(.16, 1, .3, 1) infinite;
}

.assess-loading-board {
  width: 100%;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg, #FAF9F6) 74%, #fff 26%);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 36px rgba(31,26,20,.06);
}

.assess-loading-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 72px;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.07));
}

.assess-loading-chip {
  height: 34px;
  border-radius: 999px;
}

.assess-loading-chip.wide {
  width: min(280px, 100%);
}

.assess-loading-chip.short {
  width: 72px;
}

.assess-loading-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 0;
}

.assess-loading-metric {
  min-height: 78px;
  padding: 14px;
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: 12px;
  background: var(--surface, #fff);
}

.assess-loading-list {
  display: grid;
  gap: 10px;
}

.assess-loading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding: 0 14px;
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface, #fff) 86%, transparent);
}

.assess-loading-shimmer {
  position: relative;
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--muted, #6b6255) 13%, var(--bg, #FAF9F6));
}

.assess-loading-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 68%, transparent), transparent);
  animation: assess-loading-shimmer 1.65s ease-in-out infinite;
}

.assess-loading-metric .block {
  height: 11px;
  margin-top: 12px;
  border-radius: 999px;
}

.assess-loading-metric .block.strong {
  width: 58%;
  height: 22px;
  margin-top: 0;
}

.assess-loading-metric .block.medium {
  width: 72%;
}

.assess-loading-metric .block.short {
  width: 48%;
}

.assess-loading-row .row-title {
  width: 76%;
  height: 14px;
  border-radius: 999px;
}

.assess-loading-row .row-title.medium {
  width: 62%;
}

.assess-loading-row .row-title.short {
  width: 46%;
}

.assess-loading-row .row-meta {
  width: 88px;
  height: 28px;
  border-radius: 999px;
}

@keyframes assess-loading-shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes assess-loading-rail {
  0% {
    transform: translateX(-60%);
  }

  55% {
    transform: translateX(95%);
  }

  100% {
    transform: translateX(155%);
  }
}

@keyframes assess-loading-dot {
  0%, 100% {
    opacity: .55;
    transform: scale(.92);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 900px) {
  .assess-loading {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 28px 0 46px;
  }

  .assess-loading-copy {
    max-width: none;
  }

  .assess-loading-title {
    max-width: 18ch;
    font-size: 28px;
  }

  .assess-loading-copy p {
    max-width: 56ch;
  }
}

@media (max-width: 560px) {
  .assess-loading {
    gap: 22px;
    padding-top: 18px;
  }

  .assess-loading-board {
    padding: 14px;
    border-radius: 12px;
  }

  .assess-loading-toolbar {
    grid-template-columns: minmax(0, 1fr) 68px;
  }

  .assess-loading-toolbar .assess-loading-chip.short {
    display: none;
  }

  .assess-loading-metrics {
    grid-template-columns: 1fr;
  }

  .assess-loading-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .assess-loading-status-dot,
  .assess-loading-rail span,
  .assess-loading-shimmer::after {
    animation: none;
  }
}

/* Trees */
.assess-tree-system {
  margin-bottom: 16px;
}

.assess-tree-head {
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--text, var(--t1));
  font-weight: 700;
  font-size: 18px;
  font-family: var(--font-heading);
}

.assess-tree-chapter {
  padding: 24px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.05));
}

.assess-tree-chapter-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary, var(--t3));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.assess-topic-item {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text, var(--t1));
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s;
}

.assess-topic-item:hover {
  color: var(--accent-focus, var(--ac));
}

.assess-topic-item b {
  color: var(--muted, var(--t2));
  font-weight: 400;
}

/* =============================================
   Phase 4 Virtualization QBank Styles (Sleek)
   ============================================= */
.assess-question-list { display: flex; flex-direction: column; gap: 48px; margin-top: 32px; }

.assess-question-card { 
    border: none; 
    background: transparent; 
    padding: 0 0 32px; 
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.05));
}

.assess-question-card:last-child { border-bottom: none; }

.assess-question-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }

.assess-question-number { font-weight: 800; font-size: 18px; font-family: var(--font-heading); }

.assess-question-meta { color: var(--muted, #64748b); font-size: 13px; font-weight: 600; margin-right: auto; text-transform: uppercase; letter-spacing: 0.05em; }

.assess-bookmark-btn { border: 0; background: transparent; cursor: pointer; color: var(--border, #94a3b8); font-size: 20px; transition: color 0.2s; }
.assess-bookmark-btn:hover { color: var(--text); }
.assess-bookmark-btn.active { color: var(--doubt, #f59e0b); }

.assess-question-text { font-weight: 500; font-size: 18px; line-height: 1.6; margin-bottom: 24px; color: var(--text); }

.assess-option-list { display: flex; flex-direction: column; gap: 8px; }

.assess-option-btn { 
    display: flex; gap: 16px; text-align: left; width: 100%; 
    border: none; 
    background: transparent; 
    padding: 12px 16px; 
    cursor: pointer; 
    color: var(--text); 
    border-radius: 12px;
    transition: background 0.2s;
    font-size: 16px;
}

.assess-option-btn:hover:not(.disabled) {
    background: var(--focus-tint, rgba(0,0,0,0.03));
}

.assess-option-btn.correct { color: #286325; font-weight: 700; background: rgba(40,99,37,0.07); }
.assess-option-btn.wrong { color: #a32020; text-decoration: line-through; text-decoration-color: rgba(163,32,32,0.58); }
.assess-option-btn.disabled { cursor: default; }

.assess-option-letter { font-weight: 800; min-width: 24px; color: var(--text, var(--t1)); }

.assess-question-explanation { 
    margin-top: 24px; 
    padding: 24px; 
    border-radius: 16px; 
    font-size: 15px; 
    line-height: 1.6; 
    color: var(--text); 
    background: var(--focus-tint, rgba(0,0,0,0.02));
}

.assess-question-explanation:focus {
    outline: none;
}

.assess-question-explanation:focus-visible {
    outline: none;
}

.assess-question-explanation > strong {
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 12px;
}

.assess-question-explanation.correct > strong { color: #286325; }
.assess-question-explanation.wrong > strong { color: #a32020; }

.qbank-explanation-md {
    display: grid;
    gap: 12px;
}

.qbank-explanation-md h4 {
    margin: 4px 0 0;
    color: var(--text, var(--t1));
    font-size: 14px;
    line-height: 1.35;
    letter-spacing: 0;
}

.qbank-explanation-md p,
.qbank-explanation-md li {
    max-width: 92ch;
    margin: 0;
    overflow-wrap: anywhere;
}

.qbank-explanation-lead {
    font-weight: 650;
}

.qbank-explanation-points {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 22px;
}

.qbank-explanation-points li::marker {
    color: var(--text, var(--t1));
    font-weight: 800;
}

.qbank-explanation-points li.takeaway {
    font-weight: 700;
}

.qbank-explanation-points li.clinical {
    color: #123f82;
}

.qbank-explanation-points li.contrast {
    color: #a32020;
}

.qbank-explanation-md mark {
    border-radius: 4px;
    padding: 0 3px;
    background: rgba(250,204,21,0.32);
    color: inherit;
}

.qbank-explanation-md code {
    border-radius: 4px;
    padding: 1px 4px;
    background: rgba(15,23,42,0.08);
    font-size: 0.92em;
}

.assess-pool-toolbar { display: flex; gap: 24px; margin-bottom: 16px; }

.assess-pool-search, .assess-pool-filter { 
    border: none; 
    border-bottom: 2px solid var(--border, rgba(0,0,0,0.1)); 
    padding: 12px 0; 
    background: transparent; 
    color: var(--text); 
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}

.assess-pool-search:focus, .assess-pool-filter:focus {
    border-bottom-color: var(--accent-focus);
}

.assess-pool-search { flex: 1; }
.assess-pool-status { color: var(--muted); font-size: 14px; margin-bottom: 32px; font-weight: 500; }
.assess-load-sentinel { min-height: 80px; display: flex; align-items: center; justify-content: center; }

/* Open Notes button — neural link from QBank to Notes */
.assess-open-notes-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent-focus, #7c5cf0);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  opacity: 0.85;
}

.assess-open-notes-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .assess-topbar { flex-direction: column; align-items: flex-start; gap: 16px; border-bottom: none; }
  .assess-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assess-subject-list { grid-template-columns: 1fr; }
  .assess-builder { grid-template-columns: 1fr; }
  .assess-template-card { grid-template-columns: 1fr; gap: 16px; }
  .assess-template-stats { justify-content: flex-start; }
  .qbank-overview-header,
  .qbank-overview-workbar,
  .qbank-browse-header,
  .qbank-browse-workbar,
  .qbank-builder-header,
  .test-series-header,
  .test-series-header.compact {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .qbank-overview-metrics {
    justify-content: start;
    grid-template-columns: repeat(3, minmax(72px, max-content));
  }
  .qbank-browse-metrics {
    justify-content: start;
    grid-template-columns: repeat(4, minmax(72px, max-content));
  }
  .qbank-builder-metrics {
    justify-content: start;
    grid-template-columns: repeat(4, minmax(72px, max-content));
  }
  .test-series-metrics,
  .test-series-header.compact .test-series-metrics {
    justify-content: start;
    grid-template-columns: repeat(4, minmax(72px, max-content));
  }
  .qbank-builder-scope {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .qbank-builder-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .qbank-history-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .qbank-history-stats {
    grid-template-columns: repeat(3, minmax(54px, max-content));
  }
  .qbank-history-actions {
    justify-content: flex-start;
  }
  .qbank-overview-next {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .qbank-browse-summary {
    justify-self: start;
  }
}

@media (max-width: 560px) {
  .assess-topbar h1 { font-size: 32px; }
  .assess-metrics { grid-template-columns: 1fr; }
  .assess-metric-value { font-size: 40px; }
  .qbank-overview-title h1 { font-size: 30px; }
  .qbank-browse-title h1 { font-size: 30px; }
  .qbank-builder-title h1 { font-size: 30px; }
  .test-series-title h1 { font-size: 30px; }
  .qbank-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qbank-browse-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qbank-builder-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .test-series-metrics,
  .test-series-header.compact .test-series-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .test-series-empty-row { grid-template-columns: 1fr; gap: 4px; }
  .qbank-overview-shell .assess-subject-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }
  .qbank-browse-topic-grid { grid-template-columns: 1fr; }
  .assess-topic-item.qbank-browse-topic-item b { max-width: 55%; }
  .qbank-builder-scope { grid-template-columns: 1fr; }
  .qbank-builder-controls { grid-template-columns: 1fr; }
  .qbank-history-stats { grid-template-columns: repeat(2, minmax(54px, max-content)); }
}

/* Exam Badges */
.assess-exam-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}

.assess-exam-neet {
  background: rgba(74, 144, 217, 0.15);
  color: #4a90d9;
}

.assess-exam-inicet {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.assess-exam-usmle {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.assess-exam-default {
  background: rgba(100, 116, 139, 0.15);
  color: #64748b;
}

/* Filter Pills */
.assess-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.assess-filter-pill:hover {
  border-color: var(--accent, #4a90d9);
  color: var(--text, #1e293b);
}

.assess-filter-pill.active {
  background: var(--accent, #4a90d9);
  border-color: var(--accent, #4a90d9);
  color: #fff;
}

.assess-token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
}

/* Filters band (overview) */
.assess-filters-band {
  margin-top: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

/* Filter summary in pool header */
.assess-filter-summary {
  font-size: 12px;
  color: var(--accent, #4a90d9);
  font-weight: 600;
  margin-top: 4px;
}

/* Pool Filter Rows */
.assess-pool-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
}

.assess-pool-filter-row .assess-filter-pill {
  font-size: 11px;
  padding: 3px 12px;
  min-height: 28px;
}

/* Sticky pool toolbar */
.assess-pool-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg, #fff);
  padding: 12px 0;
}

/* QBank practice shell */
.qbank-practice-shell {
  --qbank-cockpit-line: rgba(17, 24, 39, 0.22);
  --qbank-cockpit-top: 122px;
  --qbank-cockpit-button-top: 18px;
  --qbank-cockpit-width: 368px;
  --qbank-active: #171717;
  --qbank-link: #164ea6;
  --qbank-correct: #286325;
  --qbank-wrong: #a32020;
  --qbank-danger: #a32020;
  --qbank-cinema-frame: rgba(43, 59, 73, 0.92);
  --qbank-chrome-bg: #2f4050;
  --qbank-chrome-fg: #f8fafc;
  --qbank-chrome-muted: rgba(248, 250, 252, 0.68);
  --qbank-chrome-line: rgba(248, 250, 252, 0.16);
  --qbank-chrome-pill: rgba(248, 250, 252, 0.1);
  --qbank-chrome-pill-hover: rgba(248, 250, 252, 0.18);
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 18px;
}

.qbank-practice-shell::before,
.qbank-practice-shell::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  z-index: 70;
  height: 7px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(43, 59, 73, 0.82), var(--qbank-cinema-frame), rgba(43, 59, 73, 0.82));
}

.qbank-practice-shell::before {
  top: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}

.qbank-practice-shell::after {
  bottom: 0;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.16) inset;
}

.qbank-practice-shell.qbank-single-mode {
  overflow-x: hidden;
  overflow-x: clip;
}

.qbank-practice-shell.qbank-analytics-collapsed {
  overflow-x: hidden;
  overflow-x: clip;
}

body.qbank-fullscreen-open {
  overflow: hidden;
}

body.qbank-fullscreen-open #leftNavigationRail,
body.qbank-fullscreen-open .left-navigation-rail-trigger,
body.qbank-fullscreen-open .quickball,
body.qbank-fullscreen-open .quickball-panel,
body.qbank-fullscreen-open .quickball-overlay,
body.qbank-fullscreen-open .focus-mode-toggle {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.qbank-lab-reference-open .quickball,
body.qbank-lab-reference-open .quickball-panel,
body.qbank-lab-reference-open .quickball-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.qbank-practice-shell.qbank-fullscreen-fallback {
  position: fixed;
  inset: 0;
  z-index: 100500;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.qbank-practice-shell.qbank-fullscreen-active,
.qbank-practice-shell:fullscreen {
  --qbank-cockpit-top: 114px;
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 8px clamp(24px, 2.6vw, 52px) 28px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg, #FAF9F6);
}

.qbank-practice-shell.qbank-fullscreen-active::before,
.qbank-practice-shell.qbank-fullscreen-active::after,
.qbank-practice-shell:fullscreen::before,
.qbank-practice-shell:fullscreen::after {
  height: 8px;
}

.qbank-practice-shell,
.qbank-practice-shell *,
.qbank-practice-shell *::before,
.qbank-practice-shell *::after {
  box-sizing: border-box;
}

.qbank-practice-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  isolation: isolate;
  display: flex;
  gap: clamp(12px, 1.4vw, 22px);
  align-items: center;
  width: 100%;
  min-height: 66px;
  padding: 9px clamp(14px, 1.8vw, 30px);
  margin-bottom: 0;
  background: var(--qbank-chrome-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.24);
  box-shadow: 0 -80px 0 80px var(--qbank-chrome-bg), 0 1px 0 rgba(248, 250, 252, 0.08) inset;
  color: var(--qbank-chrome-fg);
}

.qbank-practice-title {
  flex: 0 1 clamp(170px, 18vw, 320px);
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.qbank-practice-title > div {
  min-width: 0;
  display: block;
}

.qbank-practice-title .assess-kicker,
.qbank-practice-title .assess-filter-summary {
  margin: 0;
  color: var(--qbank-chrome-muted);
}

.qbank-practice-title h1 {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body, system-ui);
  font-size: clamp(20px, 1.75vw, 26px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--qbank-chrome-fg);
}

.qbank-practice-title h1[tabindex="-1"]:focus {
  outline: none;
}

.qbank-back-btn {
  min-width: 34px;
  min-height: 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-color: var(--qbank-chrome-line);
  background: var(--qbank-chrome-pill);
  color: var(--qbank-chrome-fg);
}

.qbank-back-btn:hover {
  background: var(--qbank-chrome-pill-hover);
  color: var(--qbank-chrome-fg);
}

.qbank-icon-nav,
.qbank-single-nav {
  display: inline-grid;
  place-items: center;
}

.qbank-arrow-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qbank-toolbar-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qbank-mode-segmented {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--qbank-chrome-line);
  border-radius: 999px;
  background: var(--qbank-chrome-pill);
}

.qbank-flow-segmented {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--qbank-chrome-line);
  border-radius: 999px;
  background: var(--qbank-chrome-pill);
}

.qbank-mode-segmented button,
.qbank-flow-segmented button,
.qbank-session-actions button,
.qbank-next-action button {
  border: 0;
  background: transparent;
  color: var(--qbank-chrome-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.qbank-mode-segmented button,
.qbank-flow-segmented button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 999px;
}

.qbank-mode-segmented button.active,
.qbank-flow-segmented button.active {
  background: var(--qbank-chrome-fg);
  color: var(--qbank-active);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.qbank-mode-segmented button:hover,
.qbank-flow-segmented button:hover {
  color: var(--qbank-chrome-fg);
}

.qbank-mode-segmented button.active:hover,
.qbank-flow-segmented button.active:hover {
  color: var(--qbank-active);
}

.qbank-flow-segmented button:disabled,
.qbank-flow-segmented button.locked {
  opacity: 0.38;
  color: var(--qbank-chrome-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.qbank-flow-segmented button:disabled:hover,
.qbank-flow-segmented button.locked:hover {
  color: var(--qbank-chrome-muted);
}

.qbank-reader-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.qbank-reader-font,
.qbank-reader-size {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--qbank-chrome-line);
  border-radius: 999px;
  background: var(--qbank-chrome-pill);
  color: var(--qbank-chrome-fg);
}

.qbank-reader-font {
  position: relative;
  width: 132px;
  min-width: 0;
  padding: 0;
  overflow: visible;
  z-index: 120;
}

.qbank-reader-font input[type="hidden"] {
  display: none;
}

.qbank-reader-font-button {
  width: 100%;
  height: 100%;
  min-height: 32px;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 9px 0 11px;
  border-radius: inherit;
}

.qbank-reader-font-button:hover,
.qbank-reader-font-button:focus-visible,
.qbank-reader-font-picker.open .qbank-reader-font-button {
  color: #fff;
  background: rgba(248, 250, 252, 0.08);
}

.qbank-reader-font-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qbank-reader-font-chev {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--qbank-chrome-muted);
  transition: transform 0.16s ease, color 0.16s ease;
}

.qbank-reader-font-picker.open .qbank-reader-font-chev {
  color: #fff;
  transform: rotate(180deg);
}

.qbank-reader-font-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: max-content;
  min-width: 236px;
  max-width: min(292px, calc(100vw - 20px));
  padding: 6px;
  border: 1px solid var(--dn-dropdown-line, rgba(255, 255, 255, 0.82));
  border-radius: 12px;
  background: transparent;
  color: var(--dn-ink, #141414);
  box-shadow: var(--dn-dropdown-shadow, 0 22px 62px rgba(18, 22, 18, .16), 0 3px 10px rgba(18, 22, 18, .08), 0 0 0 1px rgba(18, 22, 18, .035), inset 0 1px 0 rgba(255, 255, 255, .92));
  backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
  -webkit-backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
  background-clip: padding-box;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--dn-dropdown-font, 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif);
  letter-spacing: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.18s cubic-bezier(.23, 1, .32, 1), transform 0.18s cubic-bezier(.23, 1, .32, 1);
  z-index: 100600;
}

.qbank-reader-font-menu::before,
.qbank-reader-font-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.qbank-reader-font-menu::before {
  z-index: 0;
  background: var(--dn-dropdown-bg, linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(242, 242, 242, .42)));
  backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
  -webkit-backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
}

.qbank-reader-font-menu::after {
  z-index: 0;
  background: var(--dn-dropdown-scrim, linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .16) 48%, rgba(214, 214, 214, .18) 100%));
}

.qbank-reader-font-picker.open .qbank-reader-font-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.qbank-reader-font-option {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--dn-dropdown-muted, rgba(18, 22, 18, .78));
  font-family: var(--dn-dropdown-font, 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: var(--dn-dropdown-item-size, 14px);
  font-weight: var(--dn-dropdown-item-weight, 500);
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.qbank-reader-font-option:hover,
.qbank-reader-font-option:focus-visible {
  color: var(--dn-ink, #141414);
  background: var(--dn-dropdown-hover, rgba(18, 22, 18, .055));
  outline: 0;
}

.qbank-reader-font-option.selected,
.qbank-reader-font-option[aria-selected="true"] {
  color: var(--dn-dropdown-active-fg, #fff);
  background: var(--dn-dropdown-active-bg, #141414);
  font-weight: var(--dn-dropdown-active-weight, 650);
}

.qbank-reader-font-mark {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: none !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5px;
  padding: 2px;
  border: 1.5px solid currentcolor;
  border-radius: 4px;
  opacity: .78;
}

.qbank-reader-font-mark span {
  border-radius: 1px;
  background: currentcolor;
  display: none !important;
}

.qbank-reader-size {
  width: 112px;
  min-width: 0;
  gap: 5px;
  justify-content: center;
  padding: 0 8px;
}

.qbank-reader-size span {
  color: var(--qbank-chrome-muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.qbank-reader-size span:last-child {
  font-size: 15px;
}

.qbank-reader-size input {
  width: 60px;
  min-width: 0;
  accent-color: var(--qbank-chrome-fg);
  cursor: pointer;
}

.qbank-icon-action {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  padding: 0;
}

.qbank-fullscreen-btn,
.qbank-lab-values-btn {
  color: var(--qbank-chrome-fg);
  border-color: var(--qbank-chrome-line);
  background: var(--qbank-chrome-pill);
}

.qbank-fullscreen-btn:hover,
.qbank-lab-values-btn:hover {
  color: var(--qbank-chrome-fg);
  border-color: rgba(248, 250, 252, 0.28);
  background: var(--qbank-chrome-pill-hover);
  text-decoration: none;
}

.qbank-fullscreen-btn.active,
.qbank-fullscreen-btn[aria-pressed="true"],
.qbank-lab-values-btn.active,
.qbank-lab-values-btn[aria-pressed="true"] {
  background: var(--qbank-chrome-fg);
  color: var(--qbank-active);
  border-color: var(--qbank-chrome-fg);
}

.qbank-submit-btn {
  color: #bbf7d0;
  border-color: rgba(187, 247, 208, 0.25);
  background: rgba(187, 247, 208, 0.08);
}

.qbank-reset-btn {
  color: #fecaca;
  border-color: rgba(254, 202, 202, 0.26);
  background: rgba(254, 202, 202, 0.08);
}

.qbank-submit-btn:hover,
.qbank-reset-btn:hover {
  background: var(--qbank-chrome-pill-hover);
  text-decoration: none;
}

.qbank-submit-btn:hover {
  color: #dcfce7;
  border-color: rgba(220, 252, 231, 0.34);
}

.qbank-reset-btn:hover {
  color: #fee2e2;
  border-color: rgba(254, 226, 226, 0.36);
}

.qbank-reset-btn[hidden] {
  display: none;
}

.qbank-reset-btn:disabled {
  opacity: 0.4;
  background: transparent !important;
  color: var(--qbank-chrome-muted);
  border-color: var(--qbank-chrome-line);
  cursor: default;
  text-decoration: none;
}

.qbank-submit-btn:disabled {
  opacity: 0.4;
  background: transparent !important;
  color: var(--qbank-chrome-muted);
  border-color: var(--qbank-chrome-line);
  cursor: default;
}

.qbank-reset-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17,24,39,0.38);
  backdrop-filter: blur(6px);
}

.qbank-reset-dialog {
  width: min(520px, 100%);
  display: grid;
  gap: 22px;
  padding: 24px;
  border: 1px solid rgba(17,24,39,0.12);
  border-radius: 8px;
  background: var(--bg, #FAF9F6);
  box-shadow: 0 24px 70px rgba(15,23,42,0.22);
}

.qbank-reset-dialog-copy {
  display: grid;
  gap: 8px;
}

.qbank-reset-dialog-copy span {
  color: var(--muted, var(--t3));
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.qbank-reset-dialog-copy h2 {
  color: var(--text, var(--t1));
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
}

.qbank-reset-dialog-copy p {
  max-width: 420px;
  color: var(--muted, var(--t2));
  font-size: 14px;
  line-height: 1.5;
}

.qbank-reset-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.qbank-reset-dialog-actions button {
  min-height: 40px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.qbank-reset-cancel {
  background: transparent;
  color: var(--muted, var(--t2));
  border-color: rgba(100,116,139,0.28) !important;
}

.qbank-reset-cancel:hover {
  color: var(--text, var(--t1));
  border-color: rgba(17,24,39,0.34) !important;
}

.qbank-reset-confirm {
  background: #b91c1c;
  color: #fff;
}

.qbank-reset-confirm:hover {
  background: #991b1b;
}

.qbank-practice-toolbar {
  position: relative;
  top: auto;
  z-index: 1;
  isolation: isolate;
  flex: 1 1 auto;
  display: flex;
  gap: clamp(8px, 0.8vw, 14px);
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  padding: 0;
  margin-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  color: var(--qbank-chrome-fg);
  scrollbar-width: none;
}

.qbank-practice-shell.qbank-fullscreen-active .qbank-practice-topbar,
.qbank-practice-shell:fullscreen .qbank-practice-topbar {
  top: 0;
  padding-top: 9px;
}

.qbank-practice-shell.qbank-fullscreen-active .qbank-practice-toolbar,
.qbank-practice-shell:fullscreen .qbank-practice-toolbar {
  top: auto;
  padding-top: 0;
  margin-bottom: 0;
}

.qbank-practice-toolbar::-webkit-scrollbar {
  display: none;
}

.qbank-toolbar-row {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.qbank-state-filter {
  position: relative;
  flex: 0 0 auto;
}

.qbank-native-state-filter {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.qbank-state-filter-toggle {
  min-width: 68px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--qbank-chrome-line);
  border-radius: 999px;
  background: var(--qbank-chrome-pill);
  color: var(--qbank-chrome-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.qbank-state-filter-toggle:hover,
.qbank-state-filter.open .qbank-state-filter-toggle {
  border-color: rgba(248, 250, 252, 0.28);
  background: var(--qbank-chrome-pill-hover);
}

.qbank-state-filter-menu {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  width: 178px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--dn-dropdown-line, rgba(255, 255, 255, 0.82));
  border-radius: 12px;
  background: transparent;
  box-shadow: var(--dn-dropdown-shadow, 0 22px 62px rgba(18, 22, 18, .16), 0 3px 10px rgba(18, 22, 18, .08), 0 0 0 1px rgba(18, 22, 18, .035), inset 0 1px 0 rgba(255, 255, 255, .92));
  backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
  -webkit-backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
  background-clip: padding-box;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--dn-dropdown-font, 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif);
  letter-spacing: 0;
}

.qbank-state-filter-menu::before,
.qbank-state-filter-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.qbank-state-filter-menu::before {
  z-index: 0;
  background: var(--dn-dropdown-bg, linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(242, 242, 242, .42)));
  backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
  -webkit-backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
}

.qbank-state-filter-menu::after {
  z-index: 0;
  background: var(--dn-dropdown-scrim, linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .16) 48%, rgba(214, 214, 214, .18) 100%));
}

.qbank-state-filter-menu[hidden] {
  display: none;
}

.qbank-state-filter-option {
  position: relative;
  z-index: 1;
  min-height: 39px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  padding: 0 12px;
  background: transparent;
  color: var(--dn-dropdown-muted, rgba(18, 22, 18, .78));
  font-family: var(--dn-dropdown-font, 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: var(--dn-dropdown-item-size, 14px);
  font-weight: var(--dn-dropdown-item-weight, 500);
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.qbank-state-filter-option:hover {
  color: var(--dn-ink, var(--text, var(--qbank-active)));
  background: var(--dn-dropdown-hover, rgba(18, 22, 18, .055));
}

.qbank-state-filter-option.active {
  background: var(--dn-dropdown-active-bg, #141414);
  color: var(--dn-dropdown-active-fg, #fff);
  font-weight: var(--dn-dropdown-active-weight, 650);
}

.qbank-lab-values-panel {
  position: fixed;
  top: var(--qbank-lab-panel-top, 92px);
  right: clamp(16px, 2vw, 30px);
  z-index: 78;
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - var(--qbank-lab-panel-top, 92px) - 16px));
  color: var(--text, var(--t1));
}

.qbank-lab-values-panel.qbank-lab-docked {
  right: 0;
  bottom: 0;
  left: auto !important;
  z-index: 68;
  width: var(--qbank-lab-dock-width, 520px);
  max-height: none;
}

.qbank-lab-values-panel[hidden] {
  display: none;
}

.qbank-lab-values-sheet {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  max-height: inherit;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 8px;
  background: var(--bg, #FAF9F6);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.2);
}

.qbank-lab-values-panel.qbank-lab-docked .qbank-lab-values-sheet,
.qbank-lab-values-panel.qbank-lab-sized .qbank-lab-values-sheet {
  height: 100%;
  max-height: none;
}

.qbank-lab-values-panel.qbank-lab-docked .qbank-lab-values-sheet {
  border-right: 0;
  border-bottom: 0;
  border-radius: 8px 0 0 0;
}

.qbank-lab-values-panel.qbank-lab-docked .qbank-lab-values-body {
  padding-bottom: 34px;
}

.qbank-lab-values-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 18px 14px;
  background: #eef2f0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  cursor: grab;
  user-select: none;
}

.qbank-lab-values-panel.qbank-lab-dragging .qbank-lab-values-head {
  cursor: grabbing;
}

.qbank-lab-values-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.qbank-lab-values-head span {
  color: #3f596c;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qbank-lab-values-head h2 {
  margin: 0;
  color: #17202a;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
}

.qbank-lab-values-head p {
  max-width: 520px;
  margin: 0;
  color: #526170;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.qbank-lab-window-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.qbank-lab-window-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #17202a;
  cursor: pointer;
}

.qbank-lab-window-btn:hover {
  background: #fff;
}

.qbank-lab-resize {
  position: absolute;
  z-index: 3;
  padding: 0;
  border: 0;
  background: transparent;
}

.qbank-lab-resize-left {
  display: none;
  top: 0;
  bottom: 0;
  left: -5px;
  width: 10px;
  cursor: ew-resize;
}

.qbank-lab-values-panel.qbank-lab-docked .qbank-lab-resize-left {
  display: block;
}

.qbank-lab-resize-corner {
  right: 5px;
  bottom: 5px;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  opacity: 0.52;
}

.qbank-lab-resize-corner::before {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 12px;
  height: 12px;
  border-right: 2px solid #526170;
  border-bottom: 2px solid #526170;
  box-shadow: 4px 4px 0 -2px #526170;
}

.qbank-lab-values-panel.qbank-lab-docked .qbank-lab-resize-corner {
  display: none;
}

body.qbank-lab-moving,
body.qbank-lab-resizing {
  user-select: none;
}

.qbank-lab-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.58);
  color: #526170;
}

.qbank-lab-search input {
  min-width: 0;
  width: 100%;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text, var(--t1));
  font: inherit;
  font-size: 15px;
  font-weight: 750;
}

.qbank-lab-search input::placeholder {
  color: rgba(82, 97, 112, 0.78);
}

.qbank-lab-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
  background: #f7f6f2;
  scrollbar-width: none;
}

.qbank-lab-tabs::-webkit-scrollbar {
  display: none;
}

.qbank-lab-tab {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: transparent;
  color: #526170;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.qbank-lab-tab:hover {
  color: #17202a;
  background: rgba(47, 64, 80, 0.06);
}

.qbank-lab-tab.active {
  border-color: #2f4050;
  background: #2f4050;
  color: #fff;
}

.qbank-lab-values-body {
  min-height: 0;
  overflow: auto;
  padding: 14px 18px 18px;
  overscroll-behavior: contain;
}

.qbank-lab-result-count {
  margin-bottom: 10px;
  color: #526170;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qbank-lab-category-section + .qbank-lab-category-section {
  margin-top: 20px;
}

.qbank-lab-category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #17202a;
}

.qbank-lab-category-head span {
  font-size: 18px;
  font-weight: 900;
}

.qbank-lab-category-head b {
  color: #526170;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qbank-lab-group + .qbank-lab-group {
  margin-top: 16px;
}

.qbank-lab-group h4 {
  margin: 0 0 8px;
  color: #17202a;
  font-size: 13px;
  font-weight: 900;
}

.qbank-lab-table {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
}

.qbank-lab-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 0.45fr);
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 9px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.qbank-lab-row:first-child {
  border-top: 0;
}

.qbank-lab-head {
  min-height: 34px;
  background: rgba(47, 64, 80, 0.06);
  color: #526170;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.qbank-lab-test {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.qbank-lab-test b {
  color: #17202a;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}

.qbank-lab-test span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.25;
}

.qbank-lab-range {
  color: #17202a;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
  text-align: right;
}

.qbank-lab-empty {
  display: grid;
  gap: 6px;
  padding: 28px;
  border: 1px dashed rgba(15, 23, 42, 0.2);
  border-radius: 8px;
  text-align: center;
}

.qbank-lab-empty b {
  color: #17202a;
  font-size: 18px;
}

.qbank-lab-empty span {
  color: #526170;
  font-size: 13px;
  line-height: 1.45;
}

.qbank-render-count {
  flex: 0 0 auto;
  min-width: 44px;
  color: var(--qbank-chrome-muted);
  font-size: 13px;
  font-weight: 800;
}

.qbank-practice-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.qbank-filter-groups {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  white-space: nowrap;
}

.qbank-practice-toolbar .assess-pool-filter-row {
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--qbank-chrome-line);
  border-radius: 999px;
  background: var(--qbank-chrome-pill);
}

.qbank-practice-toolbar .assess-filter-pill {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--qbank-chrome-muted);
}

.qbank-practice-toolbar .assess-filter-pill:hover {
  color: var(--qbank-chrome-fg);
  text-decoration: none;
}

.qbank-practice-toolbar .assess-filter-pill.active {
  background: var(--qbank-chrome-fg);
  color: var(--qbank-active);
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.qbank-practice-toolbar .assess-pool-search,
.qbank-practice-toolbar .assess-pool-filter {
  border-bottom: 0;
  padding-block: 8px;
}

.qbank-practice-toolbar .assess-pool-filter {
  width: min(240px, 32vw);
}

.qbank-practice-main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--qbank-cockpit-width);
  gap: 20px;
  align-items: start;
  padding: 18px clamp(16px, 2.1vw, 40px) 0;
  transition:
    grid-template-columns 360ms cubic-bezier(0.22, 1, 0.36, 1),
    gap 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.qbank-practice-shell.qbank-fullscreen-active .qbank-practice-main,
.qbank-practice-shell:fullscreen .qbank-practice-main {
  min-height: calc(100vh - 136px);
  min-height: calc(100dvh - 136px);
  padding-inline: 0;
}

.qbank-practice-shell.qbank-analytics-collapsed .qbank-practice-main {
  grid-template-columns: minmax(0, 1fr) 0px;
  gap: 0;
  justify-content: center;
}

@media (min-width: 1101px) {
  .qbank-practice-shell.qbank-lab-values-docked .qbank-practice-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-right: calc(var(--qbank-lab-dock-width, 520px) + 24px);
  }

  .qbank-practice-shell.qbank-lab-values-docked .qbank-mini-cockpit,
  .qbank-practice-shell.qbank-lab-values-docked .qbank-analytics-restore {
    display: none;
  }

  .qbank-practice-shell.qbank-lab-values-docked .qbank-canvas-frame {
    width: 100%;
    margin-left: 0;
    padding-inline: clamp(18px, 2vw, 34px);
  }
}

@media (min-width: 901px) {
  .qbank-practice-shell.qbank-avitan-sidecar-active .qbank-practice-topbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }

  .qbank-practice-shell.qbank-avitan-sidecar-active .qbank-practice-title {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
  }

  .qbank-practice-shell.qbank-avitan-sidecar-active .qbank-practice-title h1 {
    max-width: none;
    font-size: clamp(22px, 2.2vw, 26px);
    overflow-wrap: normal;
    word-break: normal;
  }

  .qbank-practice-shell.qbank-avitan-sidecar-active .qbank-practice-toolbar {
    position: relative;
    top: auto;
    gap: 12px;
  }

  .qbank-practice-shell.qbank-avitan-sidecar-active .qbank-filter-groups {
    justify-content: flex-start;
  }

  .qbank-practice-shell.qbank-avitan-sidecar-active .qbank-practice-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .qbank-practice-shell.qbank-avitan-sidecar-active .qbank-mini-cockpit,
  .qbank-practice-shell.qbank-avitan-sidecar-active .qbank-analytics-restore {
    display: none;
  }

  .qbank-practice-shell.qbank-sidecar-tight .qbank-canvas-frame {
    width: 100%;
    margin-left: 0;
    padding-inline: 24px;
  }
}

.qbank-question-workspace {
  min-width: 0;
  max-width: none;
  width: 100%;
}

.qbank-canvas-frame {
  position: relative;
  min-width: 0;
  width: calc(var(--qbank-canvas-right, 100%) - var(--qbank-canvas-left, 0%));
  max-width: 100%;
  margin-left: var(--qbank-canvas-left, 0%);
  padding-inline: 34px;
  transition:
    width 160ms ease,
    margin-left 160ms ease;
}

.qbank-canvas-frame.is-resizing {
  transition: none;
}

.qbank-canvas-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 8;
  width: 18px;
  min-width: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #7c3aed;
  cursor: col-resize;
  opacity: 1;
}

.qbank-canvas-rail-left {
  left: -9px;
}

.qbank-canvas-rail-right {
  right: -9px;
}

.qbank-canvas-rail::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  opacity: 0;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--muted, var(--t3));
  box-shadow: none;
  transition:
    opacity 180ms ease,
    width 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.qbank-canvas-rail:hover::before,
.qbank-canvas-rail:focus-visible::before,
.qbank-canvas-resizing .qbank-canvas-rail::before,
.qbank-canvas-frame.is-resizing .qbank-canvas-rail::before {
  opacity: 1;
  width: 3px;
  background: var(--accent-focus, var(--ac, #7c3aed));
  box-shadow: 0 0 0 4px color-mix(in srgb, #7c3aed 10%, transparent);
}

body.qbank-canvas-resizing {
  cursor: col-resize;
  user-select: none;
}

.qbank-question-workspace .assess-pool-status {
  margin-bottom: 12px;
  font-size: 13px;
}

.qbank-single-controls {
  display: none;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 6px;
  margin: 0;
  color: var(--qbank-chrome-muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.qbank-single-controls span {
  min-width: 46px;
  text-align: center;
}

.qbank-single-controls button {
  border: 0;
  background: transparent;
  color: var(--qbank-chrome-fg);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
}

.qbank-single-controls button:hover {
  color: #bfdbfe;
}

.qbank-single-controls button:disabled {
  color: rgba(248, 250, 252, 0.38);
  cursor: default;
  opacity: 0.45;
  text-decoration: none;
}

.qbank-practice-shell.qbank-single-mode .qbank-single-controls {
  display: flex;
}

.qbank-mini-cockpit {
  position: sticky;
  top: var(--qbank-cockpit-top);
  display: grid;
  min-width: 0;
  width: var(--qbank-cockpit-width);
  max-width: var(--qbank-cockpit-width);
  max-height: calc(100vh - 138px);
  max-height: calc(100dvh - 138px);
  justify-self: start;
  padding: 12px 16px 14px;
  overflow: visible;
  border: 1px solid var(--qbank-cockpit-line);
  border-radius: 8px;
  background: rgba(250,249,246,0.82);
  opacity: 1;
  transform: translateX(0);
  will-change: opacity, transform;
  transition:
    opacity 280ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 360ms step-start;
}

.qbank-mini-cockpit-scroll {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 164px);
  max-height: calc(100dvh - 164px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(17, 24, 39, 0.26) transparent;
}

.qbank-practice-shell.qbank-fullscreen-active .qbank-mini-cockpit,
.qbank-practice-shell:fullscreen .qbank-mini-cockpit {
  top: var(--qbank-cockpit-top);
  max-height: calc(100vh - 132px);
  max-height: calc(100dvh - 132px);
}

.qbank-practice-shell.qbank-fullscreen-active .qbank-mini-cockpit-scroll,
.qbank-practice-shell:fullscreen .qbank-mini-cockpit-scroll {
  max-height: calc(100vh - 158px);
  max-height: calc(100dvh - 158px);
}

.qbank-mini-cockpit-scroll::-webkit-scrollbar {
  width: 5px;
}

.qbank-mini-cockpit-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.qbank-mini-cockpit-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.24);
}

.qbank-mini-cockpit-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 24, 39, 0.36);
}

.qbank-practice-shell.qbank-analytics-collapsed .qbank-mini-cockpit {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(42px);
  transition:
    opacity 220ms ease,
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 340ms step-end;
}

.qbank-analytics-arrow {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--qbank-cockpit-line);
  border-radius: 999px;
  background: var(--bg, #FAF9F6);
  color: var(--qbank-link);
  cursor: pointer;
  box-shadow: none;
  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}

.qbank-analytics-arrow:hover {
  color: #111;
  border-color: rgba(17,24,39,0.42);
  background: var(--bg, #FAF9F6);
}

.qbank-analytics-toggle {
  position: absolute;
  top: var(--qbank-cockpit-button-top);
  left: -17px;
  z-index: 2;
}

.qbank-analytics-restore {
  position: fixed;
  top: calc(var(--qbank-cockpit-top) + var(--qbank-cockpit-button-top));
  right: 18px;
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transform: translateX(16px);
}

@media (min-width: 761px) {
  .qbank-practice-shell.qbank-analytics-collapsed .qbank-analytics-restore {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
}

.qbank-practice-shell:not(.qbank-analytics-collapsed) .qbank-analytics-restore {
  visibility: hidden;
}

.qbank-cockpit-section,
.qbank-session-summary-panel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: transparent;
  padding: 4px 0;
}

.qbank-mini-cockpit-scroll > div:not(:first-child) .qbank-cockpit-section {
  border-top: 1px solid var(--qbank-cockpit-line);
  padding-top: 10px;
}

.qbank-panel-title {
  min-width: 0;
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: start;
  column-gap: 12px;
  margin-bottom: 8px;
}

.qbank-panel-title span,
.qbank-next-action span,
.qbank-mini-list span,
.qbank-session-summary-panel > div:first-child span {
  color: var(--muted, var(--t3));
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.qbank-panel-title b,
.qbank-session-summary-panel > div:first-child b {
  color: var(--text, var(--t1));
  font-size: 13px;
  font-weight: 800;
  text-align: left;
}

.qbank-stat-strip {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: start;
  column-gap: 40px;
  row-gap: 4px;
}

.qbank-mini-cockpit .qbank-stat-strip {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--qbank-cockpit-line);
}

.qbank-stat-strip div {
  min-width: 0;
  min-height: 42px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 2px 0;
}

.qbank-stat-strip b {
  color: var(--text, var(--t1));
  font-size: 16px;
  line-height: 1;
}

.qbank-stat-strip span {
  color: var(--muted, var(--t3));
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow-wrap: anywhere;
}

.qbank-next-action {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding-top: 6px;
}

.qbank-next-action button,
.qbank-session-actions button {
  min-height: 30px;
  border-radius: 0;
  background: transparent;
  color: var(--qbank-link);
  padding: 0;
  text-align: left;
}

.qbank-next-action button:hover,
.qbank-session-actions button:hover {
  background: transparent;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.qbank-empty-note {
  margin-top: 8px;
  color: var(--muted, var(--t2));
  font-size: 12px;
  line-height: 1.38;
}

.qbank-weak-panel,
.qbank-exam-breakdown {
  margin-top: 10px;
  padding-top: 6px;
}

.qbank-difficulty-list,
.qbank-exam-breakdown,
.qbank-mini-list {
  display: grid;
  gap: 4px;
}

.qbank-breakdown-row,
.qbank-review-row {
  min-width: 0;
  min-height: 28px;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 10px;
  align-items: center;
  color: var(--muted, var(--t2));
  font-size: 12px;
  font-weight: 700;
}

.qbank-breakdown-row span,
.qbank-review-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qbank-breakdown-row b,
.qbank-review-row b,
.qbank-mini-list b {
  color: var(--text, var(--t1));
  font-size: 12px;
  font-weight: 800;
}

.qbank-mini-list {
  margin-top: 8px;
}

.qbank-progress-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
  gap: 4px;
}

.qbank-progress-marker {
  min-width: 0;
  width: 100%;
  min-height: 26px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted, var(--t2));
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.qbank-progress-marker.correct {
  background: transparent;
  color: var(--qbank-correct);
}

.qbank-progress-marker.wrong {
  background: transparent;
  color: var(--qbank-wrong);
}

.qbank-progress-marker.bookmarked {
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: #b45309;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.qbank-review-row {
  width: fit-content;
  max-width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.qbank-review-row:hover {
  color: #2563eb;
}

.qbank-session-summary {
  margin-bottom: 14px;
}

.qbank-session-summary-panel {
  display: grid;
  gap: 12px;
}

.qbank-session-summary-panel > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.qbank-session-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.qbank-session-complete-panel {
  gap: 18px;
  padding: 20px 0 22px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.qbank-session-complete-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: baseline;
}

.qbank-session-complete-head span {
  color: var(--muted, var(--t3));
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.qbank-session-complete-head b {
  color: var(--text, var(--t1));
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: right;
}

.qbank-session-complete-head p {
  grid-column: 1 / -1;
  max-width: 680px;
  color: var(--muted, var(--t2));
  font-size: 14px;
  line-height: 1.5;
}

.qbank-session-complete-actions {
  gap: 10px 14px;
}

.qbank-session-actions .qbank-complete-primary {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
}

.qbank-session-actions .qbank-complete-primary:hover {
  background: #1d4ed8;
  color: #fff;
  text-decoration: none;
}

.qbank-session-actions .qbank-complete-link {
  min-height: 38px;
}

.qbank-question-workspace .assess-question-list {
  min-width: 0;
  max-width: 100%;
  gap: 0;
  margin-top: 16px;
}

.qbank-practice-shell.qbank-single-mode .qbank-question-workspace .assess-question-list {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  contain: inline-size;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.qbank-practice-shell.qbank-single-mode .qbank-question-workspace .assess-question-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.qbank-question-workspace .assess-question-card {
  min-width: 0;
  max-width: 100%;
  padding-bottom: 34px;
  border-bottom: 0;
  overflow-anchor: none;
}

.qbank-practice-shell:not(.qbank-single-mode) .qbank-question-workspace .assess-question-card + .assess-question-card {
  padding-top: 34px;
  border-top: 1px solid rgba(17, 24, 39, 0.16);
}

.qbank-question-workspace .assess-question-card.qbank-return-focus {
  animation: qbankReturnFocus 1.8s ease-out;
}

@keyframes qbankReturnFocus {
  0% {
    background: rgba(17,17,17,0.08);
    box-shadow: 0 0 0 1px rgba(17,17,17,0.2);
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}

.qbank-practice-shell.qbank-single-mode .qbank-question-workspace .assess-question-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: calc(100vh - 220px);
  padding-bottom: 48px;
  padding-top: 0;
  border-top: 0;
}

.qbank-practice-shell.qbank-single-mode .assess-load-sentinel {
  display: none;
}

.qbank-question-timer {
  --qbank-question-timer-progress: 1;
  --qbank-question-timer-color: hsl(135deg 78% 44%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--qbank-question-timer-color);
}

.qbank-question-timer-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
}

.qbank-question-timer-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform: scaleX(1);
  transform-origin: left center;
  background: linear-gradient(90deg, hsl(135deg 78% 44%), hsl(95deg 82% 56%));
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.58);
  animation: qbankQuestionTimerCountdown var(--qbank-question-timer-duration, 45000ms) linear forwards;
}

.qbank-question-timer-time {
  min-width: 36px;
  color: currentcolor;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
  transition: color 240ms linear;
}

@keyframes qbankQuestionTimerCountdown {
  0% {
    transform: scaleX(1);
    background: linear-gradient(90deg, hsl(135deg 78% 44%), hsl(95deg 82% 56%));
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.58);
  }

  55% {
    background: linear-gradient(90deg, hsl(52deg 92% 48%), hsl(37deg 92% 55%));
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.55);
  }

  100% {
    transform: scaleX(0);
    background: linear-gradient(90deg, hsl(3deg 78% 46%), hsl(0deg 84% 60%));
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.62);
  }
}

.qbank-question-workspace .assess-question-head {
  display: block;
  max-width: 930px;
  margin-bottom: 24px;
  font-family: var(--qbank-reader-font, var(--font-body, system-ui));
  line-height: 1.48;
}

.qbank-question-workspace .assess-question-number {
  display: inline;
  margin-right: 9px;
  vertical-align: baseline;
  font-family: var(--qbank-reader-font, var(--font-body, system-ui));
  font-size: calc(var(--qbank-reader-size, 17px) + 1px);
  font-weight: 850;
}

.qbank-question-workspace .assess-question-text {
  min-width: 0;
  max-width: none;
  display: inline;
  margin: 0;
  color: #171717;
  font-family: var(--qbank-reader-font, var(--font-body, system-ui));
  font-size: calc(var(--qbank-reader-size, 17px) + 2px);
  line-height: 1.48;
  font-weight: 500;
  white-space: normal;
  overflow-wrap: anywhere;
}

.qbank-question-tags {
  max-width: 100%;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-left: 12px;
  vertical-align: baseline;
}

.qbank-question-tags .assess-question-meta {
  margin-right: 0;
  color: #696158;
  font-size: 12px;
  font-weight: 750;
}

.qbank-question-tags .assess-bookmark-btn {
  padding: 0 2px;
  font-size: 18px;
  line-height: 1;
  vertical-align: baseline;
}

.qbank-question-workspace .assess-option-list {
  min-width: 0;
  max-width: 100%;
  gap: 12px;
}

.qbank-question-workspace .assess-option-btn {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 6px 0;
  font-family: var(--qbank-reader-font, var(--font-body, system-ui));
  font-size: var(--qbank-reader-size, 17px);
  line-height: 1.36;
}

.qbank-question-workspace .assess-option-btn:hover:not(.disabled) {
  background: transparent;
  color: var(--qbank-link);
}

.qbank-question-workspace .assess-option-letter {
  flex: 0 0 28px;
  color: var(--text, var(--t1));
  font-weight: 800;
}

.qbank-question-workspace .assess-option-text {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

.qbank-question-workspace .assess-option-btn.selected:not(.correct, .wrong) {
  background: transparent;
  color: var(--qbank-link);
  font-weight: 700;
}

.qbank-question-workspace .assess-option-btn.correct {
  background: transparent;
  color: var(--qbank-correct);
  font-weight: 750;
}

.qbank-question-workspace .assess-option-btn.wrong {
  color: var(--qbank-wrong);
  font-weight: 500;
  text-decoration-color: rgba(163,32,32,0.58);
  text-decoration-thickness: 1px;
}

.qbank-question-workspace .assess-question-explanation {
  max-width: 930px;
  padding: 22px 0 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--qbank-reader-font, var(--font-body, system-ui));
  font-size: var(--qbank-reader-size, 17px);
  line-height: 1.62;
}

.qbank-question-workspace .assess-exam-badge {
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
}

.assess-question-exam-lock {
  margin-top: 14px;
  color: var(--muted, var(--t2));
  font-size: 13px;
  font-weight: 700;
}

.qbank-exam-timeout-note {
  color: #b91c1c;
}

.qbank-mobile-analytics {
  display: none;
}

.qbank-practice-shell.qbank-analytics-collapsed .qbank-mobile-analytics {
  display: none;
}

.qbank-mobile-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.qbank-mobile-strip span {
  min-width: 0;
  min-height: 42px;
  display: grid;
  align-content: center;
  padding: 4px 0;
  color: var(--muted, var(--t2));
  font-size: 11px;
  font-weight: 800;
}

.qbank-mobile-strip b {
  color: var(--text, var(--t1));
  font-size: 15px;
}

@media (max-width: 1100px) {
  .qbank-filter-groups {
    justify-content: flex-start;
  }

  .qbank-practice-toolbar .assess-pool-filter-row {
    flex-wrap: nowrap;
  }

  .qbank-practice-main {
    grid-template-columns: 1fr;
  }

  .qbank-question-workspace {
    max-width: none;
  }

  .qbank-mini-cockpit {
    position: static;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .qbank-mini-cockpit-scroll #qbankProgressRail,
  .qbank-mini-cockpit-scroll #qbankMiniCockpit {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body:has(.qbank-practice-shell) .quickball:not(.free-positioned) {
    right: -2px !important;
    bottom: calc(2px + env(safe-area-inset-bottom)) !important;
  }

  body:has(.qbank-practice-shell) .quickball.idle:not(.free-positioned) {
    opacity: .38 !important;
    transform: translateX(12px) scale(.52) !important;
  }

  .main-body:has(.qbank-practice-shell) {
    padding: 0 !important;
    overflow-x: hidden;
  }

  .qbank-practice-shell {
    padding-top: 0;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .qbank-practice-shell::before,
  .qbank-practice-shell::after {
    display: none;
  }

  .qbank-practice-topbar {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    padding: 10px 12px 9px;
    box-shadow: 0 -60px 0 60px var(--qbank-chrome-bg), 0 1px 0 rgba(248, 250, 252, 0.08) inset;
  }

  .qbank-practice-title {
    width: 100%;
    flex: none;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
  }

  .qbank-practice-title h1 {
    font-size: 22px;
    line-height: 1.1;
  }

  .qbank-back-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .qbank-practice-toolbar {
    top: auto;
    width: 100%;
    flex: none;
    gap: 8px;
    padding-bottom: 2px;
    scroll-padding-inline: 2px;
    overscroll-behavior-x: contain;
  }

  .qbank-toolbar-row,
  .qbank-practice-controls {
    gap: 8px;
  }

  .qbank-render-count {
    min-width: auto;
    font-size: 12px;
  }

  .qbank-state-filter-toggle {
    min-width: 64px;
    height: 32px;
    padding: 0 10px;
  }

  .qbank-mode-segmented,
  .qbank-flow-segmented {
    min-height: 32px;
    gap: 2px;
    padding: 2px;
  }

  .qbank-mode-segmented button,
  .qbank-flow-segmented button {
    width: 30px;
    height: 28px;
    min-height: 28px;
  }

  .qbank-icon-action {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .qbank-single-controls {
    gap: 4px;
  }

  .qbank-single-controls span {
    min-width: 42px;
  }

  .qbank-single-controls button {
    width: 30px;
    height: 30px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-toolbar {
    display: grid;
    grid-template-columns: minmax(0, auto) auto;
    grid-auto-rows: minmax(30px, auto);
    gap: 4px 6px;
    align-content: center;
    align-items: center;
    justify-content: stretch;
    overflow: visible;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-toolbar-row {
    grid-column: 1;
    grid-row: 1;
    gap: 6px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-single-controls {
    grid-column: 2;
    grid-row: 1;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-render-count {
    display: none;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 6px;
    justify-content: flex-end;
  }

  @media (min-width: 520px) {
    .qbank-practice-shell.qbank-single-mode .qbank-practice-topbar {
      grid-template-columns: minmax(0, 0.9fr) minmax(272px, 1fr);
      align-items: center;
      gap: 6px 10px;
      padding-block: 6px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-practice-title {
      grid-column: 1;
      grid-row: 1;
      align-self: center;
      width: auto;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-practice-toolbar {
      grid-column: 2;
      grid-row: 1;
      grid-template-columns: auto auto minmax(0, 1fr);
      grid-template-rows: repeat(2, 30px);
      gap: 4px 6px;
      align-content: center;
      justify-content: stretch;
      justify-items: end;
      width: 100%;
      padding-bottom: 0;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-toolbar-row {
      grid-column: 1;
      grid-row: 1;
      justify-self: end;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-single-controls {
      grid-column: 2 / 4;
      grid-row: 1;
      justify-self: end;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-practice-controls {
      grid-column: 1 / 4;
      grid-row: 2;
      justify-self: end;
    }
  }

  @media (min-width: 580px) {
    .qbank-practice-shell.qbank-single-mode .qbank-practice-topbar {
      grid-template-columns: minmax(128px, 168px) minmax(0, 1fr);
      gap: 8px;
      min-height: 0;
      padding-block: 5px;
      padding-inline: 10px 12px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-practice-title {
      width: 100%;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 8px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-practice-title h1 {
      font-size: 20px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-back-btn {
      width: 34px;
      height: 34px;
      min-width: 34px;
      min-height: 34px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-practice-toolbar {
      display: flex;
      grid-column: 2;
      grid-row: 1;
      gap: 5px;
      align-items: center;
      justify-content: flex-end;
      min-width: 0;
      height: 36px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-toolbar-row,
    .qbank-practice-shell.qbank-single-mode .qbank-single-controls,
    .qbank-practice-shell.qbank-single-mode .qbank-practice-controls {
      grid-column: auto;
      grid-row: auto;
      flex: 0 0 auto;
      justify-self: auto;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-toolbar-row,
    .qbank-practice-shell.qbank-single-mode .qbank-practice-controls {
      gap: 5px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-state-filter-toggle {
      min-width: 58px;
      height: 30px;
      padding-inline: 8px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-single-controls {
      gap: 2px;
      font-size: 11px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-single-controls span {
      min-width: 34px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-single-controls button {
      width: 26px;
      height: 26px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-mode-segmented,
    .qbank-practice-shell.qbank-single-mode .qbank-flow-segmented {
      min-height: 30px;
      padding: 2px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-mode-segmented button,
    .qbank-practice-shell.qbank-single-mode .qbank-flow-segmented button {
      width: 26px;
      height: 26px;
      min-height: 26px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-icon-action {
      width: 30px;
      height: 30px;
      min-width: 30px;
      min-height: 30px;
    }
  }

  .qbank-filter-groups {
    display: none;
  }

  .qbank-lab-values-panel {
    top: var(--qbank-lab-panel-top, 88px);
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100dvh - var(--qbank-lab-panel-top, 88px) - 16px);
  }

  .qbank-lab-values-panel.qbank-lab-docked {
    right: 8px;
    bottom: 8px;
    left: 8px !important;
    width: auto !important;
  }

  .qbank-lab-values-panel.qbank-lab-docked .qbank-lab-values-sheet {
    border-right: 1px solid rgba(15, 23, 42, 0.16);
    border-bottom: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 8px;
  }

  .qbank-lab-resize-left,
  .qbank-lab-resize-corner {
    display: none !important;
  }

  .qbank-lab-values-head {
    padding: 14px;
  }

  .qbank-lab-values-head h2 {
    font-size: 21px;
  }

  .qbank-lab-search {
    padding-inline: 14px;
  }

  .qbank-lab-tabs {
    padding-inline: 10px;
  }

  .qbank-lab-values-body {
    padding: 12px;
  }

  .qbank-lab-category-head {
    display: grid;
    gap: 2px;
  }

  .qbank-lab-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-items: start;
  }

  .qbank-lab-range {
    text-align: left;
  }

  .qbank-lab-head {
    display: none;
  }

  .qbank-canvas-frame {
    width: 100%;
    margin-left: 0;
    padding-inline: 0;
  }

  .qbank-canvas-rail {
    display: none;
  }

  .qbank-mobile-analytics {
    position: static;
    top: auto;
    z-index: auto;
    display: block;
    padding: 10px 14px 0;
    background: var(--bg, #FAF9F6);
  }

  .qbank-practice-shell.qbank-single-mode .qbank-mobile-analytics {
    padding-top: 8px;
  }

  .qbank-mobile-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .qbank-mobile-strip span {
    min-height: 34px;
    padding: 6px 4px 5px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg, #FAF9F6) 72%, #fff 28%);
    text-align: center;
    font-size: 10px;
    line-height: 1.05;
  }

  .qbank-mobile-strip b {
    display: block;
    margin-bottom: 2px;
    font-size: 15px;
    line-height: 1;
  }

  .qbank-mini-cockpit {
    display: none;
  }

  .qbank-practice-main {
    display: block;
    padding: 14px 20px calc(98px + env(safe-area-inset-bottom)) !important;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-main {
    padding-top: 10px !important;
  }

  .qbank-question-workspace .assess-question-list {
    margin-top: 0;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-question-workspace .assess-question-list {
    contain: layout inline-size;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-question-workspace .assess-question-card {
    min-height: auto;
    padding-bottom: 56px;
  }

  .qbank-question-workspace .assess-question-card {
    padding-bottom: 56px;
  }

  .qbank-question-workspace .assess-question-head {
    max-width: none;
    margin-bottom: 24px;
    line-height: 1.42;
  }

  .qbank-question-workspace .assess-question-number {
    margin-right: 6px;
    font-size: calc(var(--qbank-reader-size, 17px) + 1px);
    line-height: 1.25;
  }

  .qbank-question-workspace .assess-question-text {
    font-size: calc(var(--qbank-reader-size, 17px) + 2px);
    line-height: 1.42;
    font-weight: 510;
    overflow-wrap: break-word;
  }

  .qbank-question-tags {
    display: flex;
    margin: 10px 0 0;
    gap: 8px;
    align-items: center;
  }

  .qbank-question-tags .assess-question-meta,
  .qbank-question-workspace .assess-exam-badge {
    font-size: 12px;
    line-height: 1.2;
  }

  .qbank-question-tags .assess-bookmark-btn {
    font-size: 17px;
  }

  .qbank-question-workspace .assess-option-list {
    gap: 15px;
  }

  .qbank-question-workspace .assess-option-btn {
    align-items: flex-start;
    gap: 13px;
    min-height: 0;
    padding: 0;
    font-size: var(--qbank-reader-size, 17px);
    line-height: 1.38;
  }

  .qbank-question-workspace .assess-option-letter {
    flex: 0 0 34px;
    font-size: var(--qbank-reader-size, 17px);
    line-height: 1.38;
  }

  .qbank-question-workspace .assess-option-text {
    overflow-wrap: break-word;
  }

  .qbank-question-workspace .assess-question-explanation {
    max-width: none;
    margin-top: 36px;
    padding: 0 0 20px;
    font-size: var(--qbank-reader-size, 17px);
    line-height: 1.58;
  }

  .qbank-question-workspace .assess-question-explanation > strong {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .qbank-question-workspace .qbank-explanation-md {
    gap: 14px;
  }

  .qbank-question-workspace .qbank-explanation-points {
    gap: 12px;
    padding-left: 24px;
  }

  .qbank-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qbank-session-summary:empty {
    display: none;
  }

  .qbank-session-summary {
    margin: 0;
    padding: 8px 20px 2px;
    background: var(--bg, #FAF9F6);
  }

  .qbank-session-summary-panel {
    gap: 10px;
    padding: 10px 0 12px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    overflow: visible;
  }

  .qbank-session-summary-panel > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: baseline;
  }

  .qbank-session-summary-panel > div:first-child b {
    text-align: right;
    white-space: nowrap;
  }

  .qbank-session-summary-panel .qbank-stat-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 6px;
    row-gap: 0;
  }

  .qbank-session-summary-panel .qbank-stat-strip div {
    min-height: 34px;
    gap: 1px;
    justify-items: center;
    padding: 2px 0;
    text-align: center;
  }

  .qbank-session-summary-panel .qbank-stat-strip b {
    font-size: 15px;
  }

  .qbank-session-summary-panel .qbank-stat-strip span {
    max-width: 100%;
    font-size: 8.5px;
    line-height: 1;
    letter-spacing: 0.03em;
  }

  .qbank-session-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .qbank-session-actions button {
    min-width: 0;
    min-height: 30px;
    padding: 0 4px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.04);
    font-size: 11px;
    line-height: 1.08;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  .qbank-session-complete-head {
    grid-template-columns: 1fr;
  }

  .qbank-session-complete-head b {
    text-align: left;
  }

  .qbank-reset-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: 34px 32px;
    gap: 5px 8px;
    align-items: center;
    padding: 6px 10px 7px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-title {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 7px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-title h1 {
    font-size: 20px;
    line-height: 1.08;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-back-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-toolbar {
    display: contents;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-toolbar-row {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    gap: 0;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-single-controls {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    min-height: 31px;
    gap: 1px;
    padding: 1px 3px;
    border: 1px solid var(--qbank-chrome-line);
    border-radius: 999px;
    background: var(--qbank-chrome-pill);
    font-size: 11px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-single-controls span {
    min-width: 32px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-single-controls button {
    width: 24px;
    height: 24px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-controls {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    gap: 5px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-controls {
    display: contents;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-font,
  .qbank-practice-shell.qbank-single-mode .qbank-reader-size {
    align-self: center;
    min-height: 30px;
    height: 30px;
    z-index: 1;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-font {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    width: clamp(78px, 21vw, 104px);
    padding-inline: 0;
    z-index: 140;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-font-button {
    font-size: 10.5px;
    padding-inline: 7px 5px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-size {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    width: clamp(82px, 22vw, 104px);
    gap: 3px;
    padding-inline: 6px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-size input {
    width: clamp(40px, 11vw, 56px);
  }

  .qbank-practice-shell.qbank-single-mode .qbank-filter-groups {
    display: contents;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-filter-groups .assess-pool-filter-row {
    gap: 1px;
    min-height: 28px;
    padding: 2px;
    justify-content: center;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-filter-groups .assess-filter-pill {
    width: 22px;
    min-width: 22px;
    height: 24px;
    min-height: 24px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-filter-groups .qbank-toolbar-icon {
    width: 14px;
    height: 14px;
  }

  .qbank-practice-shell.qbank-single-mode #qbankPoolExamFilters {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
  }

  .qbank-practice-shell.qbank-single-mode #qbankPoolDiffFilters {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: center;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-state-filter-toggle {
    min-width: 56px;
    height: 30px;
    padding: 0 8px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-mode-segmented,
  .qbank-practice-shell.qbank-single-mode .qbank-flow-segmented {
    min-height: 30px;
    padding: 2px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-mode-segmented button,
  .qbank-practice-shell.qbank-single-mode .qbank-flow-segmented button {
    width: 26px;
    height: 26px;
    min-height: 26px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-flow-segmented button.active {
    display: none;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-icon-action {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-submit-btn:disabled {
    display: none;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-mobile-analytics {
    padding: 5px 12px 0;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-mobile-strip {
    gap: 5px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-mobile-strip span {
    min-height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 4px;
    border-radius: 8px;
    font-size: 9.5px;
    line-height: 1;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-mobile-strip b {
    display: inline;
    margin: 0;
    font-size: 13px;
    line-height: 1;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-main {
    padding-top: 8px !important;
  }

  @media (min-width: 580px) {
    .qbank-practice-shell.qbank-single-mode .qbank-practice-topbar {
      grid-template-columns: minmax(128px, 1fr) auto minmax(96px, 112px) auto;
      grid-template-rows: 34px 32px;
      gap: 4px 6px;
      min-height: 0;
      padding-block: 5px 6px;
      padding-inline: 10px 12px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-practice-title {
      grid-column: 1;
      grid-row: 1;
      width: 100%;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 8px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-practice-title h1 {
      font-size: 20px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-back-btn {
      width: 34px;
      height: 34px;
      min-width: 34px;
      min-height: 34px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-practice-toolbar {
      display: contents;
      padding-bottom: 0;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-toolbar-row,
    .qbank-practice-shell.qbank-single-mode .qbank-single-controls,
    .qbank-practice-shell.qbank-single-mode .qbank-practice-controls,
    .qbank-practice-shell.qbank-single-mode .qbank-filter-groups .assess-pool-filter-row,
    .qbank-practice-shell.qbank-single-mode .qbank-reader-font,
    .qbank-practice-shell.qbank-single-mode .qbank-reader-size {
      align-self: center;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-toolbar-row {
      grid-column: 1;
      grid-row: 2;
      justify-self: start;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-single-controls {
      grid-column: 4;
      grid-row: 1;
      justify-self: end;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-practice-controls {
      grid-column: 4;
      grid-row: 2;
      justify-self: end;
      gap: 5px;
    }

    .qbank-practice-shell.qbank-single-mode #qbankPoolExamFilters {
      grid-column: 2;
      grid-row: 1;
      justify-self: center;
    }

    .qbank-practice-shell.qbank-single-mode #qbankPoolDiffFilters {
      grid-column: 2;
      grid-row: 2;
      justify-self: center;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-reader-controls {
      display: contents;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-reader-font {
      grid-column: 3;
      grid-row: 1;
      justify-self: stretch;
      width: 100%;
      min-height: 30px;
      padding-inline: 0;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-reader-font-button {
      font-size: 11px;
      padding-inline: 8px 6px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-reader-size {
      grid-column: 3;
      grid-row: 2;
      justify-self: stretch;
      width: 100%;
      min-height: 30px;
      padding-inline: 7px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-reader-size input {
      width: 52px;
    }

    .qbank-practice-shell.qbank-single-mode .qbank-single-controls {
      min-height: 30px;
    }
  }
}

@media (max-width: 430px) {
  .qbank-practice-topbar {
    padding-inline: 10px;
  }

  .qbank-practice-title h1 {
    font-size: 20px;
  }

  .qbank-practice-main {
    padding-inline: 18px !important;
  }

  .qbank-mobile-analytics {
    padding-inline: 12px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-controls {
    flex: 1 1 100%;
    gap: 4px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: 32px 30px;
    gap: 4px 6px;
    padding: 5px 8px 6px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-title {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 6px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-practice-title h1 {
    font-size: 19px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-back-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-single-controls {
    min-height: 29px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-single-controls button {
    width: 23px;
    height: 23px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-single-controls span {
    min-width: 30px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-font {
    width: clamp(74px, 20vw, 92px);
    min-height: 28px;
    height: 28px;
    padding-inline: 0;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-font-button {
    font-size: 10px;
    min-height: 26px;
    padding-inline: 6px 4px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-size {
    width: clamp(56px, 15vw, 68px);
    min-height: 28px;
    height: 28px;
    gap: 2px;
    padding-inline: 4px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-size span {
    font-size: 10px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-size span:last-child {
    font-size: 13px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-reader-size input {
    width: clamp(30px, 9vw, 40px);
  }

  .qbank-practice-shell.qbank-single-mode .qbank-state-filter-toggle {
    min-width: 52px;
    height: 28px;
    padding-inline: 7px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-mode-segmented,
  .qbank-practice-shell.qbank-single-mode .qbank-flow-segmented {
    min-height: 26px;
    padding: 1px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-mode-segmented button,
  .qbank-practice-shell.qbank-single-mode .qbank-flow-segmented button {
    width: 22px;
    height: 22px;
    min-height: 22px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-icon-action {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-filter-groups .assess-pool-filter-row {
    min-height: 26px;
    gap: 0;
    padding: 1px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-filter-groups .assess-filter-pill {
    width: 17px;
    min-width: 17px;
    height: 22px;
    min-height: 22px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-filter-groups .qbank-toolbar-icon {
    width: 12px;
    height: 12px;
  }

  .qbank-practice-shell.qbank-single-mode .qbank-mobile-analytics {
    padding-top: 4px;
  }

  .qbank-question-workspace .assess-option-letter {
    flex-basis: 32px;
  }
}

/* =============================================
   Accessibility — Focus Styles
   ============================================= */
.assess-option-btn:focus-visible,
.assess-filter-pill:focus-visible,
.assess-subject-row:focus-visible,
.assess-topic-item:focus-visible,
.assess-pill:focus-visible,
.assess-action:focus-visible,
.assess-wide-action:focus-visible,
.assess-bookmark-btn:focus-visible,
.assess-open-notes-btn:focus-visible,
.assess-template-card:focus-visible,
.qbank-browse-back:focus-visible,
.qbank-builder-back:focus-visible,
.qbank-history-actions button:focus-visible,
.qbank-mode-segmented button:focus-visible,
.qbank-flow-segmented button:focus-visible,
.qbank-analytics-toggle:focus-visible,
.qbank-analytics-restore:focus-visible,
.qbank-single-controls button:focus-visible,
.qbank-canvas-rail:focus-visible,
.qbank-next-action button:focus-visible,
.qbank-session-actions button:focus-visible,
.qbank-reset-dialog-actions button:focus-visible,
.qbank-progress-marker:focus-visible,
.qbank-review-row:focus-visible {
  outline: 2px solid var(--accent-focus, var(--ac));
  outline-offset: 2px;
  border-radius: 8px;
}

.assess-pool-search:focus-visible,
.assess-pool-filter:focus-visible {
  outline: 2px solid var(--accent-focus, var(--ac));
  outline-offset: 2px;
}

/* Review Queue */
.assess-review-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 24px 0 32px;
}

.assess-review-tab {
  min-height: 64px;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 8px;
  background: transparent;
  color: var(--muted, var(--t2));
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: inherit;
  font-weight: 800;
  cursor: pointer;
}

.assess-review-tab.active {
  border-color: #2563eb;
  color: var(--text, var(--t1));
  background: color-mix(in srgb, #2563eb 7%, transparent);
}

.assess-review-tab b {
  font-family: var(--font-heading, system-ui);
  font-size: 24px;
  color: var(--text, var(--t1));
}

.assess-review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.assess-review-item {
  min-height: 118px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.assess-review-kind {
  display: inline-flex;
  margin-bottom: 8px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.assess-review-item h3 {
  font-family: var(--font-heading, system-ui);
  font-size: 20px;
  line-height: 1.35;
  color: var(--text, var(--t1));
}

.assess-review-item p {
  margin-top: 6px;
  color: var(--muted, var(--t2));
  font-size: 14px;
  line-height: 1.55;
}

.assess-review-tab:focus-visible,
.assess-review-item .assess-action:focus-visible {
  outline: 2px solid var(--accent-focus, var(--ac));
  outline-offset: 2px;
}

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* =============================================
   Preparation Analytics
   ============================================= */
.analytics-shell {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px 0 64px;
  color: var(--text, var(--t1));
  font-family: var(--font-body, system-ui);
}

.analytics-empty {
  min-height: 360px;
  display: grid;
  place-items: center;
  color: var(--muted, var(--t2));
  font-weight: 700;
  text-align: center;
}

.analytics-empty {
  align-content: center;
  gap: 12px;
}

.analytics-loading-surface {
  min-height: min(620px, calc(100vh - 150px));
  display: grid;
  grid-template-columns: minmax(230px, 0.74fr) minmax(380px, 1.26fr);
  align-items: center;
  gap: clamp(28px, 5vw, 62px);
  padding: clamp(32px, 7vw, 72px) 0;
  color: var(--muted, var(--t2));
  text-align: left;
}

.analytics-loading-copy {
  max-width: 410px;
}

.analytics-loading-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 14px;
  color: var(--secondary, #5B7DB1);
  font-size: 13px;
  font-weight: 800;
}

.analytics-loading-title {
  max-width: 15ch;
  color: var(--text, var(--t1));
  font-family: var(--font-heading, system-ui);
  font-size: 30px;
  font-weight: 750;
  line-height: 1.14;
  letter-spacing: 0;
}

.analytics-loading-copy p {
  max-width: 38ch;
  margin: 12px 0 0;
  color: var(--muted, var(--t2));
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

.analytics-loading-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  margin-top: 20px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--border, rgba(0,0,0,0.08)) 86%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg, #FAF9F6) 72%, #fff 28%);
  color: var(--text, var(--t1));
  font-size: 13px;
  font-weight: 700;
}

.analytics-loading-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent-calm, #87A96B);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-calm, #87A96B) 16%, transparent);
  animation: analytics-loading-dot 1.4s ease-in-out infinite;
}

.analytics-loading-rail {
  position: relative;
  width: min(280px, 100%);
  height: 6px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border, rgba(0,0,0,0.08)) 62%, transparent);
}

.analytics-loading-rail span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 44%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-calm, #87A96B), var(--secondary, #5B7DB1));
  animation: analytics-loading-rail 1.65s cubic-bezier(.16, 1, .3, 1) infinite;
}

.analytics-loading-board {
  width: 100%;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg, #FAF9F6) 74%, #fff 26%);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 36px rgba(31,26,20,.06);
}

.analytics-loading-command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.07));
}

.analytics-loading-chip {
  height: 34px;
  border-radius: 999px;
}

.analytics-loading-chip.wide {
  width: min(320px, 100%);
}

.analytics-loading-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  gap: 12px;
  padding: 16px 0;
}

.analytics-loading-card {
  min-height: 138px;
  padding: 15px;
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: 12px;
  background: var(--surface, #fff);
}

.analytics-loading-card.primary {
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--secondary, #5B7DB1) 12%);
}

.analytics-loading-list {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface, #fff) 84%, transparent);
}

.analytics-loading-shimmer {
  position: relative;
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--muted, #6b6255) 13%, var(--bg, #FAF9F6));
}

.analytics-loading-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 68%, transparent), transparent);
  animation: analytics-loading-shimmer 1.65s ease-in-out infinite;
}

.analytics-loading-score {
  width: 86px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 999px;
}

.analytics-loading-line {
  width: 84%;
  height: 12px;
  margin-top: 12px;
  border-radius: 999px;
}

.analytics-loading-line.medium {
  width: 66%;
}

.analytics-loading-line.short {
  width: 48%;
}

.analytics-loading-ring {
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 999px;
}

.analytics-loading-bar {
  width: 92%;
  height: 18px;
  margin-top: 22px;
  border-radius: 999px;
}

.analytics-loading-bar.short {
  width: 66%;
  margin-top: 10px;
}

.analytics-loading-row {
  height: 24px;
  border-radius: 999px;
}

.analytics-loading-row.medium {
  width: 78%;
}

.analytics-loading-row.short {
  width: 54%;
}

@keyframes analytics-loading-shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes analytics-loading-rail {
  0% {
    transform: translateX(-60%);
  }

  55% {
    transform: translateX(95%);
  }

  100% {
    transform: translateX(155%);
  }
}

@keyframes analytics-loading-dot {
  0%, 100% {
    opacity: .55;
    transform: scale(.92);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 900px) {
  .analytics-loading-surface {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 28px 0 46px;
  }

  .analytics-loading-copy {
    max-width: none;
  }

  .analytics-loading-title {
    max-width: 18ch;
    font-size: 28px;
  }

  .analytics-loading-copy p {
    max-width: 58ch;
  }
}

@media (max-width: 560px) {
  .analytics-loading-surface {
    gap: 22px;
    padding-top: 18px;
  }

  .analytics-loading-board {
    padding: 14px;
    border-radius: 12px;
  }

  .analytics-loading-grid {
    grid-template-columns: 1fr;
  }

  .analytics-loading-command {
    grid-template-columns: 1fr 76px;
  }
}

.analytics-empty h2 {
  font-family: var(--font-heading, system-ui);
  font-size: 28px;
  color: var(--text, var(--t1));
}

.analytics-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #2563eb;
}

.analytics-command {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(150px, 190px) minmax(260px, 0.95fr) minmax(220px, 0.85fr);
  gap: 12px;
  align-items: stretch;
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.analytics-command-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

.analytics-command-copy h1 {
  margin: 0;
  font-family: var(--font-heading, system-ui);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 750;
  color: var(--text, var(--t1));
}

.analytics-command-scope {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted, var(--t2));
  font-size: 13px;
  font-weight: 700;
}

.analytics-command-scope b {
  color: var(--text, var(--t1));
  font-size: 14px;
}

.analytics-command-scope span,
.analytics-command-action > span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 80%, transparent);
  border-radius: 999px;
  padding: 0 8px;
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 800;
}

.analytics-command-score.analytics-score {
  min-height: 0;
  padding: 12px;
  border-radius: 8px;
}

.analytics-command-score .analytics-score-number {
  font-size: 36px;
}

.analytics-command-score .analytics-score-label {
  margin-top: 4px;
  font-size: 13px;
}

.analytics-command-score .analytics-score-scope {
  margin-bottom: 6px;
  font-size: 11px;
}

.analytics-command-metrics {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.analytics-command-metric {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  padding: 10px;
  background: var(--bg, #fff);
}

.analytics-command-metric span,
.analytics-command-metric small,
.analytics-command-action small,
.analytics-diagnosis-item span,
.analytics-diagnosis-item small {
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.analytics-command-metric b {
  color: var(--text, var(--t1));
  font-size: 20px;
  line-height: 1;
}

.analytics-command-metric.good b { color: #0f766e; }
.analytics-command-metric.info b { color: #2563eb; }

.analytics-command-action {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
  border-left: 1px solid var(--border, rgba(0,0,0,0.08));
  padding-left: 12px;
}

.analytics-command-action .analytics-primary-action {
  width: 100%;
}

.analytics-diagnosis-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  padding: 12px 0 0;
}

.analytics-diagnosis-item {
  min-width: 0;
  min-height: 92px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  background: var(--bg, #fff);
  color: var(--text, var(--t1));
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 11px;
  text-align: left;
  font-family: inherit;
}

button.analytics-diagnosis-item {
  cursor: pointer;
}

.analytics-diagnosis-item b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, var(--t1));
  font-size: 14px;
}

.analytics-diagnosis-item.danger {
  border-color: color-mix(in srgb, #dc2626 32%, var(--border, #d0d7de));
  background: color-mix(in srgb, #dc2626 6%, var(--bg, #fff));
}

.analytics-diagnosis-item.warn {
  border-color: color-mix(in srgb, #b45309 34%, var(--border, #d0d7de));
  background: color-mix(in srgb, #b45309 7%, var(--bg, #fff));
}

.analytics-diagnosis-item.good {
  border-color: color-mix(in srgb, #0f766e 30%, var(--border, #d0d7de));
  background: color-mix(in srgb, #0f766e 6%, var(--bg, #fff));
}

.analytics-diagnosis-item.locked,
.analytics-diagnosis-item.neutral {
  background: color-mix(in srgb, #64748b 6%, var(--bg, #fff));
}

.analytics-page-directory {
  display: grid;
  gap: 12px;
  padding: 18px 0 6px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.analytics-page-directory-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.analytics-page-directory-head h2 {
  margin: 0;
  color: var(--text, var(--t1));
  font-family: var(--font-heading, system-ui);
  font-size: 20px;
  line-height: 1.15;
  font-weight: 750;
}

.analytics-page-directory-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted, var(--t2));
  font-size: 13px;
}

.analytics-page-link,
.analytics-subject-breadcrumb button {
  min-height: 34px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  background: var(--bg, #fff);
  color: #1d4ed8;
  font-family: inherit;
  font-size: 13px;
  font-weight: 850;
  padding: 0 12px;
  cursor: pointer;
}

.analytics-page-link[aria-current="page"] {
  background: color-mix(in srgb, #2563eb 8%, var(--bg, #fff));
  border-color: color-mix(in srgb, #2563eb 42%, var(--border, #d0d7de));
}

.analytics-page-link:hover,
.analytics-page-link:focus-visible,
.analytics-subject-breadcrumb button:hover,
.analytics-subject-breadcrumb button:focus-visible {
  border-color: #2563eb;
  outline: 2px solid var(--accent-focus, #2563eb);
  outline-offset: 2px;
}

.analytics-subject-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
}

.analytics-subject-card {
  min-height: 126px;
  min-width: 0;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-top: 4px solid #2563eb;
  border-radius: 8px;
  background: var(--bg, #fff);
  color: var(--text, var(--t1));
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 12px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.analytics-subject-card.limited {
  border-top-color: #b45309;
}

.analytics-subject-card.unavailable {
  border-top-color: #64748b;
}

.analytics-subject-card span,
.analytics-subject-card small {
  color: var(--muted, var(--t2));
  font-size: 12px;
  line-height: 1.35;
}

.analytics-subject-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text, var(--t1));
  font-family: var(--font-heading, system-ui);
  font-size: 19px;
  line-height: 1.15;
  font-weight: 750;
}

.analytics-subject-card b {
  color: #1d4ed8;
  font-size: 14px;
}

.analytics-subject-card:hover,
.analytics-subject-card:focus-visible {
  border-color: #2563eb;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
  outline: 2px solid var(--accent-focus, #2563eb);
  outline-offset: 2px;
  transform: translateY(-1px);
}

.analytics-subject-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted, var(--t2));
  font-size: 13px;
  font-weight: 750;
}

.analytics-subject-breadcrumb b {
  color: var(--text, var(--t1));
}

.analytics-subject-page {
  display: block;
}

.analytics-subject-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.analytics-subject-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 8px;
}

.analytics-subject-copy h2 {
  margin: 0;
  color: var(--text, var(--t1));
  font-family: var(--font-heading, system-ui);
  font-size: 30px;
  line-height: 1.1;
  font-weight: 750;
}

.analytics-subject-copy p {
  max-width: 760px;
  margin: 0;
  color: var(--muted, var(--t2));
  font-size: 14px;
  line-height: 1.5;
}

.analytics-freshness-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.analytics-freshness-note span {
  min-height: 24px;
  border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 80%, transparent);
  border-radius: 999px;
  color: var(--muted, var(--t2));
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
}

.analytics-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: 28px;
  align-items: start;
  padding: 4px 0 22px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.analytics-hero h1 {
  font-family: var(--font-heading, system-ui);
  font-size: 44px;
  line-height: 1.05;
  font-weight: 700;
  margin: 8px 0 10px;
  color: var(--text, var(--t1));
}

.analytics-hero p {
  max-width: 720px;
  color: var(--muted, var(--t2));
  font-size: 15px;
  line-height: 1.5;
}

.analytics-score {
  min-height: 0;
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 8px;
  background: color-mix(in srgb, #2563eb 8%, var(--bg, #fff));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
}

.analytics-score.limited {
  background: color-mix(in srgb, #b45309 9%, var(--bg, #fff));
}

.analytics-score.unavailable {
  background: color-mix(in srgb, #94a3b8 12%, var(--bg, #fff));
}

.analytics-score-number {
  font-family: var(--font-heading, system-ui);
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
  color: var(--text, var(--t1));
}

.analytics-score-label {
  margin-top: 8px;
  font-weight: 800;
  font-size: 16px;
  color: var(--text, var(--t1));
}

.analytics-score-scope {
  margin-bottom: 8px;
  color: var(--muted, var(--t2));
  font-size: 13px;
  font-weight: 800;
}

.analytics-orbit-chart {
  display: grid;
  gap: 12px;
}

.analytics-orbit-core {
  display: grid;
  gap: 4px;
}

.analytics-ring-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.analytics-ring-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 7px 6px;
  border: 1px solid color-mix(in srgb, var(--border, #94a3b8) 80%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg, #fff) 70%, transparent);
}

.analytics-ring-item svg {
  width: 38px;
  height: 38px;
  transform: rotate(-90deg);
}

.analytics-ring-track,
.analytics-ring-fill {
  fill: none;
  stroke-width: 5;
}

.analytics-ring-track {
  stroke: rgba(100,116,139,0.18);
}

.analytics-ring-fill {
  stroke: #2563eb;
  stroke-linecap: round;
  stroke-dasharray: var(--ring-value) 100;
  stroke-dashoffset: 0;
  animation: analytics-ring-grow 0.8s ease-out both;
}

.analytics-ring-item.good .analytics-ring-fill { stroke: #0f766e; }
.analytics-ring-item.available .analytics-ring-fill { stroke: #0f766e; }
.analytics-ring-item.limited .analytics-ring-fill,
.analytics-ring-item.warn .analytics-ring-fill { stroke: #b45309; }
.analytics-ring-item.danger .analytics-ring-fill { stroke: #dc2626; }

.analytics-ring-item span {
  color: var(--muted, var(--t3));
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.analytics-ring-item b {
  color: var(--text, var(--t1));
  font-size: 12px;
}

.analytics-orbit-chart p {
  margin: 0;
  color: var(--muted, var(--t2));
  font-size: 12px;
  line-height: 1.45;
}

.analytics-plan-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.analytics-plan-main h2 {
  margin-top: 6px;
  font-family: var(--font-heading, system-ui);
  font-size: 24px;
  line-height: 1.2;
}

.analytics-plan-main p {
  margin-top: 6px;
  color: var(--muted, var(--t2));
  line-height: 1.45;
}

.analytics-primary-action,
.analytics-sidebar-action {
  border: 0;
  border-radius: 8px;
  min-height: 44px;
  padding: 0 18px;
  background: #2563eb;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}

.analytics-primary-action:hover,
.analytics-sidebar-action:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.analytics-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.analytics-metric-card {
  min-height: 96px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  padding: 14px;
  background: var(--bg, #fff);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.analytics-metric-card.good { border-top: 4px solid #0f766e; }
.analytics-metric-card.danger { border-top: 4px solid #dc2626; }
.analytics-metric-card.warn { border-top: 4px solid #b45309; }
.analytics-metric-card.focus { border-top: 4px solid #7c3aed; }
.analytics-metric-card.info { border-top: 4px solid #2563eb; }

.analytics-metric-value {
  font-family: var(--font-heading, system-ui);
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
}

.analytics-metric-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, var(--t3));
}

.analytics-metric-sub {
  color: var(--muted, var(--t2));
  font-size: 12px;
}

.analytics-activity-strip {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
  color: var(--muted, var(--t2));
  font-size: 13px;
  font-weight: 700;
}

.analytics-activity-strip b {
  color: #0f766e;
}

.analytics-activity-empty {
  grid-template-columns: 1fr;
}

.analytics-activity-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.analytics-activity-calendar {
  display: grid;
  grid-template-columns: repeat(14, 18px);
  gap: 6px;
  align-items: end;
}

.analytics-activity-day {
  width: 18px;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: var(--muted, var(--t3));
  font-size: 9px;
}

.analytics-activity-day i {
  width: 14px;
  height: 22px;
  border-radius: 4px;
  background: rgba(100,116,139,0.16);
  border: 1px solid rgba(100,116,139,0.14);
}

.analytics-activity-day.low i { background: color-mix(in srgb, #2563eb 24%, transparent); }
.analytics-activity-day.medium i { background: color-mix(in srgb, #2563eb 52%, transparent); }
.analytics-activity-day.high i { background: #2563eb; }

.analytics-study-pulse {
  margin-top: 18px;
  padding: 18px 0 22px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.analytics-study-pulse-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  margin-bottom: 16px;
}

.analytics-study-pulse h2 {
  margin: 0;
  color: var(--text, var(--t1));
  font-size: 24px;
  line-height: 1.15;
}

.analytics-study-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.analytics-study-year-switch {
  display: inline-grid;
  grid-template-columns: 30px minmax(146px, auto) 30px;
  align-items: center;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  background: var(--bg, #fff);
  overflow: hidden;
}

.analytics-study-year-switch b {
  min-width: 146px;
  color: var(--text, var(--t1));
  font-size: 13px;
  line-height: 30px;
  text-align: center;
}

.analytics-study-year-switch button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #1d4ed8;
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.analytics-study-year-switch button:hover,
.analytics-study-year-switch button:focus-visible {
  background: color-mix(in srgb, #2563eb 10%, transparent);
  outline: none;
}

.analytics-study-year-switch button:disabled {
  color: var(--muted, var(--t3));
  cursor: default;
  opacity: 0.45;
}

.analytics-study-year-switch button:disabled:hover {
  background: transparent;
}

.analytics-study-pulse p {
  margin: 6px 0 0;
  color: var(--muted, var(--t2));
  font-size: 14px;
  font-weight: 650;
}

.analytics-study-pulse-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 10px;
  justify-content: end;
}

.analytics-study-pulse-stats span {
  min-width: 102px;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  color: var(--muted, var(--t2));
  background: color-mix(in srgb, var(--bg, #fff) 88%, #ecfdf5 12%);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.analytics-study-pulse-stats b {
  display: block;
  margin-bottom: 2px;
  color: #166534;
  font-size: 20px;
  line-height: 1;
  text-transform: none;
}

.analytics-heatmap-wrap {
  --analytics-heat-cell: 12px;
  --analytics-heat-gap: 3px;
  --analytics-heat-label-col: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  outline: none;
}

.analytics-heatmap-wrap:focus-visible {
  box-shadow: 0 0 0 3px rgba(37,99,235,0.16);
}

.analytics-heatmap-months {
  display: grid;
  gap: var(--analytics-heat-gap);
  margin-left: calc(var(--analytics-heat-label-col) + 6px);
  margin-bottom: 6px;
  min-width: max-content;
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 750;
}

.analytics-heatmap-months span {
  min-width: 0;
  min-height: 12px;
  overflow: visible;
  white-space: nowrap;
}

.analytics-heatmap-body {
  display: grid;
  grid-template-columns: var(--analytics-heat-label-col) max-content;
  gap: 6px;
  align-items: start;
  min-width: max-content;
}

.analytics-heatmap-weekdays {
  display: grid;
  grid-template-rows: repeat(7, var(--analytics-heat-cell));
  gap: var(--analytics-heat-gap);
  color: var(--muted, var(--t3));
  font-size: 10px;
  font-weight: 750;
  line-height: var(--analytics-heat-cell);
  text-align: right;
}

.analytics-heatmap-grid {
  display: grid;
  gap: var(--analytics-heat-gap);
  min-width: max-content;
}

.analytics-heat-week {
  display: grid;
  grid-template-rows: repeat(7, var(--analytics-heat-cell));
  gap: var(--analytics-heat-gap);
}

.analytics-heat-day {
  width: var(--analytics-heat-cell);
  height: var(--analytics-heat-cell);
  border-radius: 3px;
  background: #ebedf0;
  border: 1px solid rgba(15,23,42,0.06);
}

.analytics-heat-day.level-1,
.analytics-heat-legend .level-1 {
  background: #bbf7d0;
  border-color: rgba(22,101,52,0.14);
}

.analytics-heat-day.level-2,
.analytics-heat-legend .level-2 {
  background: #4ade80;
  border-color: rgba(22,101,52,0.2);
}

.analytics-heat-day.level-3,
.analytics-heat-legend .level-3 {
  background: #16a34a;
  border-color: rgba(22,101,52,0.28);
}

.analytics-heat-day.level-4,
.analytics-heat-legend .level-4 {
  background: #166534;
  border-color: rgba(20,83,45,0.34);
}

.analytics-heat-pad {
  visibility: hidden;
}

.analytics-heatmap-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  color: var(--muted, var(--t2));
  font-size: 12px;
  font-weight: 700;
  min-width: max-content;
}

.analytics-heat-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.analytics-heat-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #ebedf0;
  border: 1px solid rgba(15,23,42,0.06);
}

.analytics-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 24px;
  margin-top: 28px;
}

.analytics-panel {
  min-width: 0;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  background: var(--bg, #fff);
  padding: 22px;
}

.analytics-panel-wide {
  min-height: 260px;
}

.analytics-bar-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.analytics-bar-list.compact {
  gap: 14px;
}

.analytics-bar-row {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.analytics-bar-meta {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.analytics-bar-meta strong {
  min-width: 0;
  color: var(--text, var(--t1));
  font-size: 14px;
  font-weight: 800;
}

.analytics-bar-meta span {
  color: var(--muted, var(--t3));
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.analytics-bar-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(100,116,139,0.16);
}

.analytics-bar-track span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: #2563eb;
}

.analytics-bar-track .accuracy,
.analytics-bar-track.accuracy span {
  background: #0f766e;
}

.analytics-bar-track.coverage span {
  background: #2563eb;
}

.analytics-bar-track.weak span {
  background: #dc2626;
}

.analytics-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}

.analytics-panel-head h2 {
  font-family: var(--font-heading, system-ui);
  font-size: 22px;
  font-weight: 700;
}

.analytics-panel-head span {
  color: var(--muted, var(--t3));
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.analytics-readiness-list,
.analytics-queue-list,
.analytics-topic-list,
.analytics-track-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analytics-readiness-row,
.analytics-track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto);
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}

.analytics-readiness-row:last-child,
.analytics-track-row:last-child {
  border-bottom: 0;
}

.analytics-readiness-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analytics-readiness-titleline {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.analytics-readiness-titleline em {
  flex: 0 0 auto;
  font-style: normal;
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.analytics-readiness-main strong,
.analytics-track-row span {
  font-size: 15px;
  font-weight: 800;
}

.analytics-readiness-main span,
.analytics-track-row small {
  color: var(--muted, var(--t2));
  font-size: 13px;
  line-height: 1.5;
}

.analytics-readiness-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  font-size: 12px;
  color: var(--muted, var(--t2));
}

.analytics-readiness-stat b,
.analytics-track-row b {
  color: var(--text, var(--t1));
  font-size: 14px;
}

.analytics-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 2px;
}

.analytics-evidence-meter {
  min-width: 0;
  min-height: 74px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--border, rgba(0,0,0,0.07));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg, #fff) 90%, transparent);
}

.analytics-evidence-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.analytics-evidence-meter-head span {
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.analytics-evidence-meter-head b {
  color: var(--text, var(--t1));
  font-size: 13px;
}

.analytics-evidence-meter small {
  color: var(--muted, var(--t3));
  font-size: 11px;
  line-height: 1.35;
}

.analytics-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted, #94a3b8) 18%, transparent);
  overflow: hidden;
  display: block;
}

.analytics-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2563eb;
  transform-origin: left center;
  animation: analytics-bar-grow 0.7s ease-out both;
}

.analytics-progress.available span,
.analytics-progress.good span {
  background: #0f766e;
}

.analytics-progress.limited span,
.analytics-progress.warn span {
  background: #b45309;
}

.analytics-progress.danger span {
  background: #dc2626;
}

.analytics-queue-row,
.analytics-topic-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
  background: transparent;
  color: var(--text, var(--t1));
  min-height: 54px;
  padding: 10px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.analytics-queue-row {
  min-height: 82px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.analytics-topic-row {
  min-height: 118px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
}

.analytics-queue-row small {
  grid-column: 1 / -1;
  color: var(--muted, var(--t3));
  font-size: 12px;
  line-height: 1.45;
}

.analytics-queue-row:hover,
.analytics-topic-row:hover {
  color: #2563eb;
}

.analytics-queue-name,
.analytics-topic-row strong {
  font-weight: 800;
}

.analytics-queue-row.is-empty {
  color: var(--muted, var(--t3));
}

.analytics-topic-main {
  min-width: 0;
  grid-column: 1 / -1;
}

.analytics-topic-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted, var(--t3));
  font-size: 12px;
}

.analytics-topic-metric {
  min-width: 0;
  text-align: left;
  color: var(--muted, var(--t2));
}

.analytics-topic-metric b {
  display: block;
  color: var(--text, var(--t1));
  font-size: 13px;
}

.analytics-topic-metric.danger b {
  color: #dc2626;
}

.analytics-risk-pill {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid rgba(100,116,139,0.24);
  color: var(--muted, var(--t2));
}

.analytics-risk-pill.danger {
  color: #b91c1c;
  background: color-mix(in srgb, #dc2626 9%, transparent);
  border-color: color-mix(in srgb, #dc2626 30%, transparent);
}

.analytics-risk-pill.warn {
  color: #92400e;
  background: color-mix(in srgb, #b45309 10%, transparent);
  border-color: color-mix(in srgb, #b45309 32%, transparent);
}

.analytics-risk-pill.info {
  color: #1d4ed8;
  background: color-mix(in srgb, #2563eb 8%, transparent);
  border-color: color-mix(in srgb, #2563eb 28%, transparent);
}

.analytics-track-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.analytics-track-row.unavailable {
  color: var(--muted, var(--t3));
}

.analytics-track-row small {
  grid-column: 1 / -1;
}

.analytics-honesty {
  margin-top: 28px;
  padding: 20px 0;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
}

.analytics-honesty p {
  margin-top: 8px;
  color: var(--muted, var(--t2));
  line-height: 1.6;
}

.analytics-empty-inline {
  padding: 20px 0;
  color: var(--muted, var(--t2));
  font-size: 14px;
  line-height: 1.6;
}

.analytics-empty-inline.compact {
  padding: 8px 0;
  font-size: 13px;
}

.analytics-signal-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) repeat(3, minmax(0, 0.95fr));
  gap: 14px;
  margin-top: 18px;
}

.analytics-now-panel .analytics-queue-row {
  min-height: 64px;
}

.analytics-signal-list,
.analytics-exam-tag-list,
.analytics-trend-blocks,
.analytics-block-summary {
  display: grid;
  gap: 10px;
}

.analytics-signal-row {
  min-width: 0;
  min-height: 66px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
  background: transparent;
  color: var(--text, var(--t1));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 8px 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.analytics-signal-row:last-child {
  border-bottom: 0;
}

.analytics-signal-row:hover,
.analytics-signal-row:focus-visible,
button.analytics-diagnosis-item:hover,
button.analytics-diagnosis-item:focus-visible {
  color: #2563eb;
  border-color: #2563eb;
  outline: none;
}

.analytics-signal-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.analytics-signal-main strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
}

.analytics-signal-main small,
.analytics-signal-reason,
.analytics-signal-row em {
  color: var(--muted, var(--t3));
  font-size: 12px;
  line-height: 1.35;
}

.analytics-signal-row em {
  justify-self: start;
  border: 1px solid color-mix(in srgb, #b45309 35%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  color: #92400e;
  font-style: normal;
  font-weight: 800;
}

.analytics-signal-row.danger .analytics-signal-main strong { color: #b91c1c; }
.analytics-signal-row.warn .analytics-signal-main strong { color: #92400e; }
.analytics-signal-row.good .analytics-signal-main strong { color: #0f766e; }

.analytics-noob-ops {
  margin-top: 18px;
}

.analytics-rounds-list,
.analytics-recall-list,
.analytics-clinic-items {
  display: grid;
  gap: 8px;
}

.analytics-round-row,
.analytics-recall-row,
.analytics-clinic-items button {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  background: transparent;
  color: var(--text, var(--t1));
  display: grid;
  gap: 5px;
  padding: 10px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

.analytics-round-row {
  grid-template-columns: minmax(110px, 0.32fr) minmax(0, 0.68fr);
  align-items: center;
}

.analytics-round-row small {
  grid-column: 2;
}

.analytics-round-row span,
.analytics-recall-row span,
.analytics-trust-card span,
.analytics-clinic-head span {
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.analytics-round-row strong,
.analytics-recall-row strong,
.analytics-clinic-items strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, var(--t1));
  font-size: 14px;
  font-weight: 800;
}

.analytics-round-row small,
.analytics-recall-row small,
.analytics-clinic-items span,
.analytics-trust-card small,
.analytics-clinic-lane > small {
  color: var(--muted, var(--t3));
  font-size: 12px;
  line-height: 1.4;
}

.analytics-round-row:hover,
.analytics-round-row:focus-visible,
.analytics-recall-row:hover,
.analytics-recall-row:focus-visible,
.analytics-clinic-items button:hover,
.analytics-clinic-items button:focus-visible {
  border-color: #2563eb;
  color: #2563eb;
  outline: none;
}

.analytics-round-row.danger,
.analytics-recall-row.danger {
  border-color: color-mix(in srgb, #dc2626 24%, var(--border, #d0d7de));
  background: color-mix(in srgb, #dc2626 5%, transparent);
}

.analytics-round-row.warn,
.analytics-recall-row.warn {
  border-color: color-mix(in srgb, #b45309 26%, var(--border, #d0d7de));
  background: color-mix(in srgb, #b45309 5%, transparent);
}

.analytics-trust-grid {
  display: grid;
  gap: 8px;
}

.analytics-trust-card {
  min-width: 0;
  min-height: 84px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  background: var(--bg, #fff);
  display: grid;
  gap: 4px;
  padding: 10px;
}

.analytics-trust-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, var(--t1));
  font-size: 16px;
  font-weight: 800;
}

.analytics-trust-card b {
  justify-self: start;
  border-radius: 999px;
  padding: 2px 7px;
  background: color-mix(in srgb, #64748b 10%, transparent);
  color: var(--muted, var(--t2));
  font-size: 11px;
}

.analytics-trust-card.good b {
  background: color-mix(in srgb, #0f766e 10%, transparent);
  color: #0f766e;
}

.analytics-trust-card.warn b {
  background: color-mix(in srgb, #b45309 11%, transparent);
  color: #92400e;
}

.analytics-trust-card.danger b {
  background: color-mix(in srgb, #dc2626 10%, transparent);
  color: #b91c1c;
}

.analytics-trust-card.info b {
  background: color-mix(in srgb, #2563eb 9%, transparent);
  color: #1d4ed8;
}

.analytics-clinic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.analytics-clinic-lane {
  min-width: 0;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  background: var(--bg, #fff);
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
}

.analytics-clinic-lane.danger {
  border-color: color-mix(in srgb, #dc2626 24%, var(--border, #d0d7de));
}

.analytics-clinic-lane.warn {
  border-color: color-mix(in srgb, #b45309 26%, var(--border, #d0d7de));
}

.analytics-clinic-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.analytics-clinic-head b {
  color: var(--text, var(--t1));
  font-size: 15px;
}

.analytics-clinic-lane em {
  color: var(--muted, var(--t3));
  font-size: 12px;
  font-style: normal;
}

.analytics-exam-tag-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}

.analytics-exam-tag-row:last-child {
  border-bottom: 0;
}

.analytics-exam-tag-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.analytics-exam-tag-main strong {
  color: var(--text, var(--t1));
  font-size: 14px;
  font-weight: 800;
}

.analytics-exam-tag-main span,
.analytics-exam-tag-stats small {
  color: var(--muted, var(--t3));
  font-size: 12px;
  line-height: 1.35;
}

.analytics-exam-tag-stats {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 7px;
  align-items: baseline;
  text-align: right;
}

.analytics-exam-tag-stats b {
  color: var(--text, var(--t1));
  font-size: 13px;
}

.analytics-trend-summary {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}

.analytics-trend-summary strong,
.analytics-block-row strong {
  color: var(--text, var(--t1));
  font-size: 14px;
  font-weight: 800;
}

.analytics-trend-summary span,
.analytics-block-row span,
.analytics-block-stats span {
  color: var(--muted, var(--t2));
  font-size: 12px;
  line-height: 1.45;
}

.analytics-trend-summary div,
.analytics-block-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.analytics-block-stats {
  grid-template-columns: 1fr;
}

.analytics-trend-summary b,
.analytics-block-stats b {
  color: var(--text, var(--t1));
}

.analytics-trend-summary.improving strong { color: #0f766e; }
.analytics-trend-summary.decaying strong { color: #b91c1c; }
.analytics-trend-summary.cooling strong,
.analytics-trend-summary.thin strong { color: #92400e; }

.analytics-block-row {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
}

.analytics-subject-metrics {
  margin-top: 18px;
}

.analytics-subject-system-list,
.analytics-topic-rank-list,
.analytics-subject-attempts {
  display: grid;
  gap: 10px;
}

.analytics-subject-system-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
  gap: 10px 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}

.analytics-subject-system-row:last-child {
  border-bottom: 0;
}

.analytics-subject-system-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.analytics-subject-system-main strong,
.analytics-topic-rank-main strong,
.analytics-subject-attempt-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text, var(--t1));
  font-size: 14px;
  font-weight: 800;
}

.analytics-subject-system-main span,
.analytics-topic-rank-main small,
.analytics-topic-rank-row small,
.analytics-subject-attempt-summary span,
.analytics-subject-attempt-row span {
  color: var(--muted, var(--t3));
  font-size: 12px;
  line-height: 1.35;
}

.analytics-subject-system-stats {
  display: grid;
  grid-template-columns: repeat(3, auto auto);
  gap: 2px 7px;
  align-items: baseline;
  text-align: right;
}

.analytics-subject-system-stats b,
.analytics-topic-rank-row b,
.analytics-subject-attempt-summary b {
  color: var(--text, var(--t1));
  font-size: 13px;
}

.analytics-subject-system-row .analytics-progress {
  grid-column: 1 / -1;
}

.analytics-topic-rank-row {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
  background: transparent;
  color: var(--text, var(--t1));
  display: grid;
  grid-template-columns: 32px minmax(180px, 1fr) repeat(3, minmax(74px, auto)) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.analytics-topic-rank-row:last-child {
  border-bottom: 0;
}

.analytics-topic-rank-row:hover,
.analytics-topic-rank-row:focus-visible {
  color: #2563eb;
  outline: none;
}

.analytics-topic-rank-number {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, #64748b 10%, var(--bg, #fff));
  color: var(--muted, var(--t2));
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.analytics-topic-rank-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.analytics-topic-rank-metric {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.analytics-topic-rank-row.danger .analytics-topic-rank-main strong { color: #b91c1c; }
.analytics-topic-rank-row.warn .analytics-topic-rank-main strong { color: #92400e; }
.analytics-topic-rank-row.info .analytics-topic-rank-main strong { color: #1d4ed8; }

.analytics-topic-rank-row em {
  justify-self: end;
  border: 1px solid rgba(100,116,139,0.24);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted, var(--t2));
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.analytics-topic-rank-row.danger em {
  color: #b91c1c;
  border-color: color-mix(in srgb, #dc2626 30%, transparent);
}

.analytics-topic-rank-row.warn em {
  color: #92400e;
  border-color: color-mix(in srgb, #b45309 32%, transparent);
}

.analytics-subject-attempt-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}

.analytics-subject-attempt-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}

.analytics-subject-attempt-row:last-child {
  border-bottom: 0;
}

.analytics-subject-attempt-row span {
  grid-column: 1;
}

.analytics-subject-attempt-row b {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: #0f766e;
  font-size: 12px;
}

.analytics-subject-attempt-row.wrong b {
  color: #dc2626;
}

.analytics-subject-topic-panel {
  margin-top: 28px;
}

.analytics-coverage-map {
  display: grid;
  gap: 16px;
}

.analytics-coverage-subject {
  min-height: 160px;
  display: grid;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}

.analytics-coverage-subject:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.analytics-coverage-head,
.analytics-system-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.analytics-coverage-head div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.analytics-coverage-head strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--text, var(--t1));
}

.analytics-coverage-head span,
.analytics-system-head span {
  color: var(--muted, var(--t2));
  font-size: 12px;
  font-weight: 700;
}

.analytics-coverage-head b,
.analytics-system-head b {
  flex: 0 0 auto;
  color: var(--text, var(--t1));
  font-size: 13px;
}

.analytics-system-list {
  display: grid;
  gap: 12px;
}

.analytics-system-block {
  display: grid;
  gap: 8px;
}

.analytics-topic-chip-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.analytics-topic-chip {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  background: transparent;
  color: var(--text, var(--t1));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.analytics-topic-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-topic-chip b {
  flex: 0 0 auto;
  color: var(--muted, var(--t2));
}

.analytics-topic-chip:hover {
  border-color: #2563eb;
  color: #2563eb;
}

.analytics-map-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(190px, 0.9fr);
  gap: 18px;
  align-items: center;
  min-height: 248px;
}

.analytics-mastery-map {
  width: 100%;
  min-height: 220px;
  overflow: visible;
}

.analytics-map-axis {
  stroke: color-mix(in srgb, var(--text, #0f172a) 48%, transparent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.analytics-map-grid {
  stroke: color-mix(in srgb, var(--muted, #94a3b8) 22%, transparent);
  stroke-dasharray: 3 6;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.analytics-map-label,
.analytics-map-tick {
  fill: var(--muted, var(--t3));
  font-family: var(--font-body, system-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.analytics-map-tick {
  font-size: 9px;
  font-weight: 700;
}

.analytics-map-point {
  cursor: pointer;
  outline: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: analytics-point-in 0.46s ease-out both;
  animation-delay: var(--map-delay, 0s);
}

.analytics-map-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.analytics-map-dot {
  fill: #2563eb;
  fill-opacity: 0.78;
  stroke: var(--bg, #fff);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 8px 12px rgba(37, 99, 235, 0.18));
  pointer-events: none;
  transition: fill-opacity 0.16s ease, stroke-width 0.16s ease, filter 0.16s ease;
}

.analytics-map-point.good .analytics-map-dot {
  fill: #0f766e;
  filter: drop-shadow(0 8px 12px rgba(15, 118, 110, 0.18));
}

.analytics-map-point.warn .analytics-map-dot {
  fill: #b45309;
  filter: drop-shadow(0 8px 12px rgba(180, 83, 9, 0.2));
}

.analytics-map-point.danger .analytics-map-dot {
  fill: #dc2626;
  filter: drop-shadow(0 8px 12px rgba(220, 38, 38, 0.18));
}

.analytics-map-point.neutral .analytics-map-dot {
  fill: #64748b;
  filter: none;
}

.analytics-map-point:hover .analytics-map-dot,
.analytics-map-point:focus-visible .analytics-map-dot {
  fill-opacity: 0.96;
  stroke: var(--text, #0f172a);
  stroke-width: 3.5;
  filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.18));
}

.analytics-map-side {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.analytics-map-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analytics-map-subjects span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 999px;
  padding: 0 8px;
  color: var(--muted, var(--t2));
  font-size: 11px;
  font-weight: 800;
}

.analytics-map-subjects b {
  color: var(--text, var(--t1));
}

.analytics-map-legend {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.analytics-map-legend-item {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 8px;
  background: transparent;
  color: var(--text, var(--t1));
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  padding: 9px 10px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.analytics-map-legend-item:hover,
.analytics-map-legend-item:focus-visible {
  border-color: #2563eb;
  color: #2563eb;
  transform: translateY(-1px);
  outline: 2px solid var(--accent-focus, #2563eb);
  outline-offset: 2px;
}

.analytics-map-legend-item span {
  grid-row: 1 / 3;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #2563eb;
}

.analytics-map-legend-item.good span { background: #0f766e; }
.analytics-map-legend-item.warn span { background: #b45309; }
.analytics-map-legend-item.danger span { background: #dc2626; }
.analytics-map-legend-item.neutral span { background: #64748b; }

.analytics-map-legend-item b,
.analytics-map-legend-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-map-legend-item b {
  font-size: 12px;
  font-weight: 800;
}

.analytics-map-legend-item small {
  color: var(--muted, var(--t3));
  font-size: 11px;
  font-weight: 700;
}

.analytics-legend-list {
  display: grid;
  gap: 12px;
  color: var(--muted, var(--t2));
  font-size: 13px;
  line-height: 1.55;
}

.analytics-legend-list span {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.analytics-legend-list b {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: #2563eb;
}

.analytics-legend-list b.good { background: #0f766e; }
.analytics-legend-list b.warn { background: #b45309; }
.analytics-legend-list b.danger { background: #dc2626; }

.analytics-sidebar-copy {
  color: var(--t3);
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 12px;
}

.analytics-sidebar-action {
  width: 100%;
}

.analytics-sidebar-queues {
  display: grid;
  gap: 8px;
  font-size: 12px;
}

.analytics-sidebar-queues span {
  display: flex;
  justify-content: space-between;
  color: var(--t2);
}

.analytics-sidebar-queues b {
  color: var(--t1);
}

@media (max-width: 1100px) {
  .analytics-command {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
  }

  .analytics-command-metrics,
  .analytics-command-action {
    grid-column: 1 / -1;
  }

  .analytics-command-action {
    border-left: 0;
    border-top: 1px solid var(--border, rgba(0,0,0,0.08));
    padding: 12px 0 0;
  }

  .analytics-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-two-col {
    grid-template-columns: 1fr;
  }

  .analytics-topic-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .analytics-map-shell {
    grid-template-columns: 1fr;
  }

  .analytics-risk-pill {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .analytics-shell {
    padding: 10px 0 56px;
  }

  .analytics-command,
  .analytics-subject-hero,
  .analytics-hero,
  .analytics-plan-band,
  .analytics-readiness-row,
  .analytics-activity-strip,
  .analytics-study-pulse-head {
    grid-template-columns: 1fr;
  }

  .analytics-command-copy h1 {
    font-size: 26px;
  }

  .analytics-command {
    gap: 10px;
    padding-bottom: 10px;
  }

  .analytics-command-score.analytics-score {
    min-height: 112px;
    padding: 14px;
  }

  .analytics-command-score .analytics-score-number,
  .analytics-score-number {
    font-size: 46px;
  }

  .analytics-command-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .analytics-command-metric {
    min-height: 78px;
    padding: 9px 8px;
  }

  .analytics-command-metric b {
    font-size: 18px;
  }

  .analytics-command-metric span,
  .analytics-command-metric small {
    font-size: 10px;
  }

  .analytics-command-action {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .analytics-signal-grid,
  .analytics-clinic-grid {
    grid-template-columns: 1fr;
  }

  .analytics-diagnosis-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .analytics-diagnosis-item {
    min-height: 76px;
    padding: 10px;
  }

  .analytics-round-row {
    grid-template-columns: 1fr;
  }

  .analytics-round-row small {
    grid-column: 1;
  }

  .analytics-hero h1 {
    font-size: 36px;
  }

  .analytics-score {
    min-height: 124px;
  }

  .analytics-ring-row {
    grid-template-columns: 1fr;
  }

  .analytics-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .analytics-metric-card {
    min-height: 88px;
    padding: 12px;
  }

  .analytics-metric-value {
    font-size: 25px;
  }

  .analytics-primary-action {
    width: 100%;
  }

  .analytics-readiness-stat {
    text-align: left;
  }

  .analytics-evidence-grid,
  .analytics-topic-chip-list {
    grid-template-columns: 1fr;
  }

  .analytics-activity-calendar {
    grid-template-columns: repeat(7, 18px);
    justify-content: start;
  }

  .analytics-study-pulse-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .analytics-study-pulse-stats span {
    min-width: 0;
  }

  .analytics-heatmap-wrap {
    --analytics-heat-cell: 4.25px;
    --analytics-heat-gap: 1px;
    --analytics-heat-label-col: 24px;
    overflow-x: hidden;
    padding-bottom: 0;
  }

  .analytics-heatmap-months {
    font-size: 9px;
    margin-bottom: 5px;
  }

  .analytics-heatmap-body {
    gap: 5px;
    min-width: 0;
  }

  .analytics-heatmap-weekdays {
    font-size: 8px;
  }

  .analytics-heat-day {
    border-radius: 2px;
  }

  .analytics-heatmap-foot {
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  .analytics-topic-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-subject-system-row {
    grid-template-columns: 1fr;
  }

  .analytics-topic-rank-row {
    grid-template-columns: 28px repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
    min-height: 0;
  }

  .analytics-topic-rank-main {
    grid-column: 2 / -1;
  }

  .analytics-topic-rank-row em {
    grid-column: 1 / -1;
  }

  .analytics-subject-system-stats {
    text-align: left;
    grid-template-columns: repeat(3, auto auto);
    justify-content: start;
  }

  .analytics-topic-rank-number,
  .analytics-topic-rank-row em {
    justify-self: start;
  }

  .analytics-topic-metric {
    text-align: left;
  }

  .analytics-map-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-page-directory-head,
  .analytics-panel-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .analytics-subject-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-subject-card {
    min-height: 112px;
    padding: 11px;
  }
}

@media (max-width: 340px) {
  .analytics-heatmap-wrap {
    --analytics-heat-cell: 3.55px;
    --analytics-heat-label-col: 22px;
  }
}

@media (max-width: 460px) {
  .analytics-command-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-panel {
    padding: 18px;
  }

  .analytics-readiness-titleline,
  .analytics-bar-meta,
  .analytics-coverage-head,
  .analytics-system-head,
  .analytics-subject-system-stats {
    align-items: flex-start;
    flex-direction: column;
  }

  .analytics-subject-system-stats {
    display: flex;
    gap: 4px;
    text-align: left;
  }
}

@keyframes analytics-ring-grow {
  from {
    stroke-dasharray: 0 100;
  }
}

@keyframes analytics-bar-grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes analytics-point-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.72);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .analytics-ring-fill,
  .analytics-progress span,
  .analytics-map-point,
  .analytics-loading-status-dot,
  .analytics-loading-rail span,
  .analytics-loading-shimmer::after {
    animation: none;
  }

  .analytics-primary-action,
  .analytics-sidebar-action,
  .analytics-map-legend-item,
  .analytics-map-dot {
    transition: none;
  }

  .analytics-primary-action:hover,
  .analytics-sidebar-action:hover,
  .analytics-map-legend-item:hover,
  .analytics-map-legend-item:focus-visible {
    transform: none;
  }
}
/* =========================================================
   YOUR SPACE — personal block workspace
   ========================================================= */

/* Kill parent padding when Your Space is mounted */
.main-body:has(.your-space-shell) {
  padding: 0 !important;
  overflow: hidden !important;
}

.app-layout.app-your-space-active .main-header,
.app-layout.quickball-active.app-your-space-active .main-header {
  display: none !important;
}

.your-space-shell {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg, var(--bg0));
  color: var(--t1);
  overflow: hidden;
  position: relative;
  font-family: var(--font-body, system-ui);
}

.ys-sidebar {
  background: color-mix(in srgb, var(--surface-2, var(--bg1)) 97%, var(--bg2));
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--bd);
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 260px;
  z-index: 100;
  transform: translateX(-100%);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 2px 0 12px rgba(0,0,0,0.08);
  will-change: transform;
}

.ys-sidebar-open .ys-sidebar {
  transform: translateX(0);
}

.ys-sidebar-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s ease;
}

.ys-sidebar-open .ys-sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}


/* Embedded Mode Overrides */
.ys-embedded-mount {
  background: var(--bg, var(--bg0));
  display: flex;
  flex-direction: column;
}

.ys-side-head {
  padding: 16px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ys-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ys-title-row h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
}

.ys-flat-btn,
.ys-handle-btn,
.ys-block-tool,
.ys-command-btn {
  border: 0;
  background: transparent;
  color: var(--t2);
  cursor: pointer;
  font-family: var(--font-body, system-ui);
  transition: color .14s ease, background .14s ease;
}

.ys-flat-btn {
  height: auto;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.ys-handle-btn {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--t3);
  padding: 0;
}
.ys-handle-icon {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.6;
}
.ys-handle-btn:hover .ys-handle-icon {
  opacity: 1;
  transform: scale(1.15);
}

.ys-flat-btn:hover,
.ys-handle-btn:hover,
.ys-block-tool:hover,
.ys-command-btn:hover {
  color: var(--t1);
  background: color-mix(in srgb, var(--bg3) 60%, transparent);
}

.ys-search {
  height: 32px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: color-mix(in srgb, var(--bg0) 70%, var(--bg3));
  color: var(--t1);
  padding: 0 10px;
  outline: none;
  font: 500 13px var(--font-body, 'Inter', sans-serif);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ys-search:focus {
  background: color-mix(in srgb, var(--bg0) 50%, var(--bg3));
  border-color: color-mix(in srgb, var(--ac) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 10%, transparent);
}

.ys-page-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--bg, var(--bg0)) 70%, var(--bg3));
  border-radius: 3px;
}

.ys-page-list::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--bg, var(--bg0)) 50%, var(--bg3));
}

.ys-page-list {
  padding: 10px;
  overflow: auto;
  flex: 1;
}

.ys-page-row {
  min-height: 30px;
  border-radius: 5px;
  padding: 5px 8px;
  margin: 1px 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  color: var(--t2);
  cursor: pointer;
  border: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.ys-page-row:hover {
  background: var(--bg3);
  color: var(--t1);
}

.ys-page-row.active {
  background: color-mix(in srgb, var(--ac) 12%, transparent);
  color: var(--t1);
}

.ys-page-indent {
  width: calc(var(--ys-depth, 0) * 14px);
  height: 1px;
}

.ys-page-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 500;
}

.ys-page-meta {
  font-size: 10px;
  color: var(--t3);
}

.ys-editor {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ys-topbar {
  min-height: 44px;
  border-bottom: 1px solid color-mix(in srgb, var(--bd) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 18px;
  background: transparent;
}

.ys-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ys-sidebar-toggle {
  border: 0;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color .14s ease, background .14s ease;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ys-sidebar-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ys-sidebar-toggle:hover {
  color: var(--t1);
}

.ys-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
}

.ys-bc-sep {
  color: var(--t3);
  opacity: .4;
  flex-shrink: 0;
}

.ys-bc-link {
  border: 1px solid transparent;
  background: transparent;
  color: var(--t2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--rS);
  transition: all 0.2s;
  font-family: var(--font-body, system-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.ys-bc-link:hover {
  color: var(--ac);
  background: color-mix(in srgb, var(--ac) 10%, transparent);
}

.ys-bc-current {
  color: var(--t1);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.ys-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ys-page-scroll {
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  scroll-behavior: smooth;
}

.ys-page-container {
  position: relative;
  width: var(--page-width, 900px);
  min-width: 400px;
  max-width: 100%;
  margin: 0;
  margin-left: max(var(--page-margin-left, 0px), 80px);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ys-page {
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 24px 32px 80px;
  box-sizing: border-box;
}

.ys-page-resizer {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 100;
  background: transparent;
}

.ys-page-resizer.left {
  right: auto;
  left: -5px;
}

.ys-page-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  background: var(--t3);
  opacity: 0;
  transition: opacity 0.2s;
}

.ys-page-resizer:hover::after,
body.ys-resizing .ys-page-resizer::after {
  opacity: 1;
  background: var(--ac);
}

.ys-dock-body input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--t1);
  font-size: 14px;
  font-family: var(--font-body, system-ui);
}

.ys-page-title-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 6px;
}

.ys-page-title-wrap .ys-page-title {
  margin: 0;
  flex: 1;
}

.ys-title-link-btn {
  background: color-mix(in srgb, var(--ac) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ac) 20%, transparent);
  color: var(--ac);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  flex-shrink: 0;
}

.ys-title-link-btn:hover {
  background: var(--ac);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ac) 30%, transparent);
}

.ys-title-link-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.ys-page-title {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--t1);
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  resize: none;
  overflow: hidden;
  display: block;
}

.ys-page-title::placeholder {
  color: var(--t3);
}

.ys-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 4px 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--t3);
  font-size: 12px;
  font-weight: 500;
}

.ys-topic-pill button {
  border: 0;
  background: transparent;
  color: var(--ac);
  cursor: pointer;
  font: 500 12px var(--font-body, 'Inter', sans-serif);
}

.ys-template-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.ys-template-btn {
  min-height: 26px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--t3);
  padding: 0 8px;
  cursor: pointer;
  font: 500 12px var(--font-body, 'Inter', sans-serif);
}

.ys-template-btn:hover {
  color: var(--t1);
  background: color-mix(in srgb, var(--bg3) 50%, transparent);
}

.ys-empty {
  margin-top: 38px;
  padding: 32px 28px;
  color: var(--t3);
  border: 1px dashed color-mix(in srgb, var(--bd) 50%, transparent);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--bg2) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.ys-empty strong {
  color: var(--t2);
  font-size: 15px;
  font-weight: 600;
}

.ys-block {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 2px;
  margin: 0;
  border-radius: 4px;
}

.ys-block {
  transition: background 0.15s ease;
}

.ys-block:hover {
  background: color-mix(in srgb, var(--bg3) 30%, transparent);
}

.ys-handle {
  opacity: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  color: var(--t3);
  cursor: grab;
  font-size: 14px;
  user-select: none;
  transition: opacity 0.18s ease;
}

.ys-block:hover .ys-handle,
.ys-block:focus-within .ys-handle {
  opacity: 1;
}

.ys-handle:active {
  cursor: grabbing;
}

.ys-block-dragging {
  opacity: 0.4;
}

.ys-drop-above::after,
.ys-drop-below::after {
  content: "";
  position: absolute;
  left: var(--drop-indent-left, 0);
  right: 0;
  height: 2px;
  background: var(--ac);
  pointer-events: none;
  z-index: 10;
  border-radius: 1px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--ac) 40%, transparent);
  animation: dropPulse 1s ease-in-out infinite;
}

@keyframes dropPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.ys-drop-above::after {
  top: -1px;
}

.ys-drop-below::after {
  bottom: -1px;
}

.ys-block:hover .ys-handle {
  opacity: 1;
}

.ys-block.ys-multi-selected {
  background: color-mix(in srgb, var(--ac) 15%, transparent);
  border-radius: 4px;
  transition: background 0.15s ease;
}

/* Focus indicator — subtle left accent on active block */
.ys-block:focus-within {
  background: color-mix(in srgb, var(--bg3) 18%, transparent);
}

.ys-block:focus-within::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 1px;
  background: var(--ac);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}



.ys-editable {
  outline: none;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  transition: background 0.2s;
  border-radius: 4px;
  font-family: var(--font-body, system-ui);
  min-height: 24px;
  padding: 2px 4px;
  color: var(--t1);
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="light"] .ys-editable { color: #171717; }
[data-theme="dark"] .ys-editable, [data-theme="oled"] .ys-editable { color: #f8fafc; }

.ys-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--t3);
}

/* Inline formatting in editable blocks */
.ys-editable strong {
  font-weight: 600;
  color: inherit;
}
.ys-editable em {
  font-style: italic;
  color: inherit;
}

.ys-block.ys-block-heading1 {
  margin-top: 32px;
  margin-bottom: 8px;
}

.ys-block.ys-block-heading1:first-child {
  margin-top: 0;
}

.ys-block.ys-block-heading1 .ys-handle {
  padding-top: 7px;
}

.ys-block-heading1 .ys-editable {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--t1);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bd);
}

.ys-block.ys-block-heading2 {
  margin-top: 24px;
  margin-bottom: 6px;
}

.ys-block.ys-block-heading2:first-child {
  margin-top: 0;
}

.ys-block-main {
  min-width: 0;
  padding: 2px 0;
  position: relative;
}

.ys-block.ys-block-heading2 .ys-handle {
  padding-top: 6px;
}

.ys-block-heading2 .ys-editable {
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--t1);
}

.ys-block-bullet .ys-editable,
.ys-block-numbered .ys-editable {
  padding-left: 26px;
  line-height: 1.55;
}

.ys-bullet-prefix,
.ys-number-prefix {
  position: absolute;
  top: 6px;
  color: var(--t2);
  font-weight: 400;
  font-size: 15px;
  pointer-events: none;
  user-select: none;
}

.ys-bullet-prefix {
  left: 4px;
  font-size: 14px;
  line-height: 1.7;
  width: 20px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ys-bullet-prefix.depth-3,
.ys-bullet-prefix.depth-4 {
  font-size: 10px;
  top: 10px;
  left: 8px;
  width: auto;
  text-align: left;
}

.ys-number-prefix {
  left: 4px;
  font-variant-numeric: tabular-nums;
  width: 20px;
  text-align: right;
}

.ys-todo-line {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: flex-start;
  gap: 6px;
}

.ys-check {
  margin-top: 6px;
  accent-color: var(--ac);
}

.ys-block.checked .ys-editable {
  text-decoration: line-through;
  color: var(--t3);
}

.ys-toggle {
  border: 0;
  border-radius: 4px;
  background: transparent;
}

.ys-toggle-summary {
  min-height: 30px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  cursor: pointer;
  padding: 2px 0;
  border-radius: 4px;
  transition: background 0.12s ease;
}

.ys-toggle-summary:hover {
  background: color-mix(in srgb, var(--bg3) 60%, transparent);
}

.ys-toggle-arrow {
  width: 22px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(0deg);
}

/* Filled triangle via CSS border trick */
.ys-toggle-arrow::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid var(--t3);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: border-color 0.14s ease;
}

.ys-toggle-summary:hover .ys-toggle-arrow::before {
  border-left-color: var(--t1);
}

.ys-toggle.open .ys-toggle-arrow {
  transform: rotate(90deg);
}

.ys-indent-1 { margin-left: 26px; }
.ys-indent-2 { margin-left: 52px; }
.ys-indent-3 { margin-left: 78px; }
.ys-indent-4 { margin-left: 104px; }
.ys-indent-5 { margin-left: 130px; }
.ys-indent-6 { margin-left: 156px; }

.ys-block[class*="ys-indent-"]::before {
  display: none;
}

.ys-callout {
  border-left: 3px solid color-mix(in srgb, var(--ac) 50%, var(--t3));
  background: color-mix(in srgb, var(--ac) 4%, transparent);
  border-radius: 0 4px 4px 0;
  padding: 6px 14px;
  margin: 6px 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ys-callout .ys-editable {
  font-style: italic;
  color: var(--t2);
}

/* Enriched Contextual Colors for Callouts */
.ys-callout-warning {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}
.ys-callout-warning .ys-editable { color: #fca5a5; }
.ys-callout-warning .ys-editable strong { color: #f87171; }
.ys-callout-warning .ys-editable em { color: #ef4444; }

.ys-callout-tip {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.06);
}
.ys-callout-tip .ys-editable { color: #93c5fd; }
.ys-callout-tip .ys-editable strong { color: #60a5fa; }
.ys-callout-tip .ys-editable em { color: #3b82f6; }

.ys-callout-success {
  border-left-color: #22c55e;
  background: rgba(34, 197, 94, 0.06);
}
.ys-callout-success .ys-editable { color: #86efac; }
.ys-callout-success .ys-editable strong { color: #4ade80; }
.ys-callout-success .ys-editable em { color: #22c55e; }

.ys-callout-question {
  border-left-color: #a855f7;
  background: rgba(168, 85, 247, 0.06);
}
.ys-callout-question .ys-editable { color: #c4b5fd; }
.ys-callout-question .ys-editable strong { color: #a78bfa; }
.ys-callout-question .ys-editable em { color: #9333ea; }

.ys-callout-insight {
  border-left-color: #14b8a6;
  background: rgba(20, 184, 166, 0.06);
}
.ys-callout-insight .ys-editable { color: #5eead4; }
.ys-callout-insight .ys-editable strong { color: #2dd4bf; }
.ys-callout-insight .ys-editable em { color: #0d9488; }

/* Light & Paper Theme Overrides for Enriched Colors */
[data-theme="light"] .ys-callout-warning,
[data-theme="paper"] .ys-callout-warning { background: rgba(239, 68, 68, 0.06); border-left-color: #dc2626; }
[data-theme="light"] .ys-callout-warning .ys-editable,
[data-theme="paper"] .ys-callout-warning .ys-editable { color: #991b1b; }
[data-theme="light"] .ys-callout-warning .ys-editable strong,
[data-theme="paper"] .ys-callout-warning .ys-editable strong { color: #b91c1c; }
[data-theme="light"] .ys-callout-warning .ys-editable em,
[data-theme="paper"] .ys-callout-warning .ys-editable em { color: #dc2626; }

[data-theme="light"] .ys-callout-tip,
[data-theme="paper"] .ys-callout-tip { background: rgba(59, 130, 246, 0.06); border-left-color: #2563eb; }
[data-theme="light"] .ys-callout-tip .ys-editable,
[data-theme="paper"] .ys-callout-tip .ys-editable { color: #1e40af; }
[data-theme="light"] .ys-callout-tip .ys-editable strong,
[data-theme="paper"] .ys-callout-tip .ys-editable strong { color: #1d4ed8; }
[data-theme="light"] .ys-callout-tip .ys-editable em,
[data-theme="paper"] .ys-callout-tip .ys-editable em { color: #2563eb; }

[data-theme="light"] .ys-callout-success,
[data-theme="paper"] .ys-callout-success { background: rgba(34, 197, 94, 0.06); border-left-color: #16a34a; }
[data-theme="light"] .ys-callout-success .ys-editable,
[data-theme="paper"] .ys-callout-success .ys-editable { color: #166534; }
[data-theme="light"] .ys-callout-success .ys-editable strong,
[data-theme="paper"] .ys-callout-success .ys-editable strong { color: #15803d; }
[data-theme="light"] .ys-callout-success .ys-editable em,
[data-theme="paper"] .ys-callout-success .ys-editable em { color: #16a34a; }

[data-theme="light"] .ys-callout-question,
[data-theme="paper"] .ys-callout-question { background: rgba(168, 85, 247, 0.06); border-left-color: #9333ea; }
[data-theme="light"] .ys-callout-question .ys-editable,
[data-theme="paper"] .ys-callout-question .ys-editable { color: #6b21a8; }
[data-theme="light"] .ys-callout-question .ys-editable strong,
[data-theme="paper"] .ys-callout-question .ys-editable strong { color: #7e22ce; }
[data-theme="light"] .ys-callout-question .ys-editable em,
[data-theme="paper"] .ys-callout-question .ys-editable em { color: #9333ea; }

[data-theme="light"] .ys-callout-insight,
[data-theme="paper"] .ys-callout-insight { background: rgba(20, 184, 166, 0.06); border-left-color: #0d9488; }
[data-theme="light"] .ys-callout-insight .ys-editable,
[data-theme="paper"] .ys-callout-insight .ys-editable { color: #115e59; }
[data-theme="light"] .ys-callout-insight .ys-editable strong,
[data-theme="paper"] .ys-callout-insight .ys-editable strong { color: #0f766e; }
[data-theme="light"] .ys-callout-insight .ys-editable em,
[data-theme="paper"] .ys-callout-insight .ys-editable em { color: #0d9488; }

.ys-flashcard-block,
.ys-revision-block {
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--ac) 35%, var(--bd));
  border-radius: 0;
  background: transparent;
  padding: 4px 0 4px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ys-flashcard-face {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.ys-flashcard-answer {
  border-top: 1px solid color-mix(in srgb, var(--bd) 40%, transparent);
  padding-top: 6px;
  background: transparent;
}

.ys-card-hidden {
  min-height: 28px;
  display: flex;
  align-items: center;
  color: var(--t3);
  font-size: 12px;
  font-weight: 500;
}

.ys-ai-panel input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--t1);
  font-size: 14px;
  font-family: var(--font-body, system-ui);
}

.ys-revision-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 10px;
}

.ys-revision-grid > div {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.ys-block-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.ys-table-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

/* Mini action buttons — flat, premium, theme-aware */
.ys-mini-btn {
  border: none;
  background: none;
  color: var(--t3);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.ys-mini-btn:hover {
  color: var(--ac);
  background: var(--acD, color-mix(in srgb, var(--ac) 10%, transparent));
}

.ys-divider {
  border: 0;
  border-top: 1px solid var(--bd);
  margin: 18px 0;
}

.ys-image-block {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.ys-image-block:hover {
  background: color-mix(in srgb, var(--t3) 5%, transparent);
}

.ys-image-block img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 6px;
  border: 0;
  display: block;
  background: color-mix(in srgb, var(--bg2) 80%, transparent);
  transition: box-shadow 0.2s ease;
  cursor: default;
}

.ys-image-block:hover img {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px color-mix(in srgb, var(--bd) 50%, transparent);
}

/* Broken image fallback */
.ys-image-block img[src=""],
.ys-image-block img:not([src]) {
  display: none;
}

.ys-image-block img.ys-img-error {
  display: none;
}

.ys-image-block .ys-img-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 120px;
  border-radius: 6px;
  border: 1.5px dashed color-mix(in srgb, var(--t3) 30%, var(--bd));
  background: color-mix(in srgb, var(--bg2) 60%, transparent);
  color: var(--t3);
  font-size: 13px;
  font-weight: 500;
}

.ys-image-block .ys-img-fallback svg {
  width: 28px;
  height: 28px;
  opacity: 0.4;
  stroke: currentcolor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ys-image-caption {
  margin-top: 8px;
  color: var(--t3);
  font-size: 13px;
  text-align: center;
  width: 100%;
  line-height: 1.5;
}

.ys-image-caption .ys-editable {
  text-align: center;
  font-size: 13px;
  color: var(--t3);
  padding: 2px 8px;
}

.ys-image-caption .ys-editable:empty::before {
  text-align: center;
}

/* Dark theme image adjustments */
[data-theme="dark"] .ys-image-block:hover img,
[data-theme="oled"] .ys-image-block:hover img {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ys-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 14px;
}

.ys-table td,
.ys-table th {
  border: 1px solid color-mix(in srgb, var(--bd) 50%, transparent);
  min-width: 80px;
  padding: 7px 10px;
  outline: 0;
  vertical-align: top;
  font-size: 14px;
}

.ys-table th {
  background: color-mix(in srgb, var(--ac) 10%, var(--bg2));
}

.ys-ref-block,
.ys-ai-block,
.ys-mcq-block,
.ys-page-link-block {
  border: 1px solid var(--bd);
  border-radius: 7px;
  background: var(--bg1);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ys-block-kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--t3);
}

.ys-ai-q,
.ys-mcq-q {
  font-weight: 800;
  color: var(--t1);
}

.ys-ai-a,
.ys-mcq-exp {
  color: var(--t2);
  font-size: 14px;
  line-height: 1.55;
}

.ys-ai-a table {
  width: 100%;
  border-collapse: collapse;
}

.ys-ai-a th,
.ys-ai-a td {
  border: 1px solid var(--bd);
  padding: 6px;
}

.ys-block-menu {
  position: fixed;
  z-index: 3000;
  min-width: 176px;
  max-height: min(440px, calc(100vh - 32px));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--bd) 60%, transparent);
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.03);
  border-radius: 10px;
  padding: 6px;
  display: grid;
  gap: 4px;
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.ys-block-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ys-command-btn {
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.ys-menu-drag-handle {
  cursor: grab;
  text-align: center;
  color: var(--t3);
  padding: 4px;
  font-size: 10px;
  opacity: 0.5;
  margin-bottom: 2px;
  letter-spacing: 2px;
}

.ys-menu-drag-handle:active {
  cursor: grabbing;
}

.ys-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--bg, var(--bg0));
  color: var(--t1);
  border: 1px solid var(--bd);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}

.ys-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.note-fullscreen-open .ys-dock {
  z-index: 2400;
}

.ys-dock {
  position: fixed;
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: min(620px, calc(100vw - 36px));
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: var(--bg0);
  box-shadow: 0 22px 80px rgba(0,0,0,.28);
  z-index: 2200;
  display: none;
  overflow: hidden;
}

.ys-dock.open {
  display: block;
}

.ys-dock .your-space-shell {
  height: 100%;
  min-height: 0;
  grid-template-columns: 190px minmax(0, 1fr);
}

.ys-dock .ys-page {
  width: 100%;
  max-width: 100%;
  padding: 22px 32px 80px;
  box-sizing: border-box;
}

.ys-dock .ys-page-title {
  font-size: 28px;
}

.ys-dock-close {
  display: none;
}

.ys-dock .ys-dock-close {
  display: inline-flex;
}

@media (max-width: 900px) {
  .your-space-shell,
  .ys-dock .your-space-shell {
    height: calc(100vh - 52px);
    grid-template-columns: 1fr;
  }

  .ys-sidebar {
    display: none;
  }

  .ys-page {
    width: 100%;
    max-width: 100%;
    padding: 22px 20px 80px;
    box-sizing: border-box;
  }

  .ys-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .ys-page-title {
    font-size: 30px;
  }

  .ys-block {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .ys-revision-grid {
    grid-template-columns: 1fr;
  }

  .ys-handle {
    opacity: 1;
  }

  .ys-dock {
    inset: 0;
    width: 100vw;
    border: 0;
    border-radius: 0;
  }
}

/* =========================================================
   Polished workspace surface — clean & flat
   ========================================================= */

.your-space-shell {
  font-family: var(--font-body, 'Inter', sans-serif);
}

.ys-page {
  width: 100%;
  max-width: 100%;
  padding: 32px 32px 80px;
  box-sizing: border-box;
}

.ys-page-title {
  font: 700 32px/1.2 var(--font-heading, 'Inter', sans-serif);
  letter-spacing: -.01em;
  margin-bottom: 8px;
  min-height: 42px;
}

.ys-block-kicker {
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--t3);
  font-weight: 500;
}

.ys-table th {
  background: transparent;
  color: var(--t3);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ys-ref-block,
.ys-ai-block,
.ys-mcq-block,
.ys-page-link-block {
  border: 0;
  border-radius: 4px;
  background: transparent;
  padding: 6px 0;
}

.ys-ref-block:hover,
.ys-ai-block:hover,
.ys-mcq-block:hover,
.ys-page-link-block:hover {
  background: color-mix(in srgb, var(--bg3) 25%, transparent);
}

.ys-ai-a,
.ys-mcq-exp {
  font-size: 14px;
}

.ys-block-menu {
  border-radius: 6px;
  border: 0;
  background: var(--bg2);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}

.ys-command-btn {
  height: 30px;
  border-radius: 4px;
  border: 0;
  font-weight: 500;
}

.ys-dock {
  width: min(560px, calc(100vw - 36px));
  border: 0;
}

.ys-add-block-btn {
  color: var(--t3);
  font-size: 13px;
}

.ys-add-block-btn:hover {
  color: var(--t1);
}

@media (max-width: 900px) {
  .ys-page {
    width: 100%;
    max-width: 100%;
    padding: 20px 16px 80px;
    box-sizing: border-box;
  }

  .ys-page-title {
    font-size: 26px;
  }

  .ys-editable {
    font-size: 14px;
  }
}

/* =========================================================
   Page tree refinements
   ========================================================= */

.ys-page-row {
  grid-template-columns: auto 18px 16px minmax(0, 1fr) auto auto;
  gap: 4px;
  padding: 4px 5px 4px 7px;
}

.ys-tree-toggle,
.ys-row-action {
  border: 0;
  background: transparent;
  color: var(--t3);
  border-radius: 4px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  cursor: pointer;
  font: 500 12px var(--font-body, 'Inter', sans-serif);
}

.ys-tree-toggle.empty {
  cursor: default;
}

.ys-tree-toggle:not(.empty):hover,
.ys-row-action:hover {
  background: color-mix(in srgb, var(--bg3) 60%, transparent);
  color: var(--t1);
}

.ys-page-doc {
  width: 13px;
  height: 15px;
  border: 1.5px solid currentcolor;
  border-radius: 2px;
  opacity: .45;
  position: relative;
  display: inline-block;
}

.ys-page-doc::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  right: 3px;
  height: 1.5px;
  background: currentcolor;
  box-shadow: 0 4px 0 currentcolor;
  opacity: .6;
}

.ys-page-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.ys-page-row:hover .ys-page-row-actions,
.ys-page-row.active .ys-page-row-actions {
  opacity: 1;
  pointer-events: auto;
}

.ys-page-row:hover .ys-page-meta,
.ys-page-row.active .ys-page-meta {
  display: none;
}

.ys-page-meta {
  min-width: 18px;
  text-align: right;
}

.ys-page-menu {
  position: fixed;
  z-index: 3001;
  min-width: 196px;
  max-height: min(260px, calc(100vh - 32px));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--bd) 60%, transparent);
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.03);
  border-radius: 10px;
  padding: 6px;
  display: grid;
  gap: 4px;
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.ys-page-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ys-edited {
  color: var(--t3);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.ys-top-actions .ys-flat-btn {
  color: var(--t3);
  font-size: 14px;
  padding: 4px 6px;
}

.ys-top-actions .ys-flat-btn:hover {
  color: var(--t1);
}

.ys-subpage-list {
  display: grid;
  gap: 1px;
  margin: 4px 0 14px;
}

.ys-subpage-link {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--bd) 40%, transparent);
  background: color-mix(in srgb, var(--bg2) 50%, transparent);
  color: var(--t2);
  border-radius: var(--rS);
  padding: 6px 10px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  font: 500 13px var(--font-body, 'Inter', sans-serif);
  transition: all 0.15s ease;
}

.ys-subpage-link:hover {
  background: color-mix(in srgb, var(--ac) 8%, transparent);
  border-color: color-mix(in srgb, var(--ac) 25%, transparent);
  color: var(--t1);
  transform: translateX(2px);
}

.ys-subpage-link span:not(.ys-page-doc) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ys-subpage-link small {
  color: var(--t3);
  font-size: 11px;
}

.ys-annotation-surface mark.nd-hl,
.ys-annotation-surface strong.nd-bold,
.ys-annotation-surface em.nd-italic,
.ys-annotation-surface span.nd-underline {
  cursor: pointer;
}

.ys-page-title {
  color: var(--t1);
  min-height: 42px;
  padding: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}

.ys-template-strip {
  gap: 6px;
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  transition: opacity .15s ease, height .15s ease, margin .15s ease;
}

.ys-page:hover .ys-template-strip,
.ys-page:focus-within .ys-template-strip {
  opacity: 1;
  height: 26px;
  margin: 0 0 14px;
}

.ys-callout {
  margin: 4px 0;
}

.ys-table-shell {
  position: relative;
  width: 100%;
  margin: 12px 0 18px;
  overflow-x: auto;
}

.ys-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
  line-height: 1.45;
  color: var(--t1);
  background: transparent;
  font-weight: 400;
}

.ys-table td,
.ys-table th {
  border: 1px solid color-mix(in srgb, var(--bd) 50%, transparent);
  min-width: 90px;
  padding: 8px 10px;
  vertical-align: top;
  outline: 0;
  white-space: normal;
}

.ys-table th {
  background: color-mix(in srgb, var(--bg3) 30%, transparent);
  color: var(--t2);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Removed hardcoded light theme overrides to inherit from main app themes */

.ys-table td:focus,
.ys-table th:focus {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ac) 50%, transparent);
}

.ys-table-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity .15s ease;
}

.ys-table-shell:hover .ys-table-actions,
.ys-table-shell:focus-within .ys-table-actions {
  opacity: 1;
}

.ys-empty {
  max-width: 620px;
}

@media (max-width: 900px) {
  .ys-edited {
    display: none;
  }

  .ys-top-actions {
    gap: 4px;
  }

  .ys-page {
    width: 100%;
    max-width: 100%;
    padding: 20px 16px 80px;
    box-sizing: border-box;
  }

  .ys-page-title {
    font-size: 26px;
  }

  .ys-editable {
    font-size: 14px;
  }
}

.ys-page-click-area {
  min-height: 40vh;
  cursor: text;
}

/* =========================================================
   Phone workspace adaptation
   ========================================================= */

@media (max-width: 900px) {
  .app-layout.app-your-space-active .main-content,
  .app-layout.quickball-active.app-your-space-active .main-content {
    height: 100dvh !important;
    min-height: 0 !important;
  }

  .main-body:has(> .your-space-shell) {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .main-body > .your-space-shell {
    height: 100% !important;
    min-height: 0;
  }

  .main-body > .your-space-shell .ys-sidebar {
    display: flex;
    width: min(320px, 88vw);
    max-width: calc(100vw - 28px);
  }

  .main-body > .your-space-shell .ys-topbar {
    min-height: 0;
    padding: calc(6px + env(safe-area-inset-top)) 10px 7px;
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
    background: color-mix(in srgb, var(--bg, var(--bg0)) 94%, transparent);
  }

  .main-body > .your-space-shell .ys-topbar-left {
    width: 100%;
    min-width: 0;
    min-height: 40px;
  }

  .main-body > .your-space-shell .ys-sidebar-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    border-radius: 8px;
  }

  .main-body > .your-space-shell .ys-breadcrumb {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .main-body > .your-space-shell .ys-breadcrumb::-webkit-scrollbar,
  .main-body > .your-space-shell .ys-top-actions::-webkit-scrollbar {
    display: none;
  }

  .main-body > .your-space-shell .ys-bc-link {
    max-width: min(42vw, 150px);
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
  }

  .main-body > .your-space-shell .ys-bc-current {
    max-width: min(54vw, 190px);
  }

  .main-body > .your-space-shell .ys-top-actions {
    width: 100%;
    gap: 5px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 44px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .main-body > .your-space-shell .ys-top-actions .ys-flat-btn {
    min-width: 40px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 8px;
  }

  .main-body > .your-space-shell .ys-top-actions .ys-dock-close {
    display: none;
  }

  .main-body > .your-space-shell .ys-page-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .main-body > .your-space-shell .ys-page-container {
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    margin-left: 0 !important;
    flex: 1;
  }

  .main-body > .your-space-shell .ys-page-resizer {
    display: none;
  }

  .main-body > .your-space-shell .ys-page {
    padding: 22px max(16px, env(safe-area-inset-right)) calc(104px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .main-body > .your-space-shell .ys-page-title {
    font-size: 28px;
    min-height: 34px;
  }

  .main-body > .your-space-shell .ys-editable {
    font-size: 16px;
  }

  .main-body > .your-space-shell .ys-block-heading1 .ys-editable {
    font-size: 24px;
  }

  .main-body > .your-space-shell .ys-block-heading2 .ys-editable {
    font-size: 20px;
  }

  .main-body > .your-space-shell .ys-indent-1 { margin-left: 18px; }
  .main-body > .your-space-shell .ys-indent-2 { margin-left: 36px; }
  .main-body > .your-space-shell .ys-indent-3 { margin-left: 54px; }
  .main-body > .your-space-shell .ys-indent-4 { margin-left: 72px; }
  .main-body > .your-space-shell .ys-indent-5 { margin-left: 90px; }
  .main-body > .your-space-shell .ys-indent-6 { margin-left: 108px; }
}

@media (max-width: 560px) {
  .main-body > .your-space-shell .ys-page {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .main-body > .your-space-shell .ys-block {
    grid-template-columns: 20px minmax(0, 1fr);
  }
}

/* =========================================================
   Embedded Your Space lens inside AVITAN OS
   ========================================================= */

.ys-embedded-mount {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.ys-embedded-mount .your-space-shell {
  height: 100%;
  min-height: 0;
  background: transparent;
}

.ys-embedded-mount .ys-editor {
  min-height: 0;
}

.ys-embedded-mount .ys-topbar {
  height: 34px;
  min-height: 34px;
  box-sizing: border-box;
  padding: 3px 8px;
  gap: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--bd, rgba(0,0,0,.08)) 56%, transparent);
}

.ys-embedded-mount .ys-sidebar-toggle {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: 15px;
}

.ys-embedded-mount .ys-breadcrumb {
  font-size: 11px;
  line-height: 1.1;
}

.ys-embedded-mount .ys-edited,
.ys-embedded-mount .ys-dock-close {
  display: none !important;
}

.ys-embedded-mount .ys-top-actions {
  gap: 4px;
  flex-wrap: nowrap;
}

.ys-embedded-mount .ys-top-actions .ys-flat-btn {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 7px;
  font-size: 13px;
}

.ys-embedded-mount .ys-page-scroll {
  min-height: 0;
}

.ys-embedded-mount .ys-page-container {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  margin-left: 0 !important;
}

.ys-embedded-mount .ys-page {
  padding: 12px 14px 56px;
}

.ys-embedded-mount .ys-page-title {
  min-height: 30px;
  margin-bottom: 2px;
  font-size: 24px;
  line-height: 1.18;
}

.ys-embedded-mount .ys-topic-pill {
  margin-bottom: 6px;
  font-size: 11px;
}

.ys-embedded-mount .ys-template-strip {
  margin-bottom: 6px;
}

.ys-embedded-mount .ys-block {
  grid-template-columns: 22px minmax(0, 1fr);
}

.ys-embedded-mount .ys-editable {
  font-size: 14px;
  line-height: 1.5;
}

.ys-embedded-mount .ys-block-heading1 .ys-editable {
  font-size: 21px;
}

.ys-embedded-mount .ys-block-heading2 .ys-editable {
  font-size: 17px;
}

.ys-embedded-mount .ys-page-resizer {
  display: none;
}

.ys-embedded-mount .ys-sidebar {
  width: min(260px, 86%);
  z-index: 120;
}

.ys-embedded-mount .ys-sidebar-backdrop {
  z-index: 110;
}

/* ========================================================= */
/* Canvas Engine Integration                                   */
/* ========================================================= */

.user-canvas-image-wrapper {
  position: absolute;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  z-index: 10;
  display: block;
  min-width: 50px;
  max-width: 400px;
  background: var(--surface);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s;
  transform-origin: center top;
  cursor: grab;
}

.user-canvas-image-wrapper.is-dragging {
  transform: scale(1.03);
  box-shadow: 0 16px 32px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.05);
  z-index: 20;
  cursor: grabbing;
}

.user-canvas-image-wrapper:hover {
  z-index: 20;
}

.user-canvas-drag-handle {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  justify-content: flex-end;
  padding: 8px;
  z-index: 2;
  pointer-events: none;
}

.user-canvas-image-wrapper:hover .user-canvas-drag-handle {
  opacity: 1;
}

.user-canvas-delete-btn {
  pointer-events: auto;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}

.user-canvas-image {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none; 
}

.invisible-resize-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: transparent;
  z-index: 15;
}
.invisible-resize-handle.nw { top: -2px; left: -2px; cursor: nwse-resize; }
.invisible-resize-handle.ne { top: -2px; right: -2px; cursor: nesw-resize; }
.invisible-resize-handle.sw { bottom: -2px; left: -2px; cursor: nesw-resize; }
.invisible-resize-handle.se { bottom: -2px; right: -2px; cursor: nwse-resize; }

.smart-guide {
  position: fixed;
  background: var(--accent-focus);
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  transition: opacity 0.1s ease-out;
  box-shadow: 0 0 3px color-mix(in srgb, var(--accent-focus) 40%, transparent);
}

.smart-guide.active {
  opacity: 0.85;
}

.smart-guide.guide-v {
  top: 0;
  bottom: 0;
  width: 1px;
}

.smart-guide.guide-h {
  left: 0;
  right: 0;
  height: 1px;
}

.canvas-lightbox {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.canvas-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
.canvas-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

/* Premium dropdown glass shared with the rest of the app. */
.ys-block-menu,
.ys-page-menu {
  border: 1px solid var(--dn-dropdown-line, rgba(255, 255, 255, .82));
  border-radius: 12px;
  background: transparent;
  color: var(--dn-ink, var(--t1));
  box-shadow: var(--dn-dropdown-shadow, 0 22px 62px rgba(18, 22, 18, .16), 0 3px 10px rgba(18, 22, 18, .08), 0 0 0 1px rgba(18, 22, 18, .035), inset 0 1px 0 rgba(255, 255, 255, .92));
  backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
  -webkit-backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
  background-clip: padding-box;
  overflow: auto;
  isolation: isolate;
  font-family: var(--dn-dropdown-font, 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif);
  gap: 2px;
  letter-spacing: 0;
}

.ys-block-menu::before,
.ys-page-menu::before,
.ys-block-menu::after,
.ys-page-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.ys-block-menu::before,
.ys-page-menu::before {
  z-index: 0;
  background: var(--dn-dropdown-bg, linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(242, 242, 242, .42)));
  backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
  -webkit-backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
}

.ys-block-menu::after,
.ys-page-menu::after {
  z-index: 0;
  background: var(--dn-dropdown-scrim, linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .16) 48%, rgba(214, 214, 214, .18) 100%));
}

.ys-command-btn {
  position: relative;
  z-index: 1;
  min-height: 40px;
  border-radius: 8px;
  color: var(--dn-dropdown-muted, rgba(18, 22, 18, .78));
  font-family: var(--dn-dropdown-font, 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: var(--dn-dropdown-item-size, 14px);
  font-weight: var(--dn-dropdown-item-weight, 500);
  line-height: 1.25;
  transition: background .12s ease, color .12s ease;
}

.ys-command-btn strong {
  color: inherit;
  font: inherit;
}

.ys-command-btn span {
  color: color-mix(in srgb, currentcolor 62%, transparent);
  font-size: var(--dn-dropdown-label-size, 13px);
  font-weight: var(--dn-dropdown-label-weight, 400);
  line-height: 1.25;
}

.ys-command-btn:hover,
.ys-command-btn:focus-visible {
  color: var(--dn-ink, var(--t1));
  background: var(--dn-dropdown-hover, rgba(18, 22, 18, .055));
  outline: 0;
}

.ys-menu-drag-handle {
  display: none;
  color: var(--dn-dropdown-muted, var(--dn-muted, var(--t3)));
  font-family: var(--dn-dropdown-font, 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif);
  letter-spacing: 1px;
}
/* ── Subscription System Styles ── */

/* Tier Badge */
.sub-tier-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.sub-tier-none { background: var(--t3, #888); color: #fff; }
.sub-tier-starter { background: linear-gradient(135deg, #8fd3f4, #84fab0); color: #092018; }
.sub-tier-core { background: linear-gradient(135deg, #4facfe, #00f2fe); color: #000; }
.sub-tier-essentials { background: linear-gradient(135deg, #4facfe, #00f2fe); color: #000; }
.sub-tier-pro { background: linear-gradient(135deg, #f093fb, #f5576c); color: #fff; }
.sub-tier-elite { background: linear-gradient(135deg, #f6d365, #fda085); color: #24120a; }
.sub-tier-vip {
    position: relative;
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    color: #1a1a1a;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    box-shadow: 0 2px 12px rgba(191,149,63,0.35);
    overflow: hidden;
}
.sub-tier-vip::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.15) 30%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0.15) 70%,
        transparent 100%
    );
    animation: vipShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes vipShimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}
.ucp-vip-title {
    position: relative;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #b38728);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 4px;
    overflow: hidden;
}
.ucp-vip-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.2) 30%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0.2) 70%,
        transparent 100%
    );
    animation: vipShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Status Text */
.sub-status { font-size: 13px; margin-top: 4px; }
.sub-status.active { color: #4ade80; }
.sub-status.expired { color: #f87171; }
.sub-status.inactive { color: var(--t3, #888); }

/* Usage Meters */
.sub-meter {
    margin: 12px 0;
}
.sub-meter-label {
    font-size: 12px;
    color: var(--t2, #aaa);
    margin-bottom: 4px;
}
.sub-meter-count {
    font-size: 12px;
    color: var(--t3, #888);
    float: right;
    margin-top: -16px;
}
.sub-meter-track {
    height: 6px;
    background: var(--bg2, #2a2a3e);
    border-radius: 3px;
    overflow: hidden;
}
.sub-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.sub-meter-fill.warning {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

/* Domain Chips */
.sub-domain-chip {
    display: inline-block;
    padding: 4px 10px;
    margin: 2px 4px 2px 0;
    background: var(--bg2, #2a2a3e);
    border-radius: 12px;
    font-size: 12px;
    color: var(--t1, #eee);
}
.sub-domain-empty {
    font-size: 13px;
    color: var(--t3, #888);
    font-style: italic;
}

/* Buttons */
.sub-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}
.sub-btn-primary {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: #000;
}
.sub-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.sub-btn-secondary {
    background: var(--bg2, #2a2a3e);
    color: var(--t1, #eee);
    border: 1px solid var(--border, #3a3a4e);
}
.sub-btn-secondary:hover { border-color: #4facfe; }

/* ── Upgrade Modal ── */
.sub-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100800;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: subFadeIn 0.2s ease;
}
@keyframes subFadeIn { from { opacity: 0; } to { opacity: 1; } }

.sub-modal {
    position: relative;
    width: 90%;
    max-width: 1120px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg1, #1a1a2e);
    border: 1px solid var(--border, #3a3a4e);
    border-radius: 16px;
    padding: 32px;
    animation: subSlideUp 0.3s ease;
}
@keyframes subSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.sub-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--t3, #888);
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.15s ease;
}
.sub-modal-close:hover { background: var(--bg2, #2a2a3e); color: var(--t1, #eee); }

.sub-modal-header {
    text-align: center;
    margin-bottom: 24px;
}
.sub-modal-header h2 {
    margin: 0 0 8px;
    font-size: 24px;
    color: var(--t1, #eee);
}
.sub-modal-header p {
    margin: 0;
    font-size: 14px;
    color: var(--t3, #888);
}

/* Billing Toggle */
.sub-billing-toggle {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--bg2, #2a2a3e);
    border-radius: 10px;
    padding: 4px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.sub-billing-toggle button {
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--t3, #888);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sub-billing-toggle button.active {
    background: var(--bg1, #1a1a2e);
    color: var(--t1, #eee);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.sub-save-badge {
    display: inline-block;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    font-weight: 700;
}

/* Domain Picker */
.sub-domain-picker {
    margin-bottom: 24px;
    text-align: center;
}
.sub-domain-label {
    font-size: 13px;
    color: var(--t2, #aaa);
    margin-bottom: 10px;
}
.sub-domain-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.sub-domain-option {
    padding: 8px 16px;
    border: 1px solid var(--border, #3a3a4e);
    border-radius: 8px;
    background: var(--bg2, #2a2a3e);
    color: var(--t2, #aaa);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sub-domain-option:hover { border-color: #4facfe; color: var(--t1, #eee); }
.sub-domain-option.selected {
    border-color: #4facfe;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.2), rgba(0, 242, 254, 0.2));
    color: var(--t1, #eee);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.25);
}
.sub-domain-picker.shake {
    animation: subShake 0.4s ease;
}
@keyframes subShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

/* Pricing Cards */
.sub-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}
@media (max-width: 600px) {
    .sub-cards { grid-template-columns: 1fr; }
}

.sub-card {
    position: relative;
    background: var(--bg2, #2a2a3e);
    border: 1px solid var(--border, #3a3a4e);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
}
.sub-card:hover { border-color: rgba(79, 172, 254, 0.3); }
.sub-card-popular {
    border-color: #4facfe;
    box-shadow: 0 0 20px rgba(79, 172, 254, 0.15);
}
.sub-card-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: #000;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sub-card-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--t1, #eee);
    margin-bottom: 8px;
}
.sub-card-price {
    margin-bottom: 16px;
}
.sub-price-amount {
    font-size: 32px;
    font-weight: 800;
    color: var(--t1, #eee);
}
.sub-price-period {
    font-size: 14px;
    color: var(--t3, #888);
    margin-left: 4px;
}
.sub-price-fee,
.sub-price-total {
    font-size: 12px;
    color: var(--t3, #888);
    line-height: 1.35;
    margin-top: -8px;
    margin-bottom: 10px;
}
.sub-price-total {
    color: var(--t2, #aaa);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 16px;
}
.sub-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.sub-card-features li {
    font-size: 13px;
    color: var(--t2, #aaa);
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
}
.sub-card-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4ade80;
    font-weight: 700;
}
.sub-plan-select-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: #000;
}
.sub-plan-select-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.sub-plan-select-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.sub-card-popular .sub-plan-select-btn {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    color: #fff;
}

/* Success Toast */
.sub-success-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 100801;
    opacity: 0;
    transition: all 0.3s ease;
}
.sub-success-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.sub-success-content {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #065f46;
    color: #d1fae5;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.sub-success-icon {
    font-size: 18px;
    color: #4ade80;
}

/* ── AVITAN Upgrade Prompt ── */
.avitan-upgrade-prompt {
    margin: 12px 16px;
    padding: 14px 18px;
    background: rgba(79, 172, 254, 0.1);
    border: 1px solid rgba(79, 172, 254, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: subSlideUp 0.3s ease;
}
.avitan-upgrade-text {
    flex: 1;
    font-size: 13px;
    color: var(--t1, #eee);
    line-height: 1.4;
}
.avitan-upgrade-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease;
}
.avitan-upgrade-btn:hover { opacity: 0.9; }

/* ── ElevenLabs-inspired Billing Surface ── */
.sub-modal-overlay {
    z-index: 2147483647;
    align-items: stretch;
    justify-content: stretch;
    background: #fff;
    backdrop-filter: none;
}

.sub-modal {
    width: 100vw;
    max-width: none;
    min-width: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    box-sizing: border-box;
    padding: 0;
    border-radius: 0;
    background: #fff;
    border: 0;
    color: #080808;
    box-shadow: none;
}

.sub-modal * {
    letter-spacing: 0;
}

.sub-modal-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 clamp(18px, 4vw, 48px);
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid #eceef2;
}

.sub-topbar-left {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.sub-modal .sub-modal-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid #0a0a0a;
    border-radius: 8px;
    background: #0a0a0a;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.sub-modal .sub-modal-back:hover {
    background: #262626;
    border-color: #262626;
}

.sub-breadcrumb {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
    color: #687083;
    font-size: 15px;
}

.sub-breadcrumb strong {
    color: #0a0a0a;
    font-weight: 700;
}

.sub-modal .sub-modal-close {
    position: static;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-size: 22px;
}

.sub-modal .sub-modal-close:hover {
    background: #f6f7f9;
    color: #000;
}

.sub-modal-body {
    max-width: 1680px;
    margin: 0 auto;
    padding: 30px clamp(24px, 4vw, 56px) 44px;
}

.sub-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.sub-account-panel {
    min-width: 0;
    min-height: 108px;
    padding: 20px 24px;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    background: #fff;
}

.sub-panel-row,
.sub-panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sub-panel-actions {
    justify-content: flex-start;
    margin-top: 12px;
}

.sub-panel-kicker {
    color: #697083;
    font-size: 14px;
    font-weight: 600;
}

.sub-panel-value,
.sub-panel-title {
    margin-top: 6px;
    color: #000;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.1;
}

.sub-panel-title {
    font-size: 20px;
}

.sub-panel-copy {
    max-width: 620px;
    margin: 12px 0 0;
    color: #687083;
    font-size: 15px;
    line-height: 1.45;
}

.sub-mini-btn,
.sub-mini-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #dfe2e7;
    border-radius: 8px;
    background: #fff;
    color: #050505;
    font-size: 14px;
    font-weight: 700;
}

.sub-mini-btn {
    cursor: pointer;
}

.sub-mini-btn:hover {
    background: #f6f7f9;
}

.sub-mini-btn-dark {
    background: #050505;
    border-color: #050505;
    color: #fff;
}

.sub-mini-btn-dark:hover {
    background: #222;
}

.sub-mini-pill {
    background: #f4f5f7;
    color: #535b6d;
    font-weight: 600;
}

.sub-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.sub-section-head h2 {
    margin: 0 0 8px;
    color: #000;
    font-size: 26px;
    font-weight: 800;
}

.sub-section-head p {
    margin: 0;
    color: #697083;
    font-size: 15px;
}

.sub-currency-toggle,
.sub-billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid #e3e6ec;
    border-radius: 8px;
    background: #f5f6f8;
    max-width: 100%;
}

.sub-currency-toggle button,
.sub-billing-toggle button {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #687083;
    font-size: 13px;
    font-weight: 800;
}

.sub-currency-toggle button.active,
.sub-billing-toggle button.active {
    background: #fff;
    color: #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sub-save-badge {
    background: #050505;
    color: #fff;
    border-radius: 6px;
    font-size: 10px;
}

.sub-pricing-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.sub-domain-picker {
    flex: 1;
    margin: 0;
    text-align: right;
}

.sub-domain-label {
    margin-bottom: 8px;
    color: #697083;
    font-size: 13px;
    font-weight: 700;
}

.sub-domain-grid {
    justify-content: flex-end;
}

.sub-domain-option {
    min-height: 36px;
    border: 1px solid #dfe2e7;
    border-radius: 8px;
    background: #fff;
    color: #202431;
    font-size: 14px;
    font-weight: 650;
}

.sub-domain-option:hover {
    border-color: #9ca3af;
    color: #000;
    background: #f9fafb;
}

.sub-domain-option.selected {
    border-color: #050505;
    background: #050505;
    color: #fff;
    box-shadow: none;
}

.sub-domain-warning {
    display: none;
    margin-top: 10px;
    color: #c2410c;
    font-size: 13px;
    font-weight: 700;
}

.sub-medical-scope {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    text-align: right;
}

.sub-medical-scope-label {
    color: #697083;
    font-size: 13px;
    font-weight: 800;
}

.sub-medical-scope-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 18px;
    border-radius: 8px;
    background: #050505;
    color: #fff;
    font-size: 14px;
    font-weight: 850;
}

.sub-medical-scope-copy {
    max-width: 330px;
    color: #697083;
    font-size: 13px;
    line-height: 1.35;
}

.sub-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.sub-topup-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(230px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.sub-domain-addon-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #eceef2;
}

.sub-voice-recharge-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #eceef2;
}

.sub-addon-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.sub-addon-header h3 {
    margin: 0 0 6px;
    color: #0a0a0a;
    font-size: 20px;
    font-weight: 850;
}

.sub-addon-header p {
    margin: 0;
    color: #697083;
    font-size: 14px;
    line-height: 1.4;
}

.sub-addon-note {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid #e3e6ec;
    border-radius: 8px;
    background: #f5f6f8;
    color: #4b5565;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.sub-addon-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: 12px;
}

.sub-addon-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    padding: 16px;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    background: #fff;
}

.sub-addon-name {
    color: #0a0a0a;
    font-size: 15px;
    font-weight: 850;
}

.sub-addon-status {
    margin-top: 4px;
    color: #697083;
    font-size: 12px;
    font-weight: 700;
}

.sub-addon-price {
    color: #0a0a0a;
    font-size: 18px;
    font-weight: 850;
    white-space: nowrap;
}

.sub-addon-price span {
    color: #697083;
    font-size: 12px;
    font-weight: 700;
}

body.sub-billing-surface-open .quickball,
body.sub-billing-surface-open .quickball-panel,
body.sub-billing-surface-open .quickball-overlay,
body.sub-billing-surface-open #avitanDock,
body.sub-billing-surface-open #avitanPanel,
body.sub-billing-surface-open #wmDock {
    display: none !important;
}

.sub-custom-credit-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(13, 13, 13, 0.38);
}

.sub-credit-modal {
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    background: #fff;
    color: #0a0a0a;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}

.sub-credit-modal-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 8px;
}

.sub-credit-modal-topbar h2 {
    margin: 4px 0 0;
    color: #0a0a0a;
    font-size: 26px;
    font-weight: 850;
}

.sub-credit-modal .sub-modal-close {
    position: static;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #111;
    font-size: 22px;
    cursor: pointer;
}

.sub-credit-modal-copy {
    max-width: 620px;
    margin: 0 0 18px;
    color: #697083;
    font-size: 15px;
    line-height: 1.45;
}

.sub-credit-modal > .sub-currency-toggle {
    margin-bottom: 18px;
}

.sub-credit-models {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}

.sub-credit-model {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #dfe2e7;
    border-radius: 8px;
    background: #fff;
    color: #202431;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}

.sub-credit-model.active {
    border-color: #050505;
    background: #050505;
    color: #fff;
}

.sub-credit-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px;
}

.sub-credit-slider-panel,
.sub-credit-total-panel {
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    background: #fff;
}

.sub-credit-slider-panel {
    padding: 20px;
}

.sub-credit-total-panel {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.sub-credit-label-row,
.sub-credit-range-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sub-credit-label-row span,
.sub-credit-total-kicker {
    color: #697083;
    font-size: 13px;
    font-weight: 800;
}

.sub-credit-label-row strong {
    color: #0a0a0a;
    font-size: 18px;
    font-weight: 850;
}

.sub-credit-range {
    width: 100%;
    margin: 24px 0 10px;
    accent-color: #050505;
}

.sub-credit-range-labels span {
    color: #697083;
    font-size: 12px;
    font-weight: 800;
}

.sub-credit-slider-panel p {
    margin: 18px 0 0;
    color: #536073;
    font-size: 14px;
    line-height: 1.45;
}

.sub-credit-total {
    margin-top: 8px;
    color: #0a0a0a;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
}

.sub-credit-fee,
.sub-credit-selected {
    margin-top: 10px;
    color: #697083;
    font-size: 13px;
    line-height: 1.4;
}

.sub-credit-selected {
    margin-top: 16px;
    font-weight: 800;
}

.sub-credit-buy-btn {
    width: 100%;
    margin-top: auto;
    background: #050505;
    color: #fff;
}

.sub-card {
    display: flex;
    flex-direction: column;
    min-height: 386px;
    padding: 24px 26px;
    border: 1px solid #e2e5ea;
    border-radius: 8px;
    background: #fff;
    color: #0a0a0a;
    box-shadow: none;
}

.sub-topup-card {
    min-height: 318px;
}

.sub-topup-provider {
    margin-bottom: 8px;
    color: #697083;
    font-size: 13px;
    font-weight: 800;
}

.sub-topup-detail {
    min-height: 44px;
    margin: 0 0 18px;
    color: #536073;
    font-size: 14px;
    line-height: 1.4;
}

.sub-topup-card .sub-card-name {
    margin-bottom: 12px;
}

.sub-topup-card .sub-card-price {
    margin-top: auto;
}

.sub-card:hover {
    border-color: #b7bcc7;
}

.sub-card-popular {
    border-color: #0a0a0a;
    box-shadow: inset 0 0 0 1px #0a0a0a;
}

.sub-card-badge {
    top: -12px;
    right: 18px;
    border-radius: 8px;
    background: #0a0a0a;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0;
}

.sub-card-name {
    color: #0a0a0a;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 18px;
}

.sub-card-price {
    margin-bottom: 6px;
}

.sub-price-amount {
    color: #0a0a0a;
    font-size: 36px;
    font-weight: 850;
    line-height: 1;
}

.sub-price-period {
    color: #697083;
    font-size: 15px;
}

.sub-price-fee,
.sub-price-total {
    color: #697083;
    font-size: 13px;
    line-height: 1.35;
    margin: 8px 0 0;
}

.sub-price-total {
    color: #202431;
    font-weight: 800;
    margin-bottom: 16px;
}

.sub-card-features {
    flex: 1;
    margin: 0 0 18px;
}

.sub-card-features li {
    color: #232837;
    font-size: 14px;
    line-height: 1.4;
    padding: 4px 0 4px 22px;
}

.sub-card-features li::before {
    color: #0a0a0a;
}

.sub-plan-select-btn {
    margin-top: auto;
    min-height: 44px;
    border: 1px solid #0a0a0a;
    border-radius: 8px;
    background: #fff;
    color: #0a0a0a;
    font-size: 14px;
    font-weight: 850;
}

.sub-plan-select-btn:hover {
    background: #f3f4f6;
    opacity: 1;
    transform: none;
}

.sub-card-popular .sub-plan-select-btn {
    background: #0a0a0a;
    color: #fff;
}

.sub-card-popular .sub-plan-select-btn:hover {
    background: #27272a;
}

@media (max-width: 1100px) {
    .sub-cards,
    .sub-topup-grid {
        grid-template-columns: repeat(2, minmax(230px, 1fr));
    }

    .sub-addon-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 760px) {
    .sub-custom-credit-overlay {
        align-items: stretch;
        padding: 12px;
    }

    .sub-credit-modal {
        width: 100%;
        max-height: calc(100vh - 24px);
        padding: 18px;
    }

    .sub-credit-models {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sub-credit-builder {
        grid-template-columns: 1fr;
    }

    .sub-credit-total {
        font-size: 34px;
    }

    .sub-modal {
        width: 100vw;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-x: hidden;
    }

    .sub-modal-topbar {
        min-height: 56px;
        padding: 0 12px 0 18px;
    }

    .sub-breadcrumb {
        flex: 1 1 auto;
        gap: 8px;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
    }

    .sub-modal .sub-modal-back {
        width: 34px;
        height: 34px;
    }

    .sub-modal-body {
        padding: 22px 18px 28px;
        overflow-x: hidden;
    }

    .sub-account-grid,
    .sub-section-head,
    .sub-pricing-toolbar {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .sub-account-grid {
        display: grid;
    }

    .sub-panel-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .sub-currency-toggle,
    .sub-billing-toggle {
        width: max-content;
    }

    .sub-pricing-toolbar {
        align-items: stretch;
    }

    .sub-medical-scope {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        text-align: left;
    }

    .sub-domain-picker,
    .sub-domain-grid {
        text-align: left;
        justify-content: flex-start;
    }

    .sub-domain-grid {
        width: 100%;
    }

    .sub-domain-option {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .sub-cards,
    .sub-topup-grid {
        grid-template-columns: 1fr;
    }

    .sub-addon-header {
        flex-direction: column;
    }

    .sub-addon-grid {
        grid-template-columns: 1fr;
    }
}
/* =============================================
   Study Biome Styles
   Living backgrounds and theme overrides
   ============================================= */

/* ── Canvas Layer ── */

.ys-biome-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.ys-biome-canvas.active {
    opacity: 1;
}

/* ── Biome Theme Overrides ── */

/* Each biome class is applied to .your-space-shell */

/* Rainy Window — cold blue, glass-like */
.your-space-shell[data-biome="rain"] {
    --ys-biome-bg: #0c1018;
    --ys-biome-surface: rgba(12, 16, 24, 0.85);
    --ys-biome-accent: #58a6ff;
    --ys-biome-glow: rgba(88, 166, 255, 0.1);
    --ys-biome-text: #c9d1d9;
}

/* Forest Cabin — deep warm amber, firelight */
.your-space-shell[data-biome="cabin"] {
    --ys-biome-bg: #12100c;
    --ys-biome-surface: rgba(18, 16, 12, 0.9);
    --ys-biome-accent: #ff9800;
    --ys-biome-glow: rgba(255, 152, 0, 0.08);
    --ys-biome-text: #e0d5c4;
}

/* Rooftop Night — purple-violet, urban neon */
.your-space-shell[data-biome="rooftop"] {
    --ys-biome-bg: #080814;
    --ys-biome-surface: rgba(8, 8, 20, 0.92);
    --ys-biome-accent: #a78bfa;
    --ys-biome-glow: rgba(167, 139, 250, 0.07);
    --ys-biome-text: #b8c0d8;
}

/* Grand Library — rich golden-brown, vintage paper */
.your-space-shell[data-biome="library"] {
    --ys-biome-bg: #141210;
    --ys-biome-surface: rgba(20, 18, 16, 0.9);
    --ys-biome-accent: #c8956c;
    --ys-biome-glow: rgba(200, 149, 108, 0.08);
    --ys-biome-text: #e0d5c4;
}

/* Space Station — deep indigo, cosmic blue-violet */
.your-space-shell[data-biome="space"] {
    --ys-biome-bg: #030308;
    --ys-biome-surface: rgba(3, 3, 8, 0.94);
    --ys-biome-accent: #6366f1;
    --ys-biome-glow: rgba(99, 102, 241, 0.08);
    --ys-biome-text: #a5b4fc;
}

/* ── Apply biome colors when active ── */

/* Override app theme variables so all text elements pick up biome colors */
.your-space-shell[data-biome]:not([data-biome="none"]) {
    --t1: var(--ys-biome-text);
    --t2: color-mix(in srgb, var(--ys-biome-text) 80%, transparent);
    --t3: color-mix(in srgb, var(--ys-biome-text) 55%, transparent);
    --ac: var(--ys-biome-accent);
    --bg: var(--ys-biome-bg);
    --bg0: var(--ys-biome-bg);
    --bd: color-mix(in srgb, var(--ys-biome-text) 15%, transparent);
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-editor {
    background: var(--ys-biome-bg);
    color: var(--ys-biome-text);
    transition: background 0.6s ease, color 0.6s ease;
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-sidebar {
    background: var(--ys-biome-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-page-container {
    background: var(--ys-biome-surface);
    border-radius: 12px;
    padding: 32px 40px;
    margin-top: 16px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 60px var(--ys-biome-glow);
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-topbar {
    background: var(--ys-biome-surface);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-flat-btn:hover {
    color: var(--ys-biome-accent);
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-bc-link:hover {
    color: var(--ys-biome-accent);
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-bc-current {
    color: var(--ys-biome-accent);
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-page-title {
    color: #fff;
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-block:focus-within {
    border-left-color: var(--ys-biome-accent);
}

/* Canvas needs scroll container to be relative for positioning */
.your-space-shell[data-biome]:not([data-biome="none"]) .ys-page-scroll {
    position: relative;
}

/* Ensure block text content is clearly readable */
.your-space-shell[data-biome]:not([data-biome="none"]) .ys-block-content {
    color: var(--ys-biome-text);
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-block-content [contenteditable] {
    color: inherit;
}

.your-space-shell[data-biome]:not([data-biome="none"]) h1,
.your-space-shell[data-biome]:not([data-biome="none"]) h2,
.your-space-shell[data-biome]:not([data-biome="none"]) h3 {
    color: #fff;
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-edited {
    color: var(--ys-biome-text);
    opacity: 0.6;
}

/* Override .ys-editable theme colors — high specificity to beat [data-theme] selectors */
.your-space-shell[data-biome]:not([data-biome="none"]) .ys-editable {
    color: var(--ys-biome-text) !important;
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-editable strong {
    color: #fff !important;
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-editable em {
    color: var(--ys-biome-accent) !important;
}

/* Headings typed in biome mode */
.your-space-shell[data-biome]:not([data-biome="none"]) .ys-block-heading1 .ys-editable,
.your-space-shell[data-biome]:not([data-biome="none"]) .ys-block-heading2 .ys-editable {
    color: #fff !important;
}

/* Page title */
.your-space-shell[data-biome]:not([data-biome="none"]) .ys-page-title {
    color: #fff !important;
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-page-scroll {
    position: relative;
}

/* ── Biome Picker UI ── */

.ys-biome-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ys-biome-picker-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.ys-biome-picker {
    background: #161b22;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    width: 640px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    padding: 28px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.3s ease;
}

.ys-biome-picker-overlay.open .ys-biome-picker {
    transform: translateY(0) scale(1);
}

.ys-biome-picker h3 {
    font-size: 18px;
    font-weight: 600;
    color: #e6edf3;
    margin: 0 0 4px;
}

.ys-biome-picker .subtitle {
    font-size: 13px;
    color: #8b949e;
    margin: 0 0 20px;
}

.ys-biome-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ys-biome-option {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ys-biome-option:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.ys-biome-option.selected {
    border-color: var(--ys-biome-accent, #7c83ff);
    background: rgba(124, 131, 255, 0.08);
}

.ys-biome-option .icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.ys-biome-option .info h4 {
    font-size: 14px;
    font-weight: 600;
    color: #e6edf3;
    margin: 0 0 2px;
}

.ys-biome-option .info p {
    font-size: 12px;
    color: #8b949e;
    margin: 0;
    line-height: 1.4;
}

/* Color preview swatch */
.ys-biome-option .swatch {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    margin-top: 8px;
    opacity: 0.8;
}

.ys-biome-option[data-biome-id="rain"] .swatch { background: linear-gradient(90deg, #0c1018, #58a6ff); }
.ys-biome-option[data-biome-id="cabin"] .swatch { background: linear-gradient(90deg, #12100c, #ff9800); }
.ys-biome-option[data-biome-id="rooftop"] .swatch { background: linear-gradient(90deg, #080814, #a78bfa); }
.ys-biome-option[data-biome-id="library"] .swatch { background: linear-gradient(90deg, #141210, #c8956c); }
.ys-biome-option[data-biome-id="space"] .swatch { background: linear-gradient(90deg, #030308, #6366f1); }

.ys-biome-option .check {
    margin-left: auto;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    align-self: center;
}

.ys-biome-option.selected .check {
    background: var(--ys-biome-accent, #7c83ff);
    border-color: var(--ys-biome-accent, #7c83ff);
}

.ys-biome-option.selected .check::after {
    content: '';
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    margin-top: -2px;
}

/* ── Classic option (no biome) ── */

.ys-biome-option.classic {
    grid-column: 1 / -1;
    border-style: dashed;
}

/* ── Biome control button in topbar ── */

.ys-biome-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ys-biome-btn .biome-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ys-biome-accent, transparent);
    display: none;
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-biome-btn .biome-indicator {
    display: block;
    animation: biome-pulse 2s ease infinite;
}

@keyframes biome-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ── Transition for biome switch ── */

.ys-biome-transition {
    animation: biome-fade 0.6s ease;
}

@keyframes biome-fade {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}
/* =============================================
   Smart Widget System Styles
   ============================================= */

/* ── Widget Panel ── */

.ys-widgets-panel {
    position: relative;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    flex-shrink: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.ys-widgets-panel.open {
    max-height: 200px;
    opacity: 1;
}

.ys-widgets-toggle {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    transition: all 0.2s ease;
}

.ys-widgets-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.ys-widgets-scroll {
    display: flex;
    gap: 12px;
    padding: 16px 40px 16px 40px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.ys-widgets-scroll::-webkit-scrollbar {
    height: 4px;
}

.ys-widgets-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.ys-widgets-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* ── Individual Widget ── */

.ys-widget {
    flex-shrink: 0;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ys-widget:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.ys-widget-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    opacity: 0.6;
}

.ys-widget-icon {
    font-size: 14px;
}

.ys-widget-name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--t3, #8b949e);
}

.ys-widget-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Widget Button ── */

.ys-widget-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--t1, #e6edf3);
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ys-widget-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.12);
}

.ys-widget-btn-sm {
    padding: 2px 6px;
    font-size: 11px;
}

/* ── Focus Timer ── */

.ys-widget-timer {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ys-widget-timer-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.ys-widget-timer-inner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--ys-biome-bg, #161b22);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ys-widget-timer-time {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--t1, #e6edf3);
    line-height: 1;
}

.ys-widget-timer-mode {
    font-size: 9px;
    color: var(--t3, #8b949e);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ys-widget-timer-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Study Streak ── */

.ys-widget-streak {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.ys-widget-streak-flame {
    line-height: 1;
}

.ys-widget-streak-flame.small { font-size: 24px; }
.ys-widget-streak-flame.medium { font-size: 30px; }
.ys-widget-streak-flame.large { font-size: 36px; }

.ys-widget-streak-info {
    display: flex;
    flex-direction: column;
}

.ys-widget-streak-count {
    font-size: 28px;
    font-weight: 800;
    color: var(--t1, #e6edf3);
    line-height: 1;
}

.ys-widget-streak-label {
    font-size: 11px;
    color: var(--t3, #8b949e);
}

.ys-widget-streak-today {
    font-size: 10px;
    color: var(--t3, #8b949e);
    opacity: 0.7;
}

/* ── Revision Queue ── */

.ys-widget-revision {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

.ys-widget-revision-icon {
    font-size: 24px;
    line-height: 1;
}

.ys-widget-revision-info {
    display: flex;
    flex-direction: column;
}

.ys-widget-revision-count {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.ys-widget-revision-count.urgency-low { color: #81c784; }
.ys-widget-revision-count.urgency-medium { color: #ffb74d; }
.ys-widget-revision-count.urgency-high { color: #ef5350; }

.ys-widget-revision-label {
    font-size: 11px;
    color: var(--t3, #8b949e);
}

.ys-widget-revision-done {
    font-size: 11px;
    color: #81c784;
}

/* ── Quick Notes ── */

.ys-widget-notes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

.ys-widget-notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--t3, #8b949e);
}

.ys-widget-notes-input {
    flex: 1;
    min-height: 60px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 8px;
    font-size: 12px;
    color: var(--t1, #e6edf3);
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color 0.2s ease;
}

.ys-widget-notes-input:focus {
    border-color: var(--ys-biome-accent, rgba(124, 131, 255, 0.4));
}

.ys-widget-notes-input::placeholder {
    color: var(--t3, #8b949e);
    opacity: 0.5;
}

/* ── Progress Ring ── */

.ys-widget-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.ys-widget-progress-ring {
    position: relative;
    width: 56px;
    height: 56px;
}

.ys-widget-progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ys-progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 3;
}

.ys-progress-fill {
    fill: none;
    stroke: var(--ys-biome-accent, #7c83ff);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
}

.ys-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--t1, #e6edf3);
}

.ys-widget-progress-label {
    font-size: 10px;
    color: var(--t3, #8b949e);
}

/* ── Biome integration ── */

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-widget {
    background: var(--ys-biome-surface);
    border-color: rgba(255, 255, 255, 0.04);
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-widget:hover {
    border-color: rgba(255, 255, 255, 0.08);
}

.your-space-shell[data-biome]:not([data-biome="none"]) .ys-widget-timer-inner {
    background: var(--ys-biome-bg);
}
/* =============================================
   Scribble Canvas — Content-attached drawing layer
   ============================================= */

/* ── Canvas (inside scroll container, scrolls with content) ── */

.ys-scribble-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: auto;
    cursor: crosshair;
    touch-action: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    outline: none;
}

.ys-scribble-canvas.open {
    opacity: 1;
}

.ys-scribble-canvas.is-passive {
    pointer-events: none;
    cursor: default;
    touch-action: pan-y;
}


/* ── Fixed Toolbar ── */

.ys-scribble-toolbar {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(22, 27, 34, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    user-select: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(-50%) translateY(-10px);
}

.ys-scribble-toolbar.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.ys-scribble-toolbar.is-positioned,
.ys-scribble-toolbar.open.is-positioned {
    transform: none;
}

.ys-scribble-toolbar.is-dragging {
    cursor: grabbing;
    transition: none;
}

.ys-scribble-toolbar.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ys-scribble-drag-handle {
    width: 18px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.42);
    cursor: grab;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex: 0 0 auto;
}

.ys-scribble-drag-handle::before {
    content: "";
    width: 4px;
    height: 18px;
    border-right: 2px dotted currentcolor;
    border-left: 2px dotted currentcolor;
}

.ys-scribble-drag-handle:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.72);
}

.ys-scribble-toolbar.is-dragging .ys-scribble-drag-handle,
.ys-scribble-toolbar.is-collapsed .ys-scribble-drag-handle {
    cursor: grabbing;
}

.ys-scribble-toolbar.is-collapsed {
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.ys-scribble-toolbar.is-collapsed .ys-scribble-tools,
.ys-scribble-toolbar.is-collapsed .ys-scribble-divider,
.ys-scribble-toolbar.is-collapsed .ys-scribble-colors,
.ys-scribble-toolbar.is-collapsed .ys-scribble-size-wrap,
.ys-scribble-toolbar.is-collapsed .ys-scribble-actions {
    display: none;
}

.ys-scribble-toolbar.is-collapsed .ys-scribble-drag-handle {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.2), transparent 30%),
        rgba(36, 43, 54, 0.96);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ys-scribble-toolbar.is-collapsed .ys-scribble-drag-handle::before {
    content: "✏";
    width: auto;
    height: auto;
    border: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1;
}

.ys-scribble-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

/* ── Tool Buttons ── */

.ys-scribble-tools {
    display: flex;
    gap: 2px;
}

.ys-scribble-tool {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    color: rgba(255, 255, 255, 0.6);
}

.ys-scribble-tool:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.ys-scribble-tool.active {
    background: rgba(124, 131, 255, 0.2);
    color: #a5b4fc;
}

/* ── Eraser Mode Picker ── */

.ys-scribble-eraser-group {
    position: relative;
}

.ys-scribble-eraser-popup {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(22, 27, 34, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 4px;
    z-index: 5001;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.ys-scribble-eraser-popup.open {
    display: flex;
}

.ys-scribble-eraser-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.ys-scribble-eraser-mode:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.ys-scribble-eraser-mode.active {
    background: rgba(124, 131, 255, 0.2);
    color: #a5b4fc;
}

/* ── Color Buttons ── */

.ys-scribble-colors {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ys-scribble-color {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    padding: 0;
}

.ys-scribble-color:hover {
    transform: scale(1.2);
}

.ys-scribble-color.active {
    border-color: #fff;
    transform: scale(1.15);
}

/* ── Size Slider ── */

.ys-scribble-size-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ys-scribble-size {
    width: 70px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.ys-scribble-size::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #7c83ff;
    cursor: pointer;
    border: 2px solid #161b22;
}

.ys-scribble-size::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #7c83ff;
    cursor: pointer;
    border: 2px solid #161b22;
}

.ys-scribble-size-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    min-width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Action Buttons ── */

.ys-scribble-actions {
    display: flex;
    gap: 2px;
}

.ys-scribble-action {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    color: rgba(255, 255, 255, 0.5);
}

.ys-scribble-action:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.ys-scribble-action svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ys-scribble-hide:hover {
    background: rgba(124, 131, 255, 0.16);
    color: #c7d2fe;
}

.ys-scribble-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ── Phone drawing tray ── */

@media (max-width: 768px), (hover: none), (pointer: coarse) {
    body.scribble-canvas-active .quickball,
    body.scribble-canvas-active .quickball.visible,
    body.scribble-canvas-active .quickball.idle,
    body.scribble-canvas-active .quickball:not(.idle).visible,
    body.scribble-canvas-active .quickball-panel,
    body.scribble-canvas-active .quickball-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .ys-scribble-toolbar {
        top: auto;
        right: auto;
        bottom: calc(8px + env(safe-area-inset-bottom));
        left: 50%;
        width: min(320px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
        max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 7px 8px;
        padding: 8px;
        border-radius: 14px;
        background: rgba(22, 27, 34, 0.94);
        box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
        transform: translateX(-50%) translateY(16px);
    }

    .ys-scribble-toolbar.open {
        transform: translateX(-50%) translateY(0);
    }

    .ys-scribble-toolbar.is-positioned,
    .ys-scribble-toolbar.open.is-positioned {
        transform: none;
    }

    .ys-scribble-drag-handle {
        order: 0;
        flex: 0 0 100%;
        width: 100%;
        height: 14px;
        margin: -2px 0 1px;
        border-radius: 999px;
    }

    .ys-scribble-drag-handle::before {
        width: 36px;
        height: 3px;
        border: 0;
        border-radius: 999px;
        background: currentcolor;
        opacity: 0.9;
    }

    .ys-scribble-toolbar.is-collapsed {
        width: 58px;
        height: 58px;
        min-width: 58px;
        min-height: 58px;
        padding: 0;
        border-radius: 50%;
        flex-wrap: nowrap;
    }

    .ys-scribble-toolbar.is-collapsed .ys-scribble-drag-handle {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .ys-scribble-toolbar.is-collapsed .ys-scribble-drag-handle::before {
        width: auto;
        height: auto;
        background: none;
    }

    .ys-scribble-divider {
        display: none;
    }

    .ys-scribble-tools {
        order: 1;
        gap: 4px;
        flex: 0 0 auto;
    }

    .ys-scribble-tool,
    .ys-scribble-action {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 15px;
    }

    .ys-scribble-colors {
        order: 4;
        flex: 0 0 100%;
        max-width: 100%;
        gap: 7px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 4px;
        justify-content: flex-start;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .ys-scribble-colors::-webkit-scrollbar {
        display: none;
    }

    .ys-scribble-color {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .ys-scribble-size-wrap {
        order: 2;
        flex: 1 1 90px;
        min-width: 86px;
        max-width: 118px;
    }

    .ys-scribble-size {
        width: 100%;
    }

    .ys-scribble-size-label {
        min-width: 20px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.66);
    }

    .ys-scribble-actions {
        order: 3;
        gap: 4px;
        flex: 0 0 auto;
    }

    .ys-scribble-eraser-popup {
        top: auto;
        bottom: calc(100% + 8px);
        left: 0;
        transform: none;
        min-width: 138px;
        padding: 6px;
    }

    .ys-scribble-eraser-mode {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 13px;
    }
}

@media (max-width: 390px) {
    .ys-scribble-toolbar {
        gap: 6px;
        padding: 7px;
    }

    .ys-scribble-tool,
    .ys-scribble-action {
        width: 36px;
        height: 36px;
    }

    .ys-scribble-actions {
        gap: 2px;
    }

    .ys-scribble-size-wrap {
        min-width: 72px;
        max-width: 96px;
    }
}
#wmDock {
    position: fixed;
    z-index: 100300;
    display: none;
    overflow: hidden;
    color: var(--t1, #111827);
    background: var(--bg, #FAF9F6);
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: width 0.34s cubic-bezier(0.16, 1, 0.3, 1), height 0.34s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.24s ease;
}

#wmDock.active {
    display: block;
}

[data-theme="dark"] #wmDock {
    color: #e5e7eb;
    background: var(--bg, #121212);
    border-color: transparent;
    box-shadow: none;
}

body.wm-dock-right #wmDock {
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
}

body.note-fullscreen-open.avitan-note-sidecar #wmDock,
body:has(.your-space-shell) #wmDock,
body:has(.assess-shell) #wmDock {
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    background: var(--bg, #FAF9F6) !important;
    border-left: 1px solid color-mix(in srgb, var(--bd, rgba(0,0,0,.08)) 68%, transparent) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

[data-theme="dark"] body.note-fullscreen-open.avitan-note-sidecar #wmDock,
[data-theme="dark"] body:has(.your-space-shell) #wmDock,
[data-theme="dark"] body:has(.assess-shell) #wmDock {
    background: var(--bg, #121212) !important;
    border-left-color: rgba(255,255,255,.08) !important;
}

/* Biome Opaque Background Overrides */
body:has(.your-space-shell[data-biome="rain"]) #wmDock { background: #0c1018 !important; }
body:has(.your-space-shell[data-biome="cabin"]) #wmDock { background: #12100c !important; }
body:has(.your-space-shell[data-biome="rooftop"]) #wmDock { background: #080814 !important; }
body:has(.your-space-shell[data-biome="library"]) #wmDock { background: #141210 !important; }
body:has(.your-space-shell[data-biome="space"]) #wmDock { background: #030308 !important; }

body.wm-dock-bottom #wmDock {
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow: none;
}

[data-theme="dark"] body.wm-dock-bottom #wmDock {
    box-shadow: none;
}

#wmSnapPreview {
    position: fixed;
    z-index: 100302;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    color: #0f172a;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 233, 0.1));
    border: 1px solid rgba(59, 130, 246, 0.36);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 18px 48px rgba(37, 99, 235, 0.12);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

#wmSnapPreview.visible {
    opacity: 1;
    visibility: visible;
}

#wmSnapPreview.side-right {
    border-right: 0;
    transform: translateX(0);
}

#wmSnapPreview.side-bottom {
    border-bottom: 0;
    transform: translateY(0);
}

[data-theme="dark"] #wmSnapPreview {
    color: #e0f2fe;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(14, 165, 233, 0.13));
    border-color: rgba(96, 165, 250, 0.38);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 48px rgba(37, 99, 235, 0.16);
}

.wm-preview-card {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 214px;
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    text-align: center;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(219, 234, 254, 0.95);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] .wm-preview-card {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.wm-preview-card span {
    color: #2563eb;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.wm-preview-card strong {
    color: inherit;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.035em;
}

.wm-preview-card small {
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 750;
}

[data-theme="dark"] .wm-preview-card small {
    color: #94a3b8;
}

#wmSplitterV {
    position: fixed;
    z-index: 100301;
    display: none;
    cursor: col-resize;
    transition: right 0.34s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

body.wm-dock-right #wmSplitterV {
    top: 0;
    bottom: 0;
    width: 14px;
    transform: translateX(7px);
}

body.note-fullscreen-open.avitan-note-sidecar #wmSplitterV,
body:has(.your-space-shell) #wmSplitterV,
body:has(.assess-shell) #wmSplitterV {
    top: 0 !important;
    bottom: 0 !important;
    width: 12px !important;
    transform: translateX(6px);
}

body.wm-dock-bottom #wmSplitterV {
    left: 0;
    right: 0;
    height: 14px;
    transform: translateY(7px);
    cursor: row-resize;
}

#wmSplitterV.active {
    display: block;
}

#wmSplitterV::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 44px;
    border-radius: 999px;
    background: transparent;
    transform: translate(-50%, -50%);
    transition: background 0.18s ease, width 0.18s ease, height 0.18s ease, box-shadow 0.18s ease;
}

body.note-fullscreen-open.avitan-note-sidecar #wmSplitterV::after,
body:has(.your-space-shell) #wmSplitterV::after,
body:has(.assess-shell) #wmSplitterV::after {
    top: 0;
    width: 1px;
    height: 100%;
    border-radius: 0;
    background: color-mix(in srgb, var(--bd, rgba(0,0,0,.08)) 72%, transparent);
    box-shadow: none;
}

body.wm-dock-bottom #wmSplitterV::after {
    width: 44px;
    height: 3px;
}

#wmSplitterV:hover::after,
#wmSplitterV:active::after {
    background: rgba(37, 99, 235, 0.82);
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.32);
}

body.wm-dock-right #wmSplitterV:hover::after,
body.wm-dock-right #wmSplitterV:active::after {
    height: 64px;
}

body.note-fullscreen-open.avitan-note-sidecar #wmSplitterV:hover::after,
body.note-fullscreen-open.avitan-note-sidecar #wmSplitterV:active::after,
body:has(.your-space-shell) #wmSplitterV:hover::after,
body:has(.your-space-shell) #wmSplitterV:active::after,
body:has(.assess-shell) #wmSplitterV:hover::after,
body:has(.assess-shell) #wmSplitterV:active::after {
    height: 100%;
    width: 2px;
    background: color-mix(in srgb, var(--secondary, #5B7DB1) 52%, var(--bd, rgba(0,0,0,.08)));
    box-shadow: none;
}

body.wm-dock-bottom #wmSplitterV:hover::after,
body.wm-dock-bottom #wmSplitterV:active::after {
    width: 64px;
}

#wmSplitterH {
    position: absolute;
    z-index: 10;
    display: none;
}

#wmSplitterH.active {
    display: block;
}

body.wm-dock-right #wmSplitterH {
    left: 0;
    right: 0;
    height: 10px;
    cursor: row-resize;
}

body.wm-dock-bottom #wmSplitterH {
    top: 0;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
}

#wmSplitterH::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 3px;
    border-radius: 999px;
    background: transparent;
    transform: translate(-50%, -50%);
    transition: background 0.18s ease, width 0.18s ease, height 0.18s ease, box-shadow 0.18s ease;
}

body.wm-dock-bottom #wmSplitterH::after {
    width: 3px;
    height: 44px;
}

#wmSplitterH:hover::after,
#wmSplitterH:active::after {
    background: rgba(37, 99, 235, 0.82);
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.32);
}

body.wm-dock-right #wmSplitterH:hover::after,
body.wm-dock-right #wmSplitterH:active::after {
    width: 64px;
}

body.wm-dock-bottom #wmSplitterH:hover::after,
body.wm-dock-bottom #wmSplitterH:active::after {
    height: 64px;
}

body.wm-dock-resizing,
body.wm-dock-resizing * {
    cursor: inherit !important;
}

body.wm-dock-resizing #wmDock,
body.wm-dock-resizing #wmSplitterV,
body.wm-dock-resizing #wmSplitterH,
body.wm-dock-resizing .wm-docked,
body.wm-dock-resizing .note-fullscreen-overlay,
body.wm-dock-resizing .note-native-host,
body.wm-dock-resizing .app-layout {
    transition: none !important;
}

body.wm-dock-resizing #wmDock,
body.wm-dock-resizing .note-fullscreen-overlay {
    will-change: width, right, height, bottom;
}

.wm-docked {
    position: absolute !important;
    z-index: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    transform: none !important;
    background: var(--bg, #FAF9F6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: width 0.24s cubic-bezier(0.16, 1, 0.3, 1), height 0.24s cubic-bezier(0.16, 1, 0.3, 1), top 0.24s cubic-bezier(0.16, 1, 0.3, 1), left 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.wm-docked .nr-header {
    cursor: grab !important;
    background: var(--bg, #FAF9F6) !important;
}

.wm-docked .nr-header:active {
    cursor: grabbing !important;
}

.wm-docked .mcq-resize-handle,
.wm-docked #avitanResizeHandle {
    display: none !important;
}

.app-layout {
    transition: width 0.34s cubic-bezier(0.16, 1, 0.3, 1), height 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.app-layout.wm-notes-shrunk::after {
    display: none;
    content: none;
}

[data-theme="dark"] .app-layout.wm-notes-shrunk::after {
    display: none;
    content: none;
}

body.wm-dock-bottom .app-layout.wm-notes-shrunk::after {
    display: none;
    content: none;
}

[data-theme="dark"] body.wm-dock-bottom .app-layout.wm-notes-shrunk::after {
    display: none;
    content: none;
}

body.wm-dragging-active #wmDock {
    box-shadow: none;
}

body.wm-dock-bottom.wm-dragging-active #wmDock {
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    #wmDock,
    #wmSnapPreview,
    #wmSplitterV,
    .wm-docked,
    .app-layout {
        transition: none !important;
    }
}
/* ============================================
   USER CONTROL PANEL — Clean, Flat Desktop UI (Premium Edition)
   ============================================ */

.ucp-overlay {
    position: fixed;
    inset: 0;
    z-index: 100700;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ucp-overlay.open {
    opacity: 1;
    visibility: visible;
}

.ucp-panel {
    width: 90vw;
    max-width: 960px;
    height: 80vh;
    max-height: 720px;
    background: var(--surface, #1E1E1E);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    border-radius: 12px;
    display: grid;
    grid-template-rows: 44px 1fr;
    grid-template-columns: 220px 1fr;
    overflow: hidden;
    transform: translateY(12px) scale(0.995);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.ucp-overlay.open .ucp-panel {
    transform: translateY(0) scale(1);
}

/* ── Header ── */
.ucp-header {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--surface, #1E1E1E);
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    height: 44px;
}

.ucp-header h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text, #E6E6E6);
    font-family: var(--font-body, system-ui);
    opacity: 0.85;
    text-transform: capitalize;
}

.ucp-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted, #a8a39a);
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.1s ease;
}

.ucp-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text, #E6E6E6);
}

[data-theme="light"] .ucp-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* ── Left Navigation Sidebar ── */
.ucp-tabs {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 8px;
    background: var(--surface-2, #2A2A2A);
    border-right: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    overflow-y: auto;
    scrollbar-width: none;
}

/* Custom background per theme for proper sidebar contrast */
[data-theme="light"] .ucp-tabs {
    background: #F5F1E8;
}
[data-theme="paper"] .ucp-tabs {
    background: #EADEC9;
}
[data-theme="dark"] .ucp-tabs {
    background: #181818;
}

.ucp-tabs::-webkit-scrollbar { display: none; }

.ucp-tab {
    padding: 8px 12px;
    border: none;
    background: none;
    color: var(--text, #E6E6E6);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-body, system-ui);
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    border-radius: 6px;
    border-left: 3px solid transparent;
    opacity: 0.7;
    transition: all 0.15s ease;
}

.ucp-tab:hover {
    opacity: 0.95;
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .ucp-tab:hover,
[data-theme="paper"] .ucp-tab:hover {
    background: rgba(0, 0, 0, 0.03);
}

.ucp-tab.active {
    opacity: 1;
    color: var(--text, #E6E6E6);
    background: rgba(255, 255, 255, 0.07);
    border-left-color: var(--secondary, #7AA0D1);
}

[data-theme="light"] .ucp-tab.active {
    background: rgba(255, 255, 255, 0.5);
    border-left-color: var(--secondary, #5B7DB1);
}

[data-theme="paper"] .ucp-tab.active {
    background: rgba(255, 255, 255, 0.5);
    border-left-color: var(--secondary, #5B7DB1);
}

.ucp-tab.active::after { display: none !important; }

.ucp-nav-action {
    padding: 8px 12px;
    border: 1px solid transparent;
    background: none;
    color: var(--text, #E6E6E6);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-body, system-ui);
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
    border-radius: 6px;
    opacity: 0.86;
    transition: all 0.15s ease;
}

.ucp-nav-action:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .ucp-nav-action:hover,
[data-theme="paper"] .ucp-nav-action:hover {
    background: rgba(0, 0, 0, 0.04);
}

.ucp-subscription-action {
    margin-top: 6px;
    border-color: rgba(122, 160, 209, 0.24);
    background: rgba(122, 160, 209, 0.08);
}

[data-theme="light"] .ucp-subscription-action,
[data-theme="paper"] .ucp-subscription-action {
    color: #1f2937;
    border-color: rgba(91, 125, 177, 0.22);
    background: rgba(255, 255, 255, 0.45);
}

/* ── Main Content Area ── */
.ucp-body {
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    padding: 24px 32px;
    background: var(--surface, #1E1E1E);
}

/* Ensure proper core surface colors on themes */
[data-theme="light"] .ucp-body { background: #FFF; }
[data-theme="paper"] .ucp-body { background: #FFFCF5; }
[data-theme="dark"] .ucp-body { background: #1E1E1E; }

.ucp-content {
    display: none;
}

.ucp-content.active {
    display: block;
    animation: ucpContentFadeIn 0.2s ease-out;
}

@keyframes ucpContentFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Groups */
.ucp-group {
    margin-bottom: 24px;
}

.ucp-group:last-child { margin-bottom: 0; }

.ucp-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--muted, #a8a39a);
    margin-bottom: 12px;
}

/* ── Flat Action Buttons ── */
.ucp-btn {
    display: inline-block;
    width: auto;
    padding: 7px 16px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body, system-ui);
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: center;
}

.ucp-btn-primary {
    background: var(--secondary, #7AA0D1);
    color: var(--surface, #1E1E1E);
    border-color: var(--secondary, #7AA0D1);
}

[data-theme="light"] .ucp-btn-primary {
    color: #fff;
    background: var(--secondary, #5B7DB1);
    border-color: var(--secondary, #5B7DB1);
}

[data-theme="paper"] .ucp-btn-primary {
    color: #fff;
    background: var(--secondary, #5B7DB1);
    border-color: var(--secondary, #5B7DB1);
}

.ucp-btn-primary:hover {
    opacity: 0.92;
    transform: translateY(-0.5px);
}

.ucp-btn-ghost {
    background: var(--surface-2, #2A2A2A);
    color: var(--text, #E6E6E6);
}

.ucp-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--secondary, #7AA0D1);
}

[data-theme="light"] .ucp-btn-ghost:hover {
    background: rgba(0, 0, 0, 0.02);
    border-color: var(--secondary, #5B7DB1);
}

[data-theme="paper"] .ucp-btn-ghost:hover {
    background: rgba(0, 0, 0, 0.02);
    border-color: var(--secondary, #5B7DB1);
}

.ucp-btn-danger {
    color: var(--accent-focus, #D47A6A);
    border-color: rgba(212, 122, 106, 0.2);
    background: transparent;
}

.ucp-btn-danger:hover {
    background: rgba(212, 122, 106, 0.08);
    border-color: var(--accent-focus, #D47A6A);
}

/* ── Switch Toggles ── */
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--surface-2, #2A2A2A);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    border-radius: 8px;
    margin-bottom: 12px;
}

[data-theme="light"] .settings-toggle-row { background: #FAF9F6; }
[data-theme="paper"] .settings-toggle-row { background: #FFFCF5; }

.settings-toggle-info {
    flex: 1;
    padding-right: 20px;
}

.settings-toggle-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text, #E6E6E6);
    margin-bottom: 4px;
}

.settings-toggle-desc {
    font-size: 12px;
    color: var(--muted, #a8a39a);
    line-height: 1.4;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--surface, #1E1E1E);
    border: 1.5px solid var(--border, rgba(255, 255, 255, 0.15));
    border-radius: 34px;
    transition: .2s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .slider { background-color: #FFF; border-color: rgba(0,0,0,0.12); }
[data-theme="paper"] .slider { background-color: #FFFCF5; border-color: rgba(0,0,0,0.08); }

.slider::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3.5px;
    bottom: 3.5px;
    background-color: var(--muted, #a8a39a);
    border-radius: 50%;
    transition: .2s cubic-bezier(0.16, 1, 0.3, 1);
}

input:checked + .slider {
    background-color: var(--secondary, #7AA0D1);
    border-color: var(--secondary, #7AA0D1);
}

[data-theme="light"] input:checked + .slider {
    background-color: var(--secondary, #5B7DB1);
    border-color: var(--secondary, #5B7DB1);
}

[data-theme="paper"] input:checked + .slider {
    background-color: var(--secondary, #5B7DB1);
    border-color: var(--secondary, #5B7DB1);
}

input:checked + .slider::before {
    transform: translateX(20px);
    background-color: var(--surface, #1E1E1E);
}

[data-theme="light"] input:checked + .slider::before,
[data-theme="paper"] input:checked + .slider::before {
    background-color: #FFF;
}

/* ── Theme Picker (Bespoke Flat Theme Contrast) ── */
.ucp-theme-pills {
    display: flex;
    gap: 10px;
}

.ucp-theme-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s ease;
}

/* Dark Theme Button */
[data-theme="dark"] .ucp-theme-btn {
    background: #1A1A1A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #a8a39a;
}
[data-theme="dark"] .ucp-theme-btn:hover {
    border-color: var(--secondary, #7AA0D1);
    color: #E6E6E6;
}
[data-theme="dark"] .ucp-theme-btn[aria-pressed="true"] {
    background: #2D2D2D;
    border: 1.5px solid var(--secondary, #7AA0D1);
    color: #E6E6E6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Light Theme Button */
[data-theme="light"] .ucp-theme-btn {
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #6b6255;
}
[data-theme="light"] .ucp-theme-btn:hover {
    border-color: var(--secondary, #5B7DB1);
    color: #1A1A1A;
}
[data-theme="light"] .ucp-theme-btn[aria-pressed="true"] {
    background: #FFF;
    border: 1.5px solid var(--secondary, #5B7DB1);
    color: #1A1A1A;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Paper Theme Button */
[data-theme="paper"] .ucp-theme-btn {
    background: #FFFCF5;
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: #6b5e4a;
}
[data-theme="paper"] .ucp-theme-btn:hover {
    border-color: var(--secondary, #5B7DB1);
    color: #1F1A14;
}
[data-theme="paper"] .ucp-theme-btn[aria-pressed="true"] {
    background: #FFFCF5;
    border: 1.5px solid var(--secondary, #5B7DB1);
    color: #1F1A14;
    box-shadow: 0 4px 12px rgba(139, 110, 70, 0.04);
}

.ucp-theme-preview {
    width: 40px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--border, rgba(255,255,255,0.08));
}
[data-theme="light"] .ucp-theme-preview,
[data-theme="paper"] .ucp-theme-preview {
    border-color: rgba(0,0,0,0.08);
}

.ucp-theme-light { background: linear-gradient(135deg, #FAF9F6, #FFF); }
.ucp-theme-paper { background: linear-gradient(135deg, #F5EDE0, #FFFCF5); }
.ucp-theme-dark { background: linear-gradient(135deg, #121212, #1E1E1E); }

/* ── Select Dropdown (Bespoke Polished Style) ── */
.ucp-select {
    width: 100%;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    font-family: var(--font-body, system-ui);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border-radius: 6px;
    transition: border-color 0.12s ease;
    outline: none;
}

[data-theme="dark"] .ucp-select {
    background-color: #1A1A1A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #E6E6E6;
}
[data-theme="light"] .ucp-select {
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1A1A1A;
}
[data-theme="paper"] .ucp-select {
    background-color: #FFFCF5;
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: #1F1A14;
}

[data-theme="dark"] .ucp-select:focus { border-color: var(--secondary, #7AA0D1); }
[data-theme="light"] .ucp-select:focus { border-color: var(--secondary, #5B7DB1); }
[data-theme="paper"] .ucp-select:focus { border-color: var(--secondary, #5B7DB1); }

.ucp-select option {
    background-color: var(--surface, #1E1E1E);
    color: var(--text, #E6E6E6);
    font-family: var(--font-body, system-ui);
    padding: 8px;
}
[data-theme="light"] .ucp-select option { background-color: #FFF; color: #1A1A1A; }
[data-theme="paper"] .ucp-select option { background-color: #FFFCF5; color: #1F1A14; }

/* ── Student Profile Card ── */
.ucp-profile-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface-2, #2A2A2A);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    border-radius: 8px;
}
[data-theme="light"] .ucp-profile-row { background: #FAF9F6; border-color: rgba(0,0,0,0.08); }
[data-theme="paper"] .ucp-profile-row { background: #FFFCF5; border-color: rgba(0,0,0,0.06); }

.ucp-profile-row .ucp-btn {
    padding: 6px 14px;
    font-size: 12.5px;
}

.ucp-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--secondary, #7AA0D1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--surface, #1E1E1E);
    flex-shrink: 0;
}
[data-theme="light"] .ucp-avatar { background: var(--secondary, #5B7DB1); color: #FFF; }
[data-theme="paper"] .ucp-avatar { background: var(--secondary, #5B7DB1); color: #FFF; }

.ucp-profile-info {
    flex: 1;
    min-width: 0;
}

.ucp-profile-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #E6E6E6);
}

.ucp-profile-sub {
    font-size: 12px;
    color: var(--muted, #a8a39a);
    margin-top: 2px;
}

/* Cloud Status */
.ucp-cloud-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 12px;
    font-size: 13.5px;
    color: var(--muted, #a8a39a);
}

.ucp-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ucp-status-dot.online { background: var(--accent-calm, #8cb07d); }
.ucp-status-dot.offline { background: var(--muted, #a8a39a); }

/* Subscription Details */
.ucp-sub-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* Usage Meters */
.ucp-meter {
    margin-bottom: 14px;
}

.ucp-meter-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--muted, #a8a39a);
    margin-bottom: 6px;
}

.ucp-meter-count {
    color: var(--text, #E6E6E6);
    font-weight: 500;
}

.ucp-meter-track {
    height: 4px;
    background: var(--surface-2, #2A2A2A);
    border: 1px solid var(--border, rgba(255,255,255,0.05));
    border-radius: 2px;
    overflow: hidden;
}
[data-theme="light"] .ucp-meter-track { background: #FAF9F6; border-color: rgba(0,0,0,0.05); }
[data-theme="paper"] .ucp-meter-track { background: #FFFCF5; border-color: rgba(0,0,0,0.05); }

.ucp-meter-fill {
    height: 100%;
    background: var(--secondary, #7AA0D1);
    border-radius: 2px;
    transition: width 0.4s ease;
}
[data-theme="light"] .ucp-meter-fill { background: var(--secondary, #5B7DB1); }
[data-theme="paper"] .ucp-meter-fill { background: var(--secondary, #5B7DB1); }

/* AVITAN Face Grid */
.ucp-face-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.ucp-face-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    border-radius: 6px;
    background: var(--surface-2, #2A2A2A);
    color: var(--muted, #a8a39a);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}
[data-theme="light"] .ucp-face-btn { background: #FFF; border-color: rgba(0,0,0,0.1); }
[data-theme="paper"] .ucp-face-btn { background: #FFFCF5; border-color: rgba(0,0,0,0.07); }

.ucp-face-btn:hover {
    border-color: var(--secondary, #7AA0D1);
    color: var(--text, #E6E6E6);
}
[data-theme="light"] .ucp-face-btn:hover,
[data-theme="paper"] .ucp-face-btn:hover {
    border-color: var(--secondary, #5B7DB1);
    color: var(--text, #1A1A1A);
}

.ucp-face-btn.active {
    border-color: var(--secondary, #7AA0D1);
    background: rgba(122, 160, 209, 0.08);
    color: var(--secondary, #7AA0D1);
}
[data-theme="light"] .ucp-face-btn.active,
[data-theme="paper"] .ucp-face-btn.active {
    border-color: var(--secondary, #5B7DB1);
    background: rgba(91, 125, 177, 0.08);
    color: var(--secondary, #5B7DB1);
}

.ucp-face-icon {
    font-size: 16px;
    line-height: 1;
}

/* Domain chips */
.ucp-domain-chip {
    display: inline-block;
    padding: 3px 10px;
    margin: 2px 4px 2px 0;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted, #a8a39a);
    background: var(--surface-2, #2A2A2A);
}
[data-theme="light"] .ucp-domain-chip { background: #FFF; border-color: rgba(0,0,0,0.08); }
[data-theme="paper"] .ucp-domain-chip { background: #FFFCF5; border-color: rgba(0,0,0,0.06); }

/* Version Info */
.ucp-version {
    font-size: 12px;
    color: var(--muted, #a8a39a);
    text-align: center;
    padding: 16px 0 8px;
    opacity: 0.7;
}

.ucp-desktop-update[hidden] {
    display: none;
}

.ucp-desktop-update {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.09));
    border-radius: 8px;
    background: var(--surface-2, #2A2A2A);
}

[data-theme="light"] .ucp-desktop-update {
    background: #FAF9F6;
}

[data-theme="paper"] .ucp-desktop-update {
    background: #FFFCF5;
}

.ucp-desktop-update-copy {
    min-width: 0;
}

.ucp-desktop-update[data-state="available"] {
    border-color: rgba(91, 125, 177, 0.32);
}

.ucp-desktop-update[data-state="error"] {
    border-color: rgba(212, 122, 106, 0.28);
}

.nd-desktop-update-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 999998;
    width: min(520px, calc(100vw - 32px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 14px 14px 16px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    background: var(--surface, #1E1E1E);
    color: var(--text, #E6E6E6);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 14px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

[data-theme="light"] .nd-desktop-update-toast,
[data-theme="paper"] .nd-desktop-update-toast {
    background: #FFF;
    color: #121612;
    box-shadow: 0 18px 42px rgba(18, 22, 18, 0.14), 0 1px 2px rgba(18, 22, 18, 0.08);
}

.nd-desktop-update-toast.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.nd-desktop-update-toast-copy {
    min-width: 0;
}

.nd-desktop-update-toast-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text, #E6E6E6);
}

[data-theme="light"] .nd-desktop-update-toast-title,
[data-theme="paper"] .nd-desktop-update-toast-title {
    color: #121612;
}

.nd-desktop-update-toast-body {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted, #a8a39a);
}

.nd-desktop-update-toast-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nd-desktop-update-toast .ucp-btn {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .ucp-desktop-update,
    .nd-desktop-update-toast {
        align-items: stretch;
        flex-direction: column;
    }

    .nd-desktop-update-toast-actions {
        justify-content: flex-end;
    }
}

/* Responsive Grid Adaptations */
@media (max-width: 768px) {
    .ucp-panel {
        grid-template-columns: 1fr;
        grid-template-rows: 44px 50px 1fr;
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .ucp-tabs {
        grid-column: 1;
        grid-row: 2;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.09));
        padding: 8px 12px;
        height: 50px;
    }
    .ucp-tab {
        border-left: none;
        border-bottom: 2px solid transparent;
    }
    .ucp-tab.active {
        border-bottom-color: var(--secondary, #7AA0D1);
    }
    .ucp-body {
        grid-column: 1;
        grid-row: 3;
        padding: 20px 16px;
    }
    .ucp-theme-pills {
        flex-direction: column;
    }
    .ucp-face-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}





/*
 * Final Dr NOOB signature skin.
 * Loaded after feature styles so the branch can test one coherent visual language.
 */
/* =====================================================
   NoobTranslate — Language Selector v2
   Matches the note-parent-actions pill bar design.
   ===================================================== */

/* ── The dropdown lives OUTSIDE shadow DOM (appended to body) ── */

/* Overlay to close dropdown */
.noob-tl-overlay {
    position: fixed;
    inset: 0;
    z-index: 3060;
    background: transparent;
}

/* Dropdown panel */
.noob-tl-dropdown {
    position: fixed;
    z-index: 3061;
    display: flex;
    flex-direction: column;
    width: 236px;
    max-height: 420px;
    overflow-y: auto;
    padding: 6px;
    gap: 2px;
    border-radius: 12px;
    border: 1px solid var(--dn-dropdown-line, rgba(255,255,255,.82));
    background: transparent;
    box-shadow: var(--dn-dropdown-shadow, 0 22px 62px rgba(18,22,18,.16), 0 3px 10px rgba(18,22,18,.08), 0 0 0 1px rgba(18,22,18,.035), inset 0 1px 0 rgba(255,255,255,.92));
    backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
    -webkit-backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
    background-clip: padding-box;
    isolation: isolate;
    animation: noobTlDrop .15s cubic-bezier(.2,0,.13,1);
    font-family: var(--dn-dropdown-font, 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif);
    letter-spacing: 0;
}

/* Dark theme support */
[data-theme="dark"] ~ .noob-tl-dropdown,
body[data-theme="dark"] .noob-tl-dropdown,
.noob-tl-dropdown.theme-dark {
    border-color: var(--dn-dropdown-line, rgba(255,255,255,.12));
    background: transparent;
    box-shadow: var(--dn-dropdown-shadow, 0 24px 68px rgba(0,0,0,.52), 0 3px 10px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.045), inset 0 1px 0 rgba(255,255,255,.14));
}

.noob-tl-dropdown::before,
.noob-tl-dropdown::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}
.noob-tl-dropdown::before {
    z-index: 0;
    background: var(--dn-dropdown-bg, linear-gradient(180deg, rgba(255,255,255,.58), rgba(242,242,242,.42)));
    backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
    -webkit-backdrop-filter: var(--dn-dropdown-blur, blur(44px) saturate(185%) contrast(64%) brightness(1.1));
}
.noob-tl-dropdown::after {
    z-index: 0;
    background: var(--dn-dropdown-scrim, linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 48%, rgba(214,214,214,.18) 100%));
}
.noob-tl-dropdown.theme-dark::before {
    background: var(--dn-dropdown-bg, linear-gradient(180deg, rgba(30,34,32,.6), rgba(13,18,16,.5)));
    backdrop-filter: var(--dn-dropdown-blur, blur(42px) saturate(165%) contrast(72%) brightness(.95));
    -webkit-backdrop-filter: var(--dn-dropdown-blur, blur(42px) saturate(165%) contrast(72%) brightness(.95));
}
.noob-tl-dropdown.theme-dark::after {
    background: var(--dn-dropdown-scrim, linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035) 48%, rgba(0,0,0,.18)));
}

@keyframes noobTlDrop {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Section label */
.noob-tl-section-label {
    position: relative;
    z-index: 1;
    font-size: var(--dn-dropdown-label-size, 13px);
    font-weight: var(--dn-dropdown-label-weight, 400);
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--dn-dropdown-muted, rgba(18,22,18,.58));
    padding: 10px 11px 6px;
    user-select: none;
}
.noob-tl-dropdown.theme-dark .noob-tl-section-label {
    color: var(--dn-dropdown-muted, rgba(244,248,243,.62));
}

/* Language option button */
.noob-tl-opt {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 36px;
    padding: 0 11px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--dn-dropdown-muted, rgba(18,22,18,.78));
    cursor: pointer;
    font-family: inherit;
    font-size: var(--dn-dropdown-item-size, 14px);
    font-weight: var(--dn-dropdown-item-weight, 500);
    text-align: left;
    transition: background .12s ease, color .12s ease;
    gap: 8px;
}

.noob-tl-dropdown.theme-dark .noob-tl-opt {
    color: var(--dn-dropdown-muted, rgba(244,248,243,.76));
}

.noob-tl-opt:hover {
    background: var(--dn-dropdown-hover, rgba(18,22,18,.055));
    color: var(--dn-ink, #1f1f1f);
}
.noob-tl-dropdown.theme-dark .noob-tl-opt:hover {
    background: var(--dn-dropdown-hover, rgba(244,248,243,.075));
    color: var(--dn-ink, #eef0f6);
}

.noob-tl-opt.active {
    background: var(--dn-dropdown-active-bg, #141414);
    color: var(--dn-dropdown-active-fg, #fff);
    font-weight: var(--dn-dropdown-active-weight, 650);
}
.noob-tl-opt.active::after {
    content: none;
    display: none;
}

.noob-tl-opt .tl-native {
    font-weight: inherit;
    flex-shrink: 0;
}
.noob-tl-opt .tl-label {
    font-size: 12px;
    font-weight: var(--dn-dropdown-label-weight, 400);
    opacity: .58;
    margin-left: auto;
}

/* ── Progress bar (fixed at top of viewport) ── */
.noob-tl-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100000;
    background: transparent;
    pointer-events: none;
    display: none;
}
.noob-tl-progress.active { display: block; }

.noob-tl-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c5cf0, #22d3ee, #7c5cf0);
    background-size: 200% 100%;
    border-radius: 0 2px 2px 0;
    transition: width .3s ease;
    animation: noobTlShimmer 1.2s linear infinite;
}

@keyframes noobTlShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Scrollbar ── */
.noob-tl-dropdown::-webkit-scrollbar { width: 4px; }
.noob-tl-dropdown::-webkit-scrollbar-track { background: transparent; }
.noob-tl-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 4px; }
.noob-tl-dropdown.theme-dark::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); }

/* ── Mobile: bottom sheet style ── */
@media (max-width: 600px) {
    .noob-tl-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 55vh;
        border-radius: 18px 18px 0 0;
        padding: 10px;
        animation: noobTlSlideUp .2s cubic-bezier(.2,0,.13,1);
    }
    @keyframes noobTlSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}
/* =============================================
   SMART SEARCH — Seamless Inline Search UI
   ============================================= */

/* ── Search Bar (Top of Dashboard) ── */
.smart-search-bar {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 6px;
}

.smart-search-bar-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: transparent;
    border: 1.5px solid var(--bd, rgba(255,255,255,0.08));
    border-radius: 12px;
    transition: all 0.25s ease;
}

.smart-search-bar.active .smart-search-bar-inner {
    border-color: var(--accent, #7c5cf0);
    box-shadow: 0 0 0 3px rgba(124, 92, 240, 0.08);
}

.ss-bar-icon {
    width: 16px;
    height: 16px;
    color: var(--t3, #888);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.smart-search-bar.active .ss-bar-icon {
    color: var(--accent, #7c5cf0);
}

.ss-bar-input {
    flex: 1;
    border: none;
    background: transparent;
    font: 400 14px/1 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--t1, #e6e6e6);
    outline: none;
    caret-color: var(--accent, #7c5cf0);
    min-width: 0;
}

.ss-bar-input:focus,
.ss-bar-input:focus-visible {
    outline: 0;
    box-shadow: none;
}

.ss-bar-input::placeholder {
    color: var(--t3, #666);
}

.ss-bar-shortcut {
    display: flex;
    align-items: center;
    gap: 3px;
    font: 500 10px/1 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--t3, #555);
    background: var(--bg3, rgba(255,255,255,0.04));
    padding: 3px 7px;
    border-radius: 5px;
    border: 1px solid var(--bd, rgba(255,255,255,0.06));
    letter-spacing: 0.5px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.smart-search-bar.active .ss-bar-shortcut {
    opacity: 0;
    pointer-events: none;
    width: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

.ss-bar-clear {
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: var(--t3, #666);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 50%;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.ss-bar-clear:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.smart-search-bar.has-query .ss-bar-clear {
    display: flex;
}

@media (max-width: 768px) {
    .ss-bar-shortcut { display: none; }
    .smart-search-bar { max-width: 100%; }
    .ss-bar-input { font-size: 15px; }
}

/* ── Inline Results (Flows below search bar) ── */
.ss-inline-results {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: none;
}

.ss-inline-results.visible {
    display: block;
}

/* ── Filter Chips ── */
.ss-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    flex-wrap: wrap;
    overflow: hidden;
}

.ss-filters:empty {
    display: none;
}

.ss-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    background: transparent;
    border: 1px solid var(--bd, rgba(255,255,255,0.1));
    border-radius: 999px;
    font: 500 11px/1 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--t2, #aaa);
    cursor: pointer;
    transition: all 0.18s ease;
    animation: chipIn 0.15s ease-out both;
    user-select: none;
    white-space: nowrap;
}

.ss-chip:hover {
    border-color: var(--accent, #7c5cf0);
    color: var(--accent, #7c5cf0);
}

.ss-chip.active {
    background: var(--accent, #7c5cf0);
    border-color: var(--accent, #7c5cf0);
    color: #fff;
}

.ss-chip .chip-n {
    font-size: 9px;
    opacity: 0.6;
    font-weight: 700;
}

.ss-chip .chip-x {
    font-size: 10px;
    margin-left: 1px;
    opacity: 0.7;
}

.ss-chip.active .chip-x:hover {
    opacity: 1;
}

.ss-sep {
    color: var(--t3, #444);
    font-size: 10px;
    user-select: none;
}

@keyframes chipIn {
    from { opacity: 0; transform: translateX(-6px) scale(0.92); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── Group Headers ── */
.ss-grp {
    padding: 0;
}

.ss-grp-hdr {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 2px 5px;
    font: 700 10px/1 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--t3, #777);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    user-select: none;
}

.ss-grp-hdr .g-icon {
    font-size: 12px;
}

.ss-grp-hdr .g-n {
    margin-left: auto;
    font-weight: 600;
    font-size: 9px;
    color: var(--t3, #555);
    background: var(--bg3, rgba(255,255,255,0.04));
    padding: 2px 6px;
    border-radius: 99px;
}

/* ── Result Items ── */
.ss-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
    animation: itemIn 0.2s ease-out both;
}

.ss-item:hover,
.ss-item.focused {
    background: var(--bg3, rgba(255,255,255,0.04));
}

.ss-item.focused {
    background: rgba(124, 92, 240, 0.08);
    box-shadow: inset 3px 0 0 var(--accent, #7c5cf0);
}

[data-theme="light"] .ss-item:hover,
[data-theme="light"] .ss-item.focused {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .ss-item.focused {
    background: rgba(124, 92, 240, 0.06);
}

.ss-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ss-dot.red { background: #ef4444; box-shadow: 0 0 5px rgba(239,68,68,0.35); }
.ss-dot.purple { background: #a855f7; box-shadow: 0 0 5px rgba(168,85,247,0.35); }
.ss-dot.default { background: #4b5563; }

.ss-item-body {
    flex: 1;
    min-width: 0;
}

.ss-item-name {
    font: 500 13.5px/1.3 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--t1, #e6e6e6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-item-name mark {
    background: rgba(124, 92, 240, 0.2);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

[data-theme="light"] .ss-item-name mark {
    background: rgba(124, 92, 240, 0.15);
}

.ss-item-path {
    font: 400 11px/1.3 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--t3, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.ss-tag {
    font: 600 8px/1 var(--font-body, Inter, system-ui, sans-serif);
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.ss-tag.notes {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.ss-item-arrow {
    color: var(--t3, #444);
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-3px);
    transition: all 0.12s ease;
}

.ss-item:hover .ss-item-arrow,
.ss-item.focused .ss-item-arrow {
    opacity: 1;
    transform: translateX(0);
}

@keyframes itemIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Empty States ── */
.ss-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 16px;
    text-align: center;
    gap: 8px;
}

.ss-empty-ico {
    font-size: 36px;
    opacity: 0.35;
}

.ss-empty-t {
    font: 500 14px/1.3 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--t2, #aaa);
}

.ss-empty-s {
    font: 400 12px/1.5 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--t3, #666);
    max-width: 280px;
}

/* ── Subject Suggestion Chips (No Results) ── */
.ss-suggests {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}

.ss-sug {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid var(--bd, rgba(255,255,255,0.08));
    border-radius: 999px;
    font: 500 11px/1 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--t2, #aaa);
    cursor: pointer;
    transition: all 0.18s ease;
}

.ss-sug:hover {
    border-color: var(--accent, #7c5cf0);
    color: var(--accent, #7c5cf0);
}

/* ── Show-more link ── */
.ss-more {
    display: block;
    text-align: center;
    padding: 8px;
    font: 500 11px/1 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--accent, #7c5cf0);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s;
    border: none;
    background: none;
    width: 100%;
}

.ss-more:hover {
    opacity: 1;
}

/* ── Divider between results and dashboard content ── */
.ss-divider {
    height: 1px;
    background: var(--bd, rgba(255,255,255,0.06));
    margin: 12px 0 4px;
    display: none;
}

.ss-inline-results.visible + .ss-divider,
.ss-divider.visible {
    display: block;
}

/* ── Hide dashboard sections when search is active ── */
.premium-dash.search-active .pd-hero-content,
.premium-dash.search-active .pd-hero-visual,
.premium-dash.search-active .pd-metrics-updates-wrapper,
.premium-dash.search-active .pd-section {
    display: none;
}

.premium-dash.search-active .pd-hero {
    min-height: 0;
    padding: 0;
    margin: 0;
}

/* ══════════════════════════════════════════
   Search Satellite Moon (QuickBall Orbit)
   ══════════════════════════════════════════ */
.search-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 10;
    pointer-events: none;
    animation: search-orbit-spin 10s linear infinite;
}
@keyframes search-orbit-spin {
    from { transform: rotate(120deg); }
    to { transform: rotate(480deg); }
}

.search-satellite {
    position: absolute;
    top: -46px;
    left: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    background: linear-gradient(135deg, #38bdf8, #06b6d4);
    box-shadow: 0 0 8px rgba(56,189,248,0.45), 0 0 18px rgba(56,189,248,0.15);
    color: #fff;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: search-sat-counter 10s linear infinite;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s, box-shadow 0.2s;
}
.search-satellite svg {
    width: 9px;
    height: 9px;
    stroke: #fff;
}
@keyframes search-sat-counter {
    from { transform: rotate(-120deg); }
    to { transform: rotate(-480deg); }
}

.search-satellite:hover {
    transform: rotate(0deg) scale(1.3) !important;
    box-shadow: 0 0 14px rgba(56,189,248,0.65), 0 0 28px rgba(56,189,248,0.25);
}
.search-satellite:active {
    transform: rotate(0deg) scale(0.9) !important;
}

.search-satellite.pulse::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(56,189,248,0.5);
    animation: search-sat-pulse 0.6s ease-out forwards;
    pointer-events: none;
}
@keyframes search-sat-pulse {
    0% { width: 16px; height: 16px; opacity: 1; }
    100% { width: 50px; height: 50px; opacity: 0; }
}

/* Hide when idle */
.quickball.idle .search-orbit { opacity: 0; transition: opacity 0.3s; }
.quickball:not(.idle) .search-orbit { opacity: 1; transition: opacity 0.3s; }

/* Orbit Halted — pause & expand */
.quickball.orbit-halted .search-orbit {
    animation-play-state: paused !important;
}
.quickball.orbit-halted .search-satellite {
    animation-play-state: paused !important;
    top: -58px;
    width: 20px;
    height: 20px;
    transition: top 0.4s cubic-bezier(.34,1.56,.64,1), width 0.3s ease, height 0.3s ease, transform 0.2s, box-shadow 0.2s;
}
.quickball.orbit-halted .search-satellite svg {
    width: 11px;
    height: 11px;
}
/* Force visible when halted */
.quickball.orbit-halted .search-orbit {
    opacity: 1 !important;
}

/* ══════════════════════════════════════════
   Floating Search Panel
   ══════════════════════════════════════════ */
.ss-float-panel {
    position: fixed;
    z-index: 10000;
    width: 440px;
    max-height: 70vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg1, #1a1a2e);
    border: 1px solid var(--bd, rgba(255,255,255,0.08));
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-body, 'Inter', sans-serif);
}
.ss-float-panel.open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.ss-float-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg2, rgba(255,255,255,0.02));
    border-bottom: 1px solid var(--bd, rgba(255,255,255,0.06));
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    flex-shrink: 0;
    color: var(--t2, #aaa);
}
.ss-float-header:active { cursor: grabbing; }

.ss-float-header svg {
    color: var(--accent, #7c5cf0);
    flex-shrink: 0;
}

.ss-float-title {
    font: 600 13px/1 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--t1, #e6e6e6);
    flex: 1;
}

.ss-float-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--t3, #666);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.ss-float-close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.ss-float-input-wrap {
    padding: 10px 14px 4px;
    flex-shrink: 0;
}

.ss-float-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--bd, rgba(255,255,255,0.08));
    background: var(--bg3, rgba(255,255,255,0.03));
    border-radius: 10px;
    font: 400 14px/1 var(--font-body, Inter, system-ui, sans-serif);
    color: var(--t1, #e6e6e6);
    outline: none;
    caret-color: var(--accent, #7c5cf0);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ss-float-input::placeholder {
    color: var(--t3, #555);
}
.ss-float-input:focus {
    border-color: var(--accent, #7c5cf0);
    box-shadow: 0 0 0 2px rgba(124, 92, 240, 0.1);
}

.ss-float-filters {
    padding: 0 14px;
}

.ss-float-results {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px 14px;
    min-height: 100px;
    max-height: 55vh;
}

/* Scrollbar */
.ss-float-results::-webkit-scrollbar { width: 4px; }
.ss-float-results::-webkit-scrollbar-track { background: transparent; }
.ss-float-results::-webkit-scrollbar-thumb {
    background: rgba(124, 92, 240, 0.2);
    border-radius: 4px;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .ss-float-panel {
        width: calc(100vw - 24px) !important;
        max-height: 75vh !important;
        left: 12px !important;
        right: 12px !important;
        top: 10% !important;
        transform: translateY(0) scale(0.92) !important;
    }
    .ss-float-panel.open {
        transform: translateY(0) scale(1) !important;
    }
}
.qb-screen-os{
  --qbs-accent:#22d3ee;
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  overflow:hidden;
  border-radius:inherit;
  opacity:0;
  transform:none;
  pointer-events:none;
  color:var(--qbs-accent);
  background:radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--qbs-accent) 35%,transparent),transparent 42%),linear-gradient(180deg,rgba(3,7,18,.92),rgba(2,6,23,.98));
  box-shadow:inset 0 0 12px rgba(255,255,255,.06),0 0 18px color-mix(in srgb,var(--qbs-accent) 35%,transparent);
  transition:opacity .18s ease
}
.qb-screen-os.is-live{
  opacity:1;
  transform:none
}
.qb-screen-grid{
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:linear-gradient(rgba(34,211,238,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.32) 1px,transparent 1px);
  background-image:linear-gradient(color-mix(in srgb,var(--qbs-accent) 45%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--qbs-accent) 45%,transparent) 1px,transparent 1px);
  background-size:7px 7px;
  mask-image:radial-gradient(circle,#000 48%,transparent 92%)
}
.qb-screen-scanline{
  position:absolute;
  left:0;
  right:0;
  height:7px;
  top:-8px;
  opacity:.55;
  background:linear-gradient(180deg,transparent,rgba(125,249,255,.82),transparent);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--qbs-accent) 75%,white 15%),transparent);
  filter:blur(.3px);
  animation:qbsScan 1.55s linear infinite
}
.qb-screen-figure{
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--qbs-accent) 70%,transparent));
  transform-origin:center;
  animation:qbsFloat 1.8s ease-in-out infinite
}
.qb-screen-figure svg{
  width:100%;
  height:100%;
  fill:rgba(34,211,238,.2);
  fill:color-mix(in srgb,var(--qbs-accent) 22%,transparent);
  stroke:var(--qbs-accent);
  stroke-width:2.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.qb-screen-text{
  max-width:100%;
  padding:0 3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:7px;
  font-weight:900;
  letter-spacing:.45px;
  line-height:1.05;
  text-align:center;
  text-shadow:0 0 7px rgba(34,211,238,.65);
  text-shadow:0 0 7px color-mix(in srgb,var(--qbs-accent) 75%,transparent);
  white-space:nowrap
}
.qb-screen-sub{
  max-width:100%;
  padding:0 3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:4.8px;
  font-weight:800;
  letter-spacing:.65px;
  line-height:1;
  text-align:center;
  opacity:.78;
  white-space:nowrap
}
.qb-screen-pixels{
  display:none;
  grid-template-columns:repeat(7,3px);
  grid-auto-rows:3px;
  gap:2px;
  margin-top:1px
}
.qb-screen-pixel{
  width:3px;
  height:3px;
  border-radius:1px;
  background:rgba(148,163,184,.18)
}
.qb-screen-pixel.active{
  background:var(--qbs-accent);
  box-shadow:0 0 5px var(--qbs-accent)
}
.qb-screen-pixel.food{
  background:#fbbf24;
  box-shadow:0 0 5px #fbbf24
}
.qb-screen-mark{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:24px;
  font-weight:950;
  line-height:.8;
  text-shadow:0 0 10px var(--qbs-accent)
}
.quickball-orb.qb-screen-live .qb-face{
  opacity:.16;
  transform:none;
  transition:opacity .15s ease
}
.quickball-orb.qb-screen-highlight .qb-face{
  opacity:.88
}
.quickball-orb.qb-screen-highlight .qb-eye{
  fill:var(--qbs-accent)!important;
  filter:drop-shadow(0 0 5px var(--qbs-accent))
}
.quickball-orb.qb-screen-highlight .qb-pupil{
  fill:rgba(2,6,23,.82)!important
}
.quickball-orb.qb-screen-highlight .qb-screen-os{
  opacity:.52
}
.quickball-orb.qb-screen-fast{
  animation:qbsAlarm .18s linear 5
}
.quickball-orb[data-qb-shape="island"] .qb-screen-figure{
  width:21px;
  height:21px
}
.quickball-orb[data-qb-shape="island"] .qb-screen-text{
  font-size:6.7px
}
.qb-screen-os[data-mode="clock"] .qb-screen-text{
  font-size:11px;
  letter-spacing:.2px
}
.qb-screen-os[data-mode="clock"] .qb-screen-sub{
  font-size:4.6px
}
.qb-screen-os[data-mode="game"]{
  gap:2px
}
.qb-screen-os[data-mode="game"] .qb-screen-pixels{
  display:grid
}
.qb-screen-os[data-mode="game"] .qb-screen-figure{
  display:none
}
.qb-screen-os[data-mode="game"] .qb-screen-text{
  font-size:5.7px
}
.qb-screen-os[data-mode="game"] .qb-screen-sub{
  font-size:4.2px
}
.qb-screen-os[data-mode="topic"] .qb-screen-figure,
.qb-screen-os[data-mode="subject"] .qb-screen-figure{
  animation:qbsFadeIn .35s ease,qbsFloat 1.8s ease-in-out infinite .35s
}
.qb-screen-os[data-mode="mcq"] .qb-screen-figure{
  width:24px;
  height:21px;
  animation:qbsFadeIn .22s ease
}
.qb-screen-os[data-mode="highlight"]{
  background:radial-gradient(circle at 50% 50%,rgba(34,211,238,.38),rgba(3,7,18,.78) 62%,rgba(2,6,23,.93));
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--qbs-accent) 55%,transparent),rgba(3,7,18,.78) 62%,rgba(2,6,23,.93))
}
.qb-screen-os[data-mode="highlight"] .qb-screen-figure{
  width:18px;
  height:18px
}
.qb-screen-os[data-mode="section"] .qb-screen-text{
  font-size:6.2px
}
.qb-screen-os[data-mode="fast"]{
  color:#f87171;
  filter:saturate(1.35) contrast(1.12)
}
@keyframes qbsScan{
  0%{transform:translateY(-8px)}
  100%{transform:translateY(58px)}
}
@keyframes qbsFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-1px) scale(1.04)}
}
@keyframes qbsFadeIn{
  0%{opacity:0}
  100%{opacity:1}
}
@keyframes qbsAlarm{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(1.6px)}
}
/* ══════════════════════════════════════════
   SVG Face Styles (Nova / Visor / Softbot / Island)
   ══════════════════════════════════════════ */
.qb-face {
    overflow: visible;

    --qb-cyan: #22f2ff;
    --qb-cyan-soft: rgba(34, 242, 255, 0.42);
    --qb-eye-color: #22f2ff;
}
.qb-eye, .qb-brow, .qb-mouth, .qb-blush {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.qb-face[data-face-style="visor"],
.qb-face[data-face-style="island"],
.qb-face[data-face-style="softbot"] {
    transform: scale(1.02);
}
.qb-visor {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55)) drop-shadow(0 0 8px rgba(34,242,255,0.12));
}
.qb-visor-shine {
    opacity: 0.78;
}
.qb-face[data-face-style="visor"] .qb-eye,
.qb-face[data-face-style="island"] .qb-eye,
.qb-face[data-face-style="softbot"] .qb-eye {
    fill: var(--qb-eye-color);
    filter: url("#qbCyanGlow");
    opacity: 0.96;
}
.qb-face[data-face-style="softbot"] .qb-eye {
    fill: var(--qb-eye-color);
    filter: url("#qbSoftGlow");
}
.qb-face[data-face-style="visor"] .qb-mouth,
.qb-face[data-face-style="island"] .qb-mouth,
.qb-face[data-face-style="softbot"] .qb-mouth {
    display: none;
}
.qb-face[data-expression="angry"] .qb-eye,
.qb-face[data-expression="furious"] .qb-eye,
.qb-face[data-expression="annoyed"] .qb-eye {
    fill: var(--qb-eye-color);
}
.qb-face[data-expression="scared"] .qb-eye,
.qb-face[data-expression="awe"] .qb-eye,
.qb-face[data-expression="surprised"] .qb-eye {
    animation: qbEyePulse 0.9s ease-in-out infinite;
}
.qb-face[data-expression="glee"] .qb-eye,
.qb-face[data-expression="excited"] .qb-eye,
.qb-face[data-expression="laughing"] .qb-eye {
    animation: qbEyeSpark 1.2s ease-in-out infinite;
}
.qb-pupil {
    transition: cx 0.6s cubic-bezier(0.25, 1, 0.5, 1), cy 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes qbEyePulse {
    0%, 100% { opacity: 0.86; filter: url("#qbCyanGlow"); }
    50% { opacity: 1; filter: url("#qbCyanGlow") drop-shadow(0 0 6px rgba(34,242,255,0.7)); }
}
@keyframes qbEyeSpark {
    0%, 100% { opacity: 0.92; }
    50% { opacity: 1; }
}

/* Subject badge */
.qb-subj-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 10px;
    z-index: 5;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    pointer-events: none;
}

/* ══════════════════════════════════════════
   Speech Bubble
   ══════════════════════════════════════════ */
.qb-speech {
    position: fixed;
    z-index: 3200;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    font-family: Inter, 'Segoe UI', system-ui, sans-serif;
    max-width: 220px;
    text-align: center;
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: normal;
    line-height: 1.4;
    background: rgba(18, 18, 24, 0.92);
    color: #e4e4e7;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.qb-speech.vis {
    opacity: 1;
    transform: translateX(-50%) translateY(-100%) translateY(-4px);
}
.qb-speech::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(18, 18, 24, 0.92);
}
[data-theme="light"] .qb-speech {
    background: rgba(255,255,255,0.95);
    color: #1a1a1a;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
[data-theme="light"] .qb-speech::after {
    border-top-color: rgba(255,255,255,0.95);
}
[data-theme="paper"] .qb-speech {
    background: rgba(245,240,230,0.95);
    color: #2c2416;
    border-color: rgba(120,100,70,0.1);
}
[data-theme="paper"] .qb-speech::after {
    border-top-color: rgba(245,240,230,0.95);
}

/* CSS Emoji Overlays for Face */
.qb-overlay-emoji {
    position: absolute;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    z-index: 10;
}
.qb-overlay-emoji.sweat {
    top: 2px;
    right: 2px;
    transform: scale(0.5) translateY(-10px);
}
.qb-overlay-emoji.vein {
    top: 4px;
    left: 2px;
    transform: scale(0.5) rotate(-20deg);
}
.qb-overlay-emoji.sparkle {
    top: 0px;
    right: 0px;
    transform: scale(0.5);
}
.qb-overlay-emoji.vis {
    opacity: 1;
    transform: scale(1) translateY(0) rotate(0deg);
}

/* ══════════════════════════════════════════
   Play Moon (Triangle Satellite)
   ══════════════════════════════════════════ */
.play-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 10;
    pointer-events: none;
    animation: play-orbit-spin 8s linear infinite;
}
@keyframes play-orbit-spin {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}
.play-satellite {
    position: absolute;
    top: -48px;
    left: -7px;
    width: 14px;
    height: 14px;
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    background: rgba(161, 161, 170, 0.25);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    color: rgba(161, 161, 170, 0.6);
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: play-sat-counter 8s linear infinite;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
@keyframes play-sat-counter {
    from { transform: rotate(-360deg); }
    to { transform: rotate(0deg); }
}
.play-satellite:hover {
    background: rgba(74, 222, 128, 0.4);
    filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.5));
}
.play-satellite.active {
    background: #4ade80;
    filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.6)) drop-shadow(0 0 12px rgba(74, 222, 128, 0.2));
    animation: play-sat-counter 8s linear infinite, play-glow 4s ease-in-out infinite;
}
.play-satellite.active::after {
    content: 'Play Mode';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    font-size: 8px;
    font-weight: 700;
    color: #4ade80;
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0.8;
}
@keyframes play-glow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.6)); }
    50% { filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.9)) drop-shadow(0 0 18px rgba(74, 222, 128, 0.3)); }
}
.quickball.idle .play-orbit { opacity: 0; transition: opacity 0.3s; }
.quickball:not(.idle) .play-orbit { opacity: 1; transition: opacity 0.3s; }
.quickball.orbit-halted .play-orbit { animation-play-state: paused !important; }
.quickball.orbit-halted .play-satellite { animation-play-state: paused !important; }
.quickball.orbit-halted .play-satellite {
    top: -62px;
    width: 18px;
    height: 18px;
    transition: top 0.4s cubic-bezier(.34,1.56,.64,1), width 0.3s ease, height 0.3s ease, background 0.3s ease, filter 0.3s ease;
}
.quickball.orbit-halted .quickball-orb {
    box-shadow: 0 0 0 3px rgba(129,140,248,0.3), 0 0 18px rgba(129,140,248,0.15);
    transition: box-shadow 0.3s ease;
}
.quickball.orbit-halted .play-orbit { opacity: 1 !important; }

@media(max-width:768px){
  .qb-screen-text{font-size:6.3px}
  .qb-screen-sub{font-size:4.2px}
}
@media(prefers-reduced-motion:reduce){
  .qb-screen-os,
  .qb-screen-scanline,
  .qb-screen-figure,
  .quickball-orb.qb-screen-fast{animation:none!important;transition:none!important}
}
/* ========================================================================= */
/* AVITAN PANEL — Glassmorphic Floating Window                               */
/* ========================================================================= */

#avitanPanel {
    position: fixed;
    z-index: 500;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -45%) scale(0.95);
    width: 90vw;
    max-width: 980px;
    height: 84vh;
    max-height: 860px;
    min-height: 640px;
    border-radius: 18px;
    border: 1px solid var(--bd, rgba(0,0,0,0.08));
    background: var(--bg, #FAF9F6);
    backdrop-filter: blur(40px) saturate(150%);
    -webkit-backdrop-filter: blur(40px) saturate(150%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255,255,255,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#avitanPanel.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

#avitanPanel.immersive {
    width: 40%;
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    transform: none;
    z-index: 1000;
}

/* ── Header ── */
#avitanPanel .nr-header {
    background: transparent;
    border-bottom: 1px solid var(--bd, rgba(0,0,0,0.06));
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
#avitanPanel .nr-header:active {
    cursor: grabbing;
}

/* ── Body ── */
#avitanPanel .nr-body {
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 18px 18px;
    flex: 1;
}

/* ── Resize Handle ── */
#avitanResizeHandle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    cursor: se-resize;
    z-index: 9999;
    background: transparent;
}
#avitanResizeHandle::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255, 255, 255, 0.4);
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
    border-bottom-right-radius: 3px;
    pointer-events: none;
}

/* ========================================================================= */
/* AVITAN Canvas Engine                                                       */
/* ========================================================================= */

.avitan-canvas-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    overflow: hidden;
    border-radius: inherit;
    border: none;
    box-shadow: none;
    z-index: 1;
    transition: top 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                right 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease,
                border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: top, left, width, height, opacity;
}

.avitan-canvas-wrapper canvas {
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================================================================= */
/* AVITAN Companion Surface                                                   */
/* ========================================================================= */

.avitan-shell {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg, #FAF9F6);
    color: var(--t1, #1F1A14);
    transition: background-color 0.35s ease, color 0.35s ease;
}

.avitan-stage {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    padding-bottom: 0;
    touch-action: pan-y;
}

.avitan-stage .avitan-canvas-wrapper {
    border-radius: 0;
}

.avitan-orbit-hud {
    display: none !important;
}

.avitan-hud-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--t2, rgba(100,100,100,0.68));
    font-weight: 800;
}

.avitan-tier-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(52, 211, 153, 0.38);
    background: rgba(6, 78, 59, 0.42);
    color: #bbf7d0;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
}

.avitan-tier-pill.basic {
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(120, 53, 15, 0.42);
    color: #fde68a;
}

.avitan-hud-topic {
    margin-top: 8px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 850;
    color: var(--t1, #1F1A14);
    text-shadow: none;
}

.avitan-hud-path {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--t2, rgba(100,100,100,0.72));
}

/* ── Floating Hub Trigger Removed ── */

/* ── Floating Stage Actions (settings, fullscreen, close) ── */
.avitan-stage-actions {
    position: absolute;
    top: 16px;
    right: 18px;
    display: flex;
    gap: 6px;
    z-index: 15;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.avitan-stage:hover .avitan-stage-actions,
.avitan-stage.hub-open .avitan-stage-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.avitan-stage-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--t2, #6b5e4a);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.2s ease, background 0.2s ease;
    font-family: Inter, system-ui, sans-serif;
    opacity: 0.55;
}

.avitan-stage-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.avitan-stage-btn:hover {
    background: var(--bg2, rgba(0, 0, 0, 0.05));
    color: var(--t1, #1F1A14);
    opacity: 1;
}

.avitan-stage-btn--stop {
    color: #ef4444;
    opacity: 0.65;
}

.avitan-stage-btn--stop:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    opacity: 1;
}

/* ── Persistent left rail: OS sections + essential controls ── */
.avitan-side-rail {
    position: absolute;
    top: 44px;
    left: 0;
    bottom: 16px;
    z-index: 48;
    width: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 4px 5px;
    pointer-events: auto;
    color: var(--muted, #6b5e4a);
    background: transparent;
}

.avitan-side-rail::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: color-mix(in srgb, var(--border, rgba(0,0,0,0.08)) 70%, transparent);
    opacity: 0.62;
}

.avitan-rail-btn {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--rS, 8px);
    color: var(--muted, #6b5e4a);
    background: transparent;
    cursor: pointer;
    opacity: 0.72;
    transition: color 0.16s ease, background-color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

.avitan-rail-btn::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
    transition: background-color 0.16s ease, opacity 0.16s ease;
}

.avitan-rail-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avitan-rail-stop svg {
    fill: currentcolor;
    stroke: none;
}

.avitan-rail-btn:hover {
    opacity: 1;
    color: var(--t1, #1F1A14);
    background: color-mix(in srgb, var(--surface, #FFFCF5) 58%, transparent);
}

.avitan-rail-btn:focus {
    outline: none;
}

.avitan-rail-btn:focus-visible {
    opacity: 1;
    outline: 1px solid color-mix(in srgb, var(--secondary, #5B7DB1) 44%, transparent);
    outline-offset: 1px;
    background: color-mix(in srgb, var(--surface, #FFFCF5) 62%, transparent);
}

.avitan-rail-btn.active {
    opacity: 1;
    color: var(--secondary, #5B7DB1);
    background: color-mix(in srgb, var(--surface, #FFFCF5) 78%, transparent);
}

.avitan-rail-btn.active::before {
    background: var(--secondary, #5B7DB1);
    opacity: 0.86;
}

.avitan-rail-stop {
    margin-top: 2px;
    color: var(--accent-focus, #FD6E60);
}

.avitan-rail-close {
    color: var(--muted, #6b5e4a);
}

.avitan-rail-divider {
    width: 18px;
    height: 1px;
    margin: 3px 0;
    background: color-mix(in srgb, var(--border, rgba(0,0,0,0.08)) 78%, transparent);
}

#avitanPanel:not(.avitan-os-panel-active) .avitan-side-rail {
    top: 40px;
}

#avitanPanel:not(.avitan-os-panel-active) .avitan-rail-btn[data-avitan-rail-app] {
    opacity: 0.56;
}

#avitanPanel:not(.avitan-os-panel-active) .avitan-rail-os {
    opacity: 1;
}

/* ── Hub Panel ── */
.avitan-hub-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(101%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(2, 6, 23, 0.96);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 20px 20px 0 0;
    padding: 20px 24px 24px;
    max-height: 80%;
    overflow-y: auto;
    z-index: 20;
    box-shadow: 0 -12px 48px rgba(0,0,0,0.55);
}

.avitan-hub-panel.open {
    transform: translateY(0);
}

.avitan-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.avitan-hub-header span {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.3px;
}

.avitan-hub-close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.6);
    color: rgba(203, 213, 225, 0.8);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    transition: all 0.2s ease;
}

.avitan-hub-close:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

.avitan-hub-section {
    margin-bottom: 18px;
}

.avitan-hub-section:last-child {
    margin-bottom: 0;
}

.avitan-hub-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(186, 230, 253, 0.5);
    margin-bottom: 8px;
}

.avitan-hub-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.avitan-hub-row button {
    min-height: 32px;
    border-radius: 999px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    color: #e5f6ff;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    font-family: Inter, system-ui, sans-serif;
}

.avitan-hub-row button:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.55);
    background: rgba(14, 116, 144, 0.32);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.12);
}

.avitan-hub-row button.active {
    color: #fff;
    border-color: rgba(244, 114, 182, 0.5);
    background: rgba(157, 23, 77, 0.25);
}

.avitan-hub-settings .avitan-hub-row {
    align-items: center;
}

.avitan-hub-settings .avitan-continuous-toggle,
.avitan-hub-settings .avitan-realtime-toggle,
.avitan-hub-settings .avitan-interrupt-btn {
    min-height: 32px;
    border-radius: 999px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 750;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    color: #e5f6ff;
    cursor: pointer;
    transition: all 0.16s ease;
    font-family: Inter, system-ui, sans-serif;
}

.avitan-hub-settings .avitan-continuous-toggle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.avitan-hub-settings .avitan-continuous-toggle.active,
.avitan-hub-settings .avitan-realtime-toggle.active {
    color: #bbf7d0;
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(22, 101, 52, 0.22);
}

.avitan-hub-settings .avitan-interrupt-btn {
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(127, 29, 29, 0.26);
}

.avitan-hub-settings .avitan-interrupt-btn:hover {
    color: #fee2e2;
    border-color: rgba(248, 113, 113, 0.58);
    background: rgba(153, 27, 27, 0.38);
}

.avitan-hub-settings .avitan-meter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

#avitanInterruptionSelect {
    transition: all 0.2s ease;
}

#avitanInterruptionSelect:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

#avitanInterruptionSelect:focus {
    border-color: rgba(52, 211, 153, 0.6) !important;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.15) !important;
}

.avitan-hub-settings .avitan-meter span {
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
    color: #a7f3d0;
}

.avitan-hub-settings .avitan-meter small {
    font-size: 10px;
    color: rgba(203, 213, 225, 0.55);
}

.avitan-tool-chip,
.avitan-continuous-toggle,
.avitan-realtime-toggle,
.avitan-mic,
.avitan-send {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.68);
    color: #e5f6ff;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
    font-family: Inter, system-ui, sans-serif;
}

.avitan-tool-chip:hover,
.avitan-continuous-toggle:hover,
.avitan-realtime-toggle:hover,
.avitan-mic:hover,
.avitan-send:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.62);
    background: rgba(14, 116, 144, 0.36);
}

.avitan-console {
    flex: 0 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden;
    z-index: 24;
}

.avitan-workspace-chat {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    max-height: min(320px, 46%);
}

.avitan-console-slim {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 0;
    border-bottom: none;
}

.avitan-console-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--t1, #1F1A14);
    letter-spacing: 0.2px;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avitan-console-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.avitan-console-actions button {
    min-height: 20px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--t2, #6b5e4a);
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.5;
    transition: opacity 0.16s ease, color 0.16s ease;
}

.avitan-console-actions button:hover {
    opacity: 1;
    color: var(--t1, #1F1A14);
    background: transparent;
}

.avitan-console-sub {
    font-size: 11px;
    color: var(--t2, rgba(100,100,100,0.7));
    white-space: nowrap;
    flex-shrink: 0;
}

.avitan-voice-disclosure {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--t2, #6b5e4a);
    font-size: 10px;
    font-weight: 850;
    white-space: nowrap;
    opacity: 0.4;
}


.avitan-tools-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.avitan-tool-chip {
    min-height: 30px;
    border-radius: 999px;
    padding: 0 11px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.avitan-context-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    padding: 4px 0;
    border-radius: 0;
    background: transparent;
    border: none;
    color: var(--t2, #6b5e4a);
    font-size: 11px;
    line-height: 1.35;
    opacity: 0.6;
}

.avitan-context-strip span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avitan-context-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
    background: #38bdf8;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.55);
}

.avitan-context-strip.has-selection .avitan-context-dot {
    background: #fbbf24;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.62);
}

.avitan-chat {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 160px;
    overflow-y: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
}

.avitan-msg {
    max-width: 92%;
    margin: 0 0 12px;
    animation: avitanMsgIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.avitan-msg-user {
    margin-left: auto;
}

.avitan-msg-meta {
    margin: 0 0 3px 0;
    font-size: 10px;
    font-weight: 800;
    color: var(--t2, #6b5e4a);
    opacity: 0.5;
}

.avitan-msg-user .avitan-msg-meta {
    text-align: right;
    margin-right: 2px;
}

.avitan-msg-body {
    border-radius: 6px;
    padding: 5px 0;
    background: transparent;
    border: none;
    color: var(--t1, #1F1A14);
    font-size: 14px;
    line-height: 1.55;
}

.avitan-msg-user .avitan-msg-body {
    background: transparent;
    border: none;
    color: var(--t2, #6b5e4a);
    font-style: italic;
}

.avitan-msg-body p {
    margin: 0;
}

.avitan-msg-body p + p {
    margin-top: 9px;
}

.avitan-msg-body strong {
    color: var(--t1, #1F1A14);
    font-weight: 800;
}

.avitan-msg-body code {
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(14, 116, 144, 0.08);
    color: var(--t1, #1F1A14);
}

.avitan-action-tray {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.avitan-action-chip,
.avitan-premium-moment {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 9px;
    font: 850 10px/1 Inter, system-ui, sans-serif;
    white-space: nowrap;
}

.avitan-action-chip.ok {
    border: 1px solid rgba(52, 211, 153, 0.36);
    background: rgba(6, 78, 59, 0.35);
    color: #bbf7d0;
}

.avitan-action-chip.warn {
    border: 1px solid rgba(251, 191, 36, 0.34);
    background: rgba(120, 53, 15, 0.32);
    color: #fde68a;
}

.avitan-premium-moment {
    border: 1px solid rgba(125, 211, 252, 0.28);
    background: rgba(14, 116, 144, 0.24);
    color: #e0f2fe;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.avitan-followups {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: -3px 0 12px;
    animation: avitanMsgIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.avitan-followups button {
    min-height: 24px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--t2, #6b5e4a);
    cursor: pointer;
    padding: 2px 8px;
    font: 800 11px Inter, system-ui, sans-serif;
    opacity: 0.5;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.avitan-followups button:hover {
    opacity: 1;
    background: transparent;
    color: var(--t1, #1F1A14);
}

.avitan-input-row {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: end;
    gap: 4px;
    margin: 0;
}

.avitan-input-row textarea {
    width: 100%;
    min-height: 36px;
    max-height: 120px;
    resize: none;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--bd, rgba(0,0,0,0.08));
    background: transparent;
    color: var(--t1, #1F1A14);
    outline: 0;
    padding: 8px 4px;
    font: 13px/1.4 Inter, system-ui, sans-serif;
}

.avitan-input-row textarea:focus {
    border: none;
    border-bottom: 1px solid rgba(14, 116, 144, 0.35);
    box-shadow: none;
    background: transparent;
}

.avitan-mic,
.avitan-send {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #155e75;
    opacity: 0.88;
    cursor: pointer;
    transition: opacity 0.16s ease;
}

.avitan-mic svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    overflow: visible;
}

.avitan-mic-capsule {
    fill: currentcolor;
    opacity: 0.18;
    stroke: currentcolor;
    stroke-width: 1.8;
}

.avitan-mic-stem,
.avitan-mic-wave {
    stroke: currentcolor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avitan-mic-wave {
    opacity: 0.72;
}

.avitan-mic-wave-hot {
    animation: avitanMicWave 0.9s ease-in-out infinite;
}

.avitan-mic:hover,
.avitan-send:hover {
    opacity: 1;
    background: transparent;
    transform: none;
}

.avitan-mic.listening {
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #047857;
    animation: avitanIdlePulse 4s ease-in-out infinite;
}

.avitan-mic.hearing {
    background: rgba(239, 68, 68, 0.16);
    border: 1px solid rgba(239, 68, 68, 0.55);
    color: #dc2626;
    animation: avitanActivePulse 0.9s ease-in-out infinite;
}

.avitan-tools-strip {
    min-height: 30px;
    align-items: center;
    padding-top: 2px;
}

.avitan-tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.avitan-muted,
.avitan-transcript {
    font-size: 12px;
    color: var(--t2, #6b5e4a);
    opacity: 0.5;
}

.avitan-transcript {
    display: none;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.35);
    border: none;
}

@keyframes avitanMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes avitanPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); }
}

@keyframes avitanIdlePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}

@keyframes avitanActivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.45); transform: scale(1); }
    50% { box-shadow: 0 0 0 10px rgba(248, 113, 113, 0); transform: scale(1.08); }
}

@keyframes avitanMicWave {
    0%, 100% { opacity: 0.35; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(1px); }
}

@media (max-width: 820px) {
    #avitanPanel {
        width: 96vw;
        height: 88dvh;
        min-height: 0;
    }

    .avitan-stage {
        flex: 1 1 auto;
        min-height: 0;
    }

    .avitan-console {
        max-height: 55%;
        padding: 10px 12px 12px;
    }

    .avitan-console.collapsed {
        max-height: 40px;
        padding: 8px 12px;
    }

    .avitan-hud-topic {
        font-size: 18px;
    }

    .avitan-hub-panel {
        max-height: 70%;
        padding: 16px 18px 18px;
    }
}

@media (hover: none), (pointer: coarse) {
    .avitan-stage-actions {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

@media (max-width: 768px) {
    #avitanPanel:not(.wm-docked) {
        width: 100vw !important;
        height: 55dvh !important;
        max-width: none !important;
        max-height: none !important;
        min-height: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(8px) scale(0.98) !important;
        border-radius: 20px 20px 0 0 !important;
        background: transparent !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15) !important;
    }

    #avitanPanel:not(.wm-docked).open {
        transform: none !important;
    }

    #avitanResizeHandle {
        display: none !important;
    }

    #avitanPanel:not(.wm-docked) .avitan-shell {
        height: 55dvh !important;
    }

    #avitanPanel:not(.wm-docked) .avitan-stage {
        display: none !important;
    }

    body.note-fullscreen-open.avitan-panel-open #avitanPanel:not(.wm-docked) .avitan-stage,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel:not(.wm-docked) .avitan-stage,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel:not(.wm-docked) .avitan-stage {
        display: block !important;
        height: 100% !important;
        background: transparent !important;
    }

    #avitanPanel:not(.wm-docked, .avitan-os-panel-active) .avitan-stage .avitan-canvas-wrapper,
    #avitanPanel:not(.wm-docked, .avitan-os-panel-active) .avitan-stage .avitan-display {
        display: none !important;
    }

    #avitanPanel:not(.wm-docked, .avitan-os-panel-active) .avitan-side-rail {
        top: 12px !important;
        bottom: 12px !important;
        height: calc(100% - 24px) !important;
    }

    .avitan-orbit-hud,
    .avitan-stage-actions {
        display: none !important;
    }



    .avitan-hub-panel {
        max-height: 82%;
        padding: 14px 14px 18px;
        border-radius: 16px 16px 0 0;
    }

    .avitan-hub-row {
        gap: 6px;
    }

    .avitan-hub-row button,
    .avitan-hub-settings .avitan-continuous-toggle {
        min-height: 36px;
        padding: 0 12px;
        font-size: 11px;
    }

    #avitanPanel:not(.wm-docked, .avitan-os-panel-active) .avitan-console {
        position: absolute !important;
        top: 12px !important;
        left: 54px !important;
        right: 12px !important;
        bottom: 12px !important;
        height: calc(100% - 24px) !important;
        max-height: none !important;
        background: var(--surface, #FFF) !important;
        border: 1px solid var(--bd, rgba(0,0,0,0.08)) !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05) !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 10 !important;
        padding: 12px !important;
        margin: 0 !important;
    }

    #avitanPanel:not(.wm-docked, .avitan-os-panel-active) .avitan-console.collapsed {
        top: auto !important;
        height: 42px !important;
        max-height: 42px !important;
        padding: 8px 10px;
    }

    #avitanPanel:not(.wm-docked, .avitan-os-panel-active) .avitan-chat {
        max-height: none !important;
        flex: 1 1 auto !important;
    }

    .avitan-console-slim {
        gap: 7px;
    }

    .avitan-console-title {
        font-size: 12px;
        max-width: 34vw;
    }

    .avitan-console-actions button {
        min-height: 26px;
        padding: 0 7px;
        font-size: 9px;
    }

    #avitanPanel:not(.wm-docked) .avitan-console-sub,
    #avitanPanel:not(.wm-docked) .avitan-voice-disclosure {
        display: none;
    }

    .avitan-context-strip {
        min-height: 24px;
        font-size: 10px;
    }

    .avitan-msg {
        max-width: 96%;
        margin-bottom: 10px;
    }

    .avitan-msg-body {
        font-size: 12.5px;
        line-height: 1.46;
        padding: 7px 8px;
    }

    .avitan-input-row {
        grid-template-columns: 44px 1fr 44px;
        gap: 7px;
    }

    .avitan-input-row textarea,
    .avitan-mic,
    .avitan-send {
        min-height: 44px;
    }

    .avitan-action-tray {
        gap: 5px;
    }

    .avitan-premium-moment {
        white-space: normal;
        line-height: 1.25;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* ========================================================================= */
/* Tool Cards (inside AVITAN panel)                                           */
/* ========================================================================= */

.tool-card {
    padding: 20px;
    margin: 10px 0;
    background: var(--bg3);
    border: 1px solid var(--bd);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.tool-card:hover { background: var(--acL); border-color: var(--ac); }
.tool-card .tool-icon { font-size: 32px; margin-bottom: 10px; }
.tool-card .tool-name { font-weight: 600; font-size: 16px; margin-bottom: 5px; }
.tool-card .tool-desc { font-size: 12px; color: var(--t2); }

/* ========================================================================= */
/* Immersive Mode                                                             */
/* ========================================================================= */

.topic-view.immersive-mode { padding:0; position:fixed; top:0; left:0; right:0; bottom:0; background:var(--bg1); z-index:100; }
.topic-view.immersive-mode .topic-header { position:absolute; top:0; left:0; right:0; height:60px; background:var(--bg2); border-bottom:1px solid var(--bd); z-index:20; display:flex; align-items:center; padding:0 20px; }
.topic-view.immersive-mode iframe { position:absolute; top:60px; left:0; width:60%; height:calc(100vh - 60px); border:none; }
.topic-view.immersive-mode .immersive-iframe { position:absolute; top:60px; right:0; width:40%; height:calc(100vh - 60px); border:none; }

/* Realtime talk button green glow indicator */
#avitanRealtimeBtn svg {
    fill: currentcolor !important;
}
.avitan-rail-btn.realtime-active {
    opacity: 1 !important;
    color: #10b981 !important; /* Premium emerald green */
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.75));
}
.avitan-rail-btn.realtime-active::before {
    background: #10b981 !important;
    opacity: 1 !important;
}

.avitan-mode-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.62);
}

.avitan-mode-badge.mode-realtime {
    border-color: rgba(16, 185, 129, 0.55);
    color: #a7f3d0;
    background: rgba(6, 78, 59, 0.32);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.22);
}

.avitan-mode-badge.mode-legacy {
    border-color: rgba(245, 158, 11, 0.45);
    color: #fde68a;
    background: rgba(120, 53, 15, 0.25);
}

/* ========================================================================= */
/* AVITAN Tutor Settings / Token Economy Styles                             */
/* ========================================================================= */

.ucp-tutor-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 10px 0;
}

.ucp-tutor-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--t1, #1F1A14);
    margin-bottom: 5px;
}

.ucp-tutor-subtitle {
    font-size: 12px;
    color: var(--t2, rgba(100,100,100,0.7));
    margin-bottom: 15px;
}

.ucp-tutor-section-header {
    margin-top: 8px;
    margin-bottom: 4px;
}

.ucp-tutor-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--t1, #1F1A14);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.ucp-tutor-section-desc {
    font-size: 11px;
    color: var(--t2, rgba(100,100,100,0.6));
    margin-top: 2px;
}

.ucp-tutor-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.ucp-tutor-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg2, rgba(0,0,0,0.05));
    color: var(--t2, rgba(100,100,100,0.7));
    letter-spacing: 0.2px;
}

.ucp-tutor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .ucp-tutor-grid {
        grid-template-columns: 1fr;
    }
}

.ucp-tutor-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid var(--bd, rgba(0,0,0,0.08));
    background: var(--bg-card, rgba(255,255,255,0.7));
    padding: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.ucp-tutor-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.ucp-tutor-card.active-card {
    border-color: var(--secondary, #5B7DB1);
    background: color-mix(in srgb, var(--secondary, #5B7DB1) 6%, var(--bg-card, #fff));
    box-shadow: 0 8px 24px rgba(91,125,177,0.12);
}

.ucp-tutor-card.active-card::after {
    content: 'ACTIVE';
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--secondary, #5B7DB1);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.ucp-tutor-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ucp-tutor-card-icon {
    font-size: 20px;
}

.ucp-tutor-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1, #1F1A14);
}

.ucp-tutor-card-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.ucp-tutor-card-badge.gemini { background: rgba(56, 189, 248, 0.15); color: #0284c7; }
.ucp-tutor-card-badge.openai { background: rgba(16, 185, 129, 0.15); color: #059669; }
.ucp-tutor-card-badge.eleven { background: rgba(168, 85, 247, 0.15); color: #7c3aed; }
.ucp-tutor-card-badge.mimo { background: rgba(245, 158, 11, 0.15); color: #d97706; }

.ucp-tutor-card-desc {
    font-size: 11px;
    color: var(--t2, rgba(100,100,100,0.8));
    line-height: 1.4;
    margin-bottom: 12px;
    flex: 1 1 auto;
}

.ucp-tutor-brain-row,
.ucp-tutor-voice-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ucp-tutor-voice-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--t2, rgba(100,100,100,0.6));
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.ucp-tutor-voice-select {
    flex: 1;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--bd, rgba(0,0,0,0.1));
    background: var(--bg-input, rgba(255,255,255,0.8));
    color: var(--t1, #1F1A14);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.ucp-tutor-voice-select:focus {
    border-color: var(--secondary, #5B7DB1);
}

.ucp-tutor-card-meta {
    font-size: 10px;
    color: var(--t2, rgba(100,100,100,0.6));
    margin-bottom: 10px;
}

.ucp-tutor-ledger {
    margin-top: auto;
    margin-bottom: 12px;
}

.ucp-tutor-ledger-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--t1, #1F1A14);
    margin-bottom: 4px;
}

.ucp-tutor-ledger-track {
    height: 6px;
    background: var(--bg2, rgba(0,0,0,0.06));
    border-radius: 99px;
    overflow: hidden;
}

.ucp-tutor-ledger-fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.4s ease;
}

.ucp-tutor-ledger-fill.gemini { background: #0ea5e9; }
.ucp-tutor-ledger-fill.openai { background: #10b981; }
.ucp-tutor-ledger-fill.eleven { background: #a855f7; }
.ucp-tutor-ledger-fill.mimo { background: #f59e0b; }

.ucp-tutor-actions-row {
    display: flex;
    gap: 8px;
    margin-top: 5px;
}

.ucp-tutor-btn {
    flex: 1 1 50%;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-align: center;
    transition: all 0.2s ease;
    font-family: inherit;
}

.ucp-tutor-btn-primary {
    background: var(--secondary, #5B7DB1);
    color: #fff;
}

.ucp-tutor-btn-primary:hover {
    background: var(--secondary-focus, #4A6A9B);
}

.ucp-tutor-btn-secondary {
    background: var(--bg2, rgba(0,0,0,0.05));
    color: var(--t1, #1F1A14);
    border: 1px solid var(--bd, rgba(0,0,0,0.08));
}

.ucp-tutor-btn-secondary:hover {
    background: var(--bg2, rgba(0,0,0,0.08));
}

.ucp-tutor-topup-matrix {
    margin-top: 15px;
    border-top: 1px dashed var(--bd, rgba(0,0,0,0.1));
    padding-top: 15px;
}

.ucp-tutor-matrix-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--t1, #1F1A14);
    margin-bottom: 8px;
}

/* Comparison matrix table */
.ucp-tutor-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin-top: 10px;
}

.ucp-tutor-matrix-table th, .ucp-tutor-matrix-table td {
    padding: 8px;
    border-bottom: 1px solid var(--bd, rgba(0,0,0,0.06));
    text-align: left;
}

.ucp-tutor-matrix-table th {
    font-weight: 700;
    color: var(--t2, rgba(100,100,100,0.8));
}

/* Glowing topup modal overlay */
.topup-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    animation: fadeIn 0.25s ease;
}

.topup-modal {
    background: var(--bg, #FAF9F6);
    border: 1px solid var(--bd, rgba(0,0,0,0.1));
    border-radius: 16px;
    padding: 24px;
    width: 90vw;
    max-width: 520px;
    position: relative;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18);
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.topup-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--t2, rgba(0,0,0,0.4));
}

.topup-modal-header {
    margin-bottom: 20px;
}

.topup-modal-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--t1, #1F1A14);
}

.topup-modal-subtitle {
    font-size: 12px;
    color: var(--t2, rgba(100,100,100,0.7));
    margin-top: 4px;
}

.topup-packages-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.topup-package-card {
    border: 1px solid var(--bd, rgba(0,0,0,0.08));
    border-radius: 12px;
    padding: 16px;
    background: var(--bg-card, rgba(255,255,255,0.7));
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.topup-package-card:hover {
    border-color: var(--secondary, #5B7DB1);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.topup-package-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1, #1F1A14);
    margin-bottom: 4px;
}

.topup-package-price {
    font-size: 22px;
    font-weight: 900;
    color: var(--t1, #1F1A14);
    margin: 10px 0;
}

.topup-package-cost-info {
    font-size: 9px;
    color: #10b981;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.topup-package-btn {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--secondary, #5B7DB1);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

.topup-package-btn:hover {
    background: var(--secondary-focus, #4A6A9B);
}
.avitan-os-root {
    position: absolute;
    inset: 0;
    z-index: 12;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.08s,
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
    font-family: var(--font-body, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif);
    -webkit-font-smoothing: antialiased;
    contain: layout paint style;
    will-change: opacity, transform;
    touch-action: pan-y;
}

/* Push OS workspace below the display strip */
#avitanPanel.avitan-os-panel-active .avitan-os-root {
    top: 200px;
}

/* Strip display replaces status bar and app titlebar in all modes */
#avitanPanel.avitan-os-panel-active .avitan-os-statusbar {
    display: none;
}
#avitanPanel.avitan-os-panel-active .avitan-os-app-titlebar {
    display: none;
}
#avitanPanel.avitan-os-panel-active .avitan-os-screen {
    display: flex;
    flex-direction: column;
}
#avitanPanel.avitan-os-panel-active .avitan-os-content {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
}
#avitanPanel.avitan-os-panel-active .avitan-os-app-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}
#avitanPanel.avitan-os-panel-active .avitan-os-app-body {
    flex: 1 1 0;
    min-height: 0;
}

.avitan-os-root.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.avitan-os-root.app-labs {
    touch-action: pan-x pan-y;
}

#avitanPanel.avitan-os-panel-active,
#avitanPanel.open.avitan-os-panel-active,
#avitanPanel.notes-reader.avitan-os-panel-active {
    background: var(--bg, #FAF9F6) !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    transition: border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease,
                background-color 0.3s ease;
}

#avitanPanel.avitan-os-panel-active #avitanResizeHandle {
    display: none !important;
}

#avitanPanel.avitan-os-panel-active .avitan-hub-panel {
    display: none !important;
}

#avitanPanel.avitan-os-panel-active .nr-body,
#avitanPanel.avitan-os-panel-active .avitan-shell,
#avitanPanel.avitan-os-panel-active .avitan-stage {
    background: var(--bg, #FAF9F6) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease;
}

.avitan-stage.avitan-os-active > .avitan-orbit-hud,
.avitan-stage.avitan-os-active > .avitan-canvas-wrapper {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.avitan-stage.avitan-os-active::before {
    display: none;
    content: none;
}

.avitan-os-screen {
    position: relative;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: 44px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 10px 14px;
    overflow: hidden;
    color: var(--text, #1F1A14);
    background: var(--bg, #FAF9F6);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    contain: layout paint;
}

.avitan-os-screen button,
.avitan-os-screen input,
.avitan-os-screen label {
    font: inherit;
}

.avitan-os-screen button {
    border: 0;
    cursor: pointer;
}

.avitan-os-statusbar {
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border-bottom: 0;
}

.avitan-os-brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #111827;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.05em;
    white-space: nowrap;
}

.avitan-os-brand-mark {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    color: var(--text, #1F1A14);
    background: transparent;
    border: 0;
}

.avitan-os-topic-line {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.avitan-os-topic-line strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -0.03em;
}

.avitan-os-topic-line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6b7280;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 700;
}

.avitan-os-live-stack {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.avitan-os-live-stack span:first-child {
    display: none;
}

.avitan-os-clock,
.avitan-os-tier {
    min-height: 28px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    color: var(--muted, #6b5e4a);
    background: color-mix(in srgb, var(--surface, #FFFCF5) 72%, transparent);
    border: 0;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.avitan-os-tier {
    color: #166534;
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.avitan-os-content {
    min-height: 0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding-left: 28px;
}

.avitan-os-home,
.avitan-os-workbench,
.avitan-os-app-view {
    height: 100%;
    min-height: 0;
}

.avitan-os-workbench {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
}

.avitan-os-workbench-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow-y: auto;
    padding: 72px 24px 16px;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}

.avitan-os-workbench-card {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 15px;
    border-radius: var(--rS, 8px);
    color: #111827;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, 0.95);
    box-shadow: none;
    transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
    will-change: transform;
}

.avitan-os-workbench-card:hover {
    transform: translateY(-1px);
    border-color: #dbeafe;
    background: #f8fbff;
}

.avitan-os-card-top {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.avitan-os-card-top b {
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
    color: #111827;
    font-size: 14px;
    line-height: 1.12;
    font-weight: 850;
    letter-spacing: -0.025em;
}

.avitan-os-card-top i {
    min-height: 24px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    color: #2563eb;
    background: #eff6ff;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.avitan-os-workbench-card strong {
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
    color: #111827;
    font-size: 16px;
    line-height: 1.18;
    font-weight: 850;
    letter-spacing: -0.045em;
}

.avitan-os-workbench-card small {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.avitan-os-app-view {
    display: grid;
    grid-template-rows: 48px minmax(0, 1fr);
    overflow: hidden;
    background: #fff;
}

.avitan-os-app-titlebar {
    min-height: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(229, 231, 235, 0.9);
}

.avitan-os-app-titlebar button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--rS, 8px);
    color: #374151;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, 0.95);
    font-size: 16px;
    font-weight: 800;
}

.avitan-os-app-titlebar button:hover {
    background: #f9fafb;
}

.avitan-os-app-titlebar div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.avitan-os-app-titlebar span {
    color: #6b7280;
    font-size: 10px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.avitan-os-app-titlebar strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.avitan-os-app-body {
    min-height: 0;
    overflow-y: auto;
    padding: 16px 0 0;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}

.avitan-os-panel-flow {
    display: grid;
    gap: 12px;
}

.avitan-os-tutor-app {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
}

.avitan-os-chat-dock {
    min-height: 0;
    display: flex;
    padding: 0 !important;
    margin: 0 !important;
}

.avitan-os-big-readout,
.avitan-os-empty,
.avitan-os-list button,
.avitan-os-file-drop,
.avitan-os-file-card,
.avitan-os-invite,
.avitan-os-micro-grid span {
    color: #111827;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, 0.95);
    box-shadow: none;
}

.avitan-os-big-readout {
    display: grid;
    gap: 7px;
    padding: 15px;
    border-radius: var(--rS, 8px);
}

.avitan-os-big-readout span,
.avitan-os-list span,
.avitan-os-file-card span,
.avitan-os-phone-screen span,
.avitan-os-file-drop span {
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.avitan-os-big-readout strong {
    color: #111827;
    font-size: 22px;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -0.055em;
}

.avitan-os-big-readout p,
.avitan-os-empty {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
}

.avitan-os-chipline,
.avitan-os-room-console {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.avitan-os-chipline button,
.avitan-os-room-console button {
    min-height: 20px;
    padding: 0;
    border-radius: 0;
    color: var(--t2, rgba(100,100,100,0.78));
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 850;
    transition: color 0.16s ease, opacity 0.16s ease;
    opacity: 0.75;
}

.avitan-os-chipline button:hover,
.avitan-os-room-console button:hover {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--t1, #1F1A14);
    opacity: 1;
}

.avitan-os-file-card button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--rS, 8px);
    color: #1f2937;
    background: #f9fafb;
    border: 1px solid rgba(229, 231, 235, 0.95);
    font-size: 13px;
    line-height: 1;
    font-weight: 850;
}

.avitan-os-file-card button:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.avitan-os-room-console button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.avitan-os-list {
    display: grid;
    gap: 8px;
}

.avitan-os-list button {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: var(--rS, 8px);
    text-align: left;
}

.avitan-os-list strong {
    overflow: hidden;
    color: #111827;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 750;
}

.avitan-os-empty {
    padding: 14px;
    border-radius: var(--rS, 8px);
}

.avitan-os-micro-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.avitan-os-micro-grid span {
    min-height: 62px;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 10px;
    border-radius: var(--rS, 8px);
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.avitan-os-micro-grid b {
    color: #111827;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}

.avitan-os-qbank-analytics {
    gap: 10px;
    padding-bottom: 16px;
}

.avitan-os-qbank-readout {
    border-left: 3px solid #2563eb;
}

.avitan-os-qbank-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.avitan-os-qbank-stat,
.avitan-os-qbank-section,
.avitan-os-qbank-quick-actions button,
.avitan-os-qbank-next button {
    color: #111827;
    background: color-mix(in srgb, #fff 92%, #eff6ff);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 8px;
    box-shadow: none;
}

.avitan-os-qbank-stat {
    min-height: 64px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 11px 12px;
}

.avitan-os-qbank-stat b {
    color: #111827;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
}

.avitan-os-qbank-stat small,
.avitan-os-qbank-section-head span,
.avitan-os-qbank-next span,
.avitan-os-qbank-subhead {
    color: #6b7280;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0;
}

.avitan-os-qbank-stat.tone-correct b {
    color: #047857;
}

.avitan-os-qbank-stat.tone-wrong b {
    color: #dc2626;
}

.avitan-os-qbank-stat.tone-unseen b,
.avitan-os-qbank-stat.tone-pending b {
    color: #7c3aed;
}

.avitan-os-qbank-section {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.avitan-os-qbank-section-head,
.avitan-os-qbank-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.avitan-os-qbank-section-head b,
.avitan-os-qbank-next strong,
.avitan-os-qbank-row b {
    color: #111827;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 850;
}

.avitan-os-qbank-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.avitan-os-qbank-marker {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 999px;
    color: #6b7280;
    background: #fff;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.avitan-os-qbank-marker.correct {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.avitan-os-qbank-marker.wrong {
    color: #dc2626;
    background: #fef2f2;
    border-color: #fecaca;
}

.avitan-os-qbank-marker.bookmarked {
    box-shadow: inset 0 -3px 0 #a78bfa;
}

.avitan-os-qbank-marker.current {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.avitan-os-qbank-more {
    min-width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    color: #6b7280;
    font-size: 11px;
    font-weight: 850;
}

.avitan-os-qbank-next {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.avitan-os-qbank-next div {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.avitan-os-qbank-next strong {
    overflow-wrap: anywhere;
}

.avitan-os-qbank-next button,
.avitan-os-qbank-quick-actions button {
    min-height: 34px;
    padding: 0 12px;
    color: #0f62fe;
    background: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
}

.avitan-os-qbank-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.avitan-os-qbank-quick-actions button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.avitan-os-qbank-quick-actions b {
    color: #111827;
}

.avitan-os-qbank-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(226, 232, 240, 0.85);
}

.avitan-os-qbank-row span,
.avitan-os-qbank-note {
    color: #4b5563;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
}

.avitan-os-qbank-note {
    margin: 0;
}

.avitan-os-qbank-subhead {
    padding-top: 4px;
}

.avitan-os-lab-values {
    gap: 10px;
    padding-bottom: 16px;
}

.avitan-os-lab-readout {
    border-left: 3px solid #0f766e;
}

.avitan-os-lab-search {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    color: #64748b;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 8px;
}

.avitan-os-lab-search svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avitan-os-lab-search input {
    min-width: 0;
    flex: 1 1 auto;
    height: 40px;
    padding: 0;
    color: #111827;
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
}

.avitan-os-lab-search input::placeholder {
    color: #94a3b8;
}

.avitan-os-lab-tabs-shell {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 6px;
}

.avitan-os-lab-tabs {
    min-width: 0;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 4px;
    scroll-padding-inline: 12px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.avitan-os-lab-tabs::-webkit-scrollbar {
    display: none;
}

.avitan-os-lab-tab {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 13px;
    color: #475569;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 850;
    scroll-snap-align: start;
}

.avitan-os-lab-tab.active {
    color: #fff;
    background: #2d4050;
    border-color: #2d4050;
}

.avitan-os-lab-tabs-nudge {
    width: 28px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: #475569;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 999px;
}

.avitan-os-lab-tabs-nudge svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avitan-os-lab-tabs-nudge:hover,
.avitan-os-lab-tabs-nudge:focus-visible {
    color: #0f766e;
    background: #f0fdfa;
}

.avitan-os-lab-results {
    display: grid;
    gap: 10px;
}

.avitan-os-lab-result-count {
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0;
}

.avitan-os-lab-category-section {
    display: grid;
    gap: 10px;
}

.avitan-os-lab-category-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.avitan-os-lab-category-head span {
    color: #64748b;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.avitan-os-lab-category-head b {
    color: #111827;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 900;
}

.avitan-os-lab-group {
    display: grid;
    gap: 7px;
}

.avitan-os-lab-group h4 {
    margin: 0;
    color: #111827;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 900;
}

.avitan-os-lab-table,
.avitan-os-lab-empty {
    overflow: hidden;
    color: #111827;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 8px;
}

.avitan-os-lab-row {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(116px, 0.72fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-top: 1px solid rgba(226, 232, 240, 0.88);
}

.avitan-os-lab-row:first-child {
    border-top: 0;
}

.avitan-os-lab-head {
    min-height: 36px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #64748b;
    background: #f8fafc;
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0;
}

.avitan-os-lab-test {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.avitan-os-lab-test b,
.avitan-os-lab-range {
    color: #111827;
    font-size: 13px;
    line-height: 1.28;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.avitan-os-lab-test span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 650;
}

.avitan-os-lab-range {
    justify-self: end;
    text-align: right;
}

.avitan-os-lab-empty {
    display: grid;
    gap: 6px;
    padding: 18px 14px;
}

.avitan-os-lab-empty b {
    color: #111827;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 900;
}

.avitan-os-lab-empty span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
}

.avitan-os-memory-sphere {
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    justify-self: center;
    border-radius: 999px;
    color: #111827;
    background: radial-gradient(circle at 35% 25%, #fff, #eff6ff 44%, #dbeafe);
    border: 1px solid #bfdbfe;
}

.avitan-os-memory-sphere strong {
    color: #1d4ed8;
    font-size: 38px;
    line-height: 1;
    font-weight: 900;
}

.avitan-os-memory-sphere span {
    max-width: 86px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    text-align: center;
}

.avitan-os-phone-stage {
    display: grid;
    grid-template-columns: 128px 96px;
    align-items: center;
    gap: 14px;
}

.avitan-os-phone-shell {
    position: relative;
    width: 128px;
    min-height: 190px;
    padding: 8px;
    border-radius: 28px;
    background: #111827;
}

.avitan-os-phone-glow {
    position: absolute;
    inset: 25% 18%;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.24);
    filter: blur(16px);
}

.avitan-os-phone-screen {
    position: relative;
    height: 174px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 5px;
    border-radius: 22px;
    color: #e0f2fe;
    background: #020617;
}

.avitan-os-phone-screen strong {
    color: #fff;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
}

.avitan-os-phone-screen small {
    max-width: 90px;
    color: #94a3b8;
    font-size: 9px;
    line-height: 1.25;
    font-weight: 750;
    text-align: center;
}

.avitan-os-qr {
    width: 86px;
    height: 86px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 8px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, 0.95);
}

.avitan-os-qr i {
    display: block;
    border-radius: 2px;
    background: #e5e7eb;
}

.avitan-os-qr i.on {
    background: #111827;
}

.avitan-os-file-drop {
    min-height: 94px;
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 14px;
    border-radius: var(--rS, 8px);
    text-align: center;
}

.avitan-os-file-drop input {
    display: none;
}

.avitan-os-file-drop strong {
    color: #111827;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.avitan-os-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}

.avitan-os-file-card {
    min-width: 0;
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: var(--rS, 8px);
}

.avitan-os-file-card img,
.avitan-os-file-card video,
.avitan-os-doc {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    object-fit: cover;
    border-radius: var(--rS, 8px);
    color: #64748b;
    background: #f8fafc;
    font-size: 18px;
    font-weight: 900;
}

.avitan-os-file-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-size: 12px;
    font-weight: 850;
}

.avitan-os-file-card button {
    min-height: 28px;
    font-size: 11px;
}

.avitan-os-invite {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 12px;
    border-radius: var(--rS, 8px);
    color: #374151;
    font-size: 12px;
    font-weight: 750;
}

.avitan-os-dock {
    position: absolute;
    left: 0;
    top: 60px;
    bottom: 10px;
    z-index: 40;
    width: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 8px 4px;
    box-sizing: border-box;
    border-radius: 0;
    background: #fff;
    border: 0;
    border-right: 1px solid rgba(229, 231, 235, 0.95);
    box-shadow: none;
}

.avitan-os-dock button {
    position: relative;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #64748b;
    background: transparent;
    border: 0;
}

.avitan-os-dock button::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 999px;
    background: transparent;
}

.avitan-os-dock button.active {
    color: #2563eb;
    background: #eff6ff;
}

.avitan-os-dock button.active::before {
    background: #2563eb;
}

.avitan-os-dock-icon,
.avitan-os-dock svg {
    width: 19px;
    height: 19px;
    display: block;
}

.avitan-os-dock svg {
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avitan-os-command {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* AVITAN OS — Workspace chat: integrated panel (docked + undocked)       */
/* ─────────────────────────────────────────────────────────────────────── */

/* Stage drives container queries so chat layout adapts to its own width */
.avitan-stage.avitan-os-active {
    container-type: inline-size;
    container-name: avitanstage;
}

/* DEFAULT (narrow stage / docked rail): chat is a slim, compact bottom    *
 * strip.  Workbench reserves only the space that strip really needs.     */
#avitanPanel.avitan-os-panel-active .avitan-os-workbench-grid {
    padding: 18px 12px 10px;
}

#avitanPanel.avitan-os-panel-active .avitan-os-screen {
    grid-template-rows: 44px minmax(0, 1fr);
}

#avitanPanel.avitan-os-panel-active .avitan-console.avitan-workspace-chat {
    display: none !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    width: auto !important;
    height: 184px !important;
    max-height: 42% !important;
    padding: 9px 10px !important;
    gap: 6px !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08), 0 1px 4px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #0f172a !important;
    overflow: hidden !important;
}

#avitanPanel.avitan-os-panel-active .avitan-os-chat-dock .avitan-console.avitan-workspace-chat {
    display: flex !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    z-index: 1 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 10px 0 !important;
    margin: 0 !important;
}

/* Compact 1-row header in narrow: title + actions only                    */
#avitanPanel.avitan-os-panel-active .avitan-console-slim {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    padding: 0 0 4px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

#avitanPanel.avitan-os-panel-active .avitan-console-title {
    flex: 1 1 auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
    color: #0f172a !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    letter-spacing: -0.02em !important;
}

#avitanPanel.avitan-os-panel-active .avitan-console-actions {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    gap: 5px !important;
}

#avitanPanel.avitan-os-panel-active .avitan-console-actions button {
    min-height: 22px !important;
    padding: 0 7px !important;
    font-size: 9.5px !important;
}

/* Hide AI voice pill and status sub in narrow — keeps the strip slim      */
#avitanPanel.avitan-os-panel-active .avitan-voice-disclosure,
#avitanPanel.avitan-os-panel-active .avitan-console-sub {
    display: none !important;
}

/* Context strip: very compact pill                                        */
#avitanPanel.avitan-os-panel-active .avitan-context-strip {
    min-height: 0 !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
}

#avitanPanel.avitan-os-panel-active .avitan-context-dot {
    background: #2563eb !important;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.42) !important;
}

#avitanPanel.avitan-os-panel-active .avitan-context-strip.has-selection .avitan-context-dot {
    background: #f59e0b !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5) !important;
}

/* Chat scroll fills the small remaining space                             */
#avitanPanel.avitan-os-panel-active .avitan-chat {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 2px 2px 2px 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}

#avitanPanel.avitan-os-panel-active .avitan-msg {
    margin: 0 0 7px !important;
}

#avitanPanel.avitan-os-panel-active .avitan-msg-body {
    border-radius: 10px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
}

#avitanPanel.avitan-os-panel-active .avitan-msg-meta {
    margin: 0 0 3px 2px !important;
    font-size: 9.5px !important;
}

/* Compact input row                                                       */
#avitanPanel.avitan-os-panel-active .avitan-input-row {
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    gap: 6px !important;
    margin: 0 !important;
}

#avitanPanel.avitan-os-panel-active .avitan-input-row textarea {
    min-height: 32px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    color: #111827 !important;
    font: 12.5px/1.35 Inter, system-ui, sans-serif !important;
    box-shadow: none !important;
}

#avitanPanel.avitan-os-panel-active .avitan-input-row textarea::placeholder {
    color: #94a3b8;
}

#avitanPanel.avitan-os-panel-active .avitan-input-row textarea:focus {
    background: #fff !important;
    border-color: #93c5fd !important;
    box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.45) !important;
}

#avitanPanel.avitan-os-panel-active .avitan-mic,
#avitanPanel.avitan-os-panel-active .avitan-send {
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #f9fafb !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    color: #4b5563 !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

#avitanPanel.avitan-os-panel-active .avitan-send {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

#avitanPanel.avitan-os-panel-active .avitan-mic:hover,
#avitanPanel.avitan-os-panel-active .avitan-send:hover {
    transform: translateY(-1px);
}

#avitanPanel.avitan-os-panel-active .avitan-mic.listening {
    background: #ecfdf5 !important;
    border-color: #34d399 !important;
    color: #047857 !important;
}

#avitanPanel.avitan-os-panel-active .avitan-mic.hearing {
    background: #fef2f2 !important;
    border-color: #f87171 !important;
    color: #b91c1c !important;
}

/* WIDE STAGE (>=880px container): chat becomes a calm right-side column   *
 * with the original premium sizing.                                       */
@container avitanstage (min-width: 880px) {
    #avitanPanel.avitan-os-panel-active .avitan-os-workbench-grid {
        padding: 22px 352px 16px 24px;
    }

    #avitanPanel.avitan-os-panel-active .avitan-os-screen {
        grid-template-rows: 44px minmax(0, 1fr);
    }
    #avitanPanel.avitan-os-panel-active .avitan-console.avitan-workspace-chat {
        left: auto !important;
        right: 16px !important;
        top: 60px !important;
        bottom: 70px !important;
        width: 320px !important;
        height: auto !important;
        max-height: none !important;
        padding: 12px !important;
        gap: 8px !important;
        border-radius: 16px !important;
    }

    #avitanPanel.avitan-os-panel-active .avitan-console-slim {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 10px !important;
        row-gap: 4px !important;
        padding: 0 0 8px !important;
    }

    #avitanPanel.avitan-os-panel-active .avitan-console-title {
        grid-row: 1;
        grid-column: 1;
        flex: initial !important;
        font-size: 13px !important;
    }

    #avitanPanel.avitan-os-panel-active .avitan-console-actions {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
    }

    #avitanPanel.avitan-os-panel-active .avitan-console-actions button {
        font-size: 10px !important;
        padding: 0 8px !important;
    }

    #avitanPanel.avitan-os-panel-active .avitan-voice-disclosure {
        display: inline-flex !important;
        grid-row: 2;
        grid-column: 1;
        justify-self: start;
        min-height: 20px !important;
        padding: 0 8px !important;
        border: 1px solid #bfdbfe !important;
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        font-size: 9.5px !important;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    #avitanPanel.avitan-os-panel-active .avitan-console-sub {
        display: inline !important;
        grid-row: 2;
        grid-column: 2;
        justify-self: end;
        color: #6b7280 !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase;
    }

    #avitanPanel.avitan-os-panel-active .avitan-context-strip {
        padding: 6px 10px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
    }

    #avitanPanel.avitan-os-panel-active .avitan-msg {
        margin: 0 0 10px !important;
    }

    #avitanPanel.avitan-os-panel-active .avitan-msg-body {
        border-radius: 12px !important;
        padding: 8px 11px !important;
        font-size: 13px !important;
    }

    #avitanPanel.avitan-os-panel-active .avitan-input-row {
        grid-template-columns: 38px minmax(0, 1fr) 38px !important;
        gap: 8px !important;
    }

    #avitanPanel.avitan-os-panel-active .avitan-input-row textarea {
        min-height: 38px !important;
        padding: 9px 12px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
    }

    #avitanPanel.avitan-os-panel-active .avitan-mic,
    #avitanPanel.avitan-os-panel-active .avitan-send {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
    }
}

#avitanPanel.avitan-os-panel-active .avitan-console-toggle {
    color: #111827 !important;
}

#avitanPanel.avitan-os-panel-active .avitan-console-actions button {
    color: #374151 !important;
    background: #f9fafb !important;
    border-color: rgba(229, 231, 235, 0.95) !important;
    box-shadow: none !important;
}

#avitanPanel.avitan-os-panel-active .avitan-chat,
#avitanPanel.avitan-os-panel-active .avitan-input-row,
#avitanPanel.avitan-os-panel-active .avitan-transcript {
    background: transparent !important;
    box-shadow: none !important;
}

#avitanPanel.avitan-os-panel-active .avitan-msg-meta {
    color: #2563eb !important;
}

#avitanPanel.avitan-os-panel-active .avitan-msg-body {
    color: #111827 !important;
    background: #f3f4f6 !important;
}

#avitanPanel.avitan-os-panel-active .avitan-msg-user .avitan-msg-body {
    color: #0f172a !important;
    background: #dbeafe !important;
}

#avitanPanel.avitan-os-panel-active .avitan-msg-body strong {
    color: #111827 !important;
}

#avitanPanel.avitan-os-panel-active:not(.wm-docked) #avitanResizeHandle {
    display: block !important;
    pointer-events: auto !important;
    z-index: 10050;
    width: 34px;
    height: 34px;
    cursor: se-resize;
}

#avitanPanel.avitan-os-panel-active:not(.wm-docked) #avitanResizeHandle::after {
    opacity: 0.5;
    border-right-color: rgba(148, 163, 184, 0.42);
    border-bottom-color: rgba(148, 163, 184, 0.42);
}

#avitanPanel.avitan-os-panel-active .avitan-os-statusbar,
#avitanPanel.avitan-os-panel-active .avitan-os-app-titlebar {
    cursor: grab;
    user-select: none;
}

#avitanPanel.avitan-os-panel-active .avitan-os-statusbar:active,
#avitanPanel.avitan-os-panel-active .avitan-os-app-titlebar:active {
    cursor: grabbing;
}

#avitanPanel.avitan-os-panel-active .avitan-os-statusbar button,
#avitanPanel.avitan-os-panel-active .avitan-os-app-titlebar button {
    cursor: pointer;
}

#avitanPanel.avitan-os-panel-active .avitan-os-screen,
#avitanPanel.avitan-os-panel-active .avitan-os-app-view,
#avitanPanel.avitan-os-panel-active .avitan-os-workbench,
#avitanPanel.avitan-os-panel-active .avitan-os-content {
    color: var(--text, #1F1A14);
    background: var(--bg, #FAF9F6);
}

#avitanPanel.avitan-os-panel-active .avitan-os-brand,
#avitanPanel.avitan-os-panel-active .avitan-os-topic-line strong,
#avitanPanel.avitan-os-panel-active .avitan-os-workbench-card,
#avitanPanel.avitan-os-panel-active .avitan-os-card-top b,
#avitanPanel.avitan-os-panel-active .avitan-os-workbench-card strong,
#avitanPanel.avitan-os-panel-active .avitan-os-app-titlebar strong,
#avitanPanel.avitan-os-panel-active .avitan-os-big-readout,
#avitanPanel.avitan-os-panel-active .avitan-os-big-readout strong,
#avitanPanel.avitan-os-panel-active .avitan-os-empty,
#avitanPanel.avitan-os-panel-active .avitan-os-list button,
#avitanPanel.avitan-os-panel-active .avitan-os-list strong,
#avitanPanel.avitan-os-panel-active .avitan-os-file-drop,
#avitanPanel.avitan-os-panel-active .avitan-os-file-card,
#avitanPanel.avitan-os-panel-active .avitan-os-invite,
#avitanPanel.avitan-os-panel-active .avitan-os-micro-grid span {
    color: var(--text, #1F1A14);
}

#avitanPanel.avitan-os-panel-active .avitan-os-topic-line span,
#avitanPanel.avitan-os-panel-active .avitan-os-workbench-card small,
#avitanPanel.avitan-os-panel-active .avitan-os-app-titlebar span,
#avitanPanel.avitan-os-panel-active .avitan-os-big-readout span,
#avitanPanel.avitan-os-panel-active .avitan-os-big-readout p,
#avitanPanel.avitan-os-panel-active .avitan-os-empty,
#avitanPanel.avitan-os-panel-active .avitan-os-list span,
#avitanPanel.avitan-os-panel-active .avitan-os-file-card span,
#avitanPanel.avitan-os-panel-active .avitan-os-file-drop span {
    color: var(--muted, #6b5e4a);
}

#avitanPanel.avitan-os-panel-active .avitan-os-statusbar,
#avitanPanel.avitan-os-panel-active .avitan-os-app-titlebar {
    background: transparent;
    border: 0;
}

#avitanPanel.avitan-os-panel-active .avitan-os-dock {
    background: transparent;
    border: 0;
}

#avitanPanel.avitan-os-panel-active .avitan-os-dock,
.avitan-os-dock {
    display: none !important;
}

#avitanPanel.avitan-os-panel-active .avitan-os-brand-mark,
#avitanPanel.avitan-os-panel-active .avitan-os-workbench-card,
#avitanPanel.avitan-os-panel-active .avitan-os-app-titlebar button,
#avitanPanel.avitan-os-panel-active .avitan-os-big-readout,
#avitanPanel.avitan-os-panel-active .avitan-os-empty,
#avitanPanel.avitan-os-panel-active .avitan-os-list button,
#avitanPanel.avitan-os-panel-active .avitan-os-file-drop,
#avitanPanel.avitan-os-panel-active .avitan-os-file-card,
#avitanPanel.avitan-os-panel-active .avitan-os-invite,
#avitanPanel.avitan-os-panel-active .avitan-os-micro-grid span {
    background: transparent;
    border: 0;
    box-shadow: none;
}

#avitanPanel.avitan-os-panel-active .avitan-os-workbench-card:hover,
#avitanPanel.avitan-os-panel-active .avitan-os-app-titlebar button:hover {
    background: color-mix(in srgb, var(--surface, #FFFCF5) 54%, transparent);
    border-color: transparent;
}

#avitanPanel.avitan-os-panel-active .avitan-os-clock,
#avitanPanel.avitan-os-panel-active .avitan-os-tier,
#avitanPanel.avitan-os-panel-active .avitan-os-card-top i,
#avitanPanel.avitan-os-panel-active .avitan-os-dock button.active,
#avitanPanel.avitan-os-panel-active .avitan-os-chipline button,
#avitanPanel.avitan-os-panel-active .avitan-os-room-console button,
#avitanPanel.avitan-os-panel-active .avitan-os-file-card button {
    background: color-mix(in srgb, var(--surface, #FFFCF5) 72%, transparent);
    border: 0;
}

#avitanPanel.avitan-os-panel-active .avitan-os-dock button {
    color: var(--muted, #6b5e4a);
}

#avitanPanel.avitan-os-panel-active .avitan-os-dock button.active,
#avitanPanel.avitan-os-panel-active .avitan-os-card-top i {
    color: var(--secondary, #5B7DB1);
}

#avitanPanel.avitan-os-panel-active .avitan-os-dock button.active::before {
    background: var(--secondary, #5B7DB1);
}

.avitan-os-root,
.avitan-os-root *,
.avitan-os-root *::before,
.avitan-os-root *::after {
    letter-spacing: 0 !important;
}

#avitanPanel.avitan-os-panel-active .avitan-console,
#avitanPanel.avitan-os-panel-active .avitan-console * {
    letter-spacing: 0 !important;
}

.avitan-os-root strong,
.avitan-os-root b,
.avitan-os-root button {
    font-family: var(--font-body, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif);
}

#avitanPanel.avitan-os-panel-active .avitan-os-root.app-tutor .avitan-os-content,
#avitanPanel.avitan-os-panel-active .avitan-os-root.app-tutor .avitan-os-app-view,
#avitanPanel.avitan-os-panel-active .avitan-os-root.app-tutor .avitan-os-app-body {
    min-height: 0;
    overflow: hidden;
}

#avitanPanel.avitan-os-panel-active .avitan-os-root.app-tutor .avitan-os-app-body {
    padding-top: 2px;
}

#avitanPanel.avitan-os-panel-active .avitan-os-tutor-app {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

#avitanPanel.avitan-os-panel-active .avitan-os-tutor-toolbar {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 0 3px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--bd, rgba(0,0,0,.08)) 70%, transparent);
}

#avitanPanel.avitan-os-panel-active .avitan-os-tutor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: visible;
    padding: 0 3px 1px;
}

#avitanPanel.avitan-os-panel-active .avitan-os-tutor-actions .avitan-os-icon-action {
    position: relative;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0 !important;
    border-radius: 8px !important;
    color: var(--muted, #6b5e4a) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    opacity: 0.82;
    transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

#avitanPanel.avitan-os-panel-active .avitan-os-tutor-actions .avitan-os-icon-action:hover,
#avitanPanel.avitan-os-panel-active .avitan-os-tutor-actions .avitan-os-icon-action:focus-visible {
    opacity: 1;
    color: var(--t1, #1F1A14) !important;
    background: color-mix(in srgb, var(--surface, #FFFCF5) 78%, transparent) !important;
    border-color: color-mix(in srgb, var(--bd, rgba(0,0,0,.08)) 72%, transparent) !important;
    transform: translateY(-1px);
    outline: none;
}

#avitanPanel.avitan-os-panel-active .avitan-os-tutor-actions .avitan-os-icon-action::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    z-index: 80;
    min-width: max-content;
    max-width: 160px;
    padding: 6px 8px;
    border-radius: 8px;
    color: #1F1A14;
    background: color-mix(in srgb, var(--surface, #FFFCF5) 94%, #fff 6%);
    border: 1px solid color-mix(in srgb, var(--bd, rgba(0,0,0,.08)) 72%, transparent);
    box-shadow: 0 8px 22px rgba(42, 32, 20, 0.08);
    font-size: 11px;
    line-height: 1.1;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 3px);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

#avitanPanel.avitan-os-panel-active .avitan-os-tutor-actions .avitan-os-icon-action:hover::after,
#avitanPanel.avitan-os-panel-active .avitan-os-tutor-actions .avitan-os-icon-action:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

#avitanPanel.avitan-os-panel-active .avitan-os-action-icon,
#avitanPanel.avitan-os-panel-active .avitan-os-action-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

#avitanPanel.avitan-os-panel-active .avitan-os-action-icon svg {
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#avitanPanel.avitan-os-panel-active .avitan-os-root.app-tutor .avitan-os-chat-dock {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

#avitanPanel.avitan-os-panel-active .avitan-os-root.app-tutor .avitan-os-chat-dock .avitan-console.avitan-workspace-chat {
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
}

#avitanPanel.avitan-os-panel-active .avitan-os-root.app-tutor .avitan-console-slim,
#avitanPanel.avitan-os-panel-active .avitan-os-root.app-tutor .avitan-context-strip,
#avitanPanel.avitan-os-panel-active .avitan-os-root.app-tutor .avitan-input-row,
#avitanPanel.avitan-os-panel-active .avitan-os-root.app-tutor .avitan-transcript {
    flex: 0 0 auto;
}

#avitanPanel.avitan-os-panel-active .avitan-os-root.app-tutor .avitan-chat {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#avitanPanel.avitan-os-panel-active .avitan-os-root.app-note .avitan-os-screen {
    padding-top: 0;
    padding-bottom: 0;
}

#avitanPanel.avitan-os-panel-active .avitan-os-root.app-note .avitan-os-content,
#avitanPanel.avitan-os-panel-active .avitan-os-root.app-note .avitan-os-app-view,
#avitanPanel.avitan-os-panel-active .avitan-os-root.app-note .avitan-os-app-body {
    min-height: 0;
    overflow: hidden;
}

#avitanPanel.avitan-os-panel-active .avitan-os-root.app-note .avitan-os-app-body {
    padding: 0 !important;
}

#avitanPanel.avitan-os-panel-active .avitan-os-yourspace-lens {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: transparent;
}

#avitanPanel.avitan-os-panel-active .avitan-os-lens-loading {
    height: 100%;
    min-height: 180px;
    display: grid;
    place-items: center;
    color: var(--muted, #6b5e4a);
    font-size: 12px;
    font-weight: 750;
}

.avitan-os-content,
.avitan-os-workbench-grid,
.avitan-os-app-body,
.avitan-os-chat-dock {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
    .avitan-os-root,
    .avitan-os-root *,
    .avitan-os-root *::before,
    .avitan-os-root *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 760px) {
    #avitanPanel.avitan-os-panel-active .avitan-os-root {
        top: 56px;
    }

    .avitan-os-screen {
        grid-template-rows: 42px minmax(0, 1fr);
        padding: 8px 10px 8px 12px;
    }

    .avitan-os-content {
        padding-left: 42px;
    }

    .avitan-os-brand {
        font-size: 16px;
    }

    .avitan-os-brand-mark {
        width: 28px;
        height: 28px;
    }

    .avitan-os-topic-line,
    .avitan-os-live-stack span:first-child,
    .avitan-os-clock {
        display: none;
    }

    .avitan-os-statusbar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .avitan-os-workbench-grid {
        grid-template-columns: 1fr;
        padding: 18px 8px 12px;
    }

    .avitan-os-workbench-card {
        grid-row: auto;
    }

    .avitan-os-phone-stage {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .avitan-os-micro-grid {
        grid-template-columns: 1fr;
    }

    .avitan-os-dock {
        top: 54px;
        bottom: 8px;
        width: 40px;
        overflow: hidden;
    }
}
/* ========================================================================= */
/* AVITAN DISPLAY — Permanent Living Canvas                                   */
/* Background matches page color for magic camouflage effect                  */
/* ========================================================================= */

/* ── DEFAULT: Background layer, positioned per user spec ── */
.avitan-display {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--bg, var(--bg0, #FAF9F6));
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                right 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease,
                filter 0.3s ease,
                background-color 0.3s ease;
    z-index: 0;
    border-radius: inherit;
    contain: layout paint;
    will-change: width, height, transform;
}

/* Kill layout transitions during drag-resize so the canvas tracks the
   splitter 1:1 instead of chasing an animated target (caused jerky waves). */
#avitanPanel.resizing .avitan-display,
.wm-dock-resizing .avitan-display {
    transition: none !important;
}

.avitan-display canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── OS MODE: Shrinks to a strip below header, offset past dock sidebar ── */
#avitanPanel.avitan-os-panel-active .avitan-display {
    position: absolute;
    top: 0;
    left: 42px;
    right: 0;
    width: calc(100% - 42px);
    height: 200px;
    z-index: 15;
    border-bottom: none;
    border-radius: 0 0 16px 16px;
    background:
        radial-gradient(circle at 10% 18%, rgba(0, 191, 165, 0.58), transparent 35%),
        radial-gradient(circle at 28% 16%, rgba(156, 39, 176, 0.48), transparent 36%),
        radial-gradient(circle at 50% 18%, rgba(230, 58, 122, 0.58), transparent 34%),
        radial-gradient(circle at 40% 76%, rgba(255, 213, 79, 0.58), transparent 38%),
        radial-gradient(circle at 64% 72%, rgba(255, 87, 34, 0.54), transparent 38%),
        radial-gradient(circle at 78% 24%, rgba(30, 220, 140, 0.58), transparent 34%),
        radial-gradient(circle at 92% 62%, rgba(56, 182, 225, 0.50), transparent 32%),
        #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.04);
    pointer-events: none;
}
/* Dark theme: subtle separator */
#avitanPanel.avitan-os-panel-active[data-theme="dark"] .avitan-display {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

/* Stage becomes flex column in OS mode so display strip + OS stack vertically */
#avitanPanel.avitan-os-panel-active .avitan-stage {
    display: flex !important;
    flex-direction: column !important;
}

/* Show engine canvas INSIDE the strip (AI lives here now) */
#avitanPanel.avitan-os-panel-active .avitan-stage > .avitan-canvas-wrapper {
    position: absolute !important;
    inset: auto !important;
    top: 0 !important;
    left: 42px !important;
    right: 0 !important;
    height: 200px !important;
    width: calc(100% - 42px) !important;
    z-index: 14 !important;
    overflow: hidden !important;
    opacity: 1;
    pointer-events: auto;
    border-radius: 0 0 16px 16px !important;
    box-shadow: none !important;
    /* Preserve smooth transitions from base — don't override */
    transition: top 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                left 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                right 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease 0.05s,
                border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Canvas fills the full strip — AVITAN's face lives here */
#avitanPanel.avitan-os-panel-active .avitan-stage > .avitan-canvas-wrapper canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    /* Smooth transition from full face to strip */
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#avitanPanel.avitan-os-panel-active .avitan-orbit-hud {
    display: none !important;
}

/* ── Topbar Info Overlay (replaces OS status bar) ── */
.avitan-display-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
    min-width: 0;
}

#avitanPanel.avitan-os-panel-active .avitan-display-topbar {
    display: flex;
}

.avitan-display-app {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--t1, #1F1A14);
    opacity: 0.5;
    white-space: nowrap;
    flex-shrink: 0;
}

.avitan-display-topic {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--t1, #1F1A14);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    margin-right: 4px;
}

.avitan-display-domain {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--t2, #6b5e4a);
    opacity: 0.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.avitan-display-tier {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0;
    color: #166534;
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(236, 253, 245, 0.6);
}

.avitan-display:hover .avitan-display-topbar {
    opacity: 1;
}

/* ── Status Text Overlay ── */
.avitan-display-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 14px 8px;
    pointer-events: none;
    z-index: 3;
}

.avitan-display-left,
.avitan-display-right {
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    opacity: 0.18;
    color: var(--t2, #6b5e4a);
    transition: opacity 0.6s ease, color 0.35s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 48%;
}

.avitan-display:hover .avitan-display-left,
.avitan-display:hover .avitan-display-right {
    opacity: 0.4;
}

/* ── Mode indicator dot ── */
.avitan-display-dot {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--t2, #6b5e4a);
    opacity: 0.12;
    transition: opacity 0.4s ease, background 0.4s ease;
    z-index: 3;
}

.avitan-display:hover .avitan-display-dot {
    opacity: 0.3;
}

.avitan-display-dot.pulse {
    animation: avDisplayPulse 1.6s ease-in-out infinite;
}

/* ── Celebration flash ── */
.avitan-display.flash {
    animation: avDisplayFlash 0.4s ease;
}

/* ── Keyframes ── */
@keyframes avDisplayPulse {
    0%, 100% { opacity: 0.12; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.6); }
}

@keyframes avDisplayFlash {
    0% { filter: brightness(1); }
    30% { filter: brightness(1.15); }
    100% { filter: brightness(1); }
}

/* ═══════════════════════════════════════════════════════ */
/* WARP TRANSITION — Sci-fi AI transfer effect            */
/* ═══════════════════════════════════════════════════════ */

/* Engine canvas squeeze → compress upward into strip */
.avitan-warp-in .avitan-canvas-wrapper {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    transform-origin: top center !important;
    animation: avWarpSqueezeUp 0.8s cubic-bezier(0.4, 0, 0, 1) forwards !important;
    pointer-events: none;
    opacity: 1 !important;
    transition: none !important; /* Disable morph transitions during warp animation */
}
.avitan-warp-in .avitan-canvas-wrapper canvas {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    transition: none !important;
}

/* Engine canvas expand ← decompress back from strip */
.avitan-warp-out .avitan-canvas-wrapper {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    transform-origin: top center !important;
    animation: avWarpExpandDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    pointer-events: none;
    opacity: 1 !important;
    transition: none !important; /* Disable morph transitions during warp animation */
}
.avitan-warp-out .avitan-canvas-wrapper canvas {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    transition: none !important;
}

/* Keep HUD visible during warp (it fades via animation) */
.avitan-warp-in .avitan-orbit-hud,
.avitan-warp-out .avitan-orbit-hud {
    display: block !important;
    animation: avWarpFade 0.5s ease forwards;
}

/* Display gets subtle glow during warp */
.avitan-display.avitan-warping {
    animation: avWarpGlow 0.9s ease;
}

/* Console slides away during warp */
.avitan-warp-in .avitan-console {
    animation: avWarpSlideDown 0.4s ease forwards;
}
.avitan-warp-out .avitan-console {
    animation: avWarpSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Warp Keyframes ── */
@keyframes avWarpSqueezeUp {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: brightness(1);
    }
    30% {
        transform: scale(0.98, 0.7) translateY(-8%);
        opacity: 0.9;
        filter: brightness(1.06);
    }
    60% {
        transform: scale(0.6, 0.2) translateY(-50%);
        opacity: 0.5;
        filter: brightness(1.12);
    }
    85% {
        transform: scale(0.15, 0.05) translateY(-90%);
        opacity: 0.15;
        filter: brightness(1.2);
    }
    100% {
        transform: scale(0.05, 0.02) translateY(-100%);
        opacity: 0;
        filter: brightness(1.3);
    }
}

@keyframes avWarpExpandDown {
    0% {
        transform: scale(0.05, 0.02) translateY(-100%);
        opacity: 0;
        filter: brightness(1.3);
    }
    20% {
        transform: scale(0.2, 0.1) translateY(-70%);
        opacity: 0.2;
        filter: brightness(1.15);
    }
    50% {
        transform: scale(0.7, 0.55) translateY(-15%);
        opacity: 0.6;
        filter: brightness(1.06);
    }
    80% {
        transform: scale(0.96, 0.92) translateY(-2%);
        opacity: 0.92;
        filter: brightness(1.02);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes avWarpFade {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes avWarpGlow {
    0% { filter: brightness(1); }
    30% { filter: brightness(1.04); }
    60% { filter: brightness(1.02); }
    100% { filter: brightness(1); }
}

@keyframes avWarpSlideDown {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(20px); opacity: 0; }
}

@keyframes avWarpSlideUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    #avitanPanel.avitan-os-panel-active .avitan-display {
        height: 56px;
        flex: 0 0 56px;
    }
    #avitanPanel.avitan-os-panel-active .avitan-stage > .avitan-canvas-wrapper {
        height: 56px !important;
        border-radius: 0 !important;
    }
    .avitan-display-left,
    .avitan-display-right {
        font-size: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .avitan-display canvas,
    .avitan-display-dot,
    .avitan-warp-in .avitan-canvas-wrapper,
    .avitan-warp-out .avitan-canvas-wrapper,
    .avitan-warp-in .avitan-console,
    .avitan-warp-out .avitan-console,
    .avitan-display.avitan-warping {
        animation: none !important;
        transition: none !important;
    }
    .avitan-canvas-wrapper,
    .avitan-canvas-wrapper canvas,
    .avitan-display,
    .avitan-os-root {
        transition: none !important;
    }
}
/* ============================================
   AVITAN DOCK — macOS-style bottom bar
   ============================================ */

:root {
    --avitan-dock-height: 56px;
}

#avitanDock {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 24px));
    z-index: 100600;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 10px 8px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--bg, #FAF9F6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Visible state — slides up when cursor hits bottom edge */
#avitanDock.dock-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Onboarding is a separate premium room; app dock UI stays out until it ends. */
body.profile-onboarding-active #avitanDock,
body:has(#profileModal.visible) #avitanDock,
body.profile-onboarding-active #avitanBorderGlow,
body:has(#profileModal.visible) #avitanBorderGlow {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Dark theme */
[data-theme="dark"] #avitanDock {
    background: var(--bg, #121212);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

/* ── AI Presence Strip ── */

.avitan-dock-glow {
    position: absolute;
    top: -2px;
    left: 14px;
    right: 14px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #22c55e, #3b82f6);
    filter: none;
    opacity: 0;
    transition: none;
    pointer-events: none;
}

/* Listening — green intensifies */
#avitanDock.dock-listening .avitan-dock-glow {
    background: linear-gradient(90deg, #22c55e 60%, #3b82f6 100%);
    filter: none;
    opacity: 0;
    animation: none;
}

/* Speaking — blue intensifies */
#avitanDock.dock-speaking .avitan-dock-glow {
    background: linear-gradient(90deg, #22c55e 20%, #3b82f6 80%);
    filter: none;
    opacity: 0;
    animation: none;
}

/* Both listening + speaking */
#avitanDock.dock-listening.dock-speaking .avitan-dock-glow {
    background: linear-gradient(90deg, #22c55e, #3b82f6);
    filter: none;
    opacity: 0;
    animation: none;
}

@keyframes dockGlowPulseGreen {
    0%, 100% { opacity: 0; filter: none; }
    50%      { opacity: 0; filter: none; }
}

@keyframes dockGlowPulseBlue {
    0%, 100% { opacity: 0; filter: none; }
    50%      { opacity: 0; filter: none; }
}

@keyframes dockGlowPulseBoth {
    0%, 100% { opacity: 0; filter: none; }
    50%      { opacity: 0; filter: none; }
}

/* ── Dock Separator ── */

.avitan-dock-sep {
    width: 1px;
    height: 24px;
    margin: 0 4px;
    align-self: center;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 1px;
}

[data-theme="dark"] .avitan-dock-sep {
    background: rgba(255, 255, 255, 0.1);
}

/* ── Mic Button Active ── */

.avitan-dock-mic.active {
    opacity: 1;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.avitan-dock-mic.active:hover {
    background: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .avitan-dock-mic.active {
    background: rgba(34, 197, 94, 0.15);
}

/* ── Dock Items ── */

.avitan-dock-item {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--t1, #1F1A14);
    opacity: 0.72;
    will-change: transform;
    transition: opacity 0.16s ease,
                background-color 0.16s ease;
    transform: scale(var(--dock-scale, 1));
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.avitan-dock-item:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .avitan-dock-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Icon */
.avitan-dock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.avitan-dock-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Tooltip ── */

.avitan-dock-item::after {
    content: attr(data-dock-label);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(var(--dock-scale, 1));
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(30, 30, 30, 0.92);
    color: #fff;
    font: 700 11px/1.2 Inter, system-ui, sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease;
}

.avitan-dock-item:hover::after {
    opacity: 1;
}

/* ── Active Indicator Dot ── */

.avitan-dock-dot {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--t1, #1F1A14);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.avitan-dock-item.active .avitan-dock-dot {
    opacity: 0.7;
}

[data-theme="dark"] .avitan-dock-dot {
    background: #e5e7eb;
}

/* ── Bounce Animation ── */

@keyframes avitanDockBounce {
    0%   { transform: scale(var(--dock-scale, 1)); }
    30%  { transform: scale(calc(var(--dock-scale, 1) * 0.82)); }
    60%  { transform: scale(calc(var(--dock-scale, 1) * 1.12)); }
    100% { transform: scale(var(--dock-scale, 1)); }
}

.avitan-dock-item.bouncing {
    animation: avitanDockBounce 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When AVITAN panel is immersive, force dock hidden */
body.avitan-panel-immersive #avitanDock {
    transform: translateX(-50%) translateY(calc(100% + 24px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Mobile Hide ── */

@media (max-width: 768px) {
    #avitanDock {
        display: none !important;
    }
}

@media (hover: none), (pointer: coarse) {
    #avitanDock {
        display: none !important;
    }
}

/* ── Window Border Glow (visible when dock hidden + AVITAN active) ── */

.avitan-border-glow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100099;
    pointer-events: none;
    opacity: 0;
    display: none;
    transition: none;
    box-shadow: none;
    border: 0;
    border-image: none;
}

.avitan-border-glow--active {
    opacity: 0;
}

/* Listening — green dominant */
.avitan-border-glow--listening {
    box-shadow: none;
    border-image: none;
    animation: none;
}

/* Speaking — blue dominant */
.avitan-border-glow--speaking {
    box-shadow: none;
    border-image: none;
    animation: none;
}

/* Both listening + speaking */
.avitan-border-glow--listening.avitan-border-glow--speaking {
    box-shadow: none;
    border-image: none;
    animation: none;
}

@keyframes borderGlowPulseGreen {
    0%, 100% { opacity: 0; }
    50%      { opacity: 0; }
}

@keyframes borderGlowPulseBlue {
    0%, 100% { opacity: 0; }
    50%      { opacity: 0; }
}

@keyframes borderGlowPulseBoth {
    0%, 100% { opacity: 0; }
    50%      { opacity: 0; }
}

/* Hide border glow on mobile */
@media (max-width: 768px) {
    .avitan-border-glow {
        display: none !important;
    }
}

/* ── Reduced Motion ── */

@media (prefers-reduced-motion: reduce) {
    #avitanDock,
    .avitan-dock-item {
        transition: none !important;
        animation: none !important;
    }
}
/* ============================================
   LEFT NAVIGATION RAIL — macOS-style vertical navigation bar
   ============================================ */

#leftNavigationRail {
    position: fixed;
    left: 12px;
    top: 50%;
    transform: translateY(-50%) translateX(calc(-100% - 24px));
    z-index: 100600;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(250, 249, 246, 0.72);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Visible state — slides in when cursor hits left border */
#leftNavigationRail.rail-visible {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Dark theme */
[data-theme="dark"] #leftNavigationRail {
    background: rgba(18, 18, 18, 0.72);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

/* Paper theme */
[data-theme="paper"] #leftNavigationRail {
    background: rgba(255, 252, 245, 0.72);
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: none;
}

/* ── Trigger Hot-Zone ── */
.left-navigation-rail-trigger {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    z-index: 100500;
    background: transparent;
    pointer-events: auto;
}

/* ── Rail Items ── */
.rail-item {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--t1, #1F1A14);
    opacity: 0.72;
    will-change: transform;
    transition: opacity 0.16s ease,
                background-color 0.16s ease;
    transform: scale(var(--rail-scale, 1));
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.rail-item:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .rail-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="paper"] .rail-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Icon */
.rail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.rail-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Tooltip ── */
.rail-item::after {
    content: attr(data-rail-label);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(30, 30, 30, 0.92);
    color: #fff;
    font: 700 11px/1.2 Inter, system-ui, sans-serif;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.rail-item:hover::after {
    opacity: 1;
}

[data-theme="light"] .rail-item::after {
    background: rgba(255, 255, 255, 0.96);
    color: #1f1a14;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="paper"] .rail-item::after {
    background: rgba(255, 252, 245, 0.96);
    color: #1f1a14;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ── Active Indicator Dot ── */
.rail-dot {
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--t1, #1F1A14);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.rail-item.active .rail-dot {
    opacity: 0.7;
}

[data-theme="dark"] .rail-dot {
    background: #e5e7eb;
}

/* ── Bounce Animation ── */
@keyframes railBounce {
    0%   { transform: scale(var(--rail-scale, 1)); }
    30%  { transform: scale(calc(var(--rail-scale, 1) * 0.82)); }
    60%  { transform: scale(calc(var(--rail-scale, 1) * 1.12)); }
    100% { transform: scale(var(--rail-scale, 1)); }
}

.rail-item.bouncing {
    animation: railBounce 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Rail Separator ── */
.rail-sep {
    width: 24px;
    height: 1px;
    margin: 4px 0;
    align-self: center;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 1px;
}

[data-theme="dark"] .rail-sep {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="paper"] .rail-sep {
    background: rgba(0, 0, 0, 0.08);
}

/* Hide on focus-mode to respect clean learning environment */
body.focus-mode #leftNavigationRail,
body.focus-mode .left-navigation-rail-trigger {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Mobile navigation is owned by QuickBall. */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
    #leftNavigationRail,
    .left-navigation-rail-trigger {
        display: none !important;
    }
}

@media (hover: none), (pointer: coarse) {
    #leftNavigationRail,
    .left-navigation-rail-trigger {
        display: none !important;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    #leftNavigationRail,
    .rail-item {
        transition: none !important;
        animation: none !important;
    }
}
/* ============================================
   AVITAN CURSOR — Virtual mouse for AVITAN
   ============================================ */

/* ── Cursor Element ── */

.avitan-cursor {
    position: fixed;
    z-index: 100200;
    pointer-events: none;
    width: 24px;
    height: 24px;
    transform: translate(-4px, -2px);
    opacity: 0;
    transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
    filter: drop-shadow(0 2px 6px rgba(34, 197, 94, 0.3));
}

.avitan-cursor.visible {
    opacity: 1;
}

.avitan-cursor svg {
    width: 100%;
    height: 100%;
}

/* ── Cursor Trail Glow ── */

.avitan-cursor-trail {
    position: fixed;
    z-index: 100199;
    pointer-events: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.4), transparent);
    filter: blur(4px);
    opacity: 0;
    transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease;
}

.avitan-cursor-trail.visible {
    opacity: 0.6;
}

/* ── Click Ripple ── */

.avitan-cursor-click-ring {
    position: fixed;
    z-index: 100198;
    pointer-events: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(34, 197, 94, 0.6);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

.avitan-cursor-click-ring.animating {
    animation: avitanCursorClick 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes avitanCursorClick {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* ── Highlight Ring (around target element) ── */

.avitan-highlight-ring {
    position: fixed;
    z-index: 100197;
    pointer-events: none;
    border: 2px solid rgba(34, 197, 94, 0.5);
    border-radius: 8px;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.3),
                inset 0 0 16px rgba(34, 197, 94, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.avitan-highlight-ring.visible {
    opacity: 1;
    animation: avitanHighlightPulse 1.5s ease-in-out infinite;
}

.avitan-highlight-ring.fading {
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: none;
}

@keyframes avitanHighlightPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.25), inset 0 0 12px rgba(34, 197, 94, 0.08); }
    50%      { box-shadow: 0 0 24px rgba(34, 197, 94, 0.45), inset 0 0 24px rgba(34, 197, 94, 0.15); }
}

/* ── Tooltip ── */

.avitan-cursor-tooltip {
    position: fixed;
    z-index: 100201;
    pointer-events: none;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(30, 30, 30, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font: 600 12px/1.3 Inter, system-ui, sans-serif;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.avitan-cursor-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Reduced Motion ── */

@media (prefers-reduced-motion: reduce) {
    .avitan-cursor,
    .avitan-cursor-trail {
        transition: opacity 0.2s ease !important;
    }
    .avitan-highlight-ring {
        animation: none !important;
    }
}
/*
 * Canonical AVITAN docked/sidecar layout.
 *
 * Ownership:
 * - window-manager-v2.css creates the dock and handles generic panel resize.
 * - avitan-styles.css keeps the floating/mobile AVITAN component styling.
 * - This file owns the docked/page-sidecar AVITAN display + chat split.
 */

#avitanPanel.wm-docked {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) {
    --avitan-sidecar-rail: 42px;
    --avitan-sidecar-chat-h: clamp(320px, 42%, 390px);
    --avitan-sidecar-face-min-h: 74px;

    background: var(--bg, #FAF9F6) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#wmDock:has(> #avitanPanel.wm-docked) {
    background: var(--bg, #FAF9F6) !important;
    box-shadow: none !important;
}

#wmDock:has(> #avitanPanel.wm-docked) > .wm-docked:not(#avitanPanel),
#wmDock:has(> #avitanPanel.wm-docked) > #wmSplitterH {
    display: none !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) :is(
    .nr-body,
    .avitan-shell,
    .avitan-stage,
    .avitan-os-root,
    .avitan-os-screen,
    .avitan-os-content,
    .avitan-os-app-view,
    .avitan-os-app-body,
    .avitan-os-tutor-app,
    .avitan-os-chat-dock
) {
    background: var(--bg, #FAF9F6) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .nr-body {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-shell {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-stage {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-hud-topic {
    font-size: 20px;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) :is(.avitan-emotions, .avitan-face-picker) {
    gap: 5px;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) :is(.avitan-emotions button, .avitan-face-picker button) {
    min-height: 28px;
    padding: 0 9px;
    font-size: 11px;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-face-picker {
    padding: 5px;
}

.avitan-split-resizer {
    display: none;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-split-resizer {
    position: absolute !important;
    z-index: 70 !important;
    left: var(--avitan-sidecar-rail) !important;
    right: 0 !important;
    bottom: var(--avitan-sidecar-chat-h) !important;
    display: block !important;
    width: auto !important;
    height: 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--secondary, #5b7db1) !important;
    cursor: ns-resize !important;
    touch-action: none !important;
    transform: translateY(50%);
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-split-resizer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: color-mix(in srgb, var(--bd, rgba(0,0,0,.08)) 76%, transparent);
    transform: translateY(-50%);
    transition: background .16s ease, height .16s ease, box-shadow .16s ease;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-split-resizer::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 68px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, currentcolor 18%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity .16s ease, background .16s ease, width .16s ease;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-split-resizer:hover::before,
:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-split-resizer:focus-visible::before,
#avitanPanel.avitan-split-resizing .avitan-split-resizer::before {
    height: 2px;
    background: color-mix(in srgb, var(--secondary, #5b7db1) 62%, var(--bd, rgba(0,0,0,.08)));
    box-shadow: 0 0 14px color-mix(in srgb, var(--secondary, #5b7db1) 18%, transparent);
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-split-resizer:hover::after,
:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-split-resizer:focus-visible::after,
#avitanPanel.avitan-split-resizing .avitan-split-resizer::after {
    opacity: 1;
    width: 86px;
    background: color-mix(in srgb, currentcolor 32%, transparent);
}

#avitanPanel.avitan-split-resizing :is(
    .avitan-display,
    .avitan-stage > .avitan-canvas-wrapper,
    .avitan-console,
    .avitan-os-root
) {
    transition: none !important;
}

body.avitan-split-resizing {
    cursor: ns-resize !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) :is(.avitan-display, .avitan-stage > .avitan-canvas-wrapper) {
    position: absolute !important;
    top: 0 !important;
    left: var(--avitan-sidecar-rail) !important;
    right: 0 !important;
    bottom: var(--avitan-sidecar-chat-h) !important;
    width: auto !important;
    height: auto !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) :is(.avitan-display canvas, .avitan-stage > .avitan-canvas-wrapper canvas) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    filter: none !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
):not(.avitan-os-panel-active) .avitan-console {
    position: absolute !important;
    left: var(--avitan-sidecar-rail) !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: auto !important;
    height: var(--avitan-sidecar-chat-h) !important;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
).avitan-os-panel-active .avitan-os-root {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    height: var(--avitan-sidecar-chat-h) !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
).avitan-os-panel-active .avitan-os-screen {
    height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
).avitan-os-panel-active .avitan-os-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 0 0 var(--avitan-sidecar-rail) !important;
    overflow: hidden !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
).avitan-os-panel-active :is(
    .avitan-os-app-view,
    .avitan-os-app-body,
    .avitan-os-tutor-app,
    .avitan-os-chat-dock
) {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) :is(.avitan-console, .avitan-os-chat-dock .avitan-console.avitan-workspace-chat) {
    background: var(--bg, #FAF9F6) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 0 !important;
    padding: 18px 26px 16px 30px !important;
    gap: 10px !important;
    color: var(--t1, #1F1A14) !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) :is(.avitan-console, .avitan-os-chat-dock)::before,
:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) :is(.avitan-console, .avitan-os-chat-dock)::after {
    display: none !important;
    content: none !important;
    box-shadow: none !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-console-slim {
    display: grid !important;
    grid-template-columns: minmax(112px, 1fr) max-content max-content max-content minmax(0, .85fr);
    align-items: center !important;
    column-gap: clamp(8px, 1.2vw, 14px) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-console-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-console-actions {
    display: inline-flex !important;
    visibility: visible !important;
    min-width: max-content !important;
    opacity: 1 !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-voice-disclosure {
    display: inline-flex !important;
    visibility: visible !important;
    min-width: max-content !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-mode-badge {
    display: inline-flex !important;
    justify-content: center !important;
    min-width: 50px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-console-sub {
    display: inline-block !important;
    visibility: visible !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) :is(.avitan-chat, .avitan-input-row, .avitan-transcript) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-chat {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 6px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) :is(.avitan-msg, .avitan-msg-body) {
    max-width: 100% !important;
    overflow-wrap: anywhere;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-msg-body {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-context-strip {
    padding: 4px 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

:is(
    #avitanPanel.wm-docked,
    body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
    body.note-fullscreen-open.avitan-panel-open #avitanPanel,
    body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
    body.avitan-panel-open:has(.assess-shell) #avitanPanel
) .avitan-input-row textarea {
    background: transparent !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    :is(
        #avitanPanel.wm-docked,
        body.note-fullscreen-open.avitan-note-sidecar #avitanPanel,
        body.note-fullscreen-open.avitan-panel-open #avitanPanel,
        body.avitan-panel-open:has(.your-space-shell) #avitanPanel,
        body.avitan-panel-open:has(.assess-shell) #avitanPanel
    ) .avitan-console-slim {
        grid-template-columns: minmax(96px, 1fr) max-content max-content max-content minmax(0, .65fr);
        column-gap: 8px !important;
    }
}