:root {
  color-scheme: dark;
  --ink: #25283a;
  --muted: #8c91a1;
  --line: #eceef3;
  --purple: #7162e8;
  --purple-dark: #5e50d1;
  --sidebar: #14151b;
  --surface: #191a21;
  --surface-raised: #20212a;
  --canvas: #101116;
  --border: #2b2c36;
  --text: #e7e7f0;
  --text-muted: #9698a8;
  --mono: "DM Mono", monospace;
  --sans: "DM Sans", sans-serif;
  --display: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 340px; min-height: 100vh; color: var(--text); background: var(--canvas); font-family: var(--sans); font-size: 13px; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 244px; flex: 0 0 244px; display: flex; flex-direction: column; padding: 27px 15px 14px; background: var(--sidebar); border-right: 1px solid #eceef3; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 43px 9px; color: #292a3c; text-decoration: none; font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -1.1px; }
.brand-period { color: var(--purple); }
.brand-mark { height: 23px; width: 23px; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: 7px; background: var(--purple); transform: rotate(-5deg); }
.brand-mark span { width: 3px; border-radius: 3px; background: white; }
.brand-mark span:nth-child(1) { height: 8px; }.brand-mark span:nth-child(2) { height: 14px; }.brand-mark span:nth-child(3) { height: 10px; }
.sidebar-section-heading { padding: 0 8px 11px; display: flex; align-items: center; justify-content: space-between; color: #a5a9b7; font-size: 9px; font-weight: 700; letter-spacing: 1.05px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; border: 0; color: #999eac; background: transparent; cursor: pointer; }
.add-question-button.icon-button { width: 22px; height: 22px; border: 1px solid #e7e8ee; border-radius: 7px; color: #6f7280; font-size: 16px; }
.nav-item { display: flex; align-items: center; width: 100%; gap: 11px; border: 0; padding: 10px 10px; border-radius: 7px; color: #656a7b; background: transparent; text-align: left; cursor: pointer; font-size: 12px; }
.nav-item.active { color: #5e51d3; background: #f0efff; font-weight: 600; }
.nav-icon { width: 16px; text-align: center; font-size: 15px; }
.nav-count { margin-left: auto; color: #969aaa; font-size: 11px; }
.sidebar-label { margin: 31px 8px 10px; color: #a5a9b7; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.challenge-list { display: grid; gap: 4px; }
.challenge-item { display: flex; align-items: flex-start; gap: 9px; width: 100%; border: 0; border-radius: 7px; padding: 9px 8px; color: #717687; background: transparent; text-align: left; cursor: pointer; font-size: 11px; line-height: 1.45; transition: background .16s, color .16s; }
.challenge-item:hover { background: #f2f2f8; }.challenge-item.selected { color: #383a4c; background: #f3f2fb; font-weight: 600; }
.challenge-bullet { width: 7px; height: 7px; margin-top: 4px; flex: 0 0 7px; border: 1.5px solid #aaa4f3; border-radius: 50%; }
.challenge-item.selected .challenge-bullet { border-color: var(--purple); background: var(--purple); }
.sidebar-bottom { margin-top: auto; }
.sidebar-tip { margin: 16px 0 17px; padding: 14px 12px 12px; border: 1px solid #eeedf8; border-radius: 9px; background: linear-gradient(135deg,#f7f6ff,#fcfbff); }
.tip-icon { margin-bottom: 7px; color: var(--purple); font-size: 17px; }.sidebar-tip strong { font-size: 11px; }
.sidebar-tip p { margin: 6px 0 11px; color: #858a9a; font-size: 10px; line-height: 1.55; }
.text-button { display: flex; align-items: center; gap: 7px; border: 0; padding: 0; color: #6356d8; background: transparent; cursor: pointer; font-size: 10px; font-weight: 600; }
.profile { display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--line); padding: 13px 3px 0; }
.avatar,.mini-avatar { display: grid; place-items: center; border-radius: 50%; color: white; background: #edaa7f; font-family: var(--display); font-weight: 700; }
.avatar { width: 30px; height: 30px; font-size: 12px; }.profile-copy { display: grid; gap: 3px; }.profile-copy strong { font-size: 10px; }.profile-copy span { color: #9b9eab; font-size: 9px; }.more-button { margin-left: auto; font-size: 16px; letter-spacing: 1px; }
.main-area { min-width: 0; flex: 1; }
.topbar { height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 33px; border-bottom: 1px solid #eaecf2; background: rgba(255,255,255,.7); }
.breadcrumb { display: flex; align-items: center; gap: 11px; color: #a1a5b1; font-size: 11px; }.breadcrumb strong { color: #44475a; font-weight: 600; }.crumb-slash { color: #d1d3dc; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }.avatar-stack { display: flex; align-items: center; }.mini-avatar { width: 24px; height: 24px; border: 2px solid white; font-size: 9px; }
.invite-button { height: 29px; margin-left: 7px; padding: 0 10px; border: 1px solid #e7e8ef; border-radius: 6px; color: #55596b; background: white; cursor: pointer; font-size: 10px; font-weight: 600; box-shadow: 0 1px 2px #20204408; }.invite-button span { color: #7162e8; font-size: 13px; margin-right: 4px; }
.topbar-divider { height: 19px; border-left: 1px solid #eaebf0; }.help-button { width: 22px; height: 22px; border: 1px solid #dcdfe8; border-radius: 50%; font-size: 11px; }
.workspace-content { height: calc(100vh - 96px); min-height: 530px; display: grid; grid-template-columns: minmax(310px, 40.5%) minmax(460px, 59.5%); padding: 20px 22px 22px; gap: 17px; }
.problem-panel,.editor-panel { min-width: 0; border: 1px solid #eaebf1; border-radius: 10px; background: #fff; box-shadow: 0 2px 9px #29294706; overflow: hidden; }
.problem-panel { display: flex; flex-direction: column; }.problem-scroll { min-height: 0; flex: 1; overflow-y: auto; padding: 26px 26px 20px; }
.problem-meta { display: flex; align-items: center; justify-content: space-between; }.eyebrow,.modal-kicker { color: #a0a3b0; font-size: 9px; letter-spacing: 1px; font-weight: 700; }.live-dot { display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: #8c80f3; }
.problem-menu { font-size: 17px; letter-spacing: 1px; }.problem-title-row { margin-top: 16px; }
h1 { margin: 0; color: #25273a; font-family: var(--display); font-size: clamp(22px,2.3vw,29px); line-height: 1.25; letter-spacing: -1.15px; font-weight: 800; }
.problem-tags { display: flex; gap: 7px; margin-top: 12px; }.tag { padding: 4px 8px; border: 1px solid #eeeef3; border-radius: 5px; color: #797e8e; background: #fafafd; font-size: 9px; }.tag.easy { color: #4f9e77; border-color: #e2f2e8; background: #f2fbf5; }.tag.medium { color: #c1843e; border-color: #f5e9d8; background: #fffbf4; }.tag.hard { color: #cf6767; border-color: #f5e0e0; background: #fff7f7; }
.problem-description { margin: 16px 0 20px; color: #828797; font-size: 12px; line-height: 1.7; }.section-rule { height: 1px; margin-bottom: 20px; background: #f0f1f5; }
.description-section { margin-bottom: 23px; }.description-section h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; color: #44475a; font-family: var(--display); font-size: 12px; font-weight: 700; }.section-symbol { color: #8e83e9; font-size: 14px; }
.rich-copy { color: #777c8c; font-size: 11px; line-height: 1.8; white-space: pre-line; }.rich-copy strong { color: #525667; font-weight: 600; }
.example-card { margin-bottom: 8px; padding: 11px 12px; border: 1px solid #f0f0f4; border-radius: 7px; background: #fbfbfd; }.example-title { margin-bottom: 7px; color: #999daa; font-size: 9px; font-weight: 600; }.example-line { display: flex; gap: 10px; margin-top: 4px; color: #838898; font-size: 10px; }.example-line code { color: #53576a; font-family: var(--mono); font-size: 9px; overflow-wrap: anywhere; }.example-line .line-key { width: 45px; flex: 0 0 45px; color: #a1a5b1; }
.constraints-section ul { margin: 0; padding-left: 15px; color: #828797; font-size: 10px; line-height: 1.9; }.constraints-section li::marker { color: #b2aaf1; }
.problem-footer { height: 42px; flex: 0 0 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-top: 1px solid #f0f1f5; color: #a1a5b2; font-size: 9px; }.keyboard-hint { display: flex; align-items: center; gap: 4px; }.keyboard-hint kbd,.run-button kbd { padding: 2px 4px; border: 1px solid #ececf2; border-radius: 4px; color: #9397a5; background: #fafafd; font: 9px var(--sans); }.saved-indicator { display: flex; align-items: center; gap: 5px; }.saved-indicator span { width: 5px; height: 5px; border-radius: 50%; background: #6ec496; }
.editor-panel { display: flex; flex-direction: column; }.editor-topbar { height: 45px; flex: 0 0 45px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #eff0f5; }.file-tab { align-self: stretch; display: flex; align-items: center; gap: 7px; border-bottom: 2px solid var(--purple); color: #55596b; font-size: 10px; }.js-badge { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 3px; color: #806d19; background: #f5de65; font-size: 8px; font-weight: 700; }.unsaved-dot { display: none; width: 5px; height: 5px; border-radius: 50%; background: #f2a64b; }.unsaved-dot.visible { display: inline-block; }
.editor-tools { display: flex; align-items: center; gap: 11px; }.editor-tool { border: 0; color: #898d9a; background: transparent; cursor: pointer; font-size: 11px; }.editor-tool span { margin-left: 3px; font-size: 10px; }.tool-divider { height: 17px; border-left: 1px solid #eceef2; }.language-select-wrap { position: relative; display: flex; align-items: center; }.language-select-wrap select { appearance: none; width: 92px; border: 0; outline: 0; color: #686c7c; background: transparent; cursor: pointer; font-size: 10px; }.select-caret { margin-left: -13px; color: #a3a6b2; pointer-events: none; }
.editor-workspace { position: relative; min-height: 190px; flex: 1; display: flex; padding: 17px 13px 17px 0; background: #fdfdff; overflow: auto; }.line-numbers { width: 46px; flex: 0 0 46px; padding: 0 13px 0 0; color: #c0c2cc; text-align: right; white-space: pre; user-select: none; font: 11px/21px var(--mono); }.editor-workspace textarea { min-width: 0; min-height: 100%; flex: 1; resize: none; border: 0; outline: 0; padding: 0; color: #4c5062; background: transparent; tab-size: 2; white-space: pre; font: 11px/21px var(--mono); caret-color: var(--purple); }.editor-workspace textarea::selection { background: #e8e5ff; }
.editor-statusbar { height: 25px; flex: 0 0 25px; display: flex; align-items: center; gap: 15px; padding: 0 12px; border-top: 1px solid #f0f1f5; color: #a1a5b2; background: #fbfbfd; font-size: 9px; }.status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #e9ca53; }.editor-status-right { margin-left: auto; }.editor-status-right b { color: #777b89; font-weight: 500; }
.results-panel { height: 43%; min-height: 202px; flex: 0 0 43%; display: flex; flex-direction: column; border-top: 1px solid #e9eaf0; background: #fff; }.results-header { height: 48px; flex: 0 0 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; }.results-title { display: flex; align-items: center; gap: 8px; }.results-title strong { color: #494c5e; font-size: 11px; }.results-icon { color: #9990e9; font-size: 15px; }.case-count { padding: 3px 6px; border-radius: 4px; color: #9296a3; background: #f5f5f9; font-size: 9px; }.run-button { height: 30px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 6px; padding: 0 9px; color: #fff; background: var(--purple); cursor: pointer; font-size: 10px; font-weight: 600; box-shadow: 0 2px 4px #7162e829; transition: background .15s, transform .15s; }.run-button:hover { background: var(--purple-dark); transform: translateY(-1px); }.run-button:disabled { opacity: .7; cursor: wait; }.play-icon { font-size: 8px; }.run-button kbd { margin-left: 2px; border-color: #ffffff40; color: #eeeaff; background: #ffffff1c; font-size: 8px; }
.results-content { min-height: 0; flex: 1; padding: 0 15px; overflow-y: auto; }.empty-results { height: 100%; min-height: 88px; display: flex; align-items: center; justify-content: center; gap: 12px; }.empty-check { display: grid; place-items: center; width: 30px; height: 30px; border: 1px dashed #d6d3f2; border-radius: 50%; color: #958be8; background: #faf9ff; font-size: 14px; }.empty-results strong { color: #5a5d6e; font-size: 10px; }.empty-results p { margin: 4px 0 0; color: #a0a3b0; font-size: 9px; }
.result-case { margin-bottom: 9px; border: 1px solid #edeef3; border-radius: 7px; overflow: hidden; }.result-case-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; color: #777b8a; background: #fbfbfd; font-size: 9px; }.result-case-head strong { color: #55596a; font-size: 10px; font-weight: 600; }.result-case-head .pass-label { color: #44a374; }.result-case-head .fail-label { color: #d56d6d; }.result-case-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px 10px; }.result-value { min-width: 0; }.result-value span { display: block; margin-bottom: 4px; color: #a0a3b0; font-size: 8px; text-transform: uppercase; letter-spacing: .4px; }.result-value code { display: block; color: #5c6070; font: 9px/1.5 var(--mono); overflow-wrap: anywhere; white-space: pre-wrap; }.case-error { padding: 0 10px 8px; color: #cb6969; font-size: 9px; line-height: 1.5; }.run-error { margin: 10px 0; padding: 10px; border: 1px solid #f5dddd; border-radius: 6px; color: #ba5555; background: #fff9f9; font: 10px/1.5 var(--mono); white-space: pre-wrap; }
.results-footer { height: 35px; flex: 0 0 35px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-top: 1px solid #f0f1f5; color: #a0a3b0; font-size: 9px; }.add-case-button { border: 0; padding: 5px 0; color: #777b8a; background: transparent; cursor: pointer; font-size: 9px; }.add-case-button:hover { color: var(--purple); }.add-case-button span { color: #8479e7; font-size: 12px; }
.toast { position: fixed; z-index: 10; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 32px)); padding: 11px 15px; border: 1px solid #e8e7f4; border-radius: 8px; color: #4d5061; background: white; box-shadow: 0 8px 28px #2828471c; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; font-size: 11px; }.toast.visible { opacity: 1; transform: translateY(0); }
.modal { width: min(540px, calc(100vw - 30px)); max-height: calc(100vh - 30px); padding: 26px; border: 1px solid #e9e9f0; border-radius: 12px; color: var(--ink); background: white; box-shadow: 0 24px 80px #20203930; overflow-y: auto; }.modal::backdrop { background: #22223663; backdrop-filter: blur(2px); }.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }.modal-heading h2 { margin: 7px 0 4px; font-family: var(--display); font-size: 21px; letter-spacing: -.6px; }.modal-heading p { margin: 0; color: #898d9b; font-size: 11px; line-height: 1.6; }.modal-close { width: 27px; height: 27px; border: 1px solid #ececf2; border-radius: 7px; color: #868a98; background: white; cursor: pointer; font-size: 19px; line-height: 1; }.form-field { display: grid; gap: 7px; margin-bottom: 15px; color: #55596a; font-size: 10px; font-weight: 600; }.form-field small { margin-left: 5px; color: #a0a3b0; font-size: 9px; font-weight: 400; }.form-field input,.form-field textarea,.form-field select { width: 100%; border: 1px solid #e7e8ef; border-radius: 6px; padding: 9px 10px; outline: 0; color: #44485a; background: #fff; font-size: 11px; font-weight: 400; }.form-field input:focus,.form-field textarea:focus,.form-field select:focus { border-color: #a9a1f1; box-shadow: 0 0 0 3px #7769eb15; }.form-field textarea { resize: vertical; line-height: 1.55; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.test-case-fields { display: grid; gap: 9px; }.test-case-input { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 9px; border: 1px solid #eeeeF3; border-radius: 7px; background: #fcfcfe; }.test-case-input label { display: grid; gap: 5px; color: #a0a3b0; font-size: 8px; font-weight: 500; }.test-case-input textarea { min-height: 40px; padding: 7px; font: 9px/1.5 var(--mono); }.subtle-button { justify-self: start; margin-top: 9px; border: 0; padding: 0; color: #7568dd; background: transparent; cursor: pointer; font-size: 10px; }.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 21px; padding-top: 15px; border-top: 1px solid #f0f1f5; }.cancel-button,.primary-button { height: 34px; border: 1px solid #e7e8ef; border-radius: 6px; padding: 0 12px; cursor: pointer; font-size: 10px; font-weight: 600; }.cancel-button { color: #737787; background: white; }.primary-button { border-color: var(--purple); color: white; background: var(--purple); }.primary-button span { margin-left: 7px; }.compact-modal { width: min(430px,calc(100vw - 30px)); }
.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; }
.app-shell[hidden] { display: none; }
.login-screen { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 460px) minmax(280px, 1fr); align-items: center; justify-content: center; gap: clamp(30px, 8vw, 110px); padding: 48px max(7vw, 24px); overflow: hidden; background: radial-gradient(ellipse at 82% 48%, #f0efff 0, #f7f7fc 34%, #fbfbfd 73%); }
.login-brand > span:last-child { display: inline; }
.login-card { position: relative; z-index: 1; width: 100%; max-width: 410px; justify-self: end; padding: 38px; border: 1px solid #ececf3; border-radius: 15px; background: #fff; box-shadow: 0 16px 60px #302a6510; }
.login-brand { margin: 0 0 46px; }
.login-heading .eyebrow { display: block; margin-bottom: 13px; }
.login-heading h1 { font-size: 29px; letter-spacing: -1.2px; }
.login-heading p { margin: 8px 0 27px; color: #898d9b; font-size: 12px; line-height: 1.65; }
.login-form { display: grid; gap: 15px; }
.login-field { display: grid; gap: 7px; color: #55596a; font-size: 10px; font-weight: 600; }
.login-field input { height: 41px; width: 100%; border: 1px solid #e7e8ef; border-radius: 6px; padding: 0 11px; outline: 0; color: #44485a; background: #fff; font-size: 11px; font-weight: 400; }
.login-field input:focus { border-color: #a9a1f1; box-shadow: 0 0 0 3px #7769eb15; }
.login-field input::placeholder { color: #b2b4bf; }
.login-notice { margin: -2px 0 1px; color: #999daa; font-size: 9px; line-height: 1.6; }
.login-error { margin: 0; color: #bf5656; font-size: 10px; line-height: 1.5; }
.login-submit { height: 40px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 6px; color: #fff; background: var(--purple); cursor: pointer; font-size: 11px; font-weight: 600; box-shadow: 0 3px 8px #7162e82a; transition: background .15s, transform .15s; }
.login-submit:hover { background: var(--purple-dark); transform: translateY(-1px); }
.login-submit span { font-size: 14px; }
.copyright { margin-top: 25px; padding-top: 16px; border-top: 1px solid #f0f1f5; color: #a1a5b2; text-align: center; font-size: 9px; }
.login-decoration { position: relative; width: min(100%, 510px); height: 330px; justify-self: start; display: grid; place-items: center; }
.decoration-orbit { position: absolute; border: 1px solid #e3e1f5; border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 420px; height: 210px; }.orbit-two { width: 340px; height: 280px; transform: rotate(48deg); }
.decoration-card { position: relative; z-index: 1; width: 310px; display: grid; gap: 12px; padding: 25px; border: 1px solid #e9e8f3; border-radius: 10px; color: #626579; background: #fff; box-shadow: 0 18px 55px #38316814; font: 11px var(--mono); transform: rotate(-3deg); }
.decoration-dot { position: absolute; top: 13px; right: 14px; width: 6px; height: 6px; border-radius: 50%; background: #72c595; }.decoration-indent { padding-left: 15px; color: #8278d8; }.decoration-check { padding-top: 12px; border-top: 1px solid #f0f1f5; color: #58a77c; font: 10px var(--sans); }
.decoration-spark { position: absolute; color: #9187ed; }.spark-one { top: 38px; right: 74px; font-size: 24px; }.spark-two { bottom: 40px; left: 53px; color: #b8a8f2; font-size: 20px; }
.site-footer { height: 30px; display: flex; align-items: center; justify-content: center; color: #a1a5b2; font-size: 9px; }
@media (max-width: 1000px) { .login-screen { grid-template-columns: minmax(300px, 410px) minmax(200px, 1fr); gap: 35px; padding: 35px; }.login-card { padding: 30px; }.login-decoration { transform: scale(.84); transform-origin: left center; } }
@media (max-width: 740px) { .login-screen { min-height: 100vh; grid-template-columns: minmax(0, 410px); justify-content: center; padding: 24px 17px; }.login-card { justify-self: center; padding: 27px 24px; }.login-brand { margin-bottom: 35px; }.login-decoration { display: none; }.site-footer { height: 32px; }.workspace-content { height: calc(100vh - 90px); min-height: calc(100vh - 90px); } }
@media (max-width: 420px) { .login-card { padding: 25px 20px; }.login-heading h1 { font-size: 26px; } }
@media (max-width: 1050px) { .sidebar { width: 215px; flex-basis: 215px; }.workspace-content { grid-template-columns: minmax(280px, 40%) minmax(420px, 60%); padding: 14px; gap: 12px; }.problem-scroll { padding: 22px 19px; }.topbar { padding: 0 20px; } }
@media (max-width: 1000px) { .sidebar { width: 62px; flex-basis: 62px; padding: 22px 9px 12px; }.brand { justify-content: center; margin: 0 0 39px; }.brand > span:last-child,.sidebar-section-heading > span,.sidebar-section-heading button,.nav-item:not(.active) span:not(.nav-icon),.nav-item > span:not(.nav-icon):not(.nav-count),.nav-count,.sidebar-label,.challenge-list,.sidebar-bottom { display: none; }.nav-item { justify-content: center; padding: 11px 0; }.nav-icon { font-size: 17px; }.workspace-content { grid-template-columns: minmax(260px, 41fr) minmax(370px, 59fr); padding: 12px; gap: 10px; }.topbar { height: 58px; }.workspace-content { height: calc(100vh - 88px); min-height: 530px; }.problem-scroll { padding: 18px 15px; } }
@media (max-width: 740px) { .sidebar { display: none; }.topbar { padding: 0 15px; }.breadcrumb strong { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.mini-avatar { display: none; }.workspace-content { height: auto; min-height: calc(100vh - 58px); display: flex; flex-direction: column; padding: 10px; }.problem-panel { min-height: 470px; max-height: 58vh; }.editor-panel { min-height: 580px; }.editor-workspace { min-height: 235px; }.results-panel { height: 250px; flex-basis: 250px; }.problem-scroll { padding: 19px 18px; }.problem-description { margin-bottom: 14px; } }
@media (max-width: 420px) { .breadcrumb { gap: 7px; font-size: 10px; }.help-button { display: none; }.editor-tool span { display: none; }.editor-tools { gap: 8px; }.editor-topbar { padding: 0 10px; }.run-button kbd { display: none; }.results-header { padding: 0 10px; }.results-content { padding: 0 10px; }.result-case-body { gap: 5px; padding: 8px; }.modal { padding: 19px; }.form-row { gap: 8px; } }
.workspace-action { height: 29px; display: flex; align-items: center; gap: 6px; border: 1px solid #e7e8ef; border-radius: 6px; padding: 0 8px; color: #626678; background: #fff; cursor: pointer; font-size: 10px; font-weight: 600; white-space: nowrap; }
.workspace-action:hover { border-color: #d8d4f5; color: #5e51d3; background: #fbfaff; }
.workspace-action .action-icon { color: #8379df; font-size: 13px; }
.workspace-action b { padding: 2px 4px; border-radius: 4px; color: #8a8e9d; background: #f5f5f9; font-size: 8px; font-weight: 600; }
.topbar-actions { gap: 8px; }
.result-actions { display: flex; align-items: center; gap: 7px; }
.submit-button { height: 30px; display: flex; align-items: center; gap: 5px; border: 1px solid #e4e0f9; border-radius: 6px; padding: 0 9px; color: #6155c6; background: #f8f7ff; cursor: pointer; font-size: 10px; font-weight: 600; white-space: nowrap; }
.submit-button:hover { border-color: #c9c3f1; background: #f1efff; }
.submit-button:disabled { opacity: .65; cursor: wait; }
.tracker-dialog { width: min(560px, calc(100vw - 30px)); }
.progress-overview { display: flex; align-items: center; gap: 16px; padding: 15px; border: 1px solid #eeedf7; border-radius: 9px; background: linear-gradient(120deg,#faf9ff,#fff); }
.progress-ring { width: 70px; height: 70px; flex: 0 0 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: conic-gradient(var(--purple) var(--progress-value, 0%), #eeedf5 0); position: relative; }
.progress-ring::before { position: absolute; inset: 5px; border-radius: 50%; background: #fff; content: ""; }
.progress-ring strong,.progress-ring span { z-index: 1; }.progress-ring strong { color: #49445f; font-family: var(--display); font-size: 15px; }.progress-ring span { color: #a0a3b0; font-size: 8px; }
.progress-overview-copy strong { color: #494c5e; font-size: 12px; }.progress-overview-copy p { margin: 5px 0 0; color: #9296a3; font-size: 10px; line-height: 1.5; }
.progress-track { height: 5px; margin: 12px 0 15px; border-radius: 5px; background: #efeff5; overflow: hidden; }.progress-track span { height: 100%; display: block; border-radius: inherit; background: var(--purple); transition: width .2s; }
.tracker-list,.submission-list { display: grid; gap: 8px; max-height: min(40vh, 350px); overflow-y: auto; }
.tracker-row { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #edeef3; border-radius: 7px; padding: 9px 11px; background: #fff; text-align: left; cursor: pointer; }
.tracker-row:hover { border-color: #d9d5f6; background: #fcfbff; }.tracker-row-copy { display: grid; gap: 4px; min-width: 0; }.tracker-row-copy strong { color: #4e5263; font-size: 10px; }.tracker-row-copy small { color: #9b9eab; font-size: 9px; }
.tracker-status { flex: 0 0 auto; border-radius: 5px; padding: 4px 7px; font-size: 9px; font-weight: 600; white-space: nowrap; }.tracker-status.solved { color: #48976f; background: #eff9f2; }.tracker-status.attempted { color: #c17d3c; background: #fff7ed; }.tracker-status.in-progress { color: #6357ce; background: #f2f0ff; }.tracker-status.not-started { color: #8d91a0; background: #f5f5f8; }
.local-data-note { margin: 15px 0 0; color: #a0a3b0; font-size: 9px; line-height: 1.5; }
.submission-entry { border: 1px solid #edeef3; border-radius: 7px; padding: 11px; }.submission-entry-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.submission-entry-header > strong { color: #4e5263; font-size: 10px; }.submission-entry > p { margin: 6px 0 9px; color: #9b9eab; font-size: 9px; }
.submission-details { border-top: 1px solid #f0f1f5; padding-top: 8px; }.submission-details summary { color: #685dd0; cursor: pointer; font-size: 9px; font-weight: 600; }
.submission-code { max-height: 220px; margin: 9px 0; border-radius: 6px; padding: 10px; color: #55596b; background: #f8f8fb; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 9px/1.6 var(--mono); }
.submission-outcomes { display: grid; gap: 6px; }.submission-case { border: 1px solid #f0f1f5; border-radius: 5px; padding: 7px; }.submission-case strong { font-size: 9px; }.submission-case p { margin: 4px 0 0; color: #777b8a; overflow-wrap: anywhere; font: 9px/1.5 var(--mono); }.submission-case .pass-label { color: #44a374; }.submission-case .fail-label { color: #d56d6d; }
.history-empty { padding: 28px 15px; border: 1px dashed #e7e7f0; border-radius: 8px; text-align: center; }.history-empty strong { color: #595d6e; font-size: 11px; }.history-empty p { max-width: 300px; margin: 7px auto 0; color: #999daa; font-size: 10px; line-height: 1.55; }
.submission-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.download-submission { border: 1px solid #e7e5f4; border-radius: 5px; padding: 4px 7px; color: #655bc1; background: #faf9ff; cursor: pointer; font-size: 8px; font-weight: 600; white-space: nowrap; }
.download-submission:hover { border-color: #d2cef0; background: #f2f0ff; }
@media (max-width: 420px) { .submission-entry-header { align-items: flex-start; flex-direction: column; }.submission-header-actions { width: 100%; justify-content: space-between; } }
:root {
  color-scheme: dark;
  --ink: #ececf4;
  --muted: #989aaa;
  --line: #2b2c36;
  --purple: #8c7cf6;
  --purple-dark: #7768ed;
  --sidebar: #14151b;
  --surface: #191a21;
  --surface-raised: #20212a;
  --canvas: #101116;
  --border: #2b2c36;
  --text: #e7e7f0;
  --text-muted: #9698a8;
}
body[data-theme="light"] {
  color-scheme: light;
  --ink: #25283a;
  --muted: #8c91a1;
  --line: #eceef3;
  --purple: #7162e8;
  --purple-dark: #5e50d1;
  --sidebar: #fbfbfd;
  --surface: #fff;
  --surface-raised: #fbfbfd;
  --canvas: #f5f6fa;
  --border: #eaebf1;
  --text: #25283a;
  --text-muted: #8c91a1;
}
body[data-theme="dark"] { background: var(--canvas); color: var(--text); }
body[data-theme="dark"] .login-screen { background: radial-gradient(ellipse at 77% 47%, #211b43 0, #15151e 34%, #101116 74%); }
body[data-theme="dark"] .login-card,
body[data-theme="dark"] .decoration-card { border-color: #30313e; color: #e7e7f0; background: #191a22; box-shadow: 0 20px 70px #0005; }
body[data-theme="dark"] .login-heading h1,
body[data-theme="dark"] h1 { color: #f1f0f8; }
body[data-theme="dark"] .login-heading p,
body[data-theme="dark"] .login-notice,
body[data-theme="dark"] .copyright { color: #9a9cac; }
body[data-theme="dark"] .login-field { color: #c3c4cf; }
body[data-theme="dark"] .login-field input { border-color: #343541; color: #e6e6ee; background: #121319; }
body[data-theme="dark"] .login-field input::placeholder { color: #6e7080; }
body[data-theme="dark"] .login-code-window { border-color: #30313e; background: #14151b; box-shadow: 0 15px 48px #0003; }
body[data-theme="dark"] .login-code-top,
body[data-theme="dark"] .login-code-status { border-color: #2b2c36; color: #8d90a1; }
body[data-theme="dark"] .login-code-window pre { color: #dedee8; }
body[data-theme="dark"] .decoration-orbit { border-color: #353149; }
body[data-theme="dark"] .decoration-card { color: #d5d5e2; }
body[data-theme="dark"] .decoration-check { border-color: #32333e; }
body[data-theme="dark"] .brand { color: #f1f0f8; }
body[data-theme="dark"] .sidebar { border-color: #282932; background: #14151b; }
body[data-theme="dark"] .nav-item { color: #a3a5b4; }
body[data-theme="dark"] .nav-item.active,
body[data-theme="dark"] .challenge-item.selected { color: #d2ccff; background: #28243e; }
body[data-theme="dark"] .challenge-item { color: #a2a4b3; }
body[data-theme="dark"] .challenge-item:hover { background: #20212a; }
body[data-theme="dark"] .sidebar-tip { border-color: #302c45; background: linear-gradient(135deg,#201d31,#191a22); }
body[data-theme="dark"] .sidebar-tip p,
body[data-theme="dark"] .profile-copy span { color: #9698a8; }
body[data-theme="dark"] .profile { border-color: #2b2c36; }
body[data-theme="dark"] .topbar { border-color: #292a34; background: #14151be8; }
body[data-theme="dark"] .breadcrumb strong,
body[data-theme="dark"] .description-section h2,
body[data-theme="dark"] .results-title strong { color: #dfe0e9; }
body[data-theme="dark"] .problem-panel,
body[data-theme="dark"] .editor-panel { border-color: #2c2d37; background: #191a21; box-shadow: 0 2px 12px #0002; }
body[data-theme="dark"] .problem-title-row h1 { color: #f1f0f8; }
body[data-theme="dark"] .problem-description,
body[data-theme="dark"] .rich-copy,
body[data-theme="dark"] .constraints-section ul { color: #a7a9b8; }
body[data-theme="dark"] .rich-copy strong { color: #d6d6e0; }
body[data-theme="dark"] .section-rule,
body[data-theme="dark"] .problem-footer,
body[data-theme="dark"] .editor-topbar,
body[data-theme="dark"] .editor-statusbar,
body[data-theme="dark"] .results-panel,
body[data-theme="dark"] .results-footer { border-color: #2c2d37; }
body[data-theme="dark"] .problem-footer,
body[data-theme="dark"] .editor-statusbar,
body[data-theme="dark"] .results-footer { color: #9294a4; }
body[data-theme="dark"] .tag { border-color: #353640; color: #afb1bf; background: #22232b; }
body[data-theme="dark"] .tag.easy { border-color: #294638; color: #8bd4aa; background: #1a2a23; }
body[data-theme="dark"] .tag.medium { border-color: #51402d; color: #e4b574; background: #2b241b; }
body[data-theme="dark"] .tag.hard { border-color: #523333; color: #e79a9a; background: #2b1e20; }
body[data-theme="dark"] .example-card,
body[data-theme="dark"] .editor-workspace { border-color: #2d2e38; background: #15161c; }
body[data-theme="dark"] .example-title,
body[data-theme="dark"] .example-line { color: #a1a3b2; }
body[data-theme="dark"] .example-line code { color: #d2d3de; }
body[data-theme="dark"] .editor-workspace textarea { color: #d9d9e4; }
body[data-theme="dark"] .file-tab { color: #d1d2dd; }
body[data-theme="dark"] .editor-tool,
body[data-theme="dark"] .language-select-wrap select { color: #a9abba; }
body[data-theme="dark"] .language-select-wrap select option { color: #ececf4; background: #191a21; }
body[data-theme="dark"] .editor-statusbar { background: #17181f; }
body[data-theme="dark"] .case-count { color: #a6a7b5; background: #252630; }
body[data-theme="dark"] .empty-results strong,
body[data-theme="dark"] .result-case-head strong { color: #dadbe5; }
body[data-theme="dark"] .empty-results p,
body[data-theme="dark"] .result-case-head { color: #999baa; }
body[data-theme="dark"] .result-case { border-color: #30313b; }
body[data-theme="dark"] .result-case-head { background: #20212a; }
body[data-theme="dark"] .result-value code { color: #d0d1dc; }
body[data-theme="dark"] .result-value span { color: #9799a9; }
body[data-theme="dark"] .add-case-button { color: #b0b1bf; }
body[data-theme="dark"] .workspace-action,
body[data-theme="dark"] .invite-button { border-color: #353640; color: #c5c6d0; background: #1c1d25; }
body[data-theme="dark"] .workspace-action b { color: #b3b4c0; background: #2a2b35; }
body[data-theme="dark"] .submit-button { border-color: #403b61; color: #c4bbff; background: #262239; }
body[data-theme="dark"] .tracker-dialog,
body[data-theme="dark"] .modal { border-color: #343540; color: #e3e3ec; background: #191a21; }
body[data-theme="dark"] .modal-heading h2 { color: #f0eff7; }
body[data-theme="dark"] .modal-heading p,
body[data-theme="dark"] .form-field small { color: #9a9cac; }
body[data-theme="dark"] .modal-close,
body[data-theme="dark"] .cancel-button { border-color: #373843; color: #bdbecc; background: #20212a; }
body[data-theme="dark"] .form-field { color: #c6c7d1; }
body[data-theme="dark"] .form-field input,
body[data-theme="dark"] .form-field textarea,
body[data-theme="dark"] .form-field select { border-color: #383944; color: #e0e0e9; background: #14151b; }
body[data-theme="dark"] .test-case-input { border-color: #353640; background: #1c1d25; }
body[data-theme="dark"] .progress-overview,
body[data-theme="dark"] .tracker-row,
body[data-theme="dark"] .submission-entry { border-color: #343540; background: #1e1f27; }
body[data-theme="dark"] .progress-ring::before { background: #1e1f27; }
body[data-theme="dark"] .progress-ring strong,
body[data-theme="dark"] .tracker-row-copy strong,
body[data-theme="dark"] .submission-entry-header > strong { color: #e3e3ec; }
body[data-theme="dark"] .progress-track { background: #30313b; }
body[data-theme="dark"] .tracker-row:hover { border-color: #4d4774; background: #242331; }
body[data-theme="dark"] .submission-details,
body[data-theme="dark"] .submission-code,
body[data-theme="dark"] .submission-case { border-color: #343540; }
body[data-theme="dark"] .submission-code { color: #d6d6e1; background: #14151b; }
body[data-theme="dark"] .submission-case p { color: #b0b1bf; }
body[data-theme="dark"] .history-empty { border-color: #383944; }
body[data-theme="dark"] .history-empty strong { color: #e1e1ea; }
body[data-theme="dark"] .history-empty p,
body[data-theme="dark"] .local-data-note { color: #a1a3b1; }
body[data-theme="dark"] .site-footer { color: #9193a3; }
body[data-theme="dark"] .dashboard-page { color: #e7e7f0; background: #101116; }
body[data-theme="light"] .dashboard-page { color: #25283a; background: #f5f6fa; }
.theme-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; color: var(--text-muted); background: var(--surface); cursor: pointer; font-size: 9px; font-weight: 600; white-space: nowrap; }
.theme-toggle:hover { border-color: var(--purple); color: var(--text); }
.theme-toggle-icon { color: var(--purple); font-size: 13px; }
.login-screen { grid-template-columns: minmax(320px, 440px) minmax(280px, 500px); gap: clamp(36px, 9vw, 140px); }
.login-card { border-radius: 12px; }
.login-code-window { margin: -7px 0 21px; border: 1px solid #e9e9f0; border-radius: 8px; background: #fbfbfd; overflow: hidden; }
.login-code-top { height: 31px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eeeef3; padding: 0 10px; color: #9295a3; font-size: 8px; }
.login-code-top > span:first-child { display: flex; gap: 4px; }.login-code-top i { width: 6px; height: 6px; border-radius: 50%; background: #eb827c; }.login-code-top i:nth-child(2) { background: #ebc15e; }.login-code-top i:nth-child(3) { background: #75c792; }.login-code-top > span:last-child { color: #9a8b35; font-weight: 700; }
.login-code-top code { font: 9px var(--mono); }
.login-code-window pre { margin: 0; padding: 11px 12px; color: #626579; font: 9px/1.8 var(--mono); }
.code-purple { color: #8776e9; }.code-yellow { color: #b9913f; }
.login-code-status { display: flex; align-items: center; gap: 6px; border-top: 1px solid #eeeef3; padding: 7px 11px; color: #777b8a; font-size: 8px; }.login-code-status > span:first-child { color: #54af7d; }.code-status-right { margin-left: auto; }
.login-notice strong { color: var(--text); }
.login-decoration { width: min(100%, 500px); }
.decoration-card { width: min(100%, 350px); gap: 15px; padding: 22px 25px; }
.decoration-card-top { display: flex; align-items: center; justify-content: space-between; margin: -3px 0 5px; padding-bottom: 11px; border-bottom: 1px solid #eeeef3; color: #999cab; font: 8px var(--mono); }
.decoration-card-top .decoration-dot { position: static; }
.decoration-indent { overflow-wrap: anywhere; }
.decoration-check { display: flex; justify-content: space-between; }
.site-footer { position: relative; }
.site-footer > span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.site-footer .theme-toggle { margin-left: auto; margin-right: 22px; }
.login-theme-toggle { position: absolute; right: 25px; bottom: 22px; }
@media (max-width: 740px) {
  .login-screen { grid-template-columns: minmax(0, 410px); }
  .login-theme-toggle { right: 13px; bottom: 13px; }
  .login-card { margin-bottom: 42px; }
  .site-footer > span { position: static; transform: none; }
  .site-footer .theme-toggle { margin: 0 0 0 auto; }
}
.dashboard-page { min-width: 360px; }
.dashboard-shell { min-height: 100vh; display: flex; }
.dashboard-sidebar { width: 230px; flex: 0 0 230px; display: flex; flex-direction: column; border-right: 1px solid #2b2c36; padding: 27px 15px 17px; background: #14151b; }
.dashboard-sidebar .brand { margin: 0 0 48px 9px; }
.dashboard-section-label { margin: 0 8px 12px; color: #858797; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.dashboard-nav-link { display: flex; align-items: center; gap: 11px; border-radius: 7px; padding: 11px 10px; color: #9c9eae; text-decoration: none; font-size: 11px; font-weight: 600; }
.dashboard-nav-link span { width: 15px; color: #a19aa9; font-size: 14px; text-align: center; }
.dashboard-nav-link:hover,.dashboard-nav-link.active { color: #d3cdff; background: #28243e; }
.dashboard-nav-link.active span { color: #a297ff; }
.dashboard-sidebar-bottom { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 13px 4px 0; border-top: 1px solid #2b2c36; }
.dashboard-profile-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #e9e5ff; background: #393153; font-family: var(--display); font-size: 12px; font-weight: 800; }
.dashboard-profile-copy { display: grid; gap: 3px; }.dashboard-profile-copy strong { color: #e6e6ef; font-size: 10px; }.dashboard-profile-copy span { color: #8f91a0; font-size: 9px; }
.dashboard-signout { width: 26px; height: 26px; margin-left: auto; border: 1px solid #383944; border-radius: 6px; color: #a8a9b7; background: transparent; cursor: pointer; }
.dashboard-main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.dashboard-topbar { height: 64px; flex: 0 0 64px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2b2c36; padding: 0 clamp(20px, 4vw, 52px); background: #14151b; }
.dashboard-breadcrumb { display: flex; align-items: center; gap: 10px; color: #9294a2; font-size: 10px; }.dashboard-breadcrumb span:nth-child(2) { color: #5c5e6b; }.dashboard-breadcrumb strong { color: #e4e4ed; font-weight: 600; }
.dashboard-top-actions { display: flex; align-items: center; gap: 17px; }.dashboard-challenges-link { display: flex; align-items: center; gap: 6px; color: #bdb6ff; text-decoration: none; font-size: 10px; font-weight: 600; }.dashboard-user-chip { display: flex; align-items: center; gap: 7px; border: 1px solid #30313b; border-radius: 20px; padding: 6px 9px; color: #c4c5d0; font-size: 9px; }.dashboard-user-dot { width: 6px; height: 6px; border-radius: 50%; background: #72c595; }
.dashboard-content { width: min(1120px, 100%); flex: 1; margin: 0 auto; padding: 38px clamp(20px, 4vw, 52px) 28px; }
.dashboard-welcome { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 27px; }.dashboard-eyebrow { color: #898b9a; font-size: 8px; font-weight: 700; letter-spacing: 1px; }.dashboard-eyebrow .live-dot { background: #9a8bff; }
.dashboard-welcome h1 { margin: 10px 0 6px; color: #f1f0f8; font-family: var(--display); font-size: clamp(22px,3vw,31px); letter-spacing: -1px; }.dashboard-welcome h1 span { color: #a599ff; }.dashboard-welcome p { margin: 0; color: #999baa; font-size: 11px; }
.dashboard-primary-link { display: flex; align-items: center; gap: 10px; border-radius: 6px; padding: 10px 13px; color: #fff; background: #7565ee; text-decoration: none; white-space: nowrap; font-size: 10px; font-weight: 600; box-shadow: 0 5px 20px #6555dc30; }.dashboard-primary-link:hover { background: #8576fa; }.dashboard-primary-link span { font-size: 14px; }
.dashboard-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 36px; }.dashboard-stat-card { position: relative; min-height: 120px; display: grid; align-content: start; gap: 8px; border: 1px solid #30313b; border-radius: 9px; padding: 16px; background: linear-gradient(145deg,#1d1e27,#191a21); overflow: hidden; }.dashboard-stat-card::after { position: absolute; right: -24px; bottom: -37px; width: 100px; height: 100px; border: 1px solid #ffffff09; border-radius: 50%; content: ""; }.stat-card-icon { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: #b7adff; background: #322d4d; font-size: 12px; }.stat-blue .stat-card-icon { color: #91bdff; background: #25344a; }.stat-green .stat-card-icon { color: #82d4a5; background: #223c30; }.stat-card-label { color: #9294a3; font-size: 8px; font-weight: 700; letter-spacing: .8px; }.dashboard-stat-card > strong { color: #f0eff7; font-family: var(--display); font-size: 25px; line-height: 1; }.dashboard-stat-card > small { color: #9a9cab; font-size: 9px; }
.dashboard-section,.dashboard-latest { margin: 0 0 34px; }.dashboard-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }.dashboard-section-heading h2 { margin: 5px 0 0; color: #e9e9f1; font-family: var(--display); font-size: 17px; letter-spacing: -.4px; }.dashboard-section-heading > a { color: #b8afff; text-decoration: none; font-size: 9px; font-weight: 600; white-space: nowrap; }.dashboard-section-heading > a span { margin-left: 4px; }
.dashboard-challenge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }.dashboard-challenge-card { min-height: 167px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #30313b; border-radius: 8px; padding: 13px; background: #191a21; transition: border-color .15s,transform .15s; }.dashboard-challenge-card:hover { border-color: #514a79; transform: translateY(-2px); }.dashboard-challenge-card-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; }.dashboard-topic { color: #a09aaf; font-size: 8px; }.dashboard-status,.dashboard-recent-result { border-radius: 4px; padding: 4px 6px; font-size: 8px; font-weight: 600; white-space: nowrap; }.dashboard-status.solved,.dashboard-recent-result.solved { color: #8bd4aa; background: #1c3025; }.dashboard-status.attempted,.dashboard-recent-result.attempted { color: #e4b574; background: #32271b; }.dashboard-status.in-progress { color: #b8afff; background: #29253d; }.dashboard-status.not-started { color: #adafbd; background: #292a33; }.dashboard-challenge-card h3 { margin: 12px 0 5px; color: #e5e5ee; font-family: var(--display); font-size: 12px; }.dashboard-challenge-card > p { display: -webkit-box; flex: 1; margin: 0 0 9px; color: #999baa; font-size: 9px; line-height: 1.55; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.dashboard-difficulty { color: #9b9eac; font-size: 8px; }.dashboard-card-link { margin-top: 9px; color: #b5abff; text-decoration: none; font-size: 9px; font-weight: 600; }.dashboard-card-link:hover { color: #d1cbff; }.dashboard-loading,.dashboard-error { grid-column: 1/-1; margin: 0; border: 1px dashed #393a45; border-radius: 8px; padding: 20px; color: #a4a6b4; text-align: center; font-size: 10px; }
.dashboard-recent-list { display: grid; gap: 7px; }.dashboard-recent-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #30313b; border-radius: 7px; padding: 10px 12px; background: #191a21; text-decoration: none; }.dashboard-recent-item:hover { border-color: #4a456b; }.dashboard-recent-copy { display: grid; gap: 4px; }.dashboard-recent-copy strong { color: #e0e0e9; font-size: 9px; }.dashboard-recent-copy small { color: #999baa; font-size: 8px; }.dashboard-recent-empty { border: 1px dashed #393a45; border-radius: 8px; padding: 17px; text-align: center; }.dashboard-recent-empty strong { color: #d9dae4; font-size: 10px; }.dashboard-recent-empty p { margin: 5px 0 0; color: #9698a8; font-size: 9px; }
.dashboard-footer { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #2b2c36; padding: 7px clamp(20px, 4vw, 52px); color: #898b9a; font-size: 8px; }.dashboard-footer .theme-toggle { margin-left: auto; }
body[data-theme="light"] .dashboard-sidebar { border-color: #eceef3; background: #fbfbfd; }body[data-theme="light"] .dashboard-sidebar .brand { color: #292a3c; }body[data-theme="light"] .dashboard-nav-link { color: #656a7b; }body[data-theme="light"] .dashboard-nav-link:hover,body[data-theme="light"] .dashboard-nav-link.active { color: #5e51d3; background: #f0efff; }body[data-theme="light"] .dashboard-sidebar-bottom { border-color: #eceef3; }body[data-theme="light"] .dashboard-profile-copy strong { color: #45495b; }body[data-theme="light"] .dashboard-profile-copy span,body[data-theme="light"] .dashboard-section-label { color: #9295a4; }body[data-theme="light"] .dashboard-topbar { border-color: #eaecf2; background: #ffffffd9; }body[data-theme="light"] .dashboard-breadcrumb strong { color: #44475a; }body[data-theme="light"] .dashboard-user-chip { border-color: #e5e6ed; color: #606476; }body[data-theme="light"] .dashboard-welcome h1 { color: #25273a; }body[data-theme="light"] .dashboard-stat-card { border-color: #e8e9f0; background: linear-gradient(145deg,#fff,#fafafd); }body[data-theme="light"] .dashboard-stat-card > strong { color: #292b3d; }body[data-theme="light"] .dashboard-section-heading h2 { color: #34374a; }body[data-theme="light"] .dashboard-challenge-card,body[data-theme="light"] .dashboard-recent-item { border-color: #e8e9f0; background: #fff; }body[data-theme="light"] .dashboard-challenge-card h3,body[data-theme="light"] .dashboard-recent-copy strong { color: #44475a; }body[data-theme="light"] .dashboard-footer { border-color: #e7e8ef; color: #8c91a1; }body[data-theme="light"] .dashboard-signout { border-color: #e4e5ed; color: #737789; }
@media (max-width: 900px) { .dashboard-sidebar { width: 190px; flex-basis: 190px; }.dashboard-challenge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.dashboard-content { padding-top: 28px; } }
@media (max-width: 650px) { .dashboard-shell { display: block; }.dashboard-sidebar { width: 100%; height: 55px; flex-direction: row; align-items: center; gap: 10px; border-right: 0; border-bottom: 1px solid #2b2c36; padding: 0 13px; }.dashboard-sidebar .brand { margin: 0 auto 0 0; font-size: 17px; }.dashboard-sidebar .brand-mark { width: 20px; height: 20px; }.dashboard-section-label { display: none; }.dashboard-nav-link { padding: 8px; font-size: 9px; }.dashboard-sidebar-bottom { display: flex; flex: 0 0 auto; margin: 0; padding: 0; border: 0; }.dashboard-profile-avatar,.dashboard-profile-copy { display: none; }.dashboard-signout { margin: 0; }.dashboard-topbar { height: 52px; padding: 0 15px; }.dashboard-top-actions { gap: 8px; }.dashboard-user-chip { display: none; }.dashboard-content { padding: 25px 15px 20px; }.dashboard-welcome { align-items: flex-start; flex-direction: column; }.dashboard-primary-link { padding: 8px 11px; }.dashboard-stat-grid { gap: 7px; }.dashboard-stat-card { min-height: 105px; padding: 11px 9px; }.stat-card-icon { top: 9px; right: 8px; width: 20px; height: 20px; }.stat-card-label { max-width: 75%; font-size: 7px; }.dashboard-stat-card > strong { font-size: 22px; }.dashboard-stat-card > small { font-size: 8px; }.dashboard-challenge-grid { grid-template-columns: 1fr; }.dashboard-challenge-card { min-height: 145px; }.dashboard-footer { padding: 8px 15px; }.dashboard-footer > span { max-width: 58%; line-height: 1.4; } }
@media (max-width: 400px) { .dashboard-sidebar .brand > span:last-child { display: none; }.dashboard-nav-link { gap: 5px; }.dashboard-stat-card { padding: 9px 7px; }.dashboard-section-heading h2 { font-size: 15px; } }
@media (max-width: 740px) { .topbar-actions { gap: 6px; }.workspace-action { gap: 4px; padding: 0 6px; }.workspace-action > span:not(.action-icon) { display: none; }.avatar-stack { display: none; }.topbar-divider { display: none; }.help-button { display: none; }.results-header { gap: 6px; }.result-actions { gap: 5px; }.run-button,.submit-button { gap: 5px; padding: 0 7px; font-size: 9px; }.run-button kbd { display: none; } }
@media (max-width: 420px) { .workspace-action { padding: 0 5px; }.workspace-action b { font-size: 7px; }.result-actions { gap: 4px; }.submit-button { font-size: 8px; }.results-title { gap: 5px; }.case-count { padding: 3px 4px; } }
.compiler-notice { border-bottom: 1px solid #e8e7f2; padding: 9px 14px; color: #77798a; font-size: 9px; line-height: 1.5; }
.compiler-notice a { color: #7164d8; font-weight: 700; }
.compiler-notice[hidden] { display: none; }
body[data-theme="dark"] .compiler-notice { border-color: #30313b; color: #a5a6b4; }
body[data-theme="dark"] .compiler-notice a { color: #b8afff; }

/* Larger type and a brighter editor palette improve readability at a glance. */
body { font-size: 15px; }
.sidebar-section-heading,.sidebar-label,.dashboard-section-label { font-size: 11px; }
.nav-item,.dashboard-nav-link { font-size: 14px; }
.challenge-item,.breadcrumb,.dashboard-breadcrumb { font-size: 13px; }
.sidebar-tip strong,.dashboard-profile-copy strong { font-size: 13px; }
.sidebar-tip p,.text-button,.profile-copy strong,.profile-copy span,.dashboard-profile-copy span { font-size: 12px; }
.workspace-action,.invite-button,.dashboard-challenges-link,.dashboard-user-chip { font-size: 12px; }
.problem-scroll { padding: 28px; }
.eyebrow,.modal-kicker,.dashboard-eyebrow { font-size: 11px; }
.problem-title-row { margin-top: 18px; }
.problem-title-row h1 { font-size: clamp(26px, 2.6vw, 34px); }
.problem-description { font-size: 15px; }
.problem-tags .tag { padding: 5px 10px; font-size: 12px; }
.description-section h2 { font-size: 16px; }
.rich-copy,.constraints-section ul { font-size: 14px; }
.example-card { padding: 13px 14px; }
.example-title,.example-line { font-size: 12px; }
.example-line code { font-size: 12px; }
.problem-footer,.editor-statusbar { font-size: 11px; }
.editor-topbar { height: 52px; flex-basis: 52px; padding: 0 19px; }
.file-tab { gap: 9px; font-size: 14px; }
.js-badge { width: auto; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 5px; color: #e5f1ff; background: linear-gradient(135deg,#4778ed,#7967f2); font-size: 11px; }
.editor-tool,.language-select-wrap select { font-size: 13px; }
.editor-tool span { font-size: 12px; }
.language-select-wrap select { width: 104px; }
.editor-workspace { background: #11131b; }
.line-numbers { width: 54px; flex-basis: 54px; padding-right: 16px; color: #626980; font-size: 13px; line-height: 25px; }
.code-input-wrap { position: relative; min-width: 0; min-height: 100%; flex: 1; overflow: hidden; }
.syntax-highlight { position: absolute; inset: 0; width: max-content; min-width: 100%; min-height: 100%; margin: 0; padding: 0; overflow: visible; pointer-events: none; white-space: pre; font: 15px/25px var(--mono); tab-size: 2; }
.syntax-highlight code { color: #dbe4ff; font: inherit; }
.syntax-keyword { color: #d6a1ff; }
.syntax-string { color: #b8f28b; }
.syntax-comment { color: #8590a8; font-style: italic; }
.syntax-number,.syntax-constant { color: #ffad83; }
.syntax-function { color: #82c9ff; }
.syntax-operator { color: #ff83bc; }
.syntax-preprocessor { color: #ffd580; }
.editor-workspace textarea { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; color: transparent; -webkit-text-fill-color: transparent; font-size: 15px; line-height: 25px; caret-color: #c6a8ff; text-shadow: none; overflow: auto; }
.editor-workspace textarea::selection { color: #fff; background: #6755c777; }
.editor-statusbar { height: 32px; flex-basis: 32px; gap: 17px; }
.status-dot { width: 7px; height: 7px; background: #55d6a0; box-shadow: 0 0 9px #55d6a077; }
.results-panel { color: #e7e9f2; border-color: #252735; background: #0b0c11; }
.results-header { min-height: 58px; height: 58px; flex-basis: 58px; padding: 0 18px; }
.results-title strong { color: #f0f1fa; font-size: 15px; }
.results-icon { color: #a895ff; font-size: 18px; }
.case-count { padding: 4px 8px; color: #c0c4d4; background: #202231; font-size: 12px; }
.run-button,.submit-button { min-height: 36px; padding: 0 12px; font-size: 12px; }
.play-icon { font-size: 10px; }
.run-button kbd { font-size: 10px; }
.results-content { padding: 0 18px; }
.empty-results strong { color: #eef0fa; font-size: 14px; }
.empty-results p { color: #a5a9ba; font-size: 12px; }
.empty-check { color: #b6a8ff; border-color: #60548f; background: #201b35; }
.result-case { border-color: #303345; background: #11131a; }
.result-case-head { padding: 10px 13px; color: #aeb3c5; background: #171a25; font-size: 12px; }
.result-case-head strong { color: #f0f1fa; font-size: 13px; }
.result-case-head .pass-label { color: #64e0a5; }
.result-case-head .fail-label { color: #ff858b; }
.result-case-body { gap: 10px; padding: 12px 13px; }
.result-value span { color: #a2a7bb; font-size: 10px; }
.result-value code { color: #e0e4f0; font-size: 12px; }
.case-error { padding: 0 13px 10px; color: #ff9298; font-size: 12px; }
.run-error { border-color: #57353e; color: #ff9fa5; background: #211317; font-size: 12px; }
.results-footer { min-height: 42px; height: 42px; flex-basis: 42px; padding: 0 18px; color: #afb4c5; font-size: 12px; }
.add-case-button { color: #c0b5ff; font-size: 12px; }
.add-case-button:hover { color: #e0d9ff; }
.compiler-notice { border-color: #272b3a; color: #b5bbce; background: #11131a; font-size: 12px; }
.compiler-notice a { color: #b9aaff; }
.toast { font-size: 13px; }
.theme-toggle { font-size: 11px; }
.dashboard-welcome p { font-size: 14px; }
.dashboard-primary-link { font-size: 13px; }
.dashboard-stat-label,.dashboard-stat-card > small { font-size: 11px; }
.dashboard-stat-card > strong { font-size: 30px; }
.dashboard-section-heading h2 { font-size: 20px; }
.dashboard-topic,.dashboard-status,.dashboard-difficulty,.dashboard-card-link { font-size: 11px; }
.dashboard-challenge-card h3 { font-size: 15px; }
.dashboard-challenge-card > p { font-size: 12px; }
.dashboard-recent-copy strong { font-size: 12px; }
.dashboard-recent-copy small,.dashboard-recent-result { font-size: 11px; }
.site-footer,.dashboard-footer { font-size: 11px; }
.login-heading p { font-size: 14px; }
.login-field { font-size: 13px; }
.login-field input { height: 46px; font-size: 14px; }
.login-notice { font-size: 12px; }
.login-error { font-size: 13px; }
.login-submit { height: 46px; font-size: 14px; }
.copyright { font-size: 11px; }
.login-code-top { font-size: 10px; }
.login-code-top code,.login-code-window pre { font-size: 12px; }
.login-code-status { font-size: 11px; }
.decoration-card { font-size: 13px; }
.decoration-check { font-size: 12px; }
.modal-heading p { font-size: 13px; }
.form-field { font-size: 13px; }
.form-field small,.test-case-input label { font-size: 11px; }
.form-field input,.form-field textarea,.form-field select { font-size: 14px; }
.test-case-input textarea { font-size: 12px; }
.subtle-button,.cancel-button,.primary-button { font-size: 13px; }

body[data-theme="dark"] .editor-panel { border-color: #39324f; box-shadow: 0 8px 32px #0005, 0 0 0 1px #a38bff12; }
body[data-theme="dark"] .editor-topbar { border-color: #343047; background: linear-gradient(100deg,#211d34,#191a23 70%); }
body[data-theme="dark"] .file-tab { border-bottom-color: #9a83ff; color: #e5e2f8; }
body[data-theme="dark"] .editor-workspace { border-color: #282a39; background: radial-gradient(ellipse at 0 0,#1c1a2c 0,#12131b 48%); }
body[data-theme="dark"] .line-numbers { border-right: 1px solid #292a39; color: #727a94; }
body[data-theme="dark"] .editor-workspace textarea { color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
body[data-theme="dark"] .editor-statusbar { border-color: #303142; color: #a5a8be; background: #151620; }
body[data-theme="dark"] .results-panel { border-color: #292b38; background: #090a0e; }
body[data-theme="dark"] .results-header { background: #0d0e13; }
body[data-theme="dark"] .results-footer { border-color: #282a35; background: #0d0e13; }
body[data-theme="dark"] .case-count { color: #d0c9ff; background: #28243f; }
body[data-theme="light"] .editor-topbar { border-color: #e4e0fb; background: linear-gradient(100deg,#f2efff,#fff 70%); }
body[data-theme="light"] .editor-panel { border-color: #ded9fb; }
body[data-theme="light"] .file-tab { border-bottom-color: #7f69f5; color: #36334b; }
body[data-theme="light"] .editor-workspace { border-color: #d9def2; background: radial-gradient(ellipse at 0 0,#ecebff 0,#f3f5fc 50%); }
body[data-theme="light"] .line-numbers { border-right: 1px solid #dfe1f0; color: #8087a3; }
body[data-theme="light"] .editor-workspace textarea { color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
body[data-theme="light"] .syntax-highlight code { color: #26304d; }
body[data-theme="light"] .syntax-keyword { color: #8b3ac7; }
body[data-theme="light"] .syntax-string { color: #39853d; }
body[data-theme="light"] .syntax-comment { color: #78819a; }
body[data-theme="light"] .syntax-number,body[data-theme="light"] .syntax-constant { color: #c04b28; }
body[data-theme="light"] .syntax-function { color: #1769aa; }
body[data-theme="light"] .syntax-operator { color: #c02d73; }
body[data-theme="light"] .syntax-preprocessor { color: #9a6500; }
body[data-theme="light"] .editor-statusbar { border-color: #dfe1f0; color: #626a83; background: #e9ebf5; }
body[data-theme="light"] .results-panel { border-color: #292b38; }