/* FunSAT redesign: dark chrome, mint/gold accents, arcade coin + zoom, home score ring. */
:root {
  --bg: #0f141c; --panel: #18202b; --line: #2a3442; --text: #e8edf4; --muted: #93a0b2;
  --mint: #5ef0b0; --mint2: #2bc48a; --violet: #8b7bff; --gold: #ffcc4d; --gold2: #e09a12;
  --red: #ef4444; --blue: #3b82f6;
  --icon-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E");
  --icon-sound-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4V5z'/%3E%3Cpath d='m16 9 5 5m0-5-5 5'/%3E%3C/svg%3E");
}

/* ---------- Top bar ---------- */
body[data-workspace] .topbar {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 12px 18px; background: linear-gradient(180deg, #141b25, #10161f);
  border-bottom: 1px solid var(--line); box-shadow: none;
}
body[data-workspace] .brand { color: var(--text); font-weight: 900; letter-spacing: -.02em; font-size: 23px; display: flex; align-items: center; gap: 2px; }
body[data-workspace] .brand .dot { display: none; }
.brand-sat { background: linear-gradient(90deg, var(--mint), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-workspace] .badges { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border-radius: 12px; background: rgba(94, 240, 176, .12); border: 1px solid rgba(94, 240, 176, .45); color: var(--mint);
}
body[data-workspace] .icon-btn { background: rgba(94, 240, 176, .12); color: var(--mint); border: 1px solid rgba(94, 240, 176, .45); }
body[data-workspace] .icon-btn:hover:not(:disabled) { background: rgba(94, 240, 176, .22); box-shadow: 0 0 12px rgba(94, 240, 176, .35); }
.icon-btn svg { width: 20px; height: 20px; }
body[data-workspace] .sound-btn { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 0; color: var(--mint); background: rgba(94, 240, 176, .12); border: 1px solid rgba(94, 240, 176, .45); }
body[data-workspace] .sound-btn::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon-sound) center/contain no-repeat; mask: var(--icon-sound) center/contain no-repeat; }
body[data-workspace] .sound-btn.muted::before { -webkit-mask-image: var(--icon-sound-off); mask-image: var(--icon-sound-off); }
body[data-workspace] #btnPause { font-size: 16px; color: var(--mint); }
.pill {
  height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: #1a222e; color: var(--text); font-weight: 700; font-size: 15px;
}
body[data-workspace] .arcade-btn, body[data-workspace] .acct-btn { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #1a222e; color: var(--text); font-weight: 700; font-size: 15px; transition: transform .12s, background .12s, color .12s, border-color .12s; }
body[data-workspace] .arcade-btn:hover:not(:disabled), body[data-workspace] .acct-btn:hover { transform: translateY(-1px); }
body[data-workspace] .arcade-btn.on, body[data-workspace] .arcade-btn.active { background: rgba(94, 240, 176, .16); border-color: var(--mint); color: var(--mint); }
body[data-workspace] .arcade-btn svg, body[data-workspace] .acct-btn svg { width: 20px; height: 20px; }
body[data-workspace] .acct-btn .av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--mint), var(--violet)); color: #0c1220; font-weight: 900; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
body[data-workspace] .token-badge.wallet {
  height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 10px; border-radius: 999px;
  background: linear-gradient(180deg, #2a2412, #1f1a0d); border: 1px solid #5b4614; color: var(--gold); font-weight: 800; font-size: 15px;
}
body[data-workspace] .hud-streak { color: var(--muted); }
body[data-workspace] #autosave { color: var(--muted); }
.workspace-theme-label { color: var(--muted); }
body[data-workspace] #workspaceTheme { height: 40px; border-radius: 999px; border: 1px solid var(--line); background: #1a222e; color: var(--text); font-weight: 600; padding: 0 30px 0 14px; }
body[data-workspace] .badge { background: transparent; border: 0; color: var(--muted); }
body[data-workspace] #badgeTimer, body[data-workspace] #badgeAcc { background: #1a222e; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; color: var(--text); }

/* gold coin */
.coin {
  width: 24px; height: 24px; border-radius: 50%; display: inline-block; flex: none; position: relative;
  background: radial-gradient(circle at 35% 30%, #fff3b8, #ffcc4d 40%, #e09a12);
  box-shadow: inset 0 0 0 2px #b77708, inset 0 0 0 4px #ffd96b, 0 2px 0 #8a5a05;
}
.coin::after { content: "F"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; color: #8a5a05; }
.coin.small { width: 18px; height: 18px; }
.coin.small::after { font-size: 9px; }

/* ---------- Coin-into-cabinet overlay ---------- */
.fx-overlay { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; background: rgba(4, 7, 12, .82); }
.fx-overlay.show { display: flex; }
.cab3d { position: relative; width: 200px; height: 340px; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .6)); }
.cab3d .cab-body {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #14181f, #232a35 45%, #14181f);
  clip-path: polygon(12% 0, 88% 0, 88% 62%, 100% 70%, 100% 100%, 0 100%, 0 70%, 12% 62%);
}
.cab3d .cab-body::after { content: ""; position: absolute; inset: 0; opacity: .12; background: repeating-linear-gradient(90deg, transparent 0 9px, #fff 9px 10px); }
.cab3d .marquee {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 132px; text-align: center;
  font: 700 14px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 204, 77, .9), 0 0 18px rgba(224, 154, 18, .6);
}
.cab3d .scr {
  position: absolute; top: 44px; left: 50%; transform: translateX(-50%); width: 140px; height: 104px;
  border: 6px solid #0c1016; border-radius: 10px; background: #07130e; overflow: hidden;
  box-shadow: inset 0 0 24px rgba(94, 240, 176, .18);
}
.cab3d .scr-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--mint); text-shadow: 0 0 8px rgba(94, 240, 176, .8); }
.cab3d .scanlines { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px); }
.cab3d .insert { animation: insertBlink 1s steps(2, start) infinite; }
@keyframes insertBlink { 50% { opacity: .25; } }
.cab3d .panel { position: absolute; top: 158px; left: 50%; transform: translateX(-50%); width: 150px; height: 34px; background: linear-gradient(180deg, #2b3340, #1b222c); border: 1px solid #0b0f14; border-radius: 4px; }
.cab3d .stick { position: absolute; left: 18px; top: -22px; width: 6px; height: 26px; background: #8d97a6; border-radius: 3px; }
.cab3d .stick::after { content: ""; position: absolute; left: -5px; top: -11px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9a9a, #d21f1f); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.cab3d .btn-row { position: absolute; right: 14px; top: -16px; display: flex; gap: 7px; }
.cab3d .btn-row i { width: 14px; height: 14px; border-radius: 50%; display: block; box-shadow: inset 0 -2px rgba(0, 0, 0, .35); }
.cab3d .btn-row i:nth-child(1) { background: #3b82f6; } .cab3d .btn-row i:nth-child(2) { background: var(--gold); } .cab3d .btn-row i:nth-child(3) { background: var(--mint); }
.cab3d .door { position: absolute; top: 206px; left: 50%; transform: translateX(-50%); width: 104px; height: 78px; border-radius: 6px; background: linear-gradient(180deg, #c9ced8, #7d8494); border: 2px solid #2b303a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.cab3d .door .led { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font: 700 8px ui-monospace, monospace; letter-spacing: .08em; color: #ff5a5a; text-shadow: 0 0 6px rgba(255, 90, 90, .9); }
.cab3d .slot { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 8px; height: 30px; border-radius: 4px; background: #11151b; box-shadow: inset 0 0 0 2px #9aa2b1, 0 0 0 1px #2b303a; }
.cab3d .slot.glowing { box-shadow: inset 0 0 0 2px #ffcc4d, 0 0 14px 3px rgba(255, 204, 77, .85); }
.cab3d .return { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 38px; height: 12px; border-radius: 3px; background: #1a1f28; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7); }
.fx-coin { position: absolute; top: 96px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b8, #ffcc4d 40%, #e09a12); box-shadow: inset 0 0 0 2px #b77708, 0 2px 0 #8a5a05; z-index: 4; }
.fx-coin.drop { animation: coinDrop .9s cubic-bezier(.3, .1, .7, 1) forwards; }
@keyframes coinDrop {
  0% { transform: translateY(-150px) rotateY(0deg); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translateY(0) rotateY(540deg); }
  74% { transform: translateY(0) rotateY(540deg) scaleX(.18); }
  100% { transform: translateY(26px) rotateY(540deg) scaleX(.18); opacity: 0; }
}
.wallet-bounce { animation: walletBounce .45s ease; }
@keyframes walletBounce { 40% { transform: scale(1.15); } }
.fx-flash { animation: fxFlash .5s ease; }
@keyframes fxFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* Arcade intro zoom overlay */
#arcadeIntro { z-index: 1250; perspective: 1200px; }
#arcadeIntro.zooming .cab3d { transition: transform 1.1s cubic-bezier(.7, 0, .3, 1), filter 1.1s ease; filter: blur(1.5px); }
#arcadeIntro .intro-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 13px; }

/* ---------- Home score card ---------- */
body[data-workspace] #screen-start, body[data-workspace] #screen-college { background: var(--bg) !important; color: var(--text); }
body[data-workspace] #screen-start .st-main, body[data-workspace] #screen-college .college-card, body[data-workspace] #screen-college .college-find { background: var(--panel) !important; border-color: var(--line) !important; color: var(--text) !important; border-radius: 20px; }
body[data-workspace] #screen-start .st-side .card { background: var(--panel) !important; border-color: var(--line) !important; color: var(--text) !important; border-radius: 20px; }
body[data-workspace] #screen-start h1, body[data-workspace] #screen-start h3, body[data-workspace] #screen-start .st-step, body[data-workspace] #screen-college h1, body[data-workspace] #screen-college h3 { color: var(--text); }
.home-score-card { background: linear-gradient(180deg, #1b2431, #151c26); border: 1px solid var(--line); border-radius: 20px; padding: 20px; margin-bottom: 16px; cursor: pointer; transition: border-color .15s, transform .15s; }
.home-score-card:hover { border-color: rgba(94, 240, 176, .5); transform: translateY(-1px); }
.home-score-card .hsc-top { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: nowrap; max-width: 920px; margin-inline: auto; }
.home-score-card .hsc-top > div:last-child { min-width: 0; max-width: 680px; }
.home-score-card .hsc-title { font-weight: 800; font-size: 19px; color: var(--text); }
.home-score-card .hsc-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.ring { position: relative; flex: none; }
.ring svg { display: block; }
.ring circle { fill: none; stroke-linecap: round; }
.ring .ring-track { stroke: #263142; }
.ring .ring-progress { stroke: var(--blue); transition: stroke-dashoffset 1.2s ease; }
.ring .ring-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring .ring-num { font-weight: 900; color: var(--blue); line-height: 1; }
.ring .ring-lbl { color: var(--muted); font-size: 11px; margin-top: 3px; }
.hsc-average { font-weight: 800; font-size: 15px; color: var(--text); }
.hsc-average small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; margin-top: 2px; }
body[data-workspace] .hsc-expand { display: none; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.home-score-card.open { cursor: default; }
.home-score-card.open .hsc-expand { display: block; }
.hsc-college-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hsc-scale { margin: 14px 0 6px; }
.hsc-scale-track { position: relative; height: 16px; border-radius: 999px; background: #202a37; border: 1px solid var(--line); }
.hsc-band { position: absolute; top: 0; bottom: 0; background: rgba(59, 130, 246, .45); border-left: 2px solid var(--blue); border-right: 2px solid var(--blue); border-radius: 4px; }
.hsc-you { position: absolute; top: -7px; width: 14px; height: 30px; margin-left: -7px; border-radius: 6px; background: var(--mint); box-shadow: 0 0 14px rgba(94, 240, 176, .9); }
.hsc-you::after { content: "You"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; color: var(--mint); }
.hsc-scale-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 5px; }
.hsc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.hsc-tile { background: #151d28; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.hsc-tile .t-val { font-weight: 800; font-size: 17px; color: var(--text); }
.hsc-tile .t-lbl { color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.4; }
.hsc-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; }
.hsc-tab { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #1a222e; color: var(--text); font-weight: 700; font-size: 13px; white-space: nowrap; }
.hsc-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
body[data-workspace] .hsc-cta { min-height: 44px; border-radius: 12px; background: linear-gradient(180deg, var(--mint), var(--mint2)); color: #06281c; font-weight: 800; }
.hsc-note { color: var(--muted); font-size: 11px; margin-top: 8px; }

/* ---------- Profile hero + rounds ---------- */
.college-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 14px 0 4px; }
.college-hero .hero-line { color: var(--muted); font-size: 14px; margin: 4px 0 10px; }
.college-hero h3 { margin: 0; font-size: 20px; }
body[data-workspace] .college-profile fieldset { border-radius: 20px; background: var(--panel) !important; border-color: var(--line) !important; color: var(--text); }
body[data-workspace] #screen-college .college-profile input, body[data-workspace] #screen-college .college-profile select { height: 46px; border-radius: 12px; background: #121924 !important; border: 1px solid var(--line) !important; color: var(--text) !important; }
body[data-workspace] #screen-college .college-profile textarea { border-radius: 12px; background: #121924 !important; border: 1px solid var(--line) !important; color: var(--text) !important; }
body[data-workspace] #collegeUsePredicted {
  width: 100%; min-height: 54px; border-radius: 14px; font-size: 18px; font-weight: 800;
  background: linear-gradient(180deg, var(--mint), var(--mint2)); border: 0; color: #06281c;
}
body[data-workspace] #screen-college .college-profile label { color: var(--muted); }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-chip { background: #1a222e; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--text); font-weight: 600; }
.hero-chip b { color: var(--mint); }

/* ---------- Coin in the arcade HUD ---------- */
body[data-workspace] .arcade-hud .chip, body[data-workspace] .cab-top { color: var(--text); }

@media (max-width: 560px) {
  body[data-workspace] .topbar { padding: 10px 12px; gap: 8px; }
  body[data-workspace] .brand { font-size: 19px; }
  body[data-workspace] .badges { gap: 6px; width: 100%; justify-content: flex-start; }
  body[data-workspace] .badge, body[data-workspace] .hud-streak, body[data-workspace] #autosave { display: none; }
  .home-score-card .hsc-top { flex-wrap: wrap; justify-content: center; text-align: center; gap: 12px; }
  .ring { transform: scale(.88); transform-origin: center; }
  .hsc-tiles { grid-template-columns: 1fr 1fr; }
  .cab3d { transform: scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-coin.drop { animation-duration: .01s; }
  #arcadeIntro.zooming .cab3d { transition-duration: .01s; }
  .ring .ring-progress { transition: none; }
}

/* The redesign follows the selected workspace palette everywhere. */
body[data-workspace="exam"]{--bg:#f4f6f9;--panel:#fff;--line:#d9e0e9;--text:#152033;--muted:#5d6b80;--mint:#195de6;--mint2:#1248b8;--violet:#6246c7;--blue:#195de6}
body[data-workspace="notebook"]{--bg:#f6f3eb;--panel:#fcfaf5;--line:#d6d6cb;--text:#232c25;--muted:#646a60;--mint:#235d44;--mint2:#174c36;--violet:#725d38;--blue:#235d44}
body[data-workspace="focus"]{--bg:#11171c;--panel:#171e24;--line:#35424d;--text:#eef4f7;--muted:#adbcc8;--mint:#8df0bd;--mint2:#5ecb91;--violet:#9f91ff;--blue:#7cb3ff}
body[data-workspace] .topbar{background:var(--ws-bg)!important;border-color:var(--ws-line)!important}
body[data-workspace] .icon-btn,body[data-workspace] .sound-btn{background:var(--ws-tint)!important;color:var(--ws-accent)!important;border-color:var(--ws-line)!important}
body[data-workspace] .arcade-btn,body[data-workspace] .acct-btn,body[data-workspace] #workspaceTheme,body[data-workspace] #badgeTimer,body[data-workspace] #badgeAcc{background:var(--ws-surface)!important;color:var(--ws-ink)!important;border-color:var(--ws-line)!important}
body[data-workspace] #screen-start,body[data-workspace] #screen-college{background:var(--ws-bg)!important;color:var(--ws-ink)!important}
body[data-workspace] #screen-start .st-main,body[data-workspace] #screen-start .st-side .card,body[data-workspace] #screen-college .college-card,body[data-workspace] #screen-college .college-find{background:var(--ws-surface)!important;color:var(--ws-ink)!important;border-color:var(--ws-line)!important}
body[data-workspace] .home-score-card,body[data-workspace] .hsc-tile,body[data-workspace] .hsc-tab,body[data-workspace] .hero-chip{background:var(--ws-soft)!important;color:var(--ws-ink)!important;border-color:var(--ws-line)!important}
body[data-workspace] .home-score-card .hsc-title,body[data-workspace] .hsc-tile .t-val,body[data-workspace] .college-profile fieldset,body[data-workspace] .hero-chip{color:var(--ws-ink)!important}
body[data-workspace] .home-score-card .hsc-sub,body[data-workspace] .hsc-tile .t-lbl,body[data-workspace] .hsc-note{color:var(--ws-muted)!important}
body[data-workspace] .hsc-scale-track{background:var(--ws-soft)!important;border-color:var(--ws-line)!important}
body[data-workspace] #screen-college .college-profile fieldset{background:var(--ws-surface)!important;border-color:var(--ws-line)!important}
body[data-workspace] #screen-college .college-profile input,body[data-workspace] #screen-college .college-profile select,body[data-workspace] #screen-college .college-profile textarea{background:var(--ws-surface)!important;color:var(--ws-ink)!important;border-color:var(--ws-line)!important}
body[data-workspace="exam"] #screen-college,body[data-workspace="exam"] #collegeDetailHost{--ws-bg:#f4f6f9;--ws-surface:#fff;--ws-soft:#f0f3f8;--ws-ink:#152033;--ws-muted:#5d6b80;--ws-line:#d9e0e9;--ws-tint:#edf3ff;--ws-accent:#195de6;--text:#152033;--muted:#5d6b80;--line:#d9e0e9}
body[data-workspace="notebook"] #screen-college,body[data-workspace="notebook"] #collegeDetailHost{--ws-bg:#f6f3eb;--ws-surface:#fcfaf5;--ws-soft:#eeeae1;--ws-ink:#232c25;--ws-muted:#646a60;--ws-line:#d6d6cb;--ws-tint:#e9eee7;--ws-accent:#235d44;--text:#232c25;--muted:#646a60;--line:#d6d6cb}

/* Concept C: an editorial toolbar with dividers and underlined active sections. */
body[data-workspace] .topbar{padding:0!important;gap:0!important;min-height:58px;flex-wrap:nowrap!important;justify-content:flex-start;max-width:100%}
body[data-workspace] .brand{padding:0 clamp(12px,1.2vw,18px);font-size:clamp(21px,1.5vw,25px);letter-spacing:0;flex:0 0 auto;white-space:nowrap}
body[data-workspace] .badges{align-self:stretch;gap:0!important;flex:1 1 auto;min-width:0;max-width:100%;flex-wrap:nowrap!important;border-left:1px solid var(--ws-line);overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:thin}
body[data-workspace] .badge,body[data-workspace] .hud-streak,body[data-workspace] .token-badge,body[data-workspace] .autosave{height:100%;display:inline-flex;align-items:center;padding:0 12px;border-right:1px solid var(--ws-line)!important;font-size:12px}
body[data-workspace] #badgeTimer,body[data-workspace] #badgeAcc,body[data-workspace] .token-badge.wallet{border-radius:0!important;border-top:0!important;border-bottom:0!important;border-left:0!important;background:transparent!important;color:var(--ws-ink)!important;box-shadow:none!important}
body[data-workspace] .token-badge.wallet{gap:5px;padding:0 10px!important}
body[data-workspace] .token-badge.wallet .coin{width:17px;height:17px;box-shadow:inset 0 0 0 1px #b77708;font-size:9px}
body[data-workspace] .token-badge.wallet .coin::after{font-size:9px}
body[data-workspace] #autosave{display:none}
body[data-workspace] .arcade-btn,body[data-workspace] .acct-btn,body[data-workspace] .icon-btn,body[data-workspace] .sound-btn,body[data-workspace] .workspace-theme-label{position:relative;height:100%;min-height:58px;border:0!important;border-right:1px solid var(--ws-line)!important;border-radius:0!important;background:transparent!important;color:var(--ws-ink)!important;box-shadow:none!important;transform:none!important;padding:0 14px}
body[data-workspace] .badges>*{flex:0 0 auto;min-width:max-content}
body[data-workspace] .arcade-btn:hover,body[data-workspace] .acct-btn:hover,body[data-workspace] .icon-btn:hover,body[data-workspace] .sound-btn:hover{background:var(--ws-tint)!important;box-shadow:none!important;transform:none!important}
body[data-workspace] .arcade-btn.active::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--ws-accent)}
body[data-workspace] .arcade-btn.active{color:var(--ws-accent)!important;font-weight:800}
body[data-workspace] .acct-btn .av{width:auto;height:auto;border-radius:0;background:transparent;color:currentColor;font-size:0}
body[data-workspace] .acct-btn .av::before{content:"";display:block;width:19px;height:19px;border:1.8px solid currentColor;border-radius:0;clip-path:polygon(30% 0,70% 0,70% 38%,90% 55%,90% 100%,10% 100%,10% 55%,30% 38%)}
body[data-workspace] .acct-btn{white-space:nowrap}
body[data-workspace] .workspace-theme-label{display:flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap}
body[data-workspace] .theme-label-text{font-weight:700}
body[data-workspace] #workspaceTheme{height:30px!important;border:0!important;border-left:1px solid var(--ws-line)!important;border-radius:0!important;background:transparent!important;padding:0 22px 0 8px!important;font-size:12px}
body[data-workspace] #btnHome{border-left:1px solid var(--ws-line)!important}
/* Badge hiding is handled by the toolrail container query at the end of this file. */
/* Icon-only collapse is handled by the toolrail container query at the end of this file. */
@media(max-width:760px){body[data-workspace] .topbar{flex-wrap:wrap!important;padding:6px!important}body[data-workspace] .badges{width:100%;overflow-x:auto;border:1px solid var(--ws-line)}body[data-workspace] .arcade-btn,body[data-workspace] .acct-btn,body[data-workspace] .icon-btn,body[data-workspace] .sound-btn,body[data-workspace] .workspace-theme-label{min-height:44px}.hud-streak{display:inline-flex!important}}

/* Claude-reviewed toolbar sizing: one rail height and one icon box across every tab. */
body[data-workspace]{--ws-tab-h:54px;--ws-tab-icon:18px}
body[data-workspace] .topbar{min-height:var(--ws-tab-h)}
body[data-workspace] .arcade-btn,body[data-workspace] .acct-btn,body[data-workspace] .icon-btn,body[data-workspace] .sound-btn,body[data-workspace] .workspace-theme-label{height:var(--ws-tab-h);min-height:var(--ws-tab-h);display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;line-height:1}
body[data-workspace] .icon-btn,body[data-workspace] .sound-btn{width:var(--ws-tab-h);min-width:var(--ws-tab-h);padding:0}
body[data-workspace] .badge,body[data-workspace] .hud-streak,body[data-workspace] .token-badge,body[data-workspace] .autosave{height:var(--ws-tab-h);min-height:var(--ws-tab-h);line-height:1}
body[data-workspace] .arcade-btn>svg,body[data-workspace] .icon-btn>svg{display:block;width:var(--ws-tab-icon);height:var(--ws-tab-icon);flex:0 0 var(--ws-tab-icon)}
body[data-workspace] .sound-btn::before{width:var(--ws-tab-icon);height:var(--ws-tab-icon)}
body[data-workspace] #btnPause{font-size:var(--ws-tab-icon)}
body[data-workspace] .acct-btn .av{display:inline-flex;align-items:center;flex:0 0 var(--ws-tab-icon)}
body[data-workspace] .acct-btn .av::before{box-sizing:border-box;width:var(--ws-tab-icon);height:var(--ws-tab-icon)}
body[data-workspace] .arcade-btn>span,body[data-workspace] .acct-btn>span:not(.av){display:inline-block;line-height:1.15;white-space:nowrap}
body[data-workspace] .arcade-btn.active::after{left:14px;right:14px}
@media(max-width:760px){body[data-workspace] .topbar{min-height:0}body[data-workspace] .brand{min-height:44px;display:flex;align-items:center}body[data-workspace] .arcade-btn,body[data-workspace] .acct-btn,body[data-workspace] .icon-btn,body[data-workspace] .sound-btn,body[data-workspace] .workspace-theme-label,body[data-workspace] .hud-streak{height:44px;min-height:44px}body[data-workspace] .icon-btn,body[data-workspace] .sound-btn{width:44px;min-width:44px}body[data-workspace] .acct-btn #acctLabel{display:none}}

.score-improvement>p{margin:7px 0 10px}
.score-improvement ul{display:grid;gap:9px;margin:10px 0 0;padding:0;list-style:none}
.score-improvement li{display:grid;grid-template-columns:1fr;align-items:start;gap:8px;padding:10px 0;border-top:1px solid var(--ws-line,var(--line))}
.score-improvement li>div{min-width:0;overflow-wrap:anywhere}
.score-improvement .subject-practice-link{border:1px solid var(--ws-accent,var(--blue));border-radius:3px;background:transparent;color:var(--ws-accent,var(--blue));padding:8px 11px;font-size:12px;white-space:normal;text-align:left;justify-self:start;max-width:100%;line-height:1.35}

/* Saved colleges beside the profile + acceptance pie */
.college-profile-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;margin-top:16px;align-items:start}
.college-saved-panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:16px;position:sticky;top:80px}
.college-saved-panel h3{margin:0 0 10px;font-size:16px;color:var(--text)}
.college-saved-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.college-saved-list li{display:flex;gap:6px;align-items:stretch}
body[data-workspace] .college-saved-item{flex:1;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;background:#121924!important;border:1px solid var(--line);border-radius:12px;padding:10px;color:var(--text)!important;min-width:0;font-weight:400}
body[data-workspace] .college-saved-item:hover:not(:disabled){border-color:var(--mint)}
body[data-workspace] .college-saved-item.current{border-color:var(--mint);background:rgba(94,240,176,.08)!important}
.cs-name{font-weight:700;font-size:14px;overflow-wrap:anywhere}
.cs-est{font-size:12px;font-weight:700;color:var(--mint)}
.cs-remove{align-self:center;padding:8px 10px}
.college-pie-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;min-width:0}
.college-pie .pie-center{fill:var(--text);font-weight:800;font-size:22px}
.college-pie .pie-center-sub{fill:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.college-pie-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.college-pie-legend li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}
.pie-dot{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
.college-conf{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px;margin-left:4px}
.college-conf-high{background:rgba(43,196,138,.18);color:#6ee7b7}
.college-conf-medium{background:rgba(255,204,77,.16);color:#ffcc4d}
.college-conf-low{background:rgba(239,68,68,.16);color:#fca5a5}
.college-split{display:flex;height:10px;border-radius:999px;overflow:hidden;margin-top:12px;border:1px solid var(--line)}
.college-split span{display:block;height:100%}
.pw-mask{-webkit-text-security:disc}
@media(max-width:1100px){.college-profile-wrap{grid-template-columns:1fr}.college-saved-panel{position:static}}


/* Full screen practice mode */
#zenExit{display:none;position:fixed;top:12px;right:12px;z-index:230;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(15,23,42,.94);border:1px solid var(--mint);color:var(--mint);font-weight:700;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
#zenExit.show{display:inline-flex}
#zenExit .small{color:var(--muted);font-weight:600}
body.zen-mode .topbar,body.zen-mode .foot,body.zen-mode .module-actions,body.zen-mode .workspace-navigator,body.zen-mode .workspace-learning,body.zen-mode .st-head,body.zen-mode #autosave{display:none!important}
body.zen-mode .wrap{max-width:1180px;padding:0 16px}
body.zen-mode .workspace-grid{grid-template-columns:minmax(0,1fr)!important;gap:0}
body.zen-mode .workspace-canvas{grid-column:1!important;grid-row:2!important;border-left:0!important;border-right:0!important}
body.zen-mode .workspace-question-body{padding:26px 22px}
body.zen-mode #screen-test>.card:first-child{margin-top:10px}
body.zen-mode .module-head{padding:10px 14px;gap:12px}
body.zen-mode .progress-track{margin-top:6px}
body.zen-mode .calc-panel{z-index:260}
body.zen-mode .workspace-tools-home{display:block!important;order:-1}
body.zen-mode .workspace-tools-home .tools-bar,body.zen-mode .workspace-tool-rail .tools-bar{display:flex!important;flex-direction:row!important;flex-wrap:wrap;margin:10px auto 0;justify-content:center;border:1px solid var(--ws-line);border-radius:999px;overflow:hidden;width:fit-content;max-width:100%;gap:0}
body.zen-mode .workspace-tool-rail{display:block!important;grid-column:1!important;grid-row:1!important;padding:0;border:0}
body.zen-mode .tool-btn{flex-direction:row!important;border-right:1px solid var(--ws-line)!important;border-bottom:0!important;min-height:auto!important;padding:9px 14px!important;font-size:12px!important;gap:6px!important;width:auto!important}
body.zen-mode .tool-btn svg{width:17px;height:17px}
body.zen-mode .workspace-tool-rail .tool-btn:last-child,.zen-mode .workspace-tools-home .tool-btn:last-child{border-right:0!important}
body.zen-mode.zen-study .workspace-learning{display:block!important;position:fixed;top:60px;right:12px;bottom:12px;width:min(430px,92vw);z-index:235;border:1px solid var(--line);border-radius:16px;overflow:auto;background:var(--ws-surface);box-shadow:0 18px 50px rgba(0,0,0,.5)}
body.zen-mode .workspace-calculator-dock{display:none}
body.zen-mode .workspace-calculator-dock:has(#calcPanel.show){display:block;position:fixed;top:60px;right:12px;bottom:12px;width:min(460px,94vw);z-index:240;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--ws-surface);box-shadow:0 18px 50px rgba(0,0,0,.5)}
body.zen-mode .workspace-calculator-dock #calcPanel{position:relative!important;height:100%!important;max-width:100%!important}
#zenStudy{display:none;position:fixed;top:12px;right:190px;z-index:230;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(15,23,42,.94);border:1px solid var(--line);color:var(--text);font-weight:700;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
#zenStudy.show{display:inline-flex}
#zenStudy[aria-pressed="true"]{border-color:var(--mint);color:var(--mint)}
@media(max-width:700px){#zenStudy{right:auto;left:8px;top:8px;padding:7px 10px;font-size:11px}#zenExit{top:8px;right:8px;padding:7px 10px;font-size:11px}body.zen-mode.zen-study .workspace-learning,body.zen-mode .workspace-calculator-dock:has(#calcPanel.show){top:52px;right:6px;left:6px;bottom:6px;width:auto}}
body.zen-mode .toast{z-index:270}
@media(max-width:560px){body.zen-mode .workspace-question-body{padding:16px 10px}body.zen-mode #zenExit{top:8px;right:8px;padding:7px 10px;font-size:11px}}

/* Full screen: pause button, and keep the reading width confined like the normal layout. */
#zenPause{display:none;position:fixed;top:12px;right:340px;z-index:230;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:rgba(15,23,42,.94);border:1px solid var(--line);color:var(--text);font-weight:700;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
body.zen-mode #zenPause{display:inline-flex}
#zenPause.on{border-color:var(--gold);color:var(--gold)}
body.zen-mode .workspace-question-body{max-width:820px;margin-left:auto;margin-right:auto;box-sizing:border-box}
body.zen-mode .module-head,body.zen-mode .progress-track,body.zen-mode .progress-label{max-width:820px;margin-left:auto;margin-right:auto}
body.zen-mode .bb-foot>*{max-width:820px}
body.zen-mode #screen-test>.card:first-child{margin-top:58px}
@media(max-width:700px){#zenPause{top:8px;left:auto;right:auto;left:50%;transform:translateX(-50%);padding:7px 10px;font-size:11px}}

/* College tabs: the layouts' generic button style was painting every tab mint with white text. */
body[data-workspace] .hsc-tab{background:#1a222e;color:var(--text);border:1px solid var(--line)}
body[data-workspace] .hsc-tab:hover{border-color:var(--mint)}
body[data-workspace] .hsc-tab.active{background:var(--mint);border-color:var(--mint);color:#0b1a14}
/* Your chances panel on the college profile */
.college-chances{min-width:0}
.chance-mix{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.fit{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;white-space:nowrap}
.fit-reach{background:rgba(239,68,68,.16);color:#fca5a5}
.fit-target{background:rgba(59,130,246,.18);color:#93c5fd}
.fit-likely{background:rgba(34,197,94,.16);color:#86efac}
.fit-safety{background:rgba(94,240,176,.2);color:#a7f3d0}
.chance-advice{margin:4px 0 10px}
.chance-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-height:620px;overflow:auto}
.chance-item{border:1px solid var(--ws-line,var(--line));border-radius:12px;padding:10px 12px;background:var(--ws-soft,rgba(255,255,255,.03))}
.chance-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.chance-name{font-weight:700;font-size:14px;line-height:1.3}
.chance-nums{font-size:13px;margin-top:4px}
.chance-nums b{font-size:16px}
.chance-item .college-split{margin-top:8px}
.chance-facts{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;color:var(--ws-muted,var(--muted))}
.chance-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag-up{color:#86efac}.tag-down{color:#fca5a5}
.chance-lever{margin-top:6px;color:var(--ws-ink,var(--text))}

/* College details open as a popup instead of a side panel. */
.college-layout{grid-template-columns:minmax(0,1fr)!important}
#collegeDetailHost:not(.as-popup){display:none}
#collegeDetailHost.as-popup{position:fixed;inset:0;z-index:950;background:rgba(5,8,14,.72);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:max(24px,env(safe-area-inset-top)) 16px 24px;overflow-y:auto;animation:fadeIn .15s ease}
.cpop-box{position:relative;width:min(980px,100%);margin:auto 0}
.cpop-box .college-detail{max-height:none!important;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.cpop-box .college-resize{display:none}
.cpop-close{position:absolute;top:-14px;right:-14px;z-index:2;width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:16px}
body[data-workspace] .cpop-close{background:var(--ws-surface);color:var(--ws-ink);border:1px solid var(--ws-line)}
body.cpop-open{overflow:hidden}
@media(max-width:620px){#collegeDetailHost.as-popup{padding:8px}}
@media(max-width:620px){.cpop-close{top:6px;right:6px}}

/* Equations are plain selectable text (no copy buttons). */
.tutor-equations code,.equation-copy-row code,.college-equation-row code,.ai-math{-webkit-user-select:text;user-select:text;cursor:text}
/* Keep college cards readable in light and dark layouts: text follows the layout's ink color. */
.chance-item,.chance-item .chance-name,.chance-item .chance-nums,.chance-item .chance-nums b,.chance-advice,.college-chances legend{color:var(--ws-ink,var(--text))}
.chance-item .chance-facts{color:var(--ws-muted,var(--muted))}
.cpop-box .college-detail{background:var(--ws-surface,var(--panel));color:var(--ws-ink,var(--text))}
.cpop-box .college-detail strong,.cpop-box .college-pie-legend,.cpop-box .college-pie-legend *,.cpop-box h2,.cpop-box h3,.cpop-box .college-detail p{color:var(--ws-ink,var(--text))}
.cpop-box .pie-center,.cpop-box .pie-center-sub{fill:var(--ws-ink,var(--text))}
.cpop-box .small.muted,.cpop-box .muted{color:var(--ws-muted,var(--muted))}
.college-equation-row,.equation-copy-row{background:var(--ws-soft,#1a222e)}
.college-equation-row code,.equation-copy-row code,.tutor-equations code{color:var(--ws-ink,var(--text))}
/* The college screen uses the redesign's dark chrome in every layout, so give it a matching dark set
   of layout tokens. Without this, Exam/Notebook mixed light boxes with dark cards and text vanished. */
#screen-college,#collegeDetailHost{--ws-bg:#0f141c;--ws-surface:#18202b;--ws-soft:#202a35;--ws-ink:#e8edf4;--ws-muted:#a3b0c2;--ws-line:#2f3b4b;--ws-tint:#1e3830;color:var(--ws-ink)}
#screen-college,#collegeDetailHost{--ws-accent:#5ef0b0;--ws-on-accent:#0b1a14;--ws-success:#86efac;--ws-warn:#f6d087;--ws-error:#ff9aa2;--blue:#7cb3ff}
#screen-college a,#collegeDetailHost a{color:#7dd3fc}
#screen-college .ring-lbl,#screen-college .ring-num{color:var(--ws-ink)}
#screen-college .hero-line,#screen-college .hero-line *:not(b):not(strong){color:var(--ws-ink)}
#screen-college,#collegeDetailHost{--muted:#a3b0c2;--text:#e8edf4;--ink:#e8edf4;--line:#2f3b4b}
/* ---- Your chances: full-width, larger, card grid ---- */
.college-chances.college-wide{grid-column:1/-1;padding:18px 20px 20px}
.college-chances legend{font-size:20px;font-weight:800;padding:0 8px}
.chance-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.chance-mix{gap:8px;margin:0}
.chance-mix .fit{font-size:15px;padding:6px 14px}
.chance-sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ws-muted)}
.chance-sort select{width:auto;padding:7px 10px;font-size:14px}
.chance-advice{font-size:16px;margin:12px 0 4px;color:var(--ws-ink)}
.chance-add{margin:14px 0 16px}
.chance-add label{display:block;font-weight:700;font-size:14px;margin-bottom:6px;color:var(--ws-ink)}
.chance-add input{width:100%;font-size:16px;padding:12px 14px;border-radius:12px}
.chance-add-results{display:grid;gap:6px;margin-top:8px}
.chance-add-results:empty{display:none}
.chance-add-item{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding:11px 14px;border-radius:10px;font-size:15px;background:var(--ws-soft)!important;color:var(--ws-ink)!important;border:1px solid var(--ws-line)!important}
.chance-add-item:hover:not(:disabled){border-color:var(--mint)!important}
.chance-add-item>span:last-child{color:var(--mint);font-weight:800;white-space:nowrap}
.chance-add-item:disabled{opacity:.6}
.chance-empty{font-size:16px;color:var(--ws-muted)}
.chance-list{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;max-height:none;overflow:visible}
.chance-item{padding:18px;border-radius:16px;border-left-width:5px}
.chance-item.fitb-reach{border-left-color:#ef4444}.chance-item.fitb-target{border-left-color:#3b82f6}.chance-item.fitb-likely{border-left-color:#22c55e}.chance-item.fitb-safety{border-left-color:#5ef0b0}
.chance-name{font-size:19px;font-weight:800;line-height:1.25}
.chance-loc{font-size:14px;color:var(--ws-muted);margin-top:3px}
.chance-head .fit{font-size:14px;padding:5px 12px}
.chance-big{display:flex;align-items:center;gap:14px;margin:14px 0 10px}
.chance-pct{font-size:44px;font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--ws-ink)}
.chance-pct-l{font-size:15px;line-height:1.35;color:var(--ws-ink)}
.chance-pct-l .muted{font-size:13px}
.chance-item .college-split{height:14px;margin-top:4px}
.chance-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:14px;color:var(--ws-ink)}
.chance-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.chance-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.cg-cell{background:rgba(255,255,255,.04);border:1px solid var(--ws-line);border-radius:10px;padding:10px 12px}
.cg-k{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ws-muted);font-weight:700}
.cg-v{font-size:18px;font-weight:800;margin-top:3px;color:var(--ws-ink)}
.cg-v .muted{font-size:14px;font-weight:600}
.chance-sub{font-size:15px;font-weight:700;margin-top:14px;color:var(--ws-ink)}
.chance-range{position:relative;margin:8px 0 22px}
.cr-track{position:relative;height:12px;border-radius:999px;background:rgba(255,255,255,.08)}
.cr-band{position:absolute;top:0;bottom:0;border-radius:999px;background:rgba(59,130,246,.55)}
.cr-you{position:absolute;top:-6px;width:4px;height:24px;margin-left:-2px;border-radius:2px;background:var(--mint)}
.cr-you b{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--mint);white-space:nowrap}
.cr-labels{position:relative;height:16px;margin-top:4px;font-size:12px;color:var(--ws-muted)}
.cr-labels span{position:absolute;transform:translateX(-50%)}
.chance-tags{gap:8px;margin-top:10px;font-size:14px}
.chance-what{margin-top:12px}
.chance-what ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.chance-what li{display:flex;justify-content:space-between;font-size:15px;color:var(--ws-ink)}
.chance-what b.up{color:#86efac}
.chance-actions{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.chance-actions .secondary{padding:9px 14px;font-size:14px}
.chance-link{font-size:14px;font-weight:700}
.chance-remove{margin-left:auto;font-size:14px;color:#fca5a5!important;background:transparent!important;border:0!important}
.chance-note{font-size:14px;color:var(--ws-muted);margin:12px 0 0}
@media(max-width:620px){.college-chances.college-wide{padding:14px}.chance-list{grid-template-columns:1fr}.chance-pct{font-size:38px}.chance-grid{grid-template-columns:1fr 1fr}}
.chance-range{margin-top:28px}
.chance-sort{flex-direction:row}
.chance-sort select{margin:0}
/* ---- Saved colleges: compact rows so the whole list fits ---- */
.college-saved-panel{max-height:calc(100vh - 100px);display:flex;flex-direction:column}
.college-saved-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;overflow-y:auto;min-height:0}
.cs-row{display:flex;align-items:stretch;gap:4px}
.college-saved-panel .college-saved-item{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:8px;row-gap:1px;align-items:center;text-align:left;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.04)!important;border:1px solid var(--ws-line)!important;color:var(--ws-ink)!important}
.college-saved-panel .college-saved-item:hover,.college-saved-panel .college-saved-item.current{border-color:var(--mint)!important}
.college-saved-panel .cs-name{grid-column:1;font-size:14px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.college-saved-panel .cs-meta{grid-column:1;font-size:12px;color:var(--ws-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.college-saved-panel .cs-est{grid-column:2;grid-row:1/3;font-size:16px;font-weight:900;padding:4px 8px;border-radius:8px;min-width:52px;text-align:center}
.college-saved-panel .cs-remove{flex:none;width:30px;padding:0;font-size:13px;color:var(--ws-muted)!important;background:transparent!important;border:0!important}
.college-saved-panel .cs-remove:hover{color:#fca5a5!important}
/* ---- Context review card ---- */
.context-review{margin-top:10px;display:grid;gap:8px}
.context-review>.secondary{justify-self:start}
.context-stale{font-size:14px;color:#f6d087;margin:0}
.context-card{border:1px solid var(--ws-line);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.03)}
.context-card.stale{opacity:.6}
.context-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.context-cat{font-weight:800;font-size:16px;color:var(--ws-ink)}
.context-impact{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px}
.impact-high{background:rgba(94,240,176,.18);color:#a7f3d0}.impact-moderate{background:rgba(59,130,246,.18);color:#93c5fd}
.impact-low,.impact-none{background:rgba(255,255,255,.08);color:var(--ws-muted)}
.context-sum{font-size:15px;margin:8px 0 0;color:var(--ws-ink)}
.context-applied{font-size:14px;margin:8px 0 0;color:#86efac}
.context-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.context-cols h4{margin:0 0 4px;font-size:14px;color:var(--ws-ink)}
.context-cols ul{margin:0;padding-left:18px;font-size:14px;color:var(--ws-ink)}
.context-cols li{margin:4px 0}
@media(max-width:700px){.context-cols{grid-template-columns:1fr}}
/* one line per saved college */
.college-saved-panel .college-saved-item{grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:auto;padding:6px 8px 6px 10px;column-gap:8px}
.college-saved-panel .cs-name{grid-column:1;font-size:13.5px}
.college-saved-panel .cs-meta{grid-column:2;grid-row:1;font-size:12px}
.college-saved-panel .cs-meta{max-width:9em}
.college-saved-panel .cs-est{grid-column:3;grid-row:1;font-size:14px;padding:3px 7px;min-width:46px}
.college-saved-list{gap:3px}
/* Arcade intro: smooth GPU zoom (the old rule targeted #arcadeIntro, which doesn't exist, so the zoom snapped). */
#fxOverlay .cab3d{will-change:transform;transform:translateZ(0);backface-visibility:hidden}
#fxOverlay.zooming .cab3d{transition:transform .75s cubic-bezier(.65,0,.35,1);filter:none}
#fxOverlay.zooming{transition:background-color .75s ease;background:rgba(4,7,12,.95)}
@media (prefers-reduced-motion: reduce){#fxOverlay.zooming .cab3d{transition-duration:.01s}}
/* ---- Profile layout A: two horizontal bands, college breakdowns right below ---- */
.college-profile-grid .college-band{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 16px;align-items:end;padding:18px 22px 20px}
.college-band legend{font-size:18px;font-weight:800;padding:0 8px}
.college-band>label,.college-gpa-pair>label{display:flex;flex-direction:column;gap:6px;margin:0;font-size:13px;color:var(--ws-muted)}
.college-band>label>input,.college-band>label>select,.college-gpa-pair input,.college-gpa-pair select{width:100%;height:46px;box-sizing:border-box;border-radius:12px;font-size:16px;padding:0 12px;margin:0}
.college-band-scores #collegeUsePredicted{height:46px;width:100%;margin:0;border-radius:12px;font-size:15px;font-weight:800;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.college-band-scores>p{grid-column:1/-1;margin:0;font-size:13px}
.college-gpa-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px}
.college-gpa-pair select{font-size:15px;padding:0 8px}
.college-band .college-rigor{display:flex;flex-direction:column;gap:6px;margin:0;font-size:13px;color:var(--ws-muted)}
.college-band .college-rigor{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.college-band .college-rigor>span{grid-column:1/-1}
.college-band .college-rigor label{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;margin:0}
.college-band .college-rigor input{width:100%;height:30px;box-sizing:border-box;text-align:center;border-radius:8px;font-size:15px;padding:0}
.college-profile-grid .college-chances{margin-top:4px}
@media(max-width:900px){.college-profile-grid .college-band{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.college-profile-grid .college-band{grid-template-columns:1fr}}
.chance-factors{margin-top:12px}
.chance-factors ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.chance-factors li{display:flex;justify-content:space-between;gap:10px;font-size:15px;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.chance-factors li b{font-variant-numeric:tabular-nums;white-space:nowrap}
.chance-factors .f-up{color:#86efac}.chance-factors .f-down{color:#fca5a5}

/* Drift garage overlay */
.drift-garage{position:fixed;inset:0;z-index:1280;display:none;align-items:center;justify-content:center;background:rgba(4,7,12,.82)}
.drift-garage.show{display:flex}
.dg-card{width:min(760px,94vw);max-height:88vh;display:flex;flex-direction:column;background:var(--panel,#18202b);border:1px solid var(--line,#2a3442);border-radius:18px;color:var(--text,#e8edf4);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.dg-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line,#2a3442)}
.dg-head strong{font-size:17px}
.dg-cash{margin-left:auto;color:var(--gold,#ffcc4d);font-weight:800}
.dg-body{padding:16px 18px;overflow:auto}
.dg-section{margin-bottom:18px}
.dg-section h4{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mint,#5ef0b0)}
.dg-cars{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.dg-car{border:1px solid var(--line,#2a3442);border-radius:12px;padding:10px;background:#121924;display:flex;flex-direction:column;gap:6px}
.dg-car.active{border-color:var(--mint,#5ef0b0)}
.dg-car.locked{opacity:.65}
.dg-car b{font-size:14px}
.dg-stat{display:flex;justify-content:space-between;font-size:11px;color:var(--muted,#93a0b2)}
.dg-swatches{display:flex;gap:8px;flex-wrap:wrap}
.dg-swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.dg-swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--mint,#5ef0b0)}
.dg-pill{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line,#2a3442);background:#121924;color:var(--text,#e8edf4);font-weight:700;font-size:12px}
.dg-pill.on{background:var(--mint,#5ef0b0);color:#06281c;border-color:var(--mint,#5ef0b0)}
.dg-pill:disabled{opacity:.5}
.dg-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dg-slider{display:grid;grid-template-columns:70px 1fr 44px;align-items:center;gap:10px;margin:6px 0;font-size:12px;color:var(--muted,#93a0b2)}
.dg-slider input{width:100%}
.dg-slider b{color:var(--text,#e8edf4);text-align:right}
.dg-note{font-size:11px;color:var(--muted,#93a0b2);margin-top:6px}

/* ---- Top rail sizing: measure the rail, not the viewport ----------------
   The toolbar used to collapse on viewport media queries (1540px/1120px)
   while its real constraint is the 1140px `.wrap` cap, which never changes.
   On a wide monitor the viewport test passed, nothing collapsed, and the rail
   overflowed its container by ~450px — putting the theme picker and account
   button in a clipped scroll region. Two fixes: let the rail use the full
   window, and collapse on the rail's own width with container queries. */
@media (min-width:1200px){
  body[data-workspace] .topbar{
    margin-inline:calc(-1 * (50vw - 50%));
    max-width:none;   /* line 210 caps this at 100% of the 1140px wrap */
    padding-inline:clamp(16px,2.5vw,40px)!important;
  }
  /* The calculator panel shifts the page; full-bleed would overflow it. */
  body[data-workspace].calc-open .topbar{margin-inline:0;padding-inline:0!important}
}

body[data-workspace] .badges{
  container-type:inline-size;
  container-name:toolrail;
  flex:1 1 0%;          /* size from free space, not content, so the query is stable */
  overflow-x:hidden;    /* nothing should land in a scroll region at desktop widths */
}

/* Drop the ambient read-outs first — they are glanceable, not navigation. */
@container toolrail (max-width:1380px){
  body[data-workspace] .badge,
  body[data-workspace] .hud-streak,
  body[data-workspace] .token-badge,
  body[data-workspace] #autosave{display:none}
  body[data-workspace] .theme-label-text{display:none}
}

/* Then collapse the nav labels to icons, keeping tap targets square. */
@container toolrail (max-width:1060px){
  body[data-workspace] .arcade-btn>span{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  body[data-workspace] .arcade-btn{width:var(--ws-tab-h);padding:0!important}
  body[data-workspace] .arcade-btn.active::after{left:9px;right:9px}
  body[data-workspace] .acct-btn #acctLabel{display:none}
}

/* Below the wrap's own breakpoint the rail may still scroll, as before. */
@media (max-width:760px){
  body[data-workspace] .badges{overflow-x:auto}
}