:root {
  --ink: #17233b;
  --muted: #69758b;
  --line: #dfe6ef;
  --blue: #1466e8;
  --blue-deep: #0d4fc1;
  --blue-soft: #edf4ff;
  --paper: #ffffff;
  --canvas: #f3f6fa;
  --green: #11855f;
  --green-soft: #edf9f4;
  --red: #c64949;
  --red-soft: #fff2f2;
  --amber: #bd7a09;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.page-shell { min-height: 100vh; opacity: .98; transition: opacity .18s ease; }
.page-shell.is-ready { opacity: 1; }

.topbar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1320px) / 2));
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: white; border-radius: 12px 12px 12px 4px; background: linear-gradient(145deg, #1983ff, #1559d1); box-shadow: 0 8px 20px rgba(20,102,232,.22); font-family: Georgia, serif; font-size: 21px; font-weight: 700; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 15px; letter-spacing: .01em; }
.brand-copy small { color: var(--muted); font-size: 11px; font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 20px; }
.save-note { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 7px; }
.save-note i { width: 7px; height: 7px; border-radius: 50%; background: #22a675; box-shadow: 0 0 0 4px #e6f7f0; }
.text-button { border: 0; background: transparent; color: var(--muted); font-size: 12px; padding: 8px; cursor: pointer; }
.text-button:hover { color: var(--red); }
.mobile-nav-button { display: none; border: 1px solid var(--line); background: white; border-radius: 10px; padding: 8px 12px; font-size: 13px; }

.workspace { width: min(1320px, calc(100% - 40px)); margin: 34px auto 64px; display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 28px; align-items: start; }
.side-panel { position: sticky; top: 102px; max-height: calc(100vh - 122px); overflow: auto; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 48px rgba(35,57,92,.05); scrollbar-width: thin; }
.side-head { display: flex; align-items: start; justify-content: space-between; }
.eyebrow { margin: 0 0 5px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .06em; }
.side-head strong { display: block; font-size: 30px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.side-head strong span { color: #9aa4b4; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.side-close { display: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 22px; }
.progress-track { height: 7px; overflow: hidden; margin: 18px 0 20px; border-radius: 999px; background: #e9edf3; }
.progress-track span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #60a0ff); transition: width .35s ease; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
.mini-stats div { display: grid; place-items: center; gap: 2px; padding: 11px 4px; border: 1px solid #e7ebf1; border-radius: 12px; background: #fafbfd; }
.mini-stats strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.mini-stats span { color: var(--muted); font-size: 11px; }
.scope-list { display: grid; gap: 5px; padding: 4px 0 20px; border-bottom: 1px solid var(--line); }
.scope-list button { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 10px; padding: 10px 12px; background: transparent; color: #4f5c70; cursor: pointer; font-size: 13px; }
.scope-list button:hover { background: #f5f7fa; }
.scope-list button.active { color: var(--blue); background: var(--blue-soft); font-weight: 700; }
.scope-list b { min-width: 24px; text-align: center; padding: 2px 6px; border-radius: 999px; background: #edf0f4; color: #7b8697; font-size: 10px; }
.scope-list .active b { background: white; color: var(--blue); }
.number-head { display: flex; justify-content: space-between; align-items: center; margin: 20px 0 12px; font-size: 12px; font-weight: 700; }
.number-head button { border: 0; background: transparent; color: var(--blue); padding: 2px; cursor: pointer; font-size: 11px; }
.question-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.question-grid button { aspect-ratio: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: white; color: #657085; cursor: pointer; font-size: 11px; font-variant-numeric: tabular-nums; transition: .15s ease; }
.question-grid button:hover { border-color: #91b7f4; color: var(--blue); }
.question-grid button.correct { color: var(--green); border-color: #b7decf; background: var(--green-soft); }
.question-grid button.wrong { color: var(--red); border-color: #efcaca; background: var(--red-soft); }
.question-grid button.done { color: var(--blue); border-color: #bdd2f5; background: var(--blue-soft); }
.question-grid button.current { color: white; border-color: var(--blue); background: var(--blue); box-shadow: 0 5px 12px rgba(20,102,232,.22); }
.legend { display: flex; justify-content: center; gap: 14px; margin-top: 16px; color: var(--muted); font-size: 10px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #cdd4de; background: white; }
.legend .correct-dot { border-color: var(--green); background: var(--green); }
.legend .wrong-dot { border-color: var(--red); background: var(--red); }
.empty-side { padding: 24px 10px; text-align: center; color: var(--muted); font-size: 12px; }
.empty-side button { border: 0; color: var(--blue); background: transparent; cursor: pointer; }

.practice-area { min-width: 0; }
.practice-toolbar { min-height: 44px; display: flex; justify-content: space-between; align-items: center; margin: 0 4px 12px; }
.practice-toolbar > div { display: flex; align-items: center; gap: 10px; }
.practice-toolbar > div span { color: var(--blue); font-size: 12px; font-weight: 700; }
.practice-toolbar > div b { color: var(--muted); font-size: 12px; }
.favorite-button { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; color: var(--muted); background: white; cursor: pointer; font-size: 12px; }
.favorite-button span { font-size: 18px; line-height: 1; }
.favorite-button.active { border-color: #f0cf91; color: var(--amber); background: #fffaf0; }

.question-card { padding: 42px 48px 30px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 20px 55px rgba(35,57,92,.06); }
.question-meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; }
.question-meta span:first-child { color: var(--blue); font-weight: 750; background: var(--blue-soft); padding: 5px 9px; border-radius: 7px; }
.question-card h1 { margin: 24px 0 34px; font-size: clamp(19px, 2vw, 23px); line-height: 1.78; font-weight: 700; letter-spacing: -.012em; }
.choices { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.choice { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; line-height: 1.58; transition: border-color .16s, background .16s, transform .16s, box-shadow .16s; }
.choice:hover { border-color: #93b7f1; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(35,57,92,.04); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-letter { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #ccd5e2; border-radius: 10px; color: #46536a; font-weight: 750; font-size: 13px; }
.choice-copy { font-size: 15px; }
.choice kbd { min-width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #dfe5ee; border-bottom-width: 2px; border-radius: 6px; color: #9aa4b3; background: #fafbfd; font-size: 10px; font-family: inherit; }
.choice.selected { border-color: var(--blue); background: var(--blue-soft); }
.choice.correct { border-color: #6bb89b; background: var(--green-soft); box-shadow: none; }
.choice.correct .choice-letter { border-color: var(--green); color: var(--green); background: white; }
.choice.wrong { border-color: #e0a2a2; background: var(--red-soft); box-shadow: none; }
.choice.wrong .choice-letter { border-color: var(--red); color: var(--red); background: white; }
.choice:has(input:disabled) { cursor: default; transform: none; }
.result-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-weight: 800; }
.choice.wrong .result-icon { background: var(--red); }

.answer-panel { margin-top: 22px; padding: 20px 22px; border: 1px solid #c8e6da; border-radius: 16px; background: var(--green-soft); }
.answer-panel.is-wrong { border-color: #f0cece; background: var(--red-soft); }
.answer-title { display: flex; align-items: center; gap: 12px; }
.answer-title > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-weight: 800; }
.is-wrong .answer-title > span { background: var(--red); }
.answer-title div { display: grid; gap: 1px; }
.answer-title strong { color: var(--green); }
.is-wrong .answer-title strong { color: var(--red); }
.answer-title small { color: var(--muted); font-size: 11px; }
.explanation { margin-top: 17px; padding-top: 17px; border-top: 1px solid rgba(44,105,82,.13); }
.is-wrong .explanation { border-top-color: rgba(160,68,68,.14); }
.explanation b { display: block; margin-bottom: 6px; font-size: 12px; }
.explanation p { margin: 0; color: #536176; line-height: 1.75; font-size: 14px; }
.retry-button { margin-top: 14px; border: 0; background: transparent; color: var(--blue); cursor: pointer; padding: 0; font-size: 12px; }

.subjective-area > label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; }
.subjective-area textarea { width: 100%; min-height: 190px; resize: vertical; border: 1px solid var(--line); border-radius: 14px; padding: 16px; color: var(--ink); background: #fbfcfe; outline: 0; line-height: 1.7; font-size: 15px; }
.subjective-area textarea:focus { border-color: #79a8ef; box-shadow: 0 0 0 4px rgba(20,102,232,.08); background: white; }
.subjective-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; color: var(--muted); font-size: 11px; }
.subjective-foot button { border: 0; border-radius: 10px; padding: 10px 14px; color: white; background: var(--blue); cursor: pointer; font-size: 12px; font-weight: 700; }
.subjective-foot button:disabled { opacity: .4; cursor: not-allowed; }
.sample-answers { margin-top: 22px; padding: 20px; border: 1px solid #cbdcf7; border-radius: 16px; background: var(--blue-soft); }
.sample-answers > div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sample-answers > div b { font-size: 13px; }
.sample-answers > div button { border: 0; color: var(--blue); background: transparent; cursor: pointer; font-size: 11px; }
.sample-answers p { display: grid; grid-template-columns: 24px 1fr; gap: 10px; margin: 10px 0 0; color: #526078; line-height: 1.7; font-size: 14px; }
.sample-answers p span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; color: var(--blue); background: white; font-size: 11px; font-weight: 700; }

.question-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--line); }
.ghost-button, .primary-button { min-width: 118px; height: 44px; border-radius: 11px; cursor: pointer; font-weight: 700; font-size: 13px; }
.ghost-button { justify-self: start; color: #5c687b; border: 1px solid var(--line); background: white; }
.primary-button { justify-self: end; color: white; border: 1px solid var(--blue); background: var(--blue); box-shadow: 0 8px 18px rgba(20,102,232,.15); }
.ghost-button:hover:not(:disabled) { border-color: #aebbd0; }
.primary-button:hover:not(:disabled) { background: var(--blue-deep); }
button:disabled { cursor: not-allowed; opacity: .4; box-shadow: none; }
.keyboard-hint { color: #9aa4b4; font-size: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.nav-scrim { display: none; }

.boot-page { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; background: radial-gradient(circle at 50% 35%, #fff 0, #f3f6fa 55%); color: var(--muted); }
.boot-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px 17px 17px 5px; color: white; background: linear-gradient(145deg, #1983ff, #1559d1); box-shadow: 0 14px 34px rgba(20,102,232,.2); font-family: Georgia, serif; font-size: 27px; font-weight: 700; }
.boot-page p { margin: 0; font-size: 13px; }
.global-error { position: fixed; left: 50%; bottom: 22px; z-index: 10; transform: translateX(-50%); margin: 0; padding: 11px 16px; border: 1px solid #f0cece; border-radius: 10px; color: var(--red); background: #fff5f5; font-size: 12px; }

.auth-page { min-height: 100vh; display: grid; place-content: center; justify-items: center; padding: 38px 20px; overflow: hidden; position: relative; background: #07152c; color: white; }
.auth-page::before, .auth-page::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.auth-page::before { width: 540px; height: 540px; right: -190px; top: -230px; background: radial-gradient(circle, rgba(30,124,255,.32), rgba(30,124,255,0) 68%); }
.auth-page::after { width: 480px; height: 480px; left: -210px; bottom: -270px; background: radial-gradient(circle, rgba(28,183,174,.16), rgba(28,183,174,0) 69%); }
.auth-card { width: min(470px, calc(100vw - 36px)); position: relative; z-index: 1; padding: 34px 38px 32px; border: 1px solid rgba(255,255,255,.13); border-radius: 24px; background: rgba(11,29,58,.88); box-shadow: 0 30px 90px rgba(0,0,0,.34); backdrop-filter: blur(16px); }
.auth-brand { display: flex; align-items: center; gap: 11px; }
.auth-brand > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px 12px 12px 4px; background: linear-gradient(145deg, #298cff, #1763d9); font-family: Georgia, serif; font-size: 21px; font-weight: 700; }
.auth-brand > div { display: grid; gap: 1px; }
.auth-brand b { font-size: 14px; }
.auth-brand small { color: #8ea2c3; font-size: 10px; }
.auth-eyebrow { margin: 40px 0 8px; color: #65a7ff; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.auth-card h1 { margin: 0; font-size: 31px; letter-spacing: -.035em; }
.auth-intro { margin: 14px 0 28px; color: #9aacca; line-height: 1.7; font-size: 13px; }
.auth-card form { display: grid; gap: 10px; }
.auth-card label { color: #c7d4e8; font-size: 12px; font-weight: 700; }
.auth-card input { width: 100%; height: 52px; border: 1px solid #354d72; border-radius: 12px; padding: 0 15px; outline: 0; color: white; background: #0b1b36; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 15px; letter-spacing: .05em; }
.auth-card input:focus { border-color: #4e97ff; box-shadow: 0 0 0 4px rgba(54,137,255,.12); }
.auth-card input::placeholder { color: #536887; }
.auth-card form > button { height: 50px; margin-top: 4px; border: 0; border-radius: 12px; color: white; background: linear-gradient(135deg, #217df8, #155bcf); cursor: pointer; font-weight: 750; box-shadow: 0 14px 28px rgba(13,83,193,.24); }
.auth-error { margin: 0; padding: 9px 11px; border: 1px solid rgba(244,125,125,.23); border-radius: 9px; color: #ffb1b1; background: rgba(179,44,44,.12); font-size: 11px; }
.auth-notes { display: grid; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.09); color: #91a3c0; font-size: 11px; }
.auth-notes span { display: flex; align-items: center; gap: 9px; }
.auth-notes i { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #35537d; border-radius: 50%; color: #66a7ff; font-style: normal; font-size: 9px; }
.auth-foot { position: relative; z-index: 1; margin: 18px 0 0; color: #667b9d; font-size: 10px; }

.card-badge { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 10px; border: 1px solid #dbe6f5; border-radius: 999px; color: #426083; background: #f7faff; font-size: 10px; font-weight: 700; }
.set-picker { margin: -5px -4px 22px; padding: 14px; border: 1px solid #dce7f7; border-radius: 14px; background: #f7faff; }
.set-picker label { display: block; margin-bottom: 7px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.set-picker select { width: 100%; height: 38px; border: 1px solid #cbd9ed; border-radius: 9px; padding: 0 10px; outline: 0; color: var(--ink); background: white; font-size: 13px; font-weight: 700; }
.set-picker p { margin: 8px 0 0; color: #748198; line-height: 1.55; font-size: 10px; }
.reset-set { width: 100%; margin-top: 17px; padding: 8px; border: 0; color: #8b96a8; background: transparent; cursor: pointer; font-size: 10px; }
.reset-set:hover { color: var(--red); }
.question-grid button.subjective-number { font-weight: 800; }

.admin-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #0a1730; }
.admin-auth form { width: min(430px, 100%); display: grid; gap: 11px; padding: 34px; border: 1px solid #263e64; border-radius: 22px; color: white; background: #0e2141; box-shadow: 0 25px 70px rgba(0,0,0,.25); }
.admin-auth a, .admin-page a { color: #6ca9ff; text-decoration: none; font-size: 11px; }
.admin-auth p, .admin-page header p, .admin-create > div > p, .key-list-head p { margin: 22px 0 5px; color: #4e8ff0; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.admin-auth h1 { margin: 0 0 20px; font-size: 30px; }
.admin-auth label { color: #b7c7df; font-size: 12px; font-weight: 700; }
.admin-auth input { height: 49px; border: 1px solid #355077; border-radius: 11px; padding: 0 13px; color: white; outline: 0; background: #09172d; }
.admin-auth button { height: 48px; border: 0; border-radius: 11px; color: white; background: var(--blue); font-weight: 750; }
.admin-auth span { color: #ffaaaa; font-size: 11px; }
.admin-auth small { color: #7186a8; line-height: 1.6; font-size: 10px; }

.admin-page { min-height: 100vh; padding: 44px max(24px, calc((100vw - 1320px) / 2)) 80px; background: #f3f6fa; }
.admin-page > header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 28px; }
.admin-page header p { margin-top: 20px; }
.admin-page h1 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.admin-page > header > button { height: 38px; border: 1px solid var(--line); border-radius: 9px; padding: 0 13px; color: #526078; background: white; cursor: pointer; font-size: 11px; }
.admin-error { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #efcece; border-radius: 10px; color: var(--red); background: var(--red-soft); font-size: 12px; }
.admin-create, .new-codes, .key-list { border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 16px 45px rgba(35,57,92,.04); }
.admin-create { display: grid; grid-template-columns: 280px 1fr; gap: 34px; padding: 28px; }
.admin-create > div > p, .key-list-head p { margin-top: 0; }
.admin-create h2, .new-codes h2, .key-list h2 { margin: 0; font-size: 21px; }
.admin-create > div > span { display: block; margin-top: 10px; color: var(--muted); line-height: 1.6; font-size: 11px; }
.admin-create form { display: grid; grid-template-columns: 110px minmax(180px, 1fr) 130px auto; gap: 12px; align-items: end; }
.admin-create label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.admin-create input { height: 42px; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; outline: 0; }
.admin-create input:focus { border-color: #76a4eb; box-shadow: 0 0 0 3px rgba(20,102,232,.08); }
.admin-create button { height: 42px; border: 0; border-radius: 9px; padding: 0 17px; color: white; background: var(--blue); font-size: 12px; font-weight: 700; }
.new-codes { margin-top: 18px; padding: 24px 28px; border-color: #bcd5fb; background: #f5f9ff; }
.new-codes > div { display: flex; align-items: center; justify-content: space-between; }
.new-codes button { border: 0; color: var(--blue); background: transparent; cursor: pointer; font-size: 11px; }
.new-codes pre { margin: 18px 0 10px; padding: 16px; overflow: auto; border-radius: 10px; color: #16365e; background: white; font-size: 13px; line-height: 1.75; }
.new-codes p { margin: 0; color: var(--amber); font-size: 10px; }
.key-list { margin-top: 18px; overflow: hidden; }
.key-list-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.key-summary { display: flex; gap: 8px; }
.key-summary span { padding: 5px 9px; border-radius: 999px; color: #647288; background: #f3f6fa; font-size: 10px; }
.key-table-wrap { overflow-x: auto; }
.key-list table { width: 100%; border-collapse: collapse; font-size: 11px; }
.key-list th { padding: 12px 14px; color: #8792a4; background: #fafbfd; text-align: left; white-space: nowrap; font-size: 9px; letter-spacing: .06em; }
.key-list td { padding: 14px; border-top: 1px solid #edf0f4; color: #526078; white-space: nowrap; }
.key-list td:first-child { display: grid; gap: 3px; }
.key-list td strong { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.key-list td small { color: #9aa4b4; font-size: 9px; }
.key-list td code { color: #445675; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.key-status { display: inline-block; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.key-status.active { color: var(--green); background: var(--green-soft); }
.key-status.disabled { color: var(--red); background: var(--red-soft); }
.key-actions { display: flex; gap: 6px; }
.key-actions button { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; color: #657086; background: white; cursor: pointer; font-size: 9px; }
.key-actions button.danger { color: var(--red); border-color: #efcece; }
.no-keys { padding: 70px 20px; color: var(--muted); text-align: center; font-size: 12px; }

@media (max-width: 980px) {
  .workspace { grid-template-columns: 250px minmax(0, 1fr); gap: 18px; }
  .side-panel { padding: 20px; }
  .question-grid { grid-template-columns: repeat(5, 1fr); }
  .question-card { padding: 34px 30px 26px; }
  .admin-create { grid-template-columns: 1fr; }
  .admin-create form { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .topbar { height: 66px; padding: 0 16px; }
  .brand-copy small, .save-note, .text-button { display: none; }
  .card-badge { max-width: 90px; }
  .mobile-nav-button { display: block; }
  .workspace { width: min(100% - 24px, 680px); margin: 18px auto 40px; display: block; }
  .side-panel { position: fixed; z-index: 50; top: 0; right: 0; width: min(86vw, 340px); height: 100vh; max-height: none; border-radius: 20px 0 0 20px; transform: translateX(105%); transition: transform .22s ease; }
  .side-panel.is-open { transform: translateX(0); }
  .side-close { display: block; }
  .nav-scrim { display: block; position: fixed; z-index: 45; inset: 0; border: 0; background: rgba(15,27,47,.42); backdrop-filter: blur(2px); }
  .practice-toolbar { margin-bottom: 8px; }
  .question-card { padding: 26px 18px 20px; border-radius: 18px; }
  .question-card h1 { margin: 19px 0 26px; font-size: 18px; line-height: 1.72; }
  .question-meta span:last-child { display: none; }
  .choice { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 11px 12px; gap: 10px; }
  .choice-copy { font-size: 14px; }
  .choice kbd { display: none; }
  .answer-panel { padding: 17px; }
  .question-footer { grid-template-columns: 1fr 1fr; }
  .keyboard-hint { display: none; }
  .subjective-foot { align-items: end; gap: 12px; }
  .auth-card { padding: 28px 22px 24px; }
  .auth-card h1 { font-size: 27px; }
  .admin-page { padding: 28px 14px 60px; }
  .admin-page h1 { font-size: 28px; }
  .admin-create { padding: 22px 18px; }
  .admin-create form { grid-template-columns: 1fr; }
  .key-list-head { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* 纯 PHP 版补充样式 */
.brand > span:last-child { display: grid; gap: 1px; }
.brand > span:last-child strong { font-size: 15px; }
.brand > span:last-child small { color: var(--muted); font-size: 11px; }
.kicker { margin: 0 0 7px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.set-picker { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.set-picker label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.choices { display: grid; gap: 12px; }
.choice { width: 100%; text-align: left; }
.choice:disabled { cursor: default; opacity: 1; }
.auth-error:empty { display: none; }
.auth-card > .kicker { margin-top: 40px; color: #65a7ff; }

.install-body, .admin-body { min-height: 100vh; background: radial-gradient(circle at 20% 0, #17396e 0, #0a1730 38%, #071225 100%); }
.install-wrap { width: min(680px, calc(100% - 28px)); margin: 0 auto; padding: 48px 0 80px; }
.install-brand, .auth-brand { display: flex; align-items: center; gap: 12px; color: white; }
.install-brand { margin: 0 0 22px 4px; }
.install-brand > span, .auth-brand > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px 13px 13px 4px; color: white; background: linear-gradient(145deg,#1983ff,#1559d1); box-shadow: 0 10px 28px rgba(20,102,232,.3); font-family: Georgia,serif; font-size: 23px; font-weight: 700; }
.install-brand div, .auth-brand div { display: grid; gap: 2px; }
.install-brand small, .auth-brand small { color: #8fa5c7; font-size: 11px; }
.install-card { padding: 36px; border: 1px solid #263e64; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.25); }
.install-card h1 { margin: 0 0 10px; font-size: 30px; letter-spacing: -.04em; }
.install-lead { margin: 0 0 26px; color: var(--muted); line-height: 1.75; font-size: 13px; }
.install-form { display: grid; gap: 17px; }
.install-form label, .install-card > label { display: grid; gap: 8px; color: #46546b; font-size: 12px; font-weight: 700; }
.install-form input { width: 100%; height: 46px; border: 1px solid #d4dce8; border-radius: 10px; padding: 0 13px; outline: 0; color: var(--ink); background: white; }
.install-form input:focus { border-color: #73a1e9; box-shadow: 0 0 0 3px rgba(20,102,232,.08); }
.form-grid { display: grid; grid-template-columns: 1fr 110px; gap: 14px; }
.install-form button { height: 48px; margin-top: 3px; border: 0; border-radius: 11px; color: white; background: linear-gradient(135deg,var(--blue),var(--blue-deep)); cursor: pointer; font-weight: 800; box-shadow: 0 10px 25px rgba(20,102,232,.2); }
.form-error { margin-bottom: 18px; padding: 12px 14px; border: 1px solid #efcaca; border-radius: 10px; color: var(--red); background: var(--red-soft); font-size: 12px; line-height: 1.6; }
.safe-note { margin: 22px 0 0; color: #8793a6; line-height: 1.65; font-size: 10px; }
.secret-box { margin: 8px 0 20px; padding: 14px 16px; overflow-x: auto; border: 1px solid #bdd3f5; border-radius: 10px; color: #154c9d; background: var(--blue-soft); font-size: 15px; }
.install-actions { display: flex; gap: 10px; margin-top: 28px; }
.button { display: inline-grid; place-items: center; height: 45px; padding: 0 20px; border-radius: 10px; text-decoration: none; font-size: 13px; font-weight: 800; }
.button.primary { color: white; background: var(--blue); }
.button.secondary { color: var(--blue); border: 1px solid #bdd3f5; background: var(--blue-soft); }

.admin-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.admin-login .auth-card { width: min(450px,100%); }
.back-link { display: inline-block; margin-top: 18px; color: #7faef4; text-decoration: none; font-size: 11px; }
.admin-shell { min-height: 100vh; padding: 34px max(20px,calc((100vw - 1320px)/2)) 70px; background: #f3f6fa; }
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.admin-header .auth-brand { color: var(--ink); }
.admin-header .auth-brand small { color: var(--muted); }
.admin-header > div:last-child { display: flex; align-items: center; gap: 10px; }
.admin-header a, .admin-header button, .table-head button { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; color: #536178; background: white; text-decoration: none; cursor: pointer; font-size: 11px; }
.create-panel, .key-panel { border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 16px 45px rgba(35,57,92,.04); }
.create-panel { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding: 28px; }
.create-panel h1 { margin: 0 0 8px; font-size: 25px; }
.create-panel > div > p:last-child, .table-head p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 11px; }
.create-panel form { display: grid; grid-template-columns: 100px minmax(180px,1fr) 120px auto; gap: 12px; align-items: end; }
.create-panel label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 700; }
.create-panel label small { font-weight: 400; }
.create-panel input { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; outline: 0; }
.create-panel form > button { height: 42px; border: 0; border-radius: 9px; padding: 0 16px; color: white; background: var(--blue); cursor: pointer; font-size: 12px; font-weight: 800; }
.created-box { display: grid; grid-template-columns: 240px 1fr auto; gap: 18px; align-items: center; margin-top: 18px; padding: 22px 26px; border: 1px solid #bcd5fb; border-radius: 18px; background: #f5f9ff; }
.created-box p { margin: 5px 0 0; color: var(--amber); font-size: 10px; }
.created-box textarea { min-height: 90px; border: 1px solid #d7e4f6; border-radius: 9px; padding: 10px; resize: vertical; color: #173d73; background: white; font: 12px/1.65 ui-monospace,Consolas,monospace; }
.created-box button { border: 0; border-radius: 9px; padding: 10px 14px; color: white; background: var(--blue); cursor: pointer; font-size: 11px; }
.key-panel { margin-top: 18px; overflow: hidden; }
.table-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; }
.table-head h2 { margin: 0 0 5px; font-size: 20px; }
.table-wrap { overflow-x: auto; }
.key-panel table { width: 100%; border-collapse: collapse; font-size: 11px; }
.key-panel th { padding: 11px 14px; color: #8792a4; background: #fafbfd; text-align: left; white-space: nowrap; font-size: 9px; }
.key-panel td { padding: 13px 14px; border-top: 1px solid #edf0f4; color: #536178; white-space: nowrap; }
.key-panel td:first-child b, .key-panel td:first-child small { display: block; }
.key-panel td:first-child small { margin-top: 3px; color: #9aa4b4; }
.status { display: inline-block; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.status.on { color: var(--green); background: var(--green-soft); }
.status.off { color: var(--red); background: var(--red-soft); }
.row-actions { display: flex; gap: 6px; }
.row-actions button { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; color: #607089; background: white; cursor: pointer; font-size: 9px; }
.row-actions button:disabled { opacity: .45; cursor: default; }
.empty-table { padding: 60px !important; text-align: center; }

@media (max-width: 800px) {
  .install-wrap { padding-top: 26px; }
  .install-card { padding: 26px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .install-actions { display: grid; }
  .admin-shell { padding: 20px 12px 50px; }
  .admin-header { align-items: flex-start; }
  .admin-header .auth-brand small { display: none; }
  .admin-header a { display: none; }
  .create-panel { grid-template-columns: 1fr; padding: 22px 18px; }
  .create-panel form { grid-template-columns: 1fr; }
  .created-box { grid-template-columns: 1fr; }
}

/* 题库与套卷管理 */
.content-panel, .set-panel { margin-top: 18px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 16px 45px rgba(35,57,92,.04); }
.content-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.content-panel-head h2 { margin: 0 0 6px; font-size: 22px; }
.content-panel-head p:not(.kicker) { margin: 0; max-width: 650px; color: var(--muted); line-height: 1.65; font-size: 12px; }
.outline-button, .blue-button { min-height: 40px; border-radius: 9px; padding: 0 13px; cursor: pointer; font-size: 11px; font-weight: 800; white-space: nowrap; }
.outline-button { border: 1px solid #bdd3f5; color: var(--blue); background: var(--blue-soft); }
.blue-button { border: 0; color: white; background: var(--blue); }
.import-row { display: flex; align-items: center; gap: 12px; margin-top: 21px; }
.import-row input { width: min(420px, 100%); border: 1px dashed #aec5e6; border-radius: 9px; padding: 9px; color: #58677d; background: #f9fbfe; font-size: 11px; }
.content-help { margin: 10px 0 0; color: #8895a9; font-size: 10px; }
.content-help code { color: #52709c; }
.saving-note, .import-success, .import-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 9px; font-size: 11px; }
.saving-note { color: #52709c; background: var(--blue-soft); }
.import-success { color: var(--green); background: var(--green-soft); }
.import-error { color: var(--red); background: var(--red-soft); }
.set-head-actions { display: flex; gap: 8px; }
.set-editor { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 26px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.set-list { padding-right: 18px; border-right: 1px solid var(--line); }
.set-list > label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 10px; font-weight: 800; }
#set-buttons { display: grid; gap: 6px; }
.set-button { display: grid; gap: 3px; width: 100%; border: 1px solid transparent; border-radius: 9px; padding: 10px; color: #516078; background: transparent; text-align: left; cursor: pointer; }
.set-button:hover { background: #f6f8fb; }
.set-button.active { border-color: #c7daf7; color: var(--blue); background: var(--blue-soft); }
.set-button b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.set-button small { color: #8996a9; font-size: 10px; }
.set-fields { display: grid; grid-template-columns: 1fr 180px; gap: 13px; }
.set-fields label, .question-adder label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.set-fields input, .set-fields textarea, .question-adder input, .question-adder select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; outline: 0; color: var(--ink); background: white; font: inherit; font-size: 12px; }
.set-fields textarea { min-height: 70px; resize: vertical; line-height: 1.55; }
.set-fields input:focus, .set-fields textarea:focus, .question-adder input:focus, .question-adder select:focus { border-color: #78a7ed; box-shadow: 0 0 0 3px rgba(20,102,232,.08); }
.set-description { grid-column: 1 / -1; }
.question-adder { display: flex; align-items: flex-end; gap: 12px; margin-top: 20px; padding: 16px; border-radius: 12px; background: #f7faff; }
.question-adder > div { min-width: 0; flex: 1; }
.question-adder select { height: 126px; margin-top: 8px; }
.question-adder option { padding: 5px; }
.set-items-title { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 10px; }
.set-items-title h3 { margin: 0; font-size: 14px; }
.text-danger { border: 0; color: var(--red); background: transparent; cursor: pointer; font-size: 11px; }
.set-items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.set-items li { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 10px; border: 1px solid #e7ebf1; border-radius: 10px; background: #fcfdff; }
.item-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #5a6e8d; background: #eaf1fb; font-size: 10px; font-weight: 800; }
.set-items b { display: block; color: #516078; font-size: 10px; }
.set-items p { display: -webkit-box; overflow: hidden; margin: 3px 0 0; color: #79869a; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 1.45; font-size: 11px; }
.item-actions { display: flex; gap: 5px; }
.item-actions button { width: 28px; height: 27px; border: 1px solid var(--line); border-radius: 7px; color: #60718c; background: white; cursor: pointer; font-size: 11px; }
.item-actions button.danger { width: auto; padding: 0 8px; color: var(--red); border-color: #efcdcd; }
.item-actions button:disabled { opacity: .35; cursor: default; }
.empty-editor { margin: 10px 0; color: var(--muted); font-size: 12px; }

@media (max-width: 800px) {
  .content-panel, .set-panel { padding: 21px 17px; }
  .content-panel-head { display: grid; }
  .set-head-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .import-row { display: grid; }
  .question-adder { display: grid; }
  .set-editor { grid-template-columns: 1fr; gap: 18px; }
  .set-list { padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--line); }
  #set-buttons { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .set-fields { grid-template-columns: 1fr; }
  .set-description { grid-column: auto; }
  .set-items li { grid-template-columns: 30px minmax(0,1fr); }
  .item-actions { grid-column: 2; }
}

/* V3：公告、分类与独立计时 */
.timer-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #cfe0f8; border-radius: 999px; color: #56708f; background: #f4f8ff; font-size: 10px; white-space: nowrap; }
.timer-badge b { color: var(--blue); font: 800 12px/1 ui-monospace,Consolas,monospace; }
.notice-button { border: 1px solid #b9cff0; border-radius: 9px; padding: 8px 11px; color: #185bbd; background: #edf4ff; cursor: pointer; font-size: 11px; font-weight: 800; white-space: nowrap; }
.notice-modal { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; }
.notice-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(5,18,39,.62); cursor: default; }
.notice-dialog { position: relative; width: min(620px,100%); max-height: min(78vh,720px); overflow: hidden; border-radius: 18px; background: white; box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.notice-dialog header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.notice-dialog h2 { margin: 0; font-size: 20px; }
.notice-dialog header button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: #66748a; background: #f1f4f8; cursor: pointer; font-size: 22px; }
.notice-html { max-height: calc(78vh - 75px); overflow: auto; padding: 24px; color: #37445a; line-height: 1.8; font-size: 14px; overflow-wrap: anywhere; }
.notice-html > :first-child { margin-top: 0; }
.notice-html > :last-child { margin-bottom: 0; }
.notice-html a { color: var(--blue); }
.category-picker { margin: -5px -4px 22px; padding: 14px; border: 1px solid #dce7f7; border-radius: 14px; background: #f7faff; }
.category-picker > label { display: block; margin: 12px 0 7px; color: #71809a; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.category-picker > label:first-child { margin-top: 0; }
.category-company { display: flex; align-items: center; min-height: 37px; padding: 0 11px; border: 1px solid #cbd9ed; border-radius: 9px; color: var(--blue); background: white; font-size: 13px; font-weight: 800; }
.category-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.category-tabs button { min-height: 35px; border: 1px solid #d3deed; border-radius: 8px; color: #63748e; background: white; cursor: pointer; font-size: 11px; font-weight: 700; }
.category-tabs button.active { border-color: #8db5ef; color: white; background: var(--blue); box-shadow: 0 5px 14px rgba(20,102,232,.18); }
.category-picker select { width: 100%; height: 38px; border: 1px solid #cbd9ed; border-radius: 9px; padding: 0 10px; outline: 0; color: var(--ink); background: white; font-size: 12px; font-weight: 700; }
.category-picker p { margin: 9px 0 0; color: #748198; line-height: 1.55; font-size: 10px; }
.empty-practice { min-height: 480px; display: grid; place-content: center; justify-items: center; padding: 40px; border: 1px dashed #ccd8e9; border-radius: 20px; color: #7d8ba0; background: white; text-align: center; }
.empty-practice span { color: var(--blue); font-size: 11px; font-weight: 800; }
.empty-practice h1 { margin: 12px 0 7px; color: var(--ink); font-size: 24px; }
.empty-practice p { margin: 0; font-size: 12px; }

.notice-admin-panel, .company-admin-panel { margin-top: 18px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 16px 45px rgba(35,57,92,.04); }
.notice-admin-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 24px; margin-top: 22px; }
.notice-fields { display: grid; gap: 12px; }
.notice-fields label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; font-weight: 800; }
.notice-fields .check-line { display: flex; align-items: center; gap: 8px; }
.notice-fields .check-line input { width: auto; }
.notice-fields input:not([type="checkbox"]), .notice-fields textarea, .import-row select, .set-fields select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; outline: 0; color: var(--ink); background: white; font: inherit; font-size: 12px; }
.notice-fields textarea { resize: vertical; font: 12px/1.55 ui-monospace,Consolas,monospace; }
.notice-fields > small { color: #8895a9; line-height: 1.6; font-size: 10px; }
.notice-preview { display: grid; grid-template-rows: auto 1fr; gap: 9px; min-height: 320px; color: var(--muted); font-size: 10px; }
.notice-preview iframe { width: 100%; height: 100%; min-height: 290px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.import-row > label { display: grid; gap: 6px; min-width: 130px; color: var(--muted); font-size: 10px; font-weight: 800; }
.set-fields input:disabled { color: #7b8798; background: #f4f6f9; }
.company-manager { margin-top: 20px; }
#company-tags { display: flex; flex-wrap: wrap; gap: 8px; }
#company-tags > span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 9px 8px 12px; border: 1px solid #cfe0f8; border-radius: 999px; color: #285d9f; background: #f2f7ff; font-size: 12px; font-weight: 800; }
#company-tags button { width: 22px; height: 22px; border: 0; border-radius: 50%; color: #7c8da6; background: white; cursor: pointer; font-size: 16px; line-height: 1; }
.company-add { display: flex; gap: 9px; margin-top: 16px; }
.company-add input { width: min(360px,100%); height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; outline: 0; font: inherit; font-size: 12px; }
#company-result:empty { display: none; }

@media (max-width: 1080px) {
  .topbar-actions { gap: 9px; }
  .save-note { display: none; }
}
@media (max-width: 800px) {
  .notice-admin-panel, .company-admin-panel { padding: 21px 17px; }
  .notice-admin-grid { grid-template-columns: 1fr; }
  .notice-preview { min-height: 240px; }
  .timer-badge { padding: 6px 8px; }
  .timer-badge { font-size: 0; }
  .timer-badge b { font-size: 11px; }
  .notice-button { padding: 7px 9px; }
  .card-badge { display: none; }
  .empty-practice { min-height: 360px; }
  .brand > span:last-child small { display: none; }
  .company-add { display: grid; }
}
@media (max-width: 560px) {
  .brand > span:last-child { display: none; }
  .notice-button { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  .notice-dialog { border-radius: 14px; }
}

/* V5 三级分类与侧边栏后台 */
.ip-reset-button { border: 1px solid #f0c987; border-radius: 9px; padding: 8px 11px; color: #9a6010; background: #fff8e8; cursor: pointer; font-size: 11px; font-weight: 800; white-space: nowrap; }
.ip-reset-button.used { color: #718096; border-color: #dce2ea; background: #f3f5f8; cursor: default; }
.category-picker select:disabled { color: #9aa5b5; background: #f2f4f7; }

.admin-layout { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0,1fr); color: #1e2a40; background: #f3f6fa; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 24px 16px; color: #d9e5f7; background: #0a1830; box-shadow: 8px 0 30px rgba(12,28,55,.08); }
.admin-sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 26px; border-bottom: 1px solid rgba(255,255,255,.08); }
.admin-sidebar-brand > span { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px 12px 12px 4px; color: white; background: linear-gradient(145deg,#1983ff,#1559d1); font: 700 22px Georgia,serif; }
.admin-sidebar-brand div { display: grid; min-width: 0; gap: 3px; }
.admin-sidebar-brand b, .admin-sidebar-brand small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar-brand b { color: white; font-size: 14px; }
.admin-sidebar-brand small { color: #8198ba; font-size: 10px; }
.admin-sidebar nav { display: grid; align-content: start; gap: 6px; padding-top: 24px; }
.admin-sidebar nav button { width: 100%; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 10px; padding: 10px; color: #93a7c4; background: transparent; text-align: left; cursor: pointer; }
.admin-sidebar nav button > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #84a8dc; background: rgba(255,255,255,.06); font-size: 12px; font-weight: 900; }
.admin-sidebar nav button b { font-size: 12px; }
.admin-sidebar nav button:hover { color: white; background: rgba(255,255,255,.05); }
.admin-sidebar nav button.active { color: white; background: #1766da; box-shadow: 0 10px 24px rgba(23,102,218,.25); }
.admin-sidebar nav button.active > span { color: #1766da; background: white; }
.admin-sidebar footer { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.admin-sidebar footer a, .admin-sidebar footer button { border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: 8px; color: #9cb0cc; background: transparent; text-align: center; text-decoration: none; cursor: pointer; font-size: 10px; }
.admin-main { min-width: 0; }
.admin-top { height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 max(24px,calc((100vw - 1500px)/2)); border-bottom: 1px solid #e5eaf1; background: rgba(255,255,255,.9); }
.admin-top > button { display: none; border: 0; background: transparent; font-size: 22px; }
.admin-top div { display: grid; gap: 3px; }
.admin-top p { margin: 0; color: #26334b; font-size: 15px; font-weight: 900; }
.admin-top small { color: #8b97a9; font-size: 10px; }
.admin-view { width: min(1240px,calc(100% - 42px)); margin: 28px auto 70px; }
.v5-panel { margin-bottom: 18px; padding: 28px; border: 1px solid #e0e6ee; border-radius: 17px; background: white; box-shadow: 0 14px 40px rgba(30,49,78,.04); }
.v5-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.v5-panel-head p { margin: 0 0 6px; color: #1766da; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.v5-panel-head h1 { margin: 0 0 6px; font-size: 23px; }
.v5-panel-head span { display: block; color: #7c899d; line-height: 1.6; font-size: 11px; }
.v5-primary, .v5-secondary { min-height: 40px; border-radius: 9px; padding: 0 14px; cursor: pointer; font-size: 11px; font-weight: 900; white-space: nowrap; }
.v5-primary { border: 0; color: white; background: #1766da; box-shadow: 0 8px 20px rgba(23,102,218,.16); }
.v5-secondary { border: 1px solid #bdd2f1; color: #1766da; background: #f1f6ff; }
.v5-fields { display: grid; gap: 13px; }
.v5-fields label, .site-info-grid label, .key-create-form label, .upload-target-grid label, .level-name-grid label { display: grid; gap: 7px; color: #637189; font-size: 10px; font-weight: 800; }
.v5-fields input:not([type="checkbox"]), .v5-fields textarea, .site-info-grid input, .key-create-form input, .upload-target-grid select, .level-name-grid input { width: 100%; border: 1px solid #dbe2ec; border-radius: 9px; padding: 10px 11px; outline: 0; color: #25324a; background: white; font: inherit; font-size: 12px; }
.v5-fields textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.v5-fields input:focus, .v5-fields textarea:focus, .site-info-grid input:focus, .key-create-form input:focus, .upload-target-grid select:focus, .level-name-grid input:focus { border-color: #72a3e9; box-shadow: 0 0 0 3px rgba(23,102,218,.08); }
.site-info-grid { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 30px; }
.icon-editor { display: grid; align-content: start; justify-items: center; gap: 13px; padding: 22px; border: 1px dashed #cbd8e9; border-radius: 14px; background: #f8fbff; text-align: center; }
#icon-preview { width: 86px; height: 86px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; color: white; background: #1766da; font: 700 38px Georgia,serif; box-shadow: 0 12px 30px rgba(23,102,218,.2); }
#icon-preview img { width: 100%; height: 100%; object-fit: contain; }
.icon-editor input { max-width: 210px; padding: 8px; font-size: 10px; }
.icon-editor p { margin: 0; color: #8c98a9; line-height: 1.5; font-size: 9px; }
.key-create-form { display: grid; grid-template-columns: 110px minmax(180px,1fr) 130px auto; gap: 12px; align-items: end; }
.key-create-form small { font-weight: 400; }
.v5-table-panel { padding-left: 0; padding-right: 0; overflow: hidden; }
.v5-table-panel .v5-panel-head { padding: 0 28px; }
.v5-table-panel table { width: 100%; border-collapse: collapse; font-size: 11px; }
.v5-table-panel th { padding: 11px 14px; color: #8792a4; background: #f8fafc; text-align: left; white-space: nowrap; font-size: 9px; }
.v5-table-panel td { padding: 13px 14px; border-top: 1px solid #edf0f4; color: #536178; white-space: nowrap; }
.v5-table-panel td:first-child b, .v5-table-panel td:first-child small { display: block; }
.status.pending { color: #9a6010; background: #fff5dc; }
.status.approved { color: #16805d; background: #eaf8f2; }
.status.rejected { color: #a94a4a; background: #fff0f0; }
.row-actions button.danger { color: #b74c4c; border-color: #edcccc; }
.upload-target-grid { display: grid; grid-template-columns: repeat(4,minmax(130px,1fr)); gap: 12px; }
.upload-target-grid .is-hidden { display: none; }
.set-taxonomy { margin-bottom: 18px; padding: 15px; border-radius: 12px; background: #f6f9fe; }
.taxonomy-level { margin-top: 18px; padding: 18px; border: 1px solid #e3e8ef; border-radius: 13px; background: #fbfcfe; }
.taxonomy-level-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.taxonomy-level-head div { display: grid; gap: 3px; }
.taxonomy-level-head b { font-size: 14px; }
.taxonomy-level-head span { color: #8793a5; font-size: 10px; }
.level-name-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 16px; border-radius: 12px; background: #f3f7fd; }
.taxonomy-row { display: grid; grid-template-columns: minmax(150px,1fr) minmax(160px,1fr) auto auto; gap: 9px; align-items: center; margin-top: 8px; }
.taxonomy-row:first-of-type { margin-top: 0; }
.taxonomy-row > input, .taxonomy-row > select { width: 100%; height: 39px; border: 1px solid #d9e1eb; border-radius: 8px; padding: 0 9px; outline: 0; background: white; font: inherit; font-size: 11px; }
.taxonomy-row > button { height: 35px; border: 1px solid #eccdcd; border-radius: 8px; padding: 0 10px; color: #b64c4c; background: white; cursor: pointer; font-size: 10px; }
.tax-toggle { display: flex; align-items: center; gap: 6px; color: #68778e; white-space: nowrap; font-size: 10px; }
.taxonomy-level:first-of-type .taxonomy-row { grid-template-columns: minmax(150px,1fr) auto; }
.taxonomy-safe { margin: 18px 0 0; padding: 11px 13px; border-radius: 9px; color: #825d22; background: #fff8e8; font-size: 10px; }

@media (max-width: 1050px) {
  .admin-layout { grid-template-columns: 210px minmax(0,1fr); }
  .upload-target-grid { grid-template-columns: repeat(2,1fr); }
  .key-create-form { grid-template-columns: repeat(2,1fr); }
  .taxonomy-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .ip-reset-button { max-width: 76px; overflow: hidden; text-overflow: ellipsis; padding: 7px 8px; }
  .admin-layout { display: block; }
  .admin-sidebar { position: fixed; z-index: 200; inset: 0 auto 0 0; width: min(82vw,280px); transform: translateX(-105%); transition: transform .2s ease; }
  .admin-sidebar.is-open { transform: translateX(0); }
  .admin-top { padding: 0 14px; }
  .admin-top > button { display: block; }
  .admin-view { width: calc(100% - 24px); margin-top: 14px; }
  .v5-panel { padding: 20px 16px; }
  .v5-panel-head { display: grid; }
  .site-info-grid, .notice-admin-grid { grid-template-columns: 1fr; }
  .upload-target-grid, .level-name-grid, .key-create-form { grid-template-columns: 1fr; }
  .set-editor { grid-template-columns: 1fr; }
  .taxonomy-row { grid-template-columns: 1fr; padding-bottom: 12px; border-bottom: 1px solid #e7ebf1; }
  .taxonomy-level:first-of-type .taxonomy-row { grid-template-columns: 1fr; }
  .v5-table-panel .v5-panel-head { padding: 0 16px; }
}
@media (max-width: 540px) {
  .topbar-actions { gap: 5px; }
  .timer-badge { display: none; }
  .ip-reset-button { max-width: 66px; }
}

/* V8 UI redesign: restrained study workspace and dense admin system */
:root {
  --ink: #17202f;
  --muted: #667085;
  --line: #dfe3e8;
  --blue: #1769aa;
  --blue-deep: #0f568f;
  --blue-soft: #edf5fa;
  --paper: #ffffff;
  --canvas: #f5f6f8;
  --green: #18794e;
  --green-soft: #edf7f1;
  --red: #b42318;
  --red-soft: #fff1f0;
  --amber: #9a6700;
  --radius-panel: 12px;
  --radius-control: 8px;
  --shadow-panel: 0 1px 2px rgba(18, 31, 48, .05), 0 10px 30px rgba(18, 31, 48, .04);
}

html { color-scheme: light; }
body {
  color: var(--ink);
  background: var(--canvas);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .08s ease; }
button:not(:disabled):active, a[role="button"]:active { transform: translateY(1px); }
:where(button, a, input, textarea, select):focus-visible {
  outline: 3px solid rgba(23, 105, 170, .22) !important;
  outline-offset: 2px;
}
input::placeholder, textarea::placeholder { color: #98a2b3; opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--blue); }

/* Front office */
.page-shell { min-height: 100dvh; opacity: 1; }
.topbar {
  height: 64px;
  padding-inline: max(24px, calc((100vw - 1400px) / 2));
  border-color: #e5e7eb;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: none;
}
.brand { gap: 10px; }
.brand-mark, .boot-mark, .auth-brand > span {
  border-radius: 8px;
  background: var(--blue);
  box-shadow: none;
  font-family: inherit;
}
.brand-copy strong { font-size: 14px; font-weight: 700; }
.brand-copy small { font-size: 11px; }
.topbar-actions { gap: 12px; }
.save-note { font-size: 12px; }
.save-note i { box-shadow: none; }
.text-button, .mobile-nav-button, .favorite-button { min-height: 40px; border-radius: var(--radius-control); }

.workspace {
  width: min(1400px, calc(100% - 48px));
  margin: 28px auto 56px;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
}
.side-panel {
  top: 88px;
  max-height: calc(100dvh - 112px);
  padding: 20px;
  border-color: #e4e7ec;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.eyebrow { margin-bottom: 4px; font-size: 12px; letter-spacing: 0; font-weight: 600; }
.side-head strong { font-size: 27px; letter-spacing: -.03em; }
.progress-track { height: 4px; margin: 16px 0 18px; border-radius: 2px; }
.progress-track span { border-radius: inherit; background: var(--blue); }
.mini-stats { gap: 0; margin: 0 -4px 18px; }
.mini-stats div { gap: 1px; padding: 8px 4px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.mini-stats div:last-child { border-right: 0; }
.mini-stats strong { font-size: 17px; }
.scope-list { gap: 2px; }
.scope-list button { min-height: 40px; border-radius: 7px; padding: 8px 10px; }
.scope-list button:hover { background: #f2f4f7; }
.scope-list button.active { color: var(--blue); background: var(--blue-soft); }
.question-grid { gap: 6px; }
.question-grid button { border-radius: 6px; }
.question-grid button.current { box-shadow: none; }
.legend { flex-wrap: wrap; }

.practice-toolbar { margin: 0 0 12px; }
.question-card {
  padding: 36px 40px 28px;
  border-color: #e4e7ec;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.question-meta { font-size: 12px; }
.question-meta span:first-child { padding: 4px 8px; border-radius: 5px; }
.question-card h1 { max-width: 48em; margin: 22px 0 28px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.7; }
.choices { gap: 10px; }
.choice { min-height: 60px; gap: 12px; padding: 11px 14px; border-radius: 9px; }
.choice:hover { border-color: #80aecd; transform: none; box-shadow: 0 2px 8px rgba(18, 31, 48, .05); }
.choice-letter { border-radius: 7px; }
.answer-panel, .sample-answers { border-radius: 9px; }
.question-footer { margin-top: 26px; padding-top: 22px; }
.ghost-button, .primary-button { min-height: 42px; border-radius: var(--radius-control); box-shadow: none; }
.subjective-area textarea { border-radius: var(--radius-control); }
.guest-fixed-card, .set-picker { border-radius: 9px; box-shadow: none; }
.card-badge { border-radius: 6px; }

.auth-page {
  min-height: 100dvh;
  padding: 32px 20px;
  color: #f5f7fa;
  background: #101828;
}
.auth-page::before, .auth-page::after { display: none; }
.auth-card {
  width: min(440px, calc(100vw - 32px));
  padding: 32px;
  border-color: #344054;
  border-radius: var(--radius-panel);
  background: #1d2939;
  box-shadow: 0 24px 70px rgba(3, 8, 18, .32);
  backdrop-filter: none;
}
.auth-eyebrow { margin: 32px 0 8px; color: #84b7d8; letter-spacing: .08em; }
.auth-card h1 { font-size: 28px; letter-spacing: -.025em; }
.auth-intro { margin: 12px 0 24px; color: #b7c2d0; }
.auth-card form { gap: 12px; }
.auth-card input { height: 48px; border-color: #475467; border-radius: var(--radius-control); background: #101828; }
.auth-card input:focus { border-color: #75acd0; box-shadow: 0 0 0 3px rgba(117, 172, 208, .16); }
.auth-card form > button { height: 46px; border-radius: var(--radius-control); background: #287eb7; box-shadow: none; }
.auth-card form > button:hover { background: #216c9e; }
.guest-button { min-height: 44px; border-radius: var(--radius-control); color: #dceefa; border-color: #476c86; background: #243b4d; }
.guest-button:hover { background: #2c485d; }
.auth-notes { margin-top: 20px; padding-top: 18px; }
.auth-notes i { border-radius: 6px; }
.boot-page { min-height: 100dvh; background: var(--canvas); }

/* Admin shell */
.admin-body { background: #f5f6f8; }
.admin-auth { min-height: 100dvh; background: #101828; }
.admin-auth form { border-color: #344054; border-radius: var(--radius-panel); background: #1d2939; box-shadow: 0 24px 70px rgba(3, 8, 18, .32); }
.admin-auth input, .admin-auth button { border-radius: var(--radius-control); }
.v6-admin.admin-layout { grid-template-columns: 216px minmax(0, 1fr); background: #f5f6f8; }
.v6-admin .admin-sidebar {
  padding: 16px 12px;
  border-right-color: #e4e7ec;
  color: #475467;
  box-shadow: none;
}
.v6-admin .admin-sidebar-brand { padding: 4px 8px 18px; }
.v6-admin .admin-sidebar-brand > span { border-radius: 8px; background: var(--blue); }
.v6-admin .admin-sidebar nav { gap: 4px; }
.v6-admin .admin-sidebar nav button { min-height: 42px; border-radius: 7px; color: #475467; }
.v6-admin .admin-sidebar nav button > span { border-radius: 6px; color: #475467; background: #f2f4f7; }
.v6-admin .admin-sidebar nav button:hover { color: var(--ink); background: #f2f4f7; }
.v6-admin .admin-sidebar nav button.active { color: var(--blue); background: var(--blue-soft); }
.v6-admin .admin-sidebar nav button.active > span { color: var(--blue); background: #dcecf6; }
.v6-admin .admin-sidebar footer a, .v6-admin .admin-sidebar footer button { min-height: 40px; border-radius: 7px; }
.v6-admin .admin-top { height: 64px; padding: 0 24px; border-bottom: 1px solid #e4e7ec; box-shadow: none; }
.v6-admin .admin-view { width: min(1440px, calc(100% - 48px)); margin: 28px auto 56px; }
.v6-page { gap: 20px; }
.v6-page-head { align-items: center; }
.v6-page-head p { display: none; }
.v6-page-head h1 { margin: 0 0 5px; font-size: 26px; line-height: 1.25; letter-spacing: -.025em; }
.v6-page-head span { font-size: 13px; }
.v6-head-actions { flex-wrap: wrap; }

.v6-card {
  padding: 24px;
  border-color: #e4e7ec;
  border-radius: var(--radius-panel);
  box-shadow: 0 1px 2px rgba(18, 31, 48, .04);
}
.v6-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid #e4e7ec;
  border-radius: var(--radius-panel);
  background: #fff;
}
.v6-stats article { min-height: 96px; padding: 18px 20px; border: 0; border-right: 1px solid #e4e7ec; border-radius: 0; box-shadow: none; }
.v6-stats article:last-child { border-right: 0; }
.v6-stats article div { gap: 6px; }
.v6-stats article span { font-size: 12px; }
.v6-stats article b { font-size: 24px; font-variant-numeric: tabular-nums; }
.v6-stats article i { width: 38px; height: 38px; border: 0; border-radius: 8px; color: var(--blue) !important; background: var(--blue-soft) !important; }

.v6-button { min-height: 40px; border-radius: var(--radius-control); padding: 0 14px; font-size: 12px; font-weight: 650; box-shadow: none !important; }
.v6-button.primary { background: var(--blue); }
.v6-button.primary:hover { background: var(--blue-deep); }
.v6-button.success, .v6-button.dark { color: #344054; border-color: #d0d5dd; background: #fff; }
.v6-button.success:hover, .v6-button.dark:hover, .v6-button.light:hover { background: #f2f4f7; }
.v6-button.danger { color: var(--red); border-color: #f1b8b3; background: #fff; }
.v6-button.danger:hover { background: var(--red-soft); }
.v6-button.outline, .v6-button.light { color: #344054; border-color: #d0d5dd; background: #fff; }
.v6-toolbar { gap: 8px; padding: 18px 20px 16px; }
.v6-filters { gap: 8px; padding: 16px 20px 12px; background: #f9fafb; }
.v6-filters input, .v6-filters select, .v6-editor-strip input, .v6-upload-grid input, .v6-upload-grid select, .v6-paper-fields input, .v6-paper-fields select, .v6-paper-fields textarea,
.v5-fields input:not([type="checkbox"]), .v5-fields textarea, .site-info-grid input, .key-create-form input, .upload-target-grid select, .level-name-grid input {
  height: 42px;
  border-color: #d0d5dd;
  border-radius: var(--radius-control);
  color: #344054;
  font-size: 13px;
}
.v6-filters input:focus, .v6-filters select:focus, .v6-editor-strip input:focus, .v6-upload-grid input:focus, .v6-upload-grid select:focus, .v6-paper-fields input:focus, .v6-paper-fields select:focus, .v6-paper-fields textarea:focus,
.v5-fields input:focus, .v5-fields textarea:focus, .site-info-grid input:focus, .key-create-form input:focus {
  border-color: #6da3c6;
  box-shadow: 0 0 0 3px rgba(23, 105, 170, .12);
}
.v6-status-tabs { padding: 2px 20px 16px; background: #f9fafb; }
.v6-status-tabs button { min-height: 36px; border-radius: 7px; font-size: 12px; }
.v6-status-tabs button.active { color: var(--blue); border-color: #8db9d5; background: var(--blue-soft); }
.v6-table-card { padding: 0; }
.table-wrap { max-width: 100%; overflow: auto; scrollbar-width: thin; }
.v6-table { font-size: 12px; }
.v6-table th { position: sticky; top: 0; z-index: 1; padding: 11px 14px; border-top: 0; color: #667085; background: #f9fafb; font-size: 11px; font-weight: 650; letter-spacing: .01em; }
.v6-table td { padding: 13px 14px; color: #475467; border-bottom-color: #eaecf0; }
.v6-table tbody tr:last-child td { border-bottom: 0; }
.v6-table tbody tr:hover { background: #f8fbfd; }
.v6-name > span { border-radius: 8px; color: var(--blue); background: var(--blue-soft); }
.v6-name.paper > span { color: var(--blue); background: var(--blue-soft); }
.v6-name b { font-size: 13px; }
.v6-name small { font-size: 11px; }
.v6-switch { width: 38px; height: 22px; background: #98a2b3; }
.v6-switch.on { background: var(--blue); }
.v6-row-actions { gap: 6px; }
.v6-row-actions button { min-height: 32px; border-color: #a9c9dd; border-radius: 6px; color: var(--blue); font-size: 11px; }
.v6-row-actions button:hover { background: var(--blue-soft); }
.v6-row-actions button.danger:hover { background: var(--red-soft); }

.v6-editor-strip { margin: 0 20px 16px; padding: 16px; border-color: #b9d4e4; border-radius: 9px; background: #f4f9fc; }
.v6-editor-strip > div b, .v6-inline-head b, .v6-section-title b { font-size: 15px; }
.v6-editor-strip > div small, .v6-inline-head small, .v6-section-title small { font-size: 12px; }
.v6-editor-strip label, .v6-upload-grid label, .v6-paper-fields label,
.v5-fields label, .site-info-grid label, .key-create-form label, .upload-target-grid label, .level-name-grid label { color: #475467; font-size: 12px; font-weight: 650; }
.v6-inline-editor { gap: 20px; border-color: #cadfe9; box-shadow: 0 8px 24px rgba(18, 67, 96, .06); }
.v6-inline-head > button { border-radius: 7px; }
.v6-section-title { padding: 18px 20px; }
.key-code-button { min-width: 220px; border-radius: 6px; }
.key-code-button.available:hover { background: #f4f9fc; }
.key-code-button b { font-size: 12px; }
.key-code-button small { color: var(--blue); font-size: 11px; }
.status { border-radius: 5px; }
.empty-table { padding: 48px 20px !important; color: #667085; }
.notice-dialog { border-radius: var(--radius-panel); box-shadow: 0 24px 70px rgba(16, 24, 40, .22); }
.notice-dialog header button { border-radius: 7px; }

@media (max-width: 1280px) {
  .workspace { grid-template-columns: 244px minmax(0, 1fr); gap: 24px; }
  .v6-admin .admin-view { width: calc(100% - 40px); }
  .v6-stats article { padding-inline: 16px; }
}

@media (max-width: 1024px) {
  .workspace { width: calc(100% - 32px); grid-template-columns: 228px minmax(0, 1fr); gap: 20px; }
  .question-card { padding: 30px 28px 24px; }
  .v6-admin.admin-layout { grid-template-columns: 196px minmax(0, 1fr); }
  .v6-stats { grid-template-columns: repeat(2, 1fr); }
  .v6-stats article:nth-child(2) { border-right: 0; }
  .v6-stats article:nth-child(-n+2) { border-bottom: 1px solid #e4e7ec; }
}

@media (max-width: 768px) {
  .topbar { padding-inline: 16px; }
  .workspace { width: calc(100% - 24px); margin: 18px auto 40px; display: block; }
  .side-panel { top: 0; width: min(88vw, 340px); height: 100dvh; max-height: none; border-radius: 0; }
  .side-close, .mobile-nav-button { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; }
  .question-card { padding: 24px 20px 20px; }
  .choice { grid-template-columns: 34px minmax(0, 1fr); }
  .choice kbd { display: none; }
  .v6-admin.admin-layout { display: block; }
  .v6-admin .admin-top { padding-inline: 16px; }
  .v6-admin .admin-view { width: calc(100% - 24px); margin: 20px auto 44px; }
  .v6-page-head { align-items: flex-start; }
  .v6-card { padding: 20px 16px; }
  .v6-table-card { padding: 0; }
  .v6-toolbar, .v6-filters, .v6-status-tabs, .v6-section-title { padding-left: 16px; padding-right: 16px; }
  .v6-editor-strip { margin-inline: 16px; }
  .v6-table { min-width: 760px; }
  .notice-dialog { max-height: calc(100dvh - 24px); }
}

@media (max-width: 430px) {
  .brand-copy small, .save-note { display: none; }
  .topbar-actions { gap: 6px; }
  .question-card h1 { margin: 18px 0 24px; font-size: 18px; }
  .choice-copy { font-size: 14px; }
  .question-footer { grid-template-columns: 1fr 1fr; gap: 8px; }
  .keyboard-hint { display: none; }
  .ghost-button, .primary-button { width: 100%; min-width: 0; }
  .auth-card { padding: 26px 20px; }
  .auth-card h1 { font-size: 25px; }
  .v6-page-head { display: grid; }
  .v6-page-head h1 { font-size: 23px; }
  .v6-head-actions, .v6-head-actions .v6-button { width: 100%; }
  .v6-stats article { min-width: 0; min-height: 82px; padding: 14px; }
  .v6-stats article b { font-size: 21px; }
  .v6-stats article i { width: 34px; height: 34px; }
  .v6-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .v6-toolbar .v6-button { width: 100%; padding-inline: 8px; white-space: normal; line-height: 1.25; }
  .v6-filters, .v6-editor-strip, .v6-upload-grid, .v6-paper-fields, .v6-card .key-create-form { grid-template-columns: 1fr; }
  .v6-filters input, .v6-filters select, .v6-filters .v6-button { width: 100%; min-width: 0; }
}

@media (max-width: 390px) {
  .topbar { height: 60px; }
  .brand-mark { width: 34px; height: 34px; }
  .workspace { width: calc(100% - 20px); }
  .question-card { padding: 20px 16px 16px; }
  .question-meta { align-items: flex-start; gap: 8px; }
  .choice { padding-inline: 10px; }
  .v6-admin .admin-view { width: calc(100% - 20px); }
}

@media (max-width: 375px) {
  .text-button { padding-inline: 6px; }
  .question-card h1 { line-height: 1.62; }
  .v6-toolbar { grid-template-columns: 1fr; }
}

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

/* V7：完整卡密复制与游客入口 */
.key-code-button { display: grid; gap: 4px; min-width: 210px; border: 0; padding: 5px 0; color: #273449; background: transparent; text-align: left; cursor: pointer; }
.key-code-button b { font: 800 12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .02em; }
.key-code-button small { color: #1976d2; font-size: 9px; }
.key-code-button.available:hover b { color: #1976d2; text-decoration: underline; }
.key-code-button.legacy { cursor: not-allowed; }
.key-code-button.legacy b { color: #758196; }
.key-code-button.legacy small { color: #a07a3e; }
.guest-button { width: 100%; min-height: 45px; margin-top: 10px; border: 1px solid #a9c9ee; border-radius: 10px; color: #1766da; background: #edf5ff; cursor: pointer; font-weight: 900; }
.guest-button:hover { background: #e2efff; }
.guest-note { margin: 9px 0 0; color: #7b8799; text-align: center; font-size: 10px; }
.guest-fixed-card { margin-bottom: 18px; padding: 15px; border: 1px solid #cfe0f5; border-radius: 13px; color: #4f6380; background: #f5f9ff; line-height: 1.65; font-size: 11px; }
.guest-fixed-card b { display: block; margin-bottom: 3px; color: #1766da; font-size: 13px; }
.guest-mode #random { display: none; }

/* V6：保留原功能，分类/试卷/卡密改为表格化管理 */
.v6-admin.admin-layout { grid-template-columns: 230px minmax(0,1fr); background: #f3f5f9; }
.v6-admin .admin-sidebar { padding: 20px 12px; color: #4f5c70; background: #fff; border-right: 1px solid #e4e8ee; box-shadow: 4px 0 20px rgba(28,40,61,.04); }
.v6-admin .admin-sidebar-brand { padding: 3px 8px 22px; border-color: #edf0f4; }
.v6-admin .admin-sidebar-brand > span { background: linear-gradient(145deg,#2087ea,#1264c8); }
.v6-admin .admin-sidebar-brand b { color: #202a3b; }
.v6-admin .admin-sidebar-brand small { color: #8995a6; }
.v6-admin .admin-sidebar nav { gap: 7px; }
.v6-admin .admin-sidebar nav button { color: #586579; }
.v6-admin .admin-sidebar nav button > span { color: #48637f; background: #f1f4f8; }
.v6-admin .admin-sidebar nav button:hover { color: #1766da; background: #f3f7fd; }
.v6-admin .admin-sidebar nav button.active { color: #1766da; background: #eaf3ff; box-shadow: none; }
.v6-admin .admin-sidebar nav button.active > span { color: white; background: #2383e2; }
.v6-admin .admin-sidebar footer { border-color: #edf0f4; }
.v6-admin .admin-sidebar footer a, .v6-admin .admin-sidebar footer button { color: #68768b; border-color: #dfe5ed; background: #fff; }
.v6-admin .admin-top { height: 70px; padding: 0 28px; background: #fff; }
.v6-admin .admin-view { width: min(1460px,calc(100% - 48px)); margin: 30px auto 70px; }
.v6-page { display: grid; gap: 20px; }
.v6-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.v6-page-head p { margin: 0 0 6px; color: #2383e2; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.v6-page-head h1 { margin: 0 0 7px; color: #202838; font-size: 27px; }
.v6-page-head span { color: #7d899b; font-size: 11px; }
.v6-head-actions { display: flex; gap: 9px; }
.v6-card { padding: 25px 28px; border: 1px solid #e0e5eb; border-radius: 16px; background: #fff; box-shadow: 0 5px 16px rgba(30,45,70,.05); }
.v6-stats { display: grid; grid-template-columns: repeat(4,minmax(180px,1fr)); gap: 18px; }
.v6-stats article { min-height: 112px; display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border: 1px solid #dfe4ea; border-radius: 15px; background: #fff; box-shadow: 0 4px 10px rgba(25,40,65,.05); }
.v6-stats article div { display: grid; gap: 10px; }
.v6-stats article span { color: #707b8d; font-size: 11px; font-weight: 700; }
.v6-stats article b { color: #20242c; font-size: 26px; }
.v6-stats article i { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid; border-radius: 14px; font-style: normal; font-weight: 900; }
.v6-stats .tone-0 { color: #1976d2; border-color: #9dcbf6; background: #e2f1ff; }
.v6-stats .tone-1 { color: #2e883c; border-color: #abd5b1; background: #e7f4e9; }
.v6-stats .tone-2 { color: #d52f36; border-color: #f0b2b5; background: #ffeaeb; }
.v6-stats .tone-3 { color: #9b31b3; border-color: #dca9e7; background: #f7e8fb; }
.v6-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; padding: 0 14px; cursor: pointer; font: 800 11px/1 system-ui,"Microsoft YaHei",sans-serif; white-space: nowrap; }
.v6-button.primary { color: #fff; background: #1976d2; box-shadow: 0 4px 8px rgba(25,118,210,.22); }
.v6-button.success { color: #fff; background: #31853a; box-shadow: 0 4px 8px rgba(49,133,58,.2); }
.v6-button.dark { color: #fff; background: #64696f; }
.v6-button.danger { color: #fff; background: #df2f34; box-shadow: 0 4px 8px rgba(223,47,52,.18); }
.v6-button.outline { color: #1976d2; border-color: #8cbcf0; background: #fff; }
.v6-button.light { color: #526176; border-color: #d5dce6; background: #f8fafc; }
.v6-table-card { padding: 0; overflow: hidden; }
.v6-toolbar { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 28px 20px; }
.v6-filters { display: flex; align-items: center; gap: 10px; padding: 20px 28px 14px; border-top: 1px solid #edf0f4; background: #fbfcfe; }
.v6-filters input, .v6-filters select, .v6-editor-strip input, .v6-upload-grid input, .v6-upload-grid select, .v6-paper-fields input, .v6-paper-fields select, .v6-paper-fields textarea { height: 40px; border: 1px solid #d7dde6; border-radius: 8px; padding: 0 11px; outline: 0; color: #273449; background: #fff; font: 12px "Microsoft YaHei",system-ui,sans-serif; }
.v6-filters input { width: min(350px,100%); }
.v6-filters select { min-width: 150px; }
.v6-filters input:focus, .v6-filters select:focus, .v6-editor-strip input:focus, .v6-paper-fields input:focus, .v6-paper-fields select:focus, .v6-paper-fields textarea:focus { border-color: #70a9e8; box-shadow: 0 0 0 3px rgba(25,118,210,.08); }
.v6-status-tabs { display: flex; gap: 8px; padding: 4px 28px 20px; background: #fbfcfe; }
.v6-status-tabs button { min-width: 70px; height: 36px; border: 1px solid #d6dce4; border-radius: 8px; color: #606d80; background: #fff; cursor: pointer; font-size: 11px; }
.v6-status-tabs button.active { color: #1976d2; border-color: #7eb2ec; background: #edf5ff; font-weight: 800; }
.v6-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.v6-table th { padding: 13px 16px; color: #6f7886; border-top: 1px solid #e9edf2; border-bottom: 1px solid #e1e5ea; background: #fafbfc; text-align: left; white-space: nowrap; font-size: 10px; }
.v6-table td { padding: 14px 16px; color: #505d70; border-bottom: 1px solid #e7ebef; vertical-align: middle; white-space: nowrap; }
.v6-table tbody tr:hover { background: #fbfdff; }
.v6-table td > b, .v6-table td > small { display: block; }
.v6-table td > small { margin-top: 3px; color: #929dad; }
.v6-name { display: flex; align-items: center; gap: 11px; min-width: 210px; white-space: normal; }
.v6-name > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #1976d2; background: #e9f3ff; font-weight: 900; }
.v6-name.paper > span { color: #7b3bb0; background: #f1eafa; }
.v6-name div { min-width: 0; display: grid; gap: 3px; }
.v6-name b { color: #252d3a; font-size: 12px; }
.v6-name small { overflow: hidden; max-width: 300px; color: #909aaa; text-overflow: ellipsis; font-size: 9px; }
.v6-switch { position: relative; width: 38px; height: 21px; border: 0; border-radius: 999px; background: #aeb4ba; cursor: pointer; }
.v6-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0003; transition: .18s; }
.v6-switch.on { background: #2581d9; }
.v6-switch.on::after { transform: translateX(17px); }
.v6-row-actions { display: flex; gap: 7px; }
.v6-row-actions button { min-height: 30px; border: 1px solid #9bc4ef; border-radius: 7px; padding: 0 10px; color: #1976d2; background: #fff; cursor: pointer; font-size: 10px; }
.v6-row-actions button.danger { color: #d7353a; border-color: #efb2b4; }
.v6-row-actions button:disabled { opacity: .4; cursor: default; }
.v6-editor-strip { display: grid; grid-template-columns: minmax(180px,1fr) minmax(180px,1.3fr) 110px auto auto; gap: 11px; align-items: end; margin: 0 28px 18px; padding: 18px; border: 1px solid #cfe0f3; border-radius: 11px; background: #f5f9ff; }
.v6-editor-strip > div { display: grid; align-self: center; gap: 4px; }
.v6-editor-strip > div b { font-size: 13px; }
.v6-editor-strip > div small { color: #7d899b; font-size: 9px; }
.v6-editor-strip label, .v6-upload-grid label, .v6-paper-fields label { display: grid; gap: 6px; color: #657287; font-size: 9px; font-weight: 800; }
.v6-inline-editor { display: grid; gap: 20px; border-color: #bcd4ef; box-shadow: 0 10px 30px rgba(29,88,150,.08); }
.v6-inline-head, .v6-section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.v6-inline-head > div, .v6-section-title > div { display: grid; gap: 4px; }
.v6-inline-head b, .v6-section-title b { color: #273247; font-size: 15px; }
.v6-inline-head small, .v6-section-title small { color: #7f8b9d; font-size: 10px; }
.v6-inline-head > button { width: 34px; height: 34px; border: 0; border-radius: 8px; color: #738096; background: #f0f3f7; cursor: pointer; font-size: 21px; }
.v6-upload-grid { display: grid; grid-template-columns: minmax(170px,.7fr) minmax(240px,1.3fr) auto auto; gap: 12px; align-items: end; }
.v6-upload-grid input, .v6-upload-grid select { width: 100%; }
.v6-paper-fields { display: grid; grid-template-columns: minmax(150px,.8fr) minmax(220px,1.4fr) minmax(130px,.7fr) 90px; gap: 12px; align-items: end; }
.v6-paper-fields select, .v6-paper-fields input { width: 100%; }
.v6-paper-fields .wide { grid-column: 1 / -2; }
.v6-paper-fields textarea { width: 100%; height: 74px; padding-top: 10px; resize: vertical; }
.v6-paper-fields .check-line { display: flex; align-items: center; gap: 7px; align-self: center; }
.v6-paper-fields .check-line input { width: auto; height: auto; }
.v6-section-title { padding: 22px 28px; }
.v6-card .key-create-form { margin: 0; }

@media (max-width: 1050px) {
  .v6-admin.admin-layout { grid-template-columns: 205px minmax(0,1fr); }
  .v6-stats { grid-template-columns: repeat(2,1fr); }
  .v6-editor-strip { grid-template-columns: 1fr 1fr; }
  .v6-upload-grid, .v6-paper-fields { grid-template-columns: repeat(2,1fr); }
  .v6-paper-fields .wide { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .v6-admin.admin-layout { display: block; }
  .v6-admin .admin-view { width: calc(100% - 24px); margin-top: 18px; }
  .v6-page-head { align-items: flex-start; }
  .v6-stats { gap: 10px; }
  .v6-stats article { min-height: 88px; padding: 16px; }
  .v6-stats article i { width: 42px; height: 42px; }
  .v6-toolbar, .v6-filters { padding-left: 16px; padding-right: 16px; }
  .v6-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .v6-filters input { width: 100%; }
  .v6-editor-strip { margin-left: 16px; margin-right: 16px; }
  .v6-card { padding: 20px 16px; }
  .v6-table-card { padding: 0; }
}
@media (max-width: 540px) {
  .v6-page-head { display: grid; }
  .v6-stats { grid-template-columns: 1fr; }
  .v6-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .v6-filters, .v6-editor-strip, .v6-upload-grid, .v6-paper-fields, .v6-card .key-create-form { grid-template-columns: 1fr; }
  .v6-editor-strip { align-items: stretch; }
  .v6-page-head h1 { font-size: 24px; }
}

/* V8 final admin cascade */
.v6-admin.admin-layout { grid-template-columns: 216px minmax(0, 1fr); background: #f5f6f8; }
.v6-admin .admin-sidebar { padding: 16px 12px; border-right-color: #e4e7ec; color: #475467; box-shadow: none; }
.v6-admin .admin-sidebar-brand { padding: 4px 8px 18px; }
.v6-admin .admin-sidebar-brand > span { border-radius: 8px; background: var(--blue); }
.v6-admin .admin-sidebar nav { gap: 4px; }
.v6-admin .admin-sidebar nav button { min-height: 42px; border-radius: 7px; color: #475467; }
.v6-admin .admin-sidebar nav button > span { border-radius: 6px; color: #475467; background: #f2f4f7; }
.v6-admin .admin-sidebar nav button:hover { color: var(--ink); background: #f2f4f7; }
.v6-admin .admin-sidebar nav button.active { color: var(--blue); background: var(--blue-soft); }
.v6-admin .admin-sidebar nav button.active > span { color: var(--blue); background: #dcecf6; }
.v6-admin .admin-sidebar footer a, .v6-admin .admin-sidebar footer button { min-height: 40px; border-radius: 7px; }
.v6-admin .admin-top { height: 64px; padding: 0 24px; border-bottom: 1px solid #e4e7ec; box-shadow: none; }
.v6-admin .admin-view { width: min(1440px, calc(100% - 48px)); margin: 28px auto 56px; }
.v6-page { gap: 20px; }
.v6-page-head { align-items: center; }
.v6-page-head p { display: none; }
.v6-page-head h1 { margin: 0 0 5px; font-size: 26px; line-height: 1.25; letter-spacing: -.025em; }
.v6-page-head span { font-size: 13px; }
.v6-head-actions { flex-wrap: wrap; }
.v6-card { padding: 24px; border-color: #e4e7ec; border-radius: var(--radius-panel); box-shadow: 0 1px 2px rgba(18, 31, 48, .04); }
.v6-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid #e4e7ec; border-radius: var(--radius-panel); background: #fff; }
.v6-stats article { min-height: 96px; padding: 18px 20px; border: 0; border-right: 1px solid #e4e7ec; border-radius: 0; box-shadow: none; }
.v6-stats article:last-child { border-right: 0; }
.v6-stats article div { gap: 6px; }
.v6-stats article span { font-size: 12px; }
.v6-stats article b { font-size: 24px; font-variant-numeric: tabular-nums; }
.v6-stats article i { width: 38px; height: 38px; border: 0; border-radius: 8px; color: var(--blue) !important; background: var(--blue-soft) !important; }
.v6-button { min-height: 40px; border-radius: var(--radius-control); padding: 0 14px; font-size: 12px; font-weight: 650; box-shadow: none !important; }
.v6-button.primary { background: var(--blue); }
.v6-button.primary:hover { background: var(--blue-deep); }
.v6-button.success, .v6-button.dark, .v6-button.outline, .v6-button.light { color: #344054; border-color: #d0d5dd; background: #fff; }
.v6-button.success:hover, .v6-button.dark:hover, .v6-button.outline:hover, .v6-button.light:hover { background: #f2f4f7; }
.v6-button.danger { color: var(--red); border-color: #f1b8b3; background: #fff; }
.v6-button.danger:hover { background: var(--red-soft); }
.v6-table-card { padding: 0; }
.v6-toolbar { gap: 8px; padding: 18px 20px 16px; }
.v6-filters { gap: 8px; padding: 16px 20px 12px; background: #f9fafb; }
.v6-filters input, .v6-filters select, .v6-editor-strip input, .v6-upload-grid input, .v6-upload-grid select, .v6-paper-fields input, .v6-paper-fields select, .v6-paper-fields textarea,
.v5-fields input:not([type="checkbox"]), .v5-fields textarea, .site-info-grid input, .key-create-form input, .upload-target-grid select, .level-name-grid input { height: 42px; border-color: #d0d5dd; border-radius: var(--radius-control); color: #344054; font-size: 13px; }
.v6-filters input:focus, .v6-filters select:focus, .v6-editor-strip input:focus, .v6-upload-grid input:focus, .v6-upload-grid select:focus, .v6-paper-fields input:focus, .v6-paper-fields select:focus, .v6-paper-fields textarea:focus,
.v5-fields input:focus, .v5-fields textarea:focus, .site-info-grid input:focus, .key-create-form input:focus { border-color: #6da3c6; box-shadow: 0 0 0 3px rgba(23, 105, 170, .12); }
.v6-status-tabs { padding: 2px 20px 16px; background: #f9fafb; }
.v6-status-tabs button { min-height: 36px; border-radius: 7px; font-size: 12px; }
.v6-status-tabs button.active { color: var(--blue); border-color: #8db9d5; background: var(--blue-soft); }
.table-wrap { max-width: 100%; overflow: auto; scrollbar-width: thin; }
.v6-table { font-size: 12px; }
.v6-table th { position: sticky; top: 0; z-index: 1; padding: 11px 14px; border-top: 0; color: #667085; background: #f9fafb; font-size: 11px; font-weight: 650; }
.v6-table td { padding: 13px 14px; color: #475467; border-bottom-color: #eaecf0; }
.v6-table tbody tr:last-child td { border-bottom: 0; }
.v6-table tbody tr:hover { background: #f8fbfd; }
.v6-name > span, .v6-name.paper > span { border-radius: 8px; color: var(--blue); background: var(--blue-soft); }
.v6-name b { font-size: 13px; }
.v6-name small { font-size: 11px; }
.v6-switch { width: 38px; height: 22px; background: #98a2b3; }
.v6-switch.on { background: var(--blue); }
.v6-row-actions { gap: 6px; }
.v6-row-actions button { min-height: 32px; border-color: #a9c9dd; border-radius: 6px; color: var(--blue); font-size: 11px; }
.v6-row-actions button:hover { background: var(--blue-soft); }
.v6-row-actions button.danger:hover { background: var(--red-soft); }
.v6-editor-strip { margin: 0 20px 16px; padding: 16px; border-color: #b9d4e4; border-radius: 9px; background: #f4f9fc; }
.v6-editor-strip > div b, .v6-inline-head b, .v6-section-title b { font-size: 15px; }
.v6-editor-strip > div small, .v6-inline-head small, .v6-section-title small { font-size: 12px; }
.v6-editor-strip label, .v6-upload-grid label, .v6-paper-fields label,
.v5-fields label, .site-info-grid label, .key-create-form label, .upload-target-grid label, .level-name-grid label { color: #475467; font-size: 12px; font-weight: 650; }
.v6-inline-editor { gap: 20px; border-color: #cadfe9; box-shadow: 0 8px 24px rgba(18, 67, 96, .06); }
.v6-inline-head > button { border-radius: 7px; }
.v6-section-title { padding: 18px 20px; }
.key-code-button { min-width: 220px; border-radius: 6px; }
.key-code-button.available:hover { background: #f4f9fc; }
.key-code-button b { font-size: 12px; }
.key-code-button small { color: var(--blue); font-size: 11px; }
.empty-table { padding: 48px 20px !important; color: #667085; }

@media (max-width: 1280px) {
  .v6-admin .admin-view { width: calc(100% - 40px); }
  .v6-stats article { padding-inline: 16px; }
}
@media (max-width: 1024px) {
  .v6-admin.admin-layout { grid-template-columns: 196px minmax(0, 1fr); }
  .v6-stats { grid-template-columns: repeat(2, 1fr); }
  .v6-stats article:nth-child(2) { border-right: 0; }
  .v6-stats article:nth-child(-n+2) { border-bottom: 1px solid #e4e7ec; }
}
@media (max-width: 768px) {
  .v6-admin.admin-layout { display: block; }
  .v6-admin .admin-top { padding-inline: 16px; }
  .v6-admin .admin-view { width: calc(100% - 24px); margin: 20px auto 44px; }
  .v6-page-head { align-items: flex-start; }
  .v6-card { padding: 20px 16px; }
  .v6-table-card { padding: 0; }
  .v6-toolbar, .v6-filters, .v6-status-tabs, .v6-section-title { padding-left: 16px; padding-right: 16px; }
  .v6-editor-strip { margin-inline: 16px; }
  .v6-table { min-width: 760px; }
}
@media (max-width: 430px) {
  .v6-page-head { display: grid; }
  .v6-page-head h1 { font-size: 23px; }
  .v6-head-actions, .v6-head-actions .v6-button { width: 100%; }
  .v6-stats article { min-width: 0; min-height: 82px; padding: 14px; }
  .v6-stats article b { font-size: 21px; }
  .v6-stats article i { width: 34px; height: 34px; }
  .v6-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .v6-toolbar .v6-button { width: 100%; padding-inline: 8px; white-space: normal; line-height: 1.25; }
  .v6-filters, .v6-editor-strip, .v6-upload-grid, .v6-paper-fields, .v6-card .key-create-form { grid-template-columns: 1fr; }
  .v6-filters input, .v6-filters select, .v6-filters .v6-button { width: 100%; min-width: 0; }
}
@media (max-width: 390px) {
  .v6-admin .admin-view { width: calc(100% - 20px); }
}
@media (max-width: 375px) {
  .v6-toolbar { grid-template-columns: 1fr; }
}

/* Search + appearance controls (V9) */
html { color-scheme: light dark; }
.theme-toggle {
  min-width: 58px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--muted);
  background: var(--paper);
  cursor: pointer;
  font: 650 12px/1 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  transition: border-color .16s, color .16s, background .16s;
}
.theme-toggle:hover { border-color: var(--blue); color: var(--blue); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle:focus-visible { outline: 3px solid rgba(23, 105, 170, .18); outline-offset: 2px; }
.admin-top > .theme-toggle { display: block; margin-left: auto; border: 1px solid var(--line); font-size: 12px; }

.question-search {
  margin: 18px -4px 0;
  padding: 18px 4px 0;
  border-top: 1px solid var(--line);
}
.question-search > label {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.question-search > div { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
.search-glyph {
  position: absolute;
  left: 12px;
  top: 50%;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transform: translateY(-52%);
  pointer-events: none;
}
.question-search input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 34px;
  outline: 0;
  color: var(--ink);
  background: var(--paper);
  font: 500 13px/1 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  appearance: none;
}
.question-search input::-webkit-search-cancel-button { opacity: .58; cursor: pointer; }
.question-search input::placeholder { color: color-mix(in srgb, var(--muted) 76%, transparent); }
.question-search input:hover { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.question-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 105, 170, .13); }
.question-search button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  color: var(--muted);
  background: var(--paper);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.question-search button[type="submit"] { border-color: var(--blue); color: #fff; background: var(--blue); }
.question-search button:hover { border-color: var(--blue); color: var(--blue); }
.question-search button[type="submit"]:hover { color: #fff; background: var(--blue-deep); }
.question-search button:focus-visible { outline: 3px solid rgba(23, 105, 170, .18); outline-offset: 2px; }
.question-search > p { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.question-search .search-clear { color: var(--blue); background: transparent; }
.empty-clear-search {
  margin-top: 18px;
  min-height: 38px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  padding: 0 14px;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
  font-weight: 700;
}

/* Calm dark palette; manual selection always wins over system preference. */
html[data-resolved="dark"] {
  --ink: #f2f4f7;
  --muted: #98a2b3;
  --line: #344054;
  --blue: #5b9fc8;
  --blue-deep: #77b3d8;
  --blue-soft: #183247;
  --paper: #182230;
  --canvas: #101828;
  --green: #63c48f;
  --green-soft: #17382a;
  --red: #ff8b83;
  --red-soft: #402320;
  --amber: #efbd65;
  color-scheme: dark;
}
html[data-resolved="light"] { color-scheme: light; }
html[data-resolved="dark"] body,
html[data-resolved="dark"] .admin-main,
html[data-resolved="dark"] .v6-admin { background: var(--canvas); color: var(--ink); }
html[data-resolved="dark"] .topbar,
html[data-resolved="dark"] .admin-top {
  border-color: var(--line);
  background: rgba(24, 34, 48, .94);
  box-shadow: none;
}
html[data-resolved="dark"] .topbar-title,
html[data-resolved="dark"] .topbar p,
html[data-resolved="dark"] .admin-top p { color: var(--ink); }
html[data-resolved="dark"] .topbar small,
html[data-resolved="dark"] .admin-top small { color: var(--muted); }
html[data-resolved="dark"] .side-panel,
html[data-resolved="dark"] .question-card,
html[data-resolved="dark"] .empty-practice,
html[data-resolved="dark"] .category-picker,
html[data-resolved="dark"] .v6-card,
html[data-resolved="dark"] .v6-table-card,
html[data-resolved="dark"] .v6-stats,
html[data-resolved="dark"] .admin-card,
html[data-resolved="dark"] .panel-card,
html[data-resolved="dark"] .modal-card {
  border-color: var(--line);
  background: var(--paper);
  box-shadow: none;
}
html[data-resolved="dark"] .category-company,
html[data-resolved="dark"] .category-tabs button,
html[data-resolved="dark"] .category-picker select,
html[data-resolved="dark"] .choice,
html[data-resolved="dark"] input,
html[data-resolved="dark"] select,
html[data-resolved="dark"] textarea {
  border-color: var(--line);
  color: var(--ink);
  background: #1d2939;
}
html[data-resolved="dark"] .category-picker,
html[data-resolved="dark"] .choice:hover { background: #1b2736; }
html[data-resolved="dark"] .category-tabs button.active { color: #fff; background: var(--blue); }
html[data-resolved="dark"] .choice-letter,
html[data-resolved="dark"] .choice kbd { border-color: #475467; color: #d0d5dd; background: #101828; }
html[data-resolved="dark"] .choice.correct .choice-letter,
html[data-resolved="dark"] .choice.wrong .choice-letter { background: #101828; }
html[data-resolved="dark"] .v6-table thead,
html[data-resolved="dark"] table thead,
html[data-resolved="dark"] .v6-status-tabs { background: #1b2736; }
html[data-resolved="dark"] .v6-table th,
html[data-resolved="dark"] .v6-table td,
html[data-resolved="dark"] table th,
html[data-resolved="dark"] table td,
html[data-resolved="dark"] .v6-section-title,
html[data-resolved="dark"] .v6-toolbar,
html[data-resolved="dark"] .v6-filters { border-color: var(--line); color: var(--ink); }
html[data-resolved="dark"] .v6-table tbody tr:hover,
html[data-resolved="dark"] table tbody tr:hover { background: #1b2736; }
html[data-resolved="dark"] .v6-button.secondary,
html[data-resolved="dark"] .v6-button.ghost,
html[data-resolved="dark"] .admin-top button { border-color: var(--line); color: var(--ink); background: #1d2939; }
html[data-resolved="dark"] .modal-backdrop { background: rgba(3, 8, 16, .72); }

/* Login follows the same appearance preference without changing its flow. */
html[data-resolved="light"] .auth-page { color: #17202f; background: #f5f6f8; }
html[data-resolved="light"] .auth-card {
  border-color: #dfe3e8;
  color: #17202f;
  background: #fff;
  box-shadow: 0 20px 52px rgba(18, 31, 48, .09);
}
html[data-resolved="light"] .auth-brand small,
html[data-resolved="light"] .auth-intro,
html[data-resolved="light"] .auth-notes,
html[data-resolved="light"] .auth-foot { color: #667085; }
html[data-resolved="light"] .auth-card label { color: #344054; }
html[data-resolved="light"] .auth-card input { border-color: #d0d5dd; color: #17202f; background: #fff; }
html[data-resolved="light"] .auth-card input::placeholder { color: #98a2b3; }
html[data-resolved="light"] .auth-notes { border-color: #e4e7ec; }

@media (max-width: 768px) {
  .theme-toggle { min-width: 54px; padding-inline: 8px; }
}
@media (max-width: 430px) {
  .question-search { margin-inline: 0; padding-inline: 0; }
  .question-search > div { grid-template-columns: 1fr 1fr; }
  .question-search input, .question-search .search-glyph { grid-column: 1 / -1; }
  .question-search .search-glyph { z-index: 1; }
  .question-search button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .question-search input, .question-search button { transition: none; }
}

/* ==========================================================
   V10 macOS native application design system
   ========================================================== */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-muted: #f2f2f4;
  --surface-elevated: #ffffff;
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #8e8e93;
  --divider: rgba(60, 60, 67, .14);
  --border: rgba(60, 60, 67, .18);
  --accent: #007aff;
  --accent-fill: rgba(0, 122, 255, .12);
  --success-native: #248a3d;
  --warning-native: #b25000;
  --danger-native: #d70015;
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 16px;
  --radius-modal: 20px;
  --shadow-float: 0 18px 55px rgba(0, 0, 0, .14);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--divider);
  --blue: var(--accent);
  --blue-deep: #0068d8;
  --blue-soft: var(--accent-fill);
  --paper: var(--surface);
  --canvas: var(--bg);
}
html[data-resolved="dark"] {
  --bg: #1c1c1e;
  --surface: #242426;
  --surface-muted: #2c2c2e;
  --surface-elevated: #323235;
  --text-primary: #f5f5f7;
  --text-secondary: #aeaeb2;
  --text-tertiary: #8e8e93;
  --divider: rgba(84, 84, 88, .62);
  --border: rgba(255, 255, 255, .12);
  --accent: #0a84ff;
  --accent-fill: rgba(10, 132, 255, .17);
  --success-native: #30d158;
  --warning-native: #ff9f0a;
  --danger-native: #ff453a;
  --shadow-float: 0 22px 64px rgba(0, 0, 0, .48);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--divider);
  --blue: var(--accent);
  --blue-deep: #409cff;
  --blue-soft: var(--accent-fill);
  --paper: var(--surface);
  --canvas: var(--bg);
  --green: var(--success-native);
  --green-soft: rgba(48, 209, 88, .13);
  --red: var(--danger-native);
  --red-soft: rgba(255, 69, 58, .14);
}

html, body { min-height: 100%; }
body {
  color: var(--text-primary);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--text-primary); background: var(--accent-fill); }

/* Native titlebar / toolbar */
.topbar,
.admin-top {
  min-width: 0;
  height: 64px;
  border-color: var(--divider);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: none;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.topbar { padding-inline: max(24px, calc((100vw - 1440px) / 2)); }
.brand-mark,
.admin-sidebar-brand > span,
.auth-brand > span {
  border-radius: 10px;
  background: var(--accent);
  box-shadow: none;
}
.brand strong, .topbar p, .admin-top p { color: var(--text-primary); font-weight: 600; letter-spacing: -.01em; }
.brand small, .topbar small, .admin-top small { color: var(--text-secondary); }
.topbar-actions { gap: 8px; }
.timer-badge, .card-badge {
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.timer-badge b { color: var(--text-primary); }
.theme-toggle,
.notice-button,
.ip-reset-button,
.text-button,
.mobile-nav-button {
  min-height: 34px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--divider);
  font-size: 12px;
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease, transform .12s ease;
}
.theme-toggle:hover,
.notice-button:hover,
.ip-reset-button:hover,
.text-button:hover { color: var(--text-primary); background: color-mix(in srgb, var(--surface-muted) 72%, var(--accent-fill)); }
.theme-toggle:active,
.notice-button:active,
.ip-reset-button:active { transform: scale(.98); }

/* Front application layout */
.workspace {
  width: min(1440px, calc(100% - 48px));
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  margin: 24px auto 56px;
}
.side-panel {
  top: 88px;
  max-height: calc(100dvh - 112px);
  padding: 16px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: none;
}
.side-head { padding: 4px 4px 16px; border-color: var(--divider); }
.side-head strong { color: var(--text-primary); font-weight: 600; }
.kicker { color: var(--text-tertiary); font-weight: 600; letter-spacing: .03em; }
.category-picker {
  margin: 0 0 14px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  color: var(--text-primary);
  background: transparent;
}
.category-picker > label { color: var(--text-tertiary); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.category-company,
.category-picker select {
  height: 36px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--divider);
  font-size: 13px;
  font-weight: 500;
}
.category-tabs { gap: 4px; padding: 3px; border-radius: 9px; background: var(--surface-muted); }
.category-tabs button {
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  color: var(--text-secondary);
  background: transparent;
  box-shadow: none;
  font-weight: 500;
}
.category-tabs button.active {
  color: var(--text-primary);
  background: var(--surface-elevated);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 1px var(--divider);
}
.category-picker p { color: var(--text-tertiary); }

/* macOS search field: one full-width control, no clipped placeholder */
.question-search {
  margin: 0 0 14px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid var(--divider);
}
.question-search > label { margin-bottom: 7px; color: var(--text-tertiary); font-size: 11px; font-weight: 500; }
.question-search > .search-field-shell {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.question-search .search-glyph {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--text-tertiary);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
  transform: translateY(-50%);
}
.question-search input {
  display: block;
  width: 100%;
  height: 36px;
  min-width: 0;
  border: 0;
  border-radius: 9px;
  padding: 0 62px 0 34px;
  color: var(--text-primary);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--divider);
  font-size: 13px;
  line-height: normal;
  text-overflow: ellipsis;
}
.question-search input::placeholder { color: var(--text-tertiary); opacity: 1; }
.question-search input:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-fill); }
.question-search .search-submit {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  width: 52px;
  min-height: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  padding: 0;
  color: #fff;
  background: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
.question-search .search-submit:hover { color: #fff; background: color-mix(in srgb, var(--accent) 86%, #000); }
.question-search .search-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.question-search .search-meta p { min-width: 0; margin: 0; color: var(--text-tertiary); font-size: 10px; line-height: 1.4; }
.question-search .search-clear {
  min-height: 24px;
  border: 0;
  padding: 0 3px;
  color: var(--accent);
  background: transparent;
  font-size: 10px;
  font-weight: 500;
}

.progress-track { background: var(--surface-muted); }
.progress-track > i { background: var(--accent); }
.guest-fixed-card {
  border-color: var(--divider);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--surface-muted);
}
.guest-fixed-card b { color: var(--accent); }
.scope-list { gap: 2px; }
.scope-list button,
.question-grid button {
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: transparent;
  box-shadow: none;
}
.scope-list button:hover,
.question-grid button:hover { color: var(--text-primary); background: var(--surface-muted); }
.scope-list button.active,
.question-grid button.current { color: var(--accent); background: var(--accent-fill); }
.scope-list b,
.scope-list .active b { color: var(--text-secondary); background: var(--surface-muted); }
.scope-list .active b { color: var(--accent); background: var(--surface); }

.practice-area { min-width: 0; }
.practice-toolbar { margin-bottom: 12px; }
.question-card {
  padding: 32px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: none;
}
.question-meta { color: var(--text-secondary); }
.question-card h1 { margin: 20px 0 28px; color: var(--text-primary); font-weight: 600; letter-spacing: -.012em; }
.choices {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.choice {
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  color: var(--text-primary);
  background: transparent;
  box-shadow: none;
  transition: background-color .16s ease;
}
.choice:last-child { border-bottom: 0; }
.choice:hover { border-color: var(--divider); background: var(--surface-muted); box-shadow: none; }
.choice.selected { color: var(--text-primary); background: var(--accent-fill); }
.choice-letter {
  border: 0;
  border-radius: 50%;
  color: var(--text-secondary);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.choice.selected .choice-letter { color: #fff; background: var(--accent); box-shadow: none; }
.choice kbd { border-color: var(--divider); color: var(--text-tertiary); background: var(--surface-muted); }
.answer-panel, .subjective-area, .sample-answers {
  border-color: var(--divider);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--surface-muted);
  box-shadow: none;
}
.question-footer { border-color: var(--divider); }
.primary-button, .guest-button, .retry-button {
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  box-shadow: none;
}
.ghost-button, .favorite-button, .reset-set, .back-link {
  border-color: var(--divider);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: var(--surface-muted);
  box-shadow: none;
}
.empty-practice {
  min-height: 440px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  background: var(--surface);
}
.empty-practice h1 { color: var(--text-primary); font-weight: 600; }

/* System Settings style admin shell */
.v6-admin.admin-layout {
  min-height: 100dvh;
  grid-template-columns: 252px minmax(0, 1fr);
  color: var(--text-primary);
  background: var(--bg);
}
.admin-sidebar {
  z-index: 20;
  padding: 18px 12px 14px;
  border-right: 1px solid var(--divider);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-muted) 92%, transparent);
  box-shadow: none;
  backdrop-filter: saturate(150%) blur(24px);
  -webkit-backdrop-filter: saturate(150%) blur(24px);
}
.admin-sidebar-brand { padding: 4px 8px 18px; border-color: var(--divider); }
.admin-sidebar-brand > span { width: 36px; height: 36px; color: #fff; font-size: 19px; }
.admin-sidebar-brand b { color: var(--text-primary); font-weight: 600; }
.admin-sidebar-brand small { color: var(--text-secondary); }
.admin-sidebar nav { gap: 3px; padding-top: 16px; }
.admin-sidebar nav button {
  min-height: 42px;
  gap: 10px;
  border-radius: 9px;
  padding: 5px 8px;
  color: var(--text-primary);
  background: transparent;
  font-weight: 500;
  transition: background-color .16s ease, color .16s ease;
}
.admin-sidebar nav button > span {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.admin-sidebar nav button b { font-weight: 500; }
.admin-sidebar nav button:hover { color: var(--text-primary); background: color-mix(in srgb, var(--surface) 62%, transparent); }
.admin-sidebar nav button.active { color: var(--accent); background: var(--accent-fill); box-shadow: none; }
.admin-sidebar nav button.active > span { color: var(--accent); background: color-mix(in srgb, var(--surface) 74%, transparent); }
.admin-sidebar footer { border-color: var(--divider); }
.admin-sidebar footer a,
.admin-sidebar footer button {
  border-color: var(--divider);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface) 48%, transparent);
}
.admin-main { min-width: 0; color: var(--text-primary); background: var(--bg); }
.admin-top { position: sticky; top: 0; z-index: 15; padding: 0 32px; }
.admin-top > .theme-toggle { margin-left: auto; color: var(--text-primary); background: var(--surface-muted); }
.v6-admin .admin-view { width: min(1180px, calc(100% - 64px)); margin: 36px auto 64px; }
.v6-page { gap: 22px; }
.v6-page-head { margin: 0; }
.v6-page-head h1 { color: var(--text-primary); font-size: 30px; font-weight: 600; letter-spacing: -.025em; }
.v6-page-head p { max-width: 650px; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.v6-card,
.v6-table-card,
.v6-stats {
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  background: var(--surface);
  box-shadow: none;
}
.v6-card { padding: 22px; }
.v6-table-card { overflow: hidden; padding: 0; }
.v6-stats { overflow: hidden; gap: 0; }
.v6-stats article {
  border-color: var(--divider);
  color: var(--text-primary);
  background: transparent;
}
.v6-stats article small { color: var(--text-secondary); }
.v6-stats article b { color: var(--text-primary); font-weight: 600; }
.v6-stats article i { border-radius: 9px; color: var(--accent); background: var(--accent-fill); }
.v6-section-title,
.v6-toolbar,
.v6-filters,
.v6-status-tabs { border-color: var(--divider); background: transparent; }
.v6-section-title h2,
.v6-inline-head b,
.set-items-title h3 { color: var(--text-primary); font-weight: 600; }
.v6-section-title p,
.v6-inline-head small,
.empty-editor,
.empty-table,
.saving-note { color: var(--text-secondary); }
.v6-toolbar { gap: 8px; }
.v6-button,
.v6-head-actions .v6-button {
  min-height: 36px;
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  transition: background-color .16s ease, transform .12s ease;
}
.v6-button.primary { border-color: var(--accent); color: #fff; background: var(--accent); }
.v6-button.secondary,
.v6-button.ghost,
.v6-row-actions button,
.item-actions button {
  border-color: var(--divider);
  color: var(--text-primary);
  background: var(--surface-muted);
}
.v6-button.danger, .v6-row-actions .danger, .item-actions .danger { color: var(--danger-native); background: color-mix(in srgb, var(--danger-native) 10%, transparent); }
.v6-button:active { transform: scale(.98); }

.v6-filters input,
.v6-filters select,
.v6-editor-strip input,
.v6-editor-strip select,
.v6-upload-grid input,
.v6-upload-grid select,
.v6-paper-fields input,
.v6-paper-fields select,
.v6-paper-fields textarea,
.v5-fields input,
.v5-fields select,
.v5-fields textarea,
.site-info-grid input,
.site-info-grid textarea,
.key-create-form input,
.key-create-form select,
.notice-admin-grid input,
.notice-admin-grid textarea,
.question-adder input,
.question-adder select {
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.v6-filters input:focus,
.v6-filters select:focus,
.v6-editor-strip input:focus,
.v6-editor-strip select:focus,
.v6-upload-grid input:focus,
.v6-upload-grid select:focus,
.v6-paper-fields input:focus,
.v6-paper-fields select:focus,
.v6-paper-fields textarea:focus,
.site-info-grid input:focus,
.site-info-grid textarea:focus,
.key-create-form input:focus,
.question-adder input:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-fill);
}
.v6-editor-strip,
.v6-inline-editor,
.icon-editor,
.notice-preview {
  border-color: var(--divider);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--surface-muted);
  box-shadow: none;
}
.v6-editor-strip label,
.v6-upload-grid label,
.v6-paper-fields label,
.v5-fields label,
.site-info-grid label,
.key-create-form label,
.upload-target-grid label,
.level-name-grid label,
.notice-admin-grid label { color: var(--text-secondary); font-weight: 500; }
.icon-editor input[type="file"] { color: var(--text-secondary); background: var(--surface); }
input[type="file"]::file-selector-button {
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text-primary);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.table-wrap { scrollbar-color: var(--text-tertiary) transparent; }
.v6-table { color: var(--text-primary); background: transparent; }
.v6-table thead, table thead { background: var(--surface-muted); }
.v6-table th, .v6-table td, table th, table td { border-color: var(--divider); color: var(--text-primary); }
.v6-table th, table th { color: var(--text-secondary); font-weight: 500; }
.v6-table tbody tr, table tbody tr { background: transparent; }
.v6-table tbody tr:hover, table tbody tr:hover { background: color-mix(in srgb, var(--surface-muted) 72%, transparent); }
.v6-status-tabs button { border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; }
.v6-status-tabs button.active { color: var(--accent); background: var(--accent-fill); }
.v6-switch { background: color-mix(in srgb, var(--text-tertiary) 36%, transparent); }
.v6-switch.on { background: var(--accent); }
.status.success { color: var(--success-native); background: color-mix(in srgb, var(--success-native) 12%, transparent); }
.status.danger { color: var(--danger-native); background: color-mix(in srgb, var(--danger-native) 11%, transparent); }

/* Native modal and sign-in sheet */
.notice-backdrop, .modal-backdrop { background: rgba(0, 0, 0, .38); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.notice-dialog, .modal-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-modal);
  color: var(--text-primary);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-float);
}
.auth-page { color: var(--text-primary); background: var(--bg); }
.auth-card {
  border: 1px solid var(--divider);
  border-radius: var(--radius-modal);
  color: var(--text-primary);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-float);
  backdrop-filter: none;
}
.auth-card h1, .auth-brand b { color: var(--text-primary); }
.auth-intro, .auth-brand small, .auth-notes, .auth-foot { color: var(--text-secondary); }
.auth-card label { color: var(--text-secondary); font-weight: 500; }
.auth-card input {
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--divider);
}
.auth-card input:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-fill); }
.auth-card form > button { border-radius: var(--radius-sm); background: var(--accent); box-shadow: none; }
.auth-notes { border-color: var(--divider); }

/* Explicit immersive dark repair for legacy hard-coded colors */
html[data-resolved="dark"] .admin-sidebar,
html[data-resolved="dark"] .admin-main,
html[data-resolved="dark"] .admin-view,
html[data-resolved="dark"] .v6-page,
html[data-resolved="dark"] .page-shell,
html[data-resolved="dark"] .workspace,
html[data-resolved="dark"] .practice-area { color: var(--text-primary); }
html[data-resolved="dark"] .admin-sidebar { background: rgba(36, 36, 38, .96); }
html[data-resolved="dark"] .topbar,
html[data-resolved="dark"] .admin-top { background: rgba(36, 36, 38, .84); }
html[data-resolved="dark"] .side-panel,
html[data-resolved="dark"] .question-card,
html[data-resolved="dark"] .empty-practice,
html[data-resolved="dark"] .v6-card,
html[data-resolved="dark"] .v6-table-card,
html[data-resolved="dark"] .v6-stats,
html[data-resolved="dark"] .auth-card,
html[data-resolved="dark"] .notice-dialog { color: var(--text-primary); background: var(--surface); }
html[data-resolved="dark"] h1,
html[data-resolved="dark"] h2,
html[data-resolved="dark"] h3,
html[data-resolved="dark"] h4,
html[data-resolved="dark"] strong,
html[data-resolved="dark"] b,
html[data-resolved="dark"] label { color: var(--text-primary); }
html[data-resolved="dark"] p,
html[data-resolved="dark"] small,
html[data-resolved="dark"] .empty-table,
html[data-resolved="dark"] .empty-editor { color: var(--text-secondary); }
html[data-resolved="dark"] input,
html[data-resolved="dark"] select,
html[data-resolved="dark"] textarea,
html[data-resolved="dark"] .icon-editor input[type="file"] { color: var(--text-primary); background: var(--surface-muted); }
html[data-resolved="dark"] .v5-fields input:not([type="checkbox"]),
html[data-resolved="dark"] .v5-fields textarea,
html[data-resolved="dark"] .site-info-grid input,
html[data-resolved="dark"] .key-create-form input,
html[data-resolved="dark"] .upload-target-grid select,
html[data-resolved="dark"] .level-name-grid input {
  border-color: var(--divider);
  color: var(--text-primary);
  background: var(--surface-muted);
}
html[data-resolved="dark"] .admin-sidebar .admin-sidebar-brand b { color: var(--text-primary); }
html[data-resolved="dark"] .admin-sidebar .admin-sidebar-brand small { color: var(--text-secondary); }
html[data-resolved="dark"] .guest-fixed-card,
html[data-resolved="dark"] .side-panel .reset-set,
html[data-resolved="dark"] .question-card .favorite-button,
html[data-resolved="dark"] .question-footer .ghost-button,
html[data-resolved="dark"] .topbar .theme-toggle,
html[data-resolved="dark"] .topbar .notice-button,
html[data-resolved="dark"] .topbar .ip-reset-button,
html[data-resolved="dark"] .topbar .text-button,
html[data-resolved="dark"] .topbar .mobile-nav-button,
html[data-resolved="dark"] .topbar .timer-badge,
html[data-resolved="dark"] .topbar .card-badge {
  border-color: var(--divider);
  color: var(--text-primary);
  background: var(--surface-muted);
  box-shadow: inset 0 0 0 1px var(--divider);
}
html[data-resolved="dark"] .scope-list b,
html[data-resolved="dark"] .scope-list .active b {
  color: var(--text-secondary);
  background: var(--surface-elevated);
}
html[data-resolved="dark"] .scope-list .active b { color: var(--accent); }
html[data-resolved="dark"] .topbar button:not(.primary-button),
html[data-resolved="dark"] .admin-top .theme-toggle,
html[data-resolved="dark"] .admin-sidebar footer a,
html[data-resolved="dark"] .admin-sidebar footer button,
html[data-resolved="dark"] .side-panel .reset-set,
html[data-resolved="dark"] .practice-area .favorite-button,
html[data-resolved="dark"] .question-footer .ghost-button {
  border-color: var(--divider) !important;
  color: var(--text-primary) !important;
  background: var(--surface-muted) !important;
  box-shadow: inset 0 0 0 1px var(--divider) !important;
}

@media (max-width: 1280px) {
  .workspace { width: calc(100% - 40px); grid-template-columns: 280px minmax(0, 1fr); gap: 20px; }
  .v6-admin .admin-view { width: calc(100% - 48px); }
}
@media (max-width: 1024px) {
  .v6-admin.admin-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .workspace { grid-template-columns: 260px minmax(0, 1fr); }
  .question-card { padding: 28px 24px; }
}
@media (max-width: 768px) {
  .topbar { height: auto; min-height: 60px; padding: 10px 16px; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .workspace { width: calc(100% - 24px); display: block; margin-top: 14px; }
  .side-panel { top: 0; max-height: 100dvh; border-radius: 0 16px 16px 0; }
  .question-card { padding: 22px 18px; border-radius: 14px; }
  .v6-admin.admin-layout { display: block; }
  .admin-top { padding-inline: 16px; }
  .v6-admin .admin-view { width: calc(100% - 24px); margin: 24px auto 48px; }
  .v6-page-head h1 { font-size: 27px; }
}
@media (max-width: 430px) {
  .topbar-actions { width: 100%; justify-content: flex-start; }
  .timer-badge, .card-badge { flex: 1 1 auto; }
  .question-search > .search-field-shell { display: block; }
  .question-search input { grid-column: auto; }
  .question-search .search-glyph { grid-column: auto; }
  .question-search .search-submit { width: 52px; }
  .choice { grid-template-columns: 34px minmax(0, 1fr); padding: 12px; }
  .choice kbd { display: none; }
  .v6-card { padding: 18px 14px; }
  .v6-toolbar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 375px) {
  .v6-toolbar { grid-template-columns: 1fr; }
  .question-card h1 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================
   V11 iOS Dark Mode — immersive admin repair
   ========================================================== */
html[data-resolved="dark"] {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-muted: #2c2c2e;
  --surface-elevated: #2c2c2e;
  --text-primary: #ffffff;
  --text-secondary: rgba(235, 235, 245, .72);
  --text-tertiary: #8e8e93;
  --divider: rgba(84, 84, 88, .35);
  --border: transparent;
  --accent: #0a84ff;
  --accent-fill: rgba(10, 132, 255, .20);
  --success-native: #30d158;
  --danger-native: #ff453a;
  color-scheme: dark;
}
html[data-resolved="dark"],
html[data-resolved="dark"] body,
html[data-resolved="dark"] .admin-body,
html[data-resolved="dark"] .admin-layout,
html[data-resolved="dark"] .admin-main,
html[data-resolved="dark"] .admin-view,
html[data-resolved="dark"] .v6-page,
html[data-resolved="dark"] .page-shell,
html[data-resolved="dark"] .workspace,
html[data-resolved="dark"] .practice-area {
  background-color: #000000 !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

html[data-resolved="dark"] .admin-sidebar {
  border: 0 !important;
  border-right: 0 !important;
  color: #fff;
  background: #1c1c1e !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04) !important;
}
html[data-resolved="dark"] .admin-sidebar-brand,
html[data-resolved="dark"] .admin-sidebar footer { border-color: rgba(84, 84, 88, .35) !important; }
html[data-resolved="dark"] .admin-sidebar nav button { border: 0 !important; color: rgba(235, 235, 245, .86); }
html[data-resolved="dark"] .admin-sidebar nav button > span {
  border: 0 !important;
  color: rgba(235, 235, 245, .72);
  background: rgba(120, 120, 128, .18) !important;
  box-shadow: none !important;
}
html[data-resolved="dark"] .admin-sidebar nav button:hover { background: rgba(255, 255, 255, .05) !important; }
html[data-resolved="dark"] .admin-sidebar nav button.active {
  color: #fff;
  background: rgba(10, 132, 255, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
html[data-resolved="dark"] .admin-sidebar nav button.active > span { color: #0a84ff; background: rgba(10, 132, 255, .16) !important; }
html[data-resolved="dark"] .admin-sidebar footer a,
html[data-resolved="dark"] .admin-sidebar footer button {
  border: 0 !important;
  color: rgba(235, 235, 245, .72) !important;
  background: rgba(120, 120, 128, .18) !important;
  box-shadow: none !important;
}

html[data-resolved="dark"] .admin-top {
  border: 0 !important;
  background: rgba(28, 28, 30, .92) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05) !important;
}
html[data-resolved="dark"] .admin-top .theme-toggle {
  border: 0 !important;
  color: rgba(235, 235, 245, .86) !important;
  background: rgba(120, 120, 128, .24) !important;
  box-shadow: none !important;
}

/* Statistics become four independent iOS surfaces. */
html[data-resolved="dark"] .v6-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-resolved="dark"] .v6-stats article {
  min-height: 112px;
  border: 0 !important;
  border-radius: 16px;
  color: #fff;
  background: #1c1c1e !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
html[data-resolved="dark"] .v6-stats article span { color: #8e8e93; font-weight: 500; }
html[data-resolved="dark"] .v6-stats article b { color: #fff; }
html[data-resolved="dark"] .v6-stats article i {
  border: 0 !important;
  border-radius: 12px;
  color: #0a84ff !important;
  background: rgba(10, 132, 255, .16) !important;
  box-shadow: none !important;
}

/* Main content surface — no bright stroke. */
html[data-resolved="dark"] .v6-card,
html[data-resolved="dark"] .v6-table-card {
  border: 0 !important;
  border-radius: 16px;
  color: #fff;
  background: #1c1c1e !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .40), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
html[data-resolved="dark"] .v6-toolbar,
html[data-resolved="dark"] .v6-filters,
html[data-resolved="dark"] .v6-status-tabs,
html[data-resolved="dark"] .v6-section-title {
  border: 0 !important;
  background: transparent !important;
}
html[data-resolved="dark"] .v6-toolbar { padding-bottom: 14px; }
html[data-resolved="dark"] .v6-filters { padding-top: 0; padding-bottom: 18px; }

/* iOS button hierarchy. */
html[data-resolved="dark"] .v6-toolbar .v6-button,
html[data-resolved="dark"] .v6-head-actions .v6-button,
html[data-resolved="dark"] .v6-filters .v6-button {
  min-height: 42px;
  border: 0 !important;
  border-radius: 12px;
  box-shadow: none !important;
  font-weight: 500;
}
html[data-resolved="dark"] .v6-button.primary {
  color: #fff !important;
  background: #0a84ff !important;
}
html[data-resolved="dark"] .v6-button.success,
html[data-resolved="dark"] .v6-button.dark,
html[data-resolved="dark"] .v6-button.outline,
html[data-resolved="dark"] .v6-button.light {
  color: rgba(235, 235, 245, .92) !important;
  background: rgba(120, 120, 128, .24) !important;
}
html[data-resolved="dark"] .v6-button.success:hover,
html[data-resolved="dark"] .v6-button.dark:hover,
html[data-resolved="dark"] .v6-button.outline:hover,
html[data-resolved="dark"] .v6-button.light:hover { background: rgba(120, 120, 128, .34) !important; }
html[data-resolved="dark"] .v6-button.danger {
  color: #ff453a !important;
  background: rgba(255, 69, 58, .15) !important;
}

/* Inputs and filters use tertiary system background. */
html[data-resolved="dark"] .v6-filters input,
html[data-resolved="dark"] .v6-filters select,
html[data-resolved="dark"] .v6-editor-strip input,
html[data-resolved="dark"] .v6-editor-strip select,
html[data-resolved="dark"] .v6-upload-grid input,
html[data-resolved="dark"] .v6-upload-grid select,
html[data-resolved="dark"] .v6-paper-fields input,
html[data-resolved="dark"] .v6-paper-fields select,
html[data-resolved="dark"] .v6-paper-fields textarea,
html[data-resolved="dark"] .key-create-form input,
html[data-resolved="dark"] .key-create-form select {
  border: 0 !important;
  border-radius: 11px;
  color: #fff !important;
  background: #2c2c2e !important;
  box-shadow: none !important;
}
html[data-resolved="dark"] .v6-filters input::placeholder,
html[data-resolved="dark"] input::placeholder,
html[data-resolved="dark"] textarea::placeholder { color: #8e8e93 !important; opacity: 1; }
html[data-resolved="dark"] .v6-filters input:focus,
html[data-resolved="dark"] .v6-filters select:focus,
html[data-resolved="dark"] .v6-editor-strip input:focus,
html[data-resolved="dark"] .v6-editor-strip select:focus,
html[data-resolved="dark"] .v6-upload-grid input:focus,
html[data-resolved="dark"] .v6-upload-grid select:focus,
html[data-resolved="dark"] .v6-paper-fields input:focus,
html[data-resolved="dark"] .v6-paper-fields select:focus,
html[data-resolved="dark"] .v6-paper-fields textarea:focus {
  outline: none !important;
  border: 0 !important;
  box-shadow: 0 0 0 2px rgba(10, 132, 255, .50) !important;
}

/* Immersive table: no white header block or outer strokes. */
html[data-resolved="dark"] .table-wrap { background: #1c1c1e !important; }
html[data-resolved="dark"] table.v6-table,
html[data-resolved="dark"] .v6-table thead,
html[data-resolved="dark"] .v6-table thead tr,
html[data-resolved="dark"] .v6-table th {
  border: 0 !important;
  color: #8e8e93 !important;
  background: #1c1c1e !important;
  box-shadow: none !important;
}
html[data-resolved="dark"] .v6-table th {
  height: 54px;
  border-bottom: 1px solid rgba(84, 84, 88, .35) !important;
  font-size: 13px;
  font-weight: 500;
}
html[data-resolved="dark"] .v6-table tbody,
html[data-resolved="dark"] .v6-table tbody tr { color: #fff; background: #1c1c1e !important; }
html[data-resolved="dark"] .v6-table td {
  border: 0 !important;
  border-bottom: 1px solid rgba(84, 84, 88, .35) !important;
  color: rgba(235, 235, 245, .92) !important;
  background: transparent !important;
}
html[data-resolved="dark"] .v6-table tbody tr:last-child td { border-bottom: 0 !important; }
html[data-resolved="dark"] .v6-table tbody tr:hover,
html[data-resolved="dark"] .v6-table tbody tr:hover td { background: rgba(255, 255, 255, .04) !important; }
html[data-resolved="dark"] .v6-name b { color: #fff !important; }
html[data-resolved="dark"] .v6-name small { color: #8e8e93 !important; }
html[data-resolved="dark"] .v6-name > span,
html[data-resolved="dark"] .v6-name.paper > span {
  border: 0 !important;
  color: #0a84ff !important;
  background: rgba(10, 132, 255, .16) !important;
}

/* Native switch and text-only row actions. */
html[data-resolved="dark"] .v6-switch {
  width: 44px;
  height: 26px;
  border: 0 !important;
  background: #39393d !important;
  box-shadow: none !important;
}
html[data-resolved="dark"] .v6-switch::after {
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
html[data-resolved="dark"] .v6-switch.on { background: #0a84ff !important; }
html[data-resolved="dark"] .v6-switch.on::after { transform: translateX(18px); }
html[data-resolved="dark"] .v6-row-actions button,
html[data-resolved="dark"] .item-actions button {
  min-height: 30px;
  border: 0 !important;
  border-radius: 9px;
  color: #0a84ff !important;
  background: rgba(10, 132, 255, .10) !important;
  box-shadow: none !important;
}
html[data-resolved="dark"] .v6-row-actions button.danger,
html[data-resolved="dark"] .item-actions button.danger {
  color: #ff453a !important;
  background: rgba(255, 69, 58, .12) !important;
}
html[data-resolved="dark"] input[type="checkbox"] { accent-color: #0a84ff; }

@media (max-width: 1024px) {
  html[data-resolved="dark"] .v6-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  html[data-resolved="dark"] .v6-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  html[data-resolved="dark"] .v6-stats article { min-height: 92px; }
  html[data-resolved="dark"] .v6-toolbar .v6-button { border-radius: 10px; }
}