:root {
  color-scheme: dark;
  --font-adjust: 0px;
  --hint-text-size: calc(11px + var(--font-adjust));
  --hint-title-size: calc(12px + var(--font-adjust));
  --bg: #080b18;
  --bg-2: #10142a;
  --panel: rgba(18, 22, 43, 0.86);
  --panel-solid: #12162b;
  --panel-soft: #171c35;
  --line: rgba(192, 202, 255, 0.13);
  --line-strong: rgba(192, 202, 255, 0.23);
  --panel-border: #65708f;
  --text: #f4f4fb;
  --muted: #9ca5bf;
  --purple: #a975ff;
  --purple-2: #7c52df;
  --cyan: #56d9e8;
  --green: #62d59d;
  --amber: #ffcb6b;
  --red: #ff7c91;
  --shadow: 0 22px 65px rgba(0, 0, 0, 0.34);
  --radius: 18px;
  --scrollbar-track: rgba(11, 8, 22, 0.22);
  --scrollbar-thumb: rgba(164, 146, 190, 0.58);
  --scrollbar-thumb-hover: rgba(190, 173, 214, 0.76);
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root:has(body.light),
body.light {
  color-scheme: light;
  --bg: #f4f4fa;
  --bg-2: #ececf7;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-solid: #fff;
  --panel-soft: #f4f3fb;
  --line: rgba(65, 48, 100, 0.12);
  --line-strong: rgba(65, 48, 100, 0.2);
  --panel-border: #8a83a0;
  --text: #242137;
  --muted: #716e83;
  --purple: #7545c6;
  --purple-2: #6336b5;
  --cyan: #168b9c;
  --green: #19845a;
  --amber: #a76405;
  --red: #c73c57;
  --shadow: 0 18px 55px rgba(52, 36, 83, 0.12);
  --scrollbar-track: rgba(226, 218, 236, 0.62);
  --scrollbar-thumb: rgba(126, 105, 153, 0.48);
  --scrollbar-thumb-hover: rgba(103, 80, 132, 0.66);
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { border-radius: 8px; background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb { min-height: 28px; border: 2px solid transparent; border-radius: 8px; background: var(--scrollbar-thumb); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
*::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

html { min-width: 320px; min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 8% -15%, rgba(133, 84, 220, 0.22), transparent 32rem),
    radial-gradient(circle at 100% 5%, rgba(46, 160, 182, 0.1), transparent 28rem),
    linear-gradient(145deg, var(--bg), var(--bg-2));
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button.is-busy:disabled, body.is-processing .coach-actions button:disabled { cursor: progress; }
button, input, textarea, select { outline: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  box-shadow: 0 0 0 3px rgba(169, 117, 255, 0.32);
}

[hidden] { display: none !important; }
svg { display: block; }

.app-shell { min-height: 100vh; transition: filter .2s, opacity .2s; }
.auth-pending .app-shell { filter: blur(6px); pointer-events: none; }
.auth-complete .auth-shell { opacity: 0; visibility: hidden; pointer-events: none; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; cursor: default; user-select: none; }
.brand-mark {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  color: white; background: linear-gradient(145deg, #bd8bff, #7040c3 62%, #2e8a9b);
  box-shadow: 0 7px 23px rgba(127, 78, 204, .36);
}
.brand-mark svg { width: 30px; height: 30px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-size: calc(16px + var(--font-adjust)); letter-spacing: -.02em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: calc(9px + var(--font-adjust)); letter-spacing: .16em; text-transform: uppercase; }

.auth-shell {
  position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(360px, 520px) minmax(280px, 1fr);
  align-items: center; gap: 9vw; padding: 7vw; background: #090b19; transition: opacity .25s, visibility .25s;
}
.auth-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.auth-backdrop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(9,11,25,.98) 0 42%, rgba(9,11,25,.58)), radial-gradient(circle at 78% 44%, rgba(135,87,215,.32), transparent 28%); }
.auth-backdrop::after { content: ""; position: absolute; width: 600px; height: 600px; right: -120px; bottom: -280px; border: 1px solid rgba(184,147,245,.16); border-radius: 48% 52% 60% 40%; transform: rotate(18deg); }
.auth-backdrop span { position: absolute; border: 1px solid rgba(194,160,247,.16); border-radius: 50%; }
.auth-backdrop span:nth-child(1) { width: 370px; height: 370px; right: 10vw; top: 20%; }
.auth-backdrop span:nth-child(2) { width: 240px; height: 240px; right: 14vw; top: 28%; }
.auth-backdrop span:nth-child(3) { width: 100px; height: 100px; right: 19vw; top: 38%; background: rgba(172,116,255,.08); }
.auth-card { position: relative; z-index: 1; padding: 38px 42px; border: 1px solid rgba(203,188,237,.18); border-radius: 24px; background: rgba(20,23,43,.82); box-shadow: 0 35px 100px rgba(0,0,0,.48); backdrop-filter: blur(22px); }
.auth-brand { margin-bottom: 38px; }
.auth-card .eyebrow { color: #bda2ed; }
.auth-card h1 { margin: 8px 0 9px; color: #fff; font-size: clamp(calc(28px + var(--font-adjust)), calc(4vw + var(--font-adjust)), calc(42px + var(--font-adjust))); letter-spacing: -.045em; }
.auth-card form > p:not(.eyebrow):not(.form-error):not(.auth-switch) { max-width: 370px; margin: 0 0 26px; color: #a9adc1; line-height: 1.55; }
.field { display: grid; gap: 8px; margin: 17px 0; }
.field span { color: #cbd0df; font-size: calc(12px + var(--font-adjust)); font-weight: 650; }
.field input { width: 100%; height: 48px; padding: 0 15px; border: 1px solid rgba(198,199,228,.15); border-radius: 11px; color: #fff; background: rgba(6,8,20,.55); transition: border-color .2s, background .2s; }
.field input:focus { border-color: #9d6fe2; background: rgba(6,8,20,.75); }
.form-error { min-height: 20px; margin: 6px 0; color: var(--red); font-size: calc(12px + var(--font-adjust)); }
.auth-submit { width: 100%; height: 50px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(115deg, #9d6cf0, #7248c7); box-shadow: 0 12px 28px rgba(114,72,199,.28); font-weight: 750; }
.busy-label { display: none; align-items: center; justify-content: center; gap: 8px; }
.is-busy .idle-label { display: none !important; }
.is-busy .busy-label { display: flex !important; }
.busy-label i { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-switch { margin: 18px 0 0; color: #999daf; text-align: center; font-size: calc(12px + var(--font-adjust)); }
.auth-switch button { padding: 0; border: 0; color: #c29cff; background: none; font-weight: 700; }
.privacy-note { display: flex; gap: 8px; margin: 24px 0 0; color: #858a9e; font-size: calc(11px + var(--font-adjust)); line-height: 1.5; }
.privacy-note span { color: #6dd4a4; }
.auth-message { position: relative; z-index: 1; justify-self: center; color: #fff; font-size: clamp(calc(30px + var(--font-adjust)), calc(4vw + var(--font-adjust)), calc(59px + var(--font-adjust))); letter-spacing: -.055em; line-height: 1.08; }
.auth-message strong { color: #c6a4ff; font-weight: 550; }
.message-orbit { position: relative; display: block; width: 100px; height: 100px; margin-bottom: 26px; border: 1px solid rgba(206,177,255,.35); border-radius: 50%; }
.message-orbit::before, .message-orbit::after { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(206,177,255,.25); border-radius: 50%; }
.message-orbit::after { inset: 34px; background: #a16fe5; box-shadow: 0 0 35px rgba(161,111,229,.7); }
.message-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #8ee5ea; }
.message-orbit i:nth-child(1) { top: 7px; left: 55px; }.message-orbit i:nth-child(2) { bottom: 13px; right: 7px; }.message-orbit i:nth-child(3) { bottom: 16px; left: 5px; background: #d0a9ff; }

.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 68px; padding: 10px 28px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(20px); }
.topbar-center { display: flex; align-items: center; gap: 11px; color: var(--muted); font-size: calc(11px + var(--font-adjust)); }
.cloud-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; }
.cloud-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 14%, transparent); }
.cloud-status.is-error i { background: var(--red); }
.autosave-status { padding-left: 11px; border-left: 1px solid var(--line); }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.font-size-controls { height: 38px; display: grid; grid-template-columns: 32px 40px 32px; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.font-size-controls button { height: 100%; padding: 0; border: 0; color: var(--muted); background: transparent; font-size: 14px; font-weight: 750; transition: color .2s, background .2s; }
.font-size-controls button:hover:not(:disabled) { color: var(--text); background: var(--panel-soft); }
.font-size-controls button:disabled { cursor: not-allowed; opacity: .34; }
.font-size-value { min-width: 0; color: var(--muted); text-align: center; font: 11px var(--mono); }
.icon-button, .history-button, .complete-button, .account-button { height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.icon-button { display: grid; width: 38px; place-items: center; }
.icon-button svg { width: 19px; height: 19px; }
.theme-toggle .sun-icon { display: none; }
body.light .theme-toggle .moon-icon { display: none; }
body.light .theme-toggle .sun-icon { display: block; }
.history-button { display: flex; align-items: center; gap: 7px; padding: 0 13px; font-size: calc(12px + var(--font-adjust)); }
.history-button svg { width: 17px; height: 17px; }
.complete-button { display: flex; align-items: center; gap: 7px; padding: 0 13px; border-color: color-mix(in srgb,var(--purple) 52%,transparent); color: white; background: linear-gradient(115deg,#9060de,#6740b2); font-size: calc(12px + var(--font-adjust)); font-weight: 750; }
.complete-button svg { width: 17px; }
.complete-button[data-state="saving"] { opacity: 1; cursor: progress; }
.complete-button[data-state="saving"] svg, .complete-button[data-state="error"] svg { display: none; }
.complete-button[data-state="saving"]::before { content: ""; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.complete-button[data-state="saved"] { border-color: #43bd88; background: linear-gradient(115deg, #20845e, #1d6f53); box-shadow: 0 0 0 3px rgba(67,189,136,.17); }
.complete-button[data-state="error"] { border-color: #d75970; background: linear-gradient(115deg, #9e405a, #762f46); }
.complete-button[data-state="error"]::before { content: "!"; display: grid; width: 17px; height: 17px; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font-size: 11px; }
.account { position: relative; }
.account-button { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 5px; }
.account-button > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #fff; background: linear-gradient(145deg, #9f75e1, #5f3da1); font-size: calc(11px + var(--font-adjust)); }
.account-button strong { max-width: 100px; overflow: hidden; text-overflow: ellipsis; font-size: calc(11px + var(--font-adjust)); }
.account-button svg { width: 13px; }
.account-menu { position: absolute; top: 45px; right: 0; z-index: 25; width: 210px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel-solid); box-shadow: var(--shadow); }
.account-menu small, .account-menu strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.account-menu small { margin-bottom: 4px; color: var(--muted); font-size: calc(10px + var(--font-adjust)); }
.account-menu strong { font-size: calc(12px + var(--font-adjust)); }
.account-menu button, .account-menu a { display: block; width: 100%; margin-top: 14px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; text-align: center; text-decoration: none; }
.account-menu a { margin-top: 8px; }
.account-menu a:hover { color: var(--purple); border-color: var(--purple); }
.account-menu #replayOnboardingButton { border-color: var(--purple); color: var(--purple); }
.account-menu #logoutButton { margin-top: 8px; }

.workspace { width: min(1760px, 100%); margin: 0 auto; padding: 16px 28px 28px; }
.workspace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.eyebrow { margin: 0; color: var(--purple); font-size: calc(10px + var(--font-adjust)); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 5px; height: 5px; margin: 0 6px 1px 0; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent); }
.workspace-heading h1 { margin: 0; font-size: clamp(calc(24px + var(--font-adjust)), calc(3vw + var(--font-adjust)), calc(36px + var(--font-adjust))); letter-spacing: -.045em; }
.workspace-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: calc(13px + var(--font-adjust)); }
.heading-actions { display: flex; gap: 9px; }
.import-button, .secondary-button { height: 42px; padding: 0 15px; border-radius: 10px; font-weight: 700; font-size: calc(12px + var(--font-adjust)); }
.import-button { display: flex; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb, var(--purple) 55%, transparent); color: white; background: linear-gradient(115deg, #9060de, #6740b2); box-shadow: 0 8px 22px rgba(92, 56, 151, .22); }
.import-button svg { width: 18px; }
.secondary-button { border: 1px solid var(--line-strong); background: var(--panel); }

.ide-layout {
  --explorer-panel-width: 205px;
  --coach-panel-width: 360px;
  display: grid;
  grid-template-columns: var(--explorer-panel-width) 10px minmax(420px, 1fr) 10px var(--coach-panel-width);
  gap: 6px;
  min-height: calc(100vh - 250px);
}
.panel-resizer {
  position: relative;
  z-index: 2;
  min-width: 10px;
  align-self: stretch;
  border-radius: 999px;
  cursor: col-resize;
  touch-action: none;
  outline: none;
}
.panel-resizer::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
  transform: translateX(-50%);
  transition: width .18s, background .18s, box-shadow .18s;
}
.panel-resizer span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--muted) 1px, transparent 1.5px) center / 4px 7px,
    var(--panel-solid);
  box-shadow: 0 5px 18px rgba(0,0,0,.2);
  transform: translate(-50%, -50%);
  transition: border-color .18s, background-color .18s, box-shadow .18s, width .18s;
}
.panel-resizer:hover::before,
.panel-resizer:focus-visible::before,
.panel-resizer.is-active::before { width: 2px; background: var(--purple); box-shadow: 0 0 12px color-mix(in srgb, var(--purple) 45%, transparent); }
.panel-resizer:hover span,
.panel-resizer:focus-visible span,
.panel-resizer.is-active span { width: 10px; border-color: var(--purple); background-color: color-mix(in srgb, var(--purple) 12%, var(--panel-solid)); }
body.is-panel-resizing,
body.is-panel-resizing * { cursor: col-resize !important; user-select: none !important; }
.glass-panel { border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.file-panel { position: relative; display: flex; flex-direction: column; min-height: 580px; overflow: hidden; }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 13px 0 15px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: calc(9px + var(--font-adjust)); font-weight: 750; letter-spacing: .13em; }
.panel-title-row button { display: grid; width: 27px; height: 27px; padding: 0; place-items: center; border: 0; border-radius: 7px; background: transparent; font-size: calc(19px + var(--font-adjust)); }
.panel-title-row button:hover { background: var(--panel-soft); }
.folder-label { display: flex; align-items: center; gap: 7px; padding: 15px 14px 8px; color: var(--muted); font-size: calc(9px + var(--font-adjust)); font-weight: 800; letter-spacing: .08em; }
.folder-label svg { width: 14px; }
.file-list { min-height: 72px; max-height: 360px; overflow-y: auto; padding-bottom: 8px; }
.file-item { display: flex; align-items: center; width: 100%; height: 36px; padding-right: 8px; border-left: 2px solid transparent; color: var(--text); background: transparent; font-size: calc(11px + var(--font-adjust)); }
.file-item-select { display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; gap: 7px; padding: 0 5px 0 17px; border: 0; color: inherit; background: transparent; text-align: left; font: inherit; }
.file-item.is-active { border-left-color: var(--purple); background: color-mix(in srgb, var(--purple) 10%, transparent); }
.file-item:hover { background: var(--panel-soft); }
.file-item-select, .editor-tab-select { cursor: grab; user-select: none; }
body.is-file-reordering, body.is-file-reordering * { cursor: grabbing !important; user-select: none !important; }
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item .python-icon { flex-shrink: 0; }
.python-icon { color: #74b9ff; font-family: var(--mono); font-size: calc(9px + var(--font-adjust)); font-weight: 900; }
.file-item i, .file-dirty-dot { flex-shrink: 0; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--purple); opacity: 0; }
.file-item.is-dirty i, .editor-tab.is-dirty .file-dirty-dot { opacity: 1; }
.file-panel.is-file-drop { outline: 2px solid var(--purple); outline-offset: -3px; }
.file-item.is-dragging, .editor-tab.is-dragging { opacity: .45; }
.file-item.is-drop-before { box-shadow: inset 0 2px var(--purple); }
.file-item.is-drop-after { box-shadow: inset 0 -2px var(--purple); }
.file-panel-empty { margin: auto 18px; color: var(--muted); text-align: center; font-size: calc(11px + var(--font-adjust)); line-height: 1.55; }
.file-panel-empty svg { width: 32px; margin: 0 auto 10px; opacity: .55; }
.local-badge { display: flex; gap: 8px; margin: auto 12px 12px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--panel-soft) 76%, transparent); }
.local-badge > span { font-size: calc(14px + var(--font-adjust)); }
.local-badge p { margin: 0; }
.local-badge strong, .local-badge small { display: block; }
.local-badge strong { font-size: calc(10px + var(--font-adjust)); }.local-badge small { margin-top: 3px; color: var(--muted); font-size: calc(9px + var(--font-adjust)); line-height: 1.4; }

.editor-column { display: grid; min-width: 0; min-height: 0; height: clamp(580px, calc(100dvh - 285px), 900px); grid-template-rows: minmax(390px, 1fr) 160px; gap: 12px; }
.editor-panel, .terminal-panel { min-width: 0; overflow: hidden; }
.editor-panel { display: flex; flex-direction: column; min-height: 0; }
.editor-tabs { display: flex; align-items: stretch; justify-content: space-between; height: 44px; border-bottom: 1px solid var(--line); }
.editor-tab-list { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.editor-tab { display: flex; flex: 0 0 auto; align-items: center; width: 158px; border-right: 1px solid var(--line); border-top: 2px solid transparent; color: var(--muted); font-family: var(--mono); font-size: calc(10px + var(--font-adjust)); }
.editor-tab.is-active { border-top-color: var(--purple); color: var(--text); background: color-mix(in srgb, var(--panel-soft) 70%, transparent); }
.editor-tab:hover { background: var(--panel-soft); }
.editor-tab-select { display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; gap: 7px; padding: 0 4px 0 12px; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; }
.editor-tab-close, .file-item-delete { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 26px; padding: 0; border: 0; border-radius: 5px; color: var(--muted); background: transparent; font-size: 17px; opacity: 0; pointer-events: none; }
.editor-tab-close { margin-right: 5px; }
.editor-tab:hover .editor-tab-close, .editor-tab:focus-within .editor-tab-close,
.file-item:hover .file-item-delete, .file-item:focus-within .file-item-delete { opacity: 1; pointer-events: auto; }
.editor-tab-close:hover, .file-item-delete:hover { background: color-mix(in srgb, var(--purple) 15%, transparent); color: var(--text); }
@media (hover: none), (pointer: coarse) {
  .editor-tab-close, .file-item-delete { opacity: 1; pointer-events: auto; }
}
.editor-tab.is-drop-before { box-shadow: inset 2px 0 var(--purple); }
.editor-tab.is-drop-after { box-shadow: inset -2px 0 var(--purple); }
.editor-tools { display: flex; flex-shrink: 0; align-items: center; gap: 14px; padding: 0 13px; color: var(--muted); font-family: var(--mono); font-size: calc(9px + var(--font-adjust)); }
.editor-wrap.is-empty #codeEditor { opacity: .6; }
.editor-tools button { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-family: var(--sans); font-size: calc(9px + var(--font-adjust)); }
.editor-tools button:hover { color: var(--text); background: var(--panel-soft); }
.editor-tools svg { width: 15px; }
.editor-wrap { --editor-gutter-width: 50px; position: relative; display: grid; flex: 1; min-height: 0; grid-template-columns: var(--editor-gutter-width) 1fr; overflow: hidden; background: color-mix(in srgb, var(--bg) 44%, transparent); }
.line-numbers, #codeEditor { margin: 0; padding-top: 18px; border: 0; font: 12.5px/1.68 var(--mono); tab-size: 4; }
.line-numbers { padding-right: 12px; overflow: hidden; color: color-mix(in srgb, var(--muted) 57%, transparent); background: rgba(0,0,0,.09); text-align: right; user-select: none; }
.issue-line-highlight { position: absolute; z-index: 1; left: var(--editor-gutter-width); right: 0; border-left: 3px solid var(--red); background: color-mix(in srgb, var(--red) 21%, transparent); pointer-events: none; }
#codeEditor { position: relative; z-index: 2; width: 100%; height: 100%; min-height: 0; padding-right: 18px; padding-left: 16px; resize: none; color: #d8e3ff; caret-color: var(--cyan); background: transparent; white-space: pre; overflow: auto; }
body.light #codeEditor { color: #27213b; }
#codeEditor::selection { color: inherit; background: rgba(151,102,221,.35); }
.drop-overlay { position: absolute; inset: 10px; z-index: 5; display: none; place-items: center; border: 1px dashed var(--purple); border-radius: 13px; background: color-mix(in srgb, var(--panel-solid) 92%, transparent); }
.is-dragging .drop-overlay { display: grid; }
.drop-overlay > div { color: var(--muted); text-align: center; }
.drop-overlay svg { width: 40px; margin: 0 auto 12px; color: var(--purple); }
.drop-overlay strong, .drop-overlay small { display: block; }.drop-overlay strong { color: var(--text); font-size: calc(13px + var(--font-adjust)); }.drop-overlay small { margin-top: 4px; font-size: calc(10px + var(--font-adjust)); }
.editor-statusbar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-height: 27px; padding: 0 12px; border-top: 1px solid var(--line); color: var(--muted); background: color-mix(in srgb, var(--panel-soft) 65%, transparent); font-family: var(--mono); font-size: calc(8px + var(--font-adjust)); }
.editor-statusbar span:first-child { display: flex; align-items: center; gap: 5px; margin-right: auto; }
.editor-statusbar i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

.terminal-panel { display: flex; flex-direction: column; }
.terminal-header { display: flex; align-items: center; justify-content: space-between; min-height: 37px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.terminal-header > div { display: flex; align-items: center; gap: 9px; }
.terminal-header button { padding: 5px 7px; border: 0; color: var(--muted); background: transparent; font-size: calc(8px + var(--font-adjust)); font-weight: 800; letter-spacing: .1em; }
.terminal-header button.is-active { color: var(--text); border-bottom: 2px solid var(--purple); }
.terminal-header span { color: var(--muted); font-size: calc(8px + var(--font-adjust)); }
#terminalOutput { flex: 1; margin: 0; padding: 13px 16px; overflow: auto; color: #d9e1f5; background: rgba(0,0,0,.13); font: 10.5px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; }
body.light #terminalOutput { color: #353043; }.terminal-muted { color: var(--muted); }

.coach-panel { min-width: 0; height: clamp(580px, calc(100dvh - 285px), 900px); display: flex; flex-direction: column; overflow: hidden; }
.coach-header { display: flex; flex: 0 0 auto; align-items: center; gap: 11px; min-height: 63px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.coach-avatar { position: relative; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--purple) 45%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--purple) 12%, transparent); }
.coach-avatar span:first-child { position: absolute; width: 15px; height: 15px; top: 7px; left: 7px; border: 1px solid var(--purple); border-radius: 50%; }
.coach-avatar span:last-child { position: absolute; width: 7px; height: 7px; right: 6px; bottom: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px var(--cyan); }
.coach-header h2 { margin: 3px 0 0; font-size: calc(14px + var(--font-adjust)); letter-spacing: -.02em; }
.analysis-empty { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; align-items: center; padding: 28px 20px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; text-align: center; }
.analysis-orbit { position: relative; width: 80px; height: 80px; margin-bottom: 20px; border: 1px solid var(--line-strong); border-radius: 50%; }
.analysis-orbit::before { content: ""; position: absolute; inset: 17px; border-radius: 50%; background: linear-gradient(145deg, var(--purple), #6240aa); box-shadow: 0 0 30px color-mix(in srgb, var(--purple) 40%, transparent); }
.analysis-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }.analysis-orbit i:nth-child(1) { left: 7px; top: 12px; }.analysis-orbit i:nth-child(2) { right: 4px; bottom: 22px; }.analysis-orbit i:nth-child(3) { left: 20px; bottom: 2px; background: var(--purple); }
.analysis-empty.is-pending .analysis-orbit { flex-shrink: 0; animation: spin 1.2s linear infinite; }
.analysis-empty h3 { margin: 0; font-size: calc(16px + var(--font-adjust)); }.analysis-empty > p { max-width: 290px; margin: 8px 0 28px; color: var(--muted); font-size: calc(11px + var(--font-adjust)); line-height: 1.55; }
.analysis-empty > div { display: flex; align-items: center; width: 100%; max-width: 275px; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--muted); text-align: left; font-size: calc(10px + var(--font-adjust)); }
.analysis-empty > div span { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--purple); font-size: calc(8px + var(--font-adjust)); font-weight: 800; }
.analysis-result { flex: 1 1 auto; min-height: 0; padding: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.analysis-notice { flex: 0 0 auto; margin: 0; padding: 10px 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: calc(10px + var(--font-adjust)); line-height: 1.5; text-align: center; }
.analysis-summary { display: flex; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--red) 30%, var(--line)); border-radius: 12px; background: color-mix(in srgb, var(--red) 7%, transparent); }
.analysis-type-icon { display: grid; flex: 0 0 30px; height: 30px; place-items: center; border-radius: 9px; color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); font-weight: 900; }
.analysis-summary h3 { color: var(--red); }
.analysis-result.is-clear .analysis-summary { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); background: color-mix(in srgb, var(--green) 7%, transparent); }
.analysis-result.is-clear .analysis-type-icon { background: color-mix(in srgb, var(--green) 13%, transparent); }
.analysis-result.is-clear .analysis-summary h3 { color: var(--green); }
.analysis-summary small { color: var(--purple); font-size: calc(7px + var(--font-adjust)); font-weight: 850; letter-spacing: .13em; }.analysis-summary h3 { margin: 3px 0 4px; font-size: calc(12px + var(--font-adjust)); }.analysis-summary p { margin: 0; color: var(--muted); font-size: calc(9px + var(--font-adjust)); line-height: 1.5; }
.issue-select-wrap { display: grid; gap: 5px; margin-top: 12px; color: var(--muted); font-size: calc(8px + var(--font-adjust)); font-weight: 750; text-transform: uppercase; letter-spacing: .1em; }
.analysis-summary .issue-location-status { margin-top: 8px; color: var(--purple); font-weight: 650; }
.issue-select-wrap select { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); font-size: calc(9px + var(--font-adjust)); text-transform: none; letter-spacing: 0; }
.go-to-issue { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin: 8px 0 14px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--red) 50%, transparent); border-radius: 9px; color: var(--red); background: color-mix(in srgb, var(--red) 10%, var(--panel-soft)); font-size: calc(10px + var(--font-adjust)); font-weight: 750; }
.go-to-issue:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 18%, var(--panel-soft)); }
.go-to-issue:disabled { opacity: .45; cursor: not-allowed; }
.hints-heading { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: calc(7px + var(--font-adjust)); font-weight: 850; letter-spacing: .13em; }.hints-heading em { color: var(--purple); font-style: normal; }
.hint-card { display: grid; width: 100%; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 7px 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: transparent; text-align: left; transition: border-color .2s, background .2s; }
.hint-card.is-ready:hover { border-color: color-mix(in srgb, var(--purple) 55%, transparent); background: color-mix(in srgb, var(--purple) 7%, transparent); }
.hint-card.is-revealed { border-color: color-mix(in srgb, var(--green) 30%, transparent); background: color-mix(in srgb, var(--green) 5%, transparent); }
.hint-card.is-locked { opacity: .48; }
.hint-card.is-busy { border-color: var(--purple); opacity: 1; }
.hint-card.is-busy .hint-copy::after { content: ""; display: block; height: 6px; margin-top: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--panel-soft), var(--line-strong), var(--panel-soft)); background-size: 200% 100%; animation: hint-shimmer 1.4s linear infinite; }
.hint-card.is-error { border-color: var(--red); }
.hint-card.is-error > em { color: var(--red); }
.hypothesis-box button.is-busy::before { content: ""; display: block; width: 12px; height: 12px; margin: 0 auto 3px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: hint-spin .7s linear infinite; }
@keyframes hint-shimmer { to { background-position: -200% 0; } }
.hint-card.is-busy > em { display: inline-flex; align-items: center; gap: 6px; }
.hint-card.is-busy > em::before { content: ""; width: 12px; height: 12px; border: 2px solid color-mix(in srgb, var(--purple) 30%, transparent); border-top-color: var(--purple); border-radius: 50%; animation: hint-spin .7s linear infinite; }
@keyframes hint-spin { to { transform: rotate(360deg); } }
.onboarding-overlay { position: fixed; inset: 0; z-index: 200; }
.onboarding-overlay[hidden] { display: none; }
.onboarding-spotlight { position: fixed; z-index: 0; border: 2px solid var(--purple); border-radius: 13px; box-shadow: 0 0 0 9999px rgba(7, 8, 23, .78), 0 0 0 5px rgba(169, 117, 255, .25); pointer-events: none; }
.onboarding-pointer { position: fixed; z-index: 2; width: 0; height: 0; border-right: 10px solid transparent; border-left: 10px solid transparent; pointer-events: none; }
.onboarding-pointer.is-below { border-bottom: 10px solid var(--purple); }
.onboarding-pointer.is-above { border-top: 10px solid var(--purple); }
.onboarding-card { position: fixed; z-index: 1; width: min(430px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 28px; border: 1px solid var(--purple); border-radius: 20px; color: var(--text); background: var(--panel-solid); box-shadow: var(--shadow); }
.onboarding-kicker { display: flex; justify-content: space-between; color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.onboarding-card h2 { margin: 23px 0 9px; font-size: 24px; }
.onboarding-card p { min-height: 68px; margin: 0; color: var(--muted); line-height: 1.6; }
.onboarding-dots { display: flex; gap: 7px; margin: 18px 0 24px; }
.onboarding-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.onboarding-dots i.is-active { width: 22px; border-radius: 7px; background: var(--purple); }
.onboarding-card footer, .onboarding-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onboarding-navigation { justify-content: flex-end; }
.onboarding-card footer button { padding: 10px 15px; border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; }
.onboarding-card footer button:disabled { opacity: .45; cursor: default; }
.onboarding-card footer #onboardingNext { border-color: var(--purple); color: #fff; background: var(--purple-2); }
.hint-index { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--purple); font-size: calc(9px + var(--font-adjust)); font-weight: 850; }
.hint-card.is-revealed .hint-index { color: var(--green); }.hint-card small, .hint-card strong, .hint-card p { display: block; }.hint-card small { color: var(--muted); font-size: calc(6px + var(--font-adjust)); font-weight: 850; letter-spacing: .13em; }.hint-card strong { margin: 2px 0; font-size: var(--hint-title-size); }.hint-card p { margin: 0; color: var(--muted); font-size: var(--hint-text-size); line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }.hint-card > em { color: var(--purple); font-size: calc(11px + var(--font-adjust)); font-style: normal; font-weight: 750; }
.hypothesis-box { margin: -1px 0 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.08); }
.chat-messages { display: grid; gap: 7px; max-height: 130px; margin-bottom: 8px; overflow: auto; }
.chat-message { max-width: 90%; padding: 7px 8px; border-radius: 8px; color: var(--muted); background: var(--panel-soft); font-size: var(--hint-text-size); line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }.chat-message.student { justify-self: end; color: white; background: #6842a9; }.chat-message.coach { justify-self: start; }
.hypothesis-box form > label { color: var(--muted); font-size: calc(8px + var(--font-adjust)); font-weight: 750; }.hypothesis-box form > div { display: grid; grid-template-columns: 1fr 29px; gap: 6px; margin-top: 6px; }.hypothesis-box textarea { width: 100%; min-height: 56px; padding: 8px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); font-size: var(--hint-text-size); line-height: 1.4; }.hypothesis-box form button { align-self: end; width: 29px; height: 29px; border: 0; border-radius: 8px; color: white; background: var(--purple-2); }.hypothesis-box form > small { display: block; margin-top: 5px; color: var(--muted); font-size: calc(7px + var(--font-adjust)); }

.coach-actions { display: flex; flex: 0 0 auto; flex-direction: column; gap: 8px; padding: 10px 15px; border-bottom: 1px solid var(--line); }
.coach-actions > button { width: 100%; min-width: 0; min-height: 48px; border-radius: 11px; font-size: calc(10px + var(--font-adjust)); font-weight: 750; }
.run-button { min-width: 108px; border: 1px solid color-mix(in srgb, var(--green) 33%, transparent); color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); }

.drawer-backdrop { position: fixed; inset: 0; z-index: 29; visibility: hidden; opacity: 0; background: rgba(3,4,12,.55); transition: opacity .2s, visibility .2s; }
.drawer-backdrop.is-open { visibility: visible; opacity: 1; }
.history-drawer { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: min(620px, 96vw); padding: 24px; border-left: 1px solid var(--line); background: var(--panel-solid); box-shadow: -20px 0 70px rgba(0,0,0,.35); transform: translateX(103%); transition: transform .25s ease, width .2s ease; overflow: auto; }
.history-drawer.is-open { transform: translateX(0); }.drawer-header { display: flex; align-items: center; justify-content: space-between; }.drawer-header h2 { margin: 4px 0 0; font-size: calc(22px + var(--font-adjust)); }.drawer-header button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: transparent; font-size: calc(22px + var(--font-adjust)); }
.history-drawer.is-comparing { width: min(1100px, 96vw); }
.drawer-header > div > p:last-child { margin: 5px 0 0; color: var(--muted); font-size: calc(9px + var(--font-adjust)); }
.history-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; }.history-stats div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }.history-stats strong, .history-stats small { display: block; }.history-stats strong { font-size: calc(18px + var(--font-adjust)); }.history-stats small { margin-top: 3px; color: var(--muted); font-size: calc(8px + var(--font-adjust)); }
.history-list { display: grid; gap: 8px; max-height: calc(100vh - 180px); overflow: auto; }.history-empty { padding: 35px 15px; color: var(--muted); text-align: center; font-size: calc(11px + var(--font-adjust)); }.history-item { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }.history-item header { display: flex; justify-content: space-between; gap: 10px; }.history-item strong { font-size: calc(10px + var(--font-adjust)); }.history-item time { color: var(--muted); font-size: calc(8px + var(--font-adjust)); }.history-item p { margin: 6px 0 0; color: var(--muted); font-size: calc(9px + var(--font-adjust)); line-height: 1.45; }
.saved-workspace-group { display: grid; gap: 8px; }
.saved-workspace-group + .saved-workspace-group { margin-top: 8px; }
.saved-workspace-group > h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 2px 3px; font-size: calc(10px + var(--font-adjust)); }
.saved-workspace-group > h3 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-workspace-group > h3 small { flex: 0 0 auto; color: var(--muted); font-size: calc(8px + var(--font-adjust)); font-weight: 600; }
.saved-history-file { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.saved-history-file > header { align-items: center; }
.saved-history-file button { min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.saved-history-file button strong,.saved-history-file button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-history-file button strong { font-family: var(--mono); }
.saved-history-file button small { margin-top: 4px; color: var(--muted); font-size: calc(8px + var(--font-adjust)); }
.saved-file-heading strong,.saved-file-heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-file-heading strong { font-family: var(--mono); font-size: calc(10px + var(--font-adjust)); }
.saved-file-heading small { margin-top: 3px; color: var(--muted); font-size: calc(8px + var(--font-adjust)); }
.saved-attempt-list { display: grid; gap: 5px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.saved-attempt-list button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 7px; border-radius: 7px; color: var(--muted); font-size: calc(8px + var(--font-adjust)); }
.saved-attempt-list button:hover { color: var(--text); background: color-mix(in srgb,var(--purple) 8%,transparent); }
.saved-status { padding: 4px 7px; border-radius: 999px; color: var(--green); background: color-mix(in srgb,var(--green) 10%,transparent); font-size: calc(7px + var(--font-adjust)); font-weight: 800; }
.saved-status.unsolved { color: var(--red); background: color-mix(in srgb,var(--red) 10%,transparent); }
.saved-status.passed { color: var(--cyan); background: color-mix(in srgb,var(--cyan) 10%,transparent); }
.saved-status.unverified { color: var(--red); background: color-mix(in srgb,var(--red) 9%,transparent); }
.saved-history-detail { display: grid; gap: 10px; }
.saved-readonly-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: color-mix(in srgb,var(--purple) 6%,transparent); font-size: calc(9px + var(--font-adjust)); line-height: 1.5; }
.saved-readonly-note > span:first-child { width: 25px; height: 25px; display: grid; flex: none; place-items: center; border-radius: 8px; color: var(--purple); background: color-mix(in srgb,var(--purple) 12%,transparent); }
.saved-readonly-note > span:last-child { display: grid; }
.saved-readonly-note strong { color: var(--text); }
.saved-history-detail > button { width: fit-content; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; }
.saved-analysis { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-soft); }
.saved-analysis h3 { margin: 0 0 8px; font-size: calc(12px + var(--font-adjust)); }
.saved-issue { padding: 10px; border-left: 3px solid var(--red); background: color-mix(in srgb,var(--red) 5%,transparent); }
.saved-issue + .saved-issue { margin-top: 8px; }
.saved-issue p { margin: 4px 0 0; color: var(--muted); font-size: calc(9px + var(--font-adjust)); }
.saved-hint { margin: 8px 0 0 12px; padding: 8px; border-radius: 8px; color: var(--muted); background: color-mix(in srgb,var(--purple) 8%,transparent); font-size: calc(9px + var(--font-adjust)); }
.history-version-card,.history-analysis-section { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-soft); }
.history-version-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.history-version-header h3,.history-analysis-title h3 { margin: 3px 0 0; font-size: calc(13px + var(--font-adjust)); }
.history-section-kicker { color: var(--purple); font-size: calc(7px + var(--font-adjust)); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.history-version-help { margin: 9px 0 0; color: var(--muted); font-size: calc(9px + var(--font-adjust)); line-height: 1.5; }
.history-version-selectors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 15px; }
.history-version-selectors label { display: grid; min-width: 0; gap: 6px; color: var(--text); font-size: calc(9px + var(--font-adjust)); font-weight: 750; }
.history-version-selectors select { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--panel-solid); font: inherit; font-weight: 600; cursor: pointer; }
.history-version-selectors select:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.history-load-version { display: flex; align-items: end; flex-wrap: wrap; gap: 10px 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); }
.history-load-version label { display: grid; flex: 1; min-width: 180px; gap: 6px; font-size: calc(10px + var(--font-adjust)); font-weight: 750; }
.history-load-version select { min-width: 0; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--panel-solid); }
.history-load-version button { padding: 10px 14px; border: 1px solid var(--purple); border-radius: 9px; color: #fff; background: var(--purple-2); }
.history-load-version button:disabled { opacity: .55; cursor: default; }
.history-load-version p { flex-basis: 100%; margin: 0; color: var(--muted); font-size: calc(10px + var(--font-adjust)); }
.history-analysis-title { margin-bottom: 12px; }
.history-diff-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 15px 0 10px; color: var(--muted); font-size: calc(9px + var(--font-adjust)); }
.history-diff-toolbar > div { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.history-diff-toolbar button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--panel-solid); cursor: pointer; }
.history-diff-toolbar button:disabled { cursor: default; opacity: .4; }
.history-diff-headings,.history-diff-viewer { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.history-diff-headings { border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; overflow: hidden; }
.history-diff-headings strong { padding: 9px 12px; color: var(--text); background: var(--panel-solid); font-size: calc(9px + var(--font-adjust)); }
.history-diff-headings strong + strong { border-left: 1px solid var(--line); }
.history-diff-viewer { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 0 0 10px 10px; background: var(--panel-solid); }
.history-diff-viewer > .history-diff-empty { grid-column: 1 / -1; }
.diff-column { min-width: 0; overflow-x: auto; }
.diff-column + .diff-column { border-left: 1px solid var(--line); }
.history-diff-empty { padding: 28px 16px; color: var(--muted); text-align: center; font-size: calc(10px + var(--font-adjust)); }
.diff-row { border-top: 1px solid color-mix(in srgb,var(--line) 55%,transparent); }
.diff-row:first-child { border-top: 0; }
.diff-cell { display: grid; grid-template-columns: 40px auto; width: max-content; min-width: 100%; min-height: calc((9px + var(--font-adjust)) * 1.55 + 8px); color: var(--text); font: calc(9px + var(--font-adjust))/1.55 var(--mono); }
.diff-line-number { padding: 4px 7px; color: var(--muted); background: color-mix(in srgb,var(--bg) 65%,transparent); text-align: right; user-select: none; }
.diff-cell code { display: block; min-width: 0; padding: 4px 9px; font: inherit; white-space: pre; tab-size: 4; }
.diff-changed .diff-cell-left,.diff-removed .diff-cell-left { background: color-mix(in srgb,var(--red) 15%,transparent); }
.diff-changed .diff-cell-right,.diff-added .diff-cell-right { background: color-mix(in srgb,var(--green) 14%,transparent); }
.diff-row.is-current-change { outline: 2px solid var(--purple); outline-offset: -2px; }
.history-toolbar { display: grid; grid-template-columns: minmax(0,1fr) 142px; gap: 8px; margin: 0 0 14px; }
.history-toolbar input,.history-toolbar select { width: 100%; height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--text); background: var(--panel-soft); font-size: calc(9px + var(--font-adjust)); }
.history-toolbar input:focus,.history-toolbar select:focus { border-color: color-mix(in srgb,var(--purple) 55%,var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb,var(--purple) 10%,transparent); }
.history-detail[hidden],.history-list[hidden],.history-toolbar[hidden] { display: none; }
.saved-workspace-group > h3 { color: var(--muted); font-size: calc(8px + var(--font-adjust)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.saved-workspace-group > h3 small { text-transform: none; letter-spacing: 0; }
.saved-history-file { padding: 0; overflow: hidden; }
.saved-history-file > .saved-file-row { display: grid; width: 100%; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 13px; color: var(--text); cursor: pointer; }
.saved-history-file > .saved-file-row:hover { background: color-mix(in srgb,var(--purple) 7%,transparent); }
.saved-file-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #b6dafe; background: color-mix(in srgb,#69aaee 10%,transparent); font-size: calc(8px + var(--font-adjust)); font-weight: 800; }
.saved-file-heading { min-width: 0; text-align: left; }
.saved-file-heading strong,.saved-file-heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.saved-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.history-detail-header { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; }
.history-detail-header > button { display: grid; width: 36px; height: 36px; flex: none; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: transparent; cursor: pointer; }
.history-detail-header > span:nth-child(2) { min-width: 0; flex: 1; }
.history-detail-header strong,.history-detail-header small { display: block; overflow-wrap: anywhere; }
.history-detail-header strong { font: calc(13px + var(--font-adjust)) var(--mono); }
.history-detail-header small { margin-top: 4px; color: var(--muted); font-size: calc(8px + var(--font-adjust)); }
.saved-analysis { display: block; padding: 14px; }
.saved-analysis + .saved-analysis { margin-top: 10px; }
.saved-analysis > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.saved-analysis > summary::-webkit-details-marker { display: none; }
.saved-analysis > summary strong,.saved-analysis > summary small { display: block; }
.saved-analysis > summary small { margin-top: 3px; color: var(--muted); font-size: calc(8px + var(--font-adjust)); }
.saved-issue { padding: 0; overflow: hidden; border: 1px solid color-mix(in srgb,var(--red) 25%,transparent); border-left: 1px solid color-mix(in srgb,var(--red) 25%,transparent); border-radius: 11px; background: transparent; }
.saved-issue-heading { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; background: color-mix(in srgb,var(--red) 6%,transparent); }
.saved-issue-heading > span:last-child { min-width: 0; }
.saved-issue-heading strong,.saved-issue-heading small { display: block; }
.saved-issue-heading strong { color: var(--red); }
.saved-issue-heading small { margin-top: 3px; color: var(--muted); font-size: calc(8px + var(--font-adjust)); line-height: 1.45; }
.saved-issue-index { display: grid; width: 23px; height: 23px; flex: none; place-items: center; border-radius: 7px; color: var(--red); background: color-mix(in srgb,var(--red) 11%,transparent); font-size: calc(7px + var(--font-adjust)); font-weight: 800; }
.saved-issue-hints { padding: 0 11px 10px 43px; }
.saved-hint { display: grid; gap: 3px; margin: 7px 0 0; padding: 9px; }
.saved-hint strong { color: var(--purple); }
.saved-hint span { color: var(--muted); font-size: var(--hint-text-size); line-height: 1.6; overflow-wrap: anywhere; }
.saved-no-issues { margin: 12px 0 0; padding: 18px; border: 1px solid color-mix(in srgb,var(--green) 16%,transparent); border-radius: 11px; color: var(--green); background: color-mix(in srgb,var(--green) 5%,transparent); text-align: center; }
.saved-code { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
.saved-code > strong { display: block; padding: 10px 11px; color: var(--muted); font-size: calc(8px + var(--font-adjust)); }
.saved-code pre { max-height: 260px; margin: 0; padding: 12px; overflow: auto; color: var(--muted); background: color-mix(in srgb,var(--bg) 72%,transparent); font: calc(8px + var(--font-adjust))/1.6 var(--mono); white-space: pre; }
.history-hints { display: grid; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.history-hint { display: grid; gap: 4px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.history-hint strong { color: var(--purple); }.history-hint span { color: var(--muted); font-size: var(--hint-text-size); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

.toast { position: fixed; z-index: 120; right: 25px; bottom: 24px; display: flex; align-items: center; gap: 9px; max-width: 360px; padding: 11px 15px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--panel-solid); box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s; }.toast.is-visible { opacity: 1; transform: translateY(0); }.toast > span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); font-size: calc(10px + var(--font-adjust)); }.toast.is-error > span { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }.toast p { margin: 0; color: var(--text); font-size: calc(10px + var(--font-adjust)); line-height: 1.4; }
.confirm-dialog { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 20px; background: rgba(3,4,12,.72); backdrop-filter: blur(4px); }.confirm-dialog > div { width: min(380px, 100%); padding: 26px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--panel-solid); box-shadow: var(--shadow); text-align: center; }.dialog-icon { display: grid; width: 43px; height: 43px; margin: 0 auto 13px; place-items: center; border-radius: 13px; color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, transparent); font-weight: 800; }.confirm-dialog h2 { margin: 0; font-size: calc(18px + var(--font-adjust)); }.confirm-dialog p { color: var(--muted); font-size: calc(11px + var(--font-adjust)); line-height: 1.5; }.confirm-dialog footer { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }.confirm-dialog button { min-width: 100px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; background: transparent; font-size: calc(10px + var(--font-adjust)); }.confirm-dialog #confirmAccept { color: white; border-color: transparent; background: var(--purple-2); }

@media (max-width: 1120px) {
  .ide-layout { grid-template-columns: 180px minmax(420px, 1fr); }
  .panel-resizer { display: none; }
  .coach-panel { grid-column: 1 / -1; min-height: 420px; }
  .analysis-result { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(310px, 1.2fr); column-gap: 14px; }.analysis-result .analysis-summary, .analysis-result .issue-select-wrap, .analysis-result .go-to-issue { grid-column: 1; }.analysis-result .hints-section { grid-column: 2; grid-row: 1 / span 3; }
}
@media (max-width: 760px) {
  .auth-shell { display: block; padding: 30px 18px; overflow: auto; }.auth-card { max-width: 500px; margin: auto; padding: 28px 24px; }.auth-message { display: none; }
  .topbar { grid-template-columns: 1fr auto; padding: 9px 15px; }.topbar-center { display: none; }.history-button { width: 38px; padding: 0; justify-content: center; }.history-button { font-size: 0; }.account-button strong { display: none; }
  .complete-button { width: 38px; padding: 0; justify-content: center; font-size: 0; }
  .workspace { padding: 12px 14px 24px; }.workspace-heading { align-items: flex-start; flex-direction: column; }.heading-actions { width: 100%; }.heading-actions button { flex: 1; }
  .ide-layout { display: block; }.file-panel { min-height: auto; margin-bottom: 10px; }.file-panel-empty, .local-badge { display: none; }.file-panel .file-item { margin-bottom: 8px; }
  .editor-column { height: auto; grid-template-rows: 480px 160px; }.coach-panel { margin-top: 10px; }.analysis-result { display: block; }
  .history-drawer { padding: 20px 16px; }
  .history-toolbar { grid-template-columns: 1fr; }
  .saved-history-file > .saved-file-row { grid-template-columns: 34px minmax(0,1fr); }
  .saved-history-file > .saved-file-row .saved-status { grid-column: 2; width: fit-content; }
}
@media (max-width: 500px) {
  .font-size-controls { grid-template-columns: 30px 30px; }
  .font-size-value { display: none; }
  .brand small { display: none; }.topbar .brand > span:last-child { display: none; }.workspace-heading h1 { font-size: calc(28px + var(--font-adjust)); }.heading-actions { flex-direction: column; }
  .editor-tools button { font-size: 0; }.editor-tools button svg { width: 17px; }.editor-wrap { --editor-gutter-width: 39px; }.line-numbers, #codeEditor { font-size: calc(11.5px + var(--font-adjust)); }
  .toast { right: 12px; bottom: 12px; left: 12px; }
}

@media (max-width: 650px) {
  .history-version-selectors { grid-template-columns: 1fr; }
  .history-diff-toolbar { align-items: flex-start; flex-direction: column; }
  .history-diff-headings { font-size: 10px; }
  .history-diff-viewer { border-radius: 10px; }
  .diff-cell { grid-template-columns: 28px auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Apply after font shorthand rules so Python operators remain visibly separate. */
#codeEditor, code, pre { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0, "dlig" 0; }