:root {
  --blue: #4c8ee8;
  --blue-deep: #245fc0;
  --blue-soft: #eaf3ff;
  --green: #35b65a;
  --amber: #e9a915;
  --red: #e55f67;
  --ink: #182235;
  --muted: #758198;
  --line: #dfe6f0;
  --surface: #ffffff;
  --canvas: #f2f5f9;
  --shadow: 0 4px 18px rgba(52, 76, 112, .12);
  --topbar: 64px;
  --sidebar: 82px;
  font-family: "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--canvas); font-size: 14px; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

.topbar {
  position: fixed; z-index: 40; inset: 0 0 auto 0; height: var(--topbar);
  display: flex; align-items: center; padding: 0 22px 0 10px;
  color: #122038; border-bottom: 1px solid rgba(76, 125, 190, .18);
  background: linear-gradient(100deg, #6497ed 0%, #91c7de 52%, #a7d6c9 100%);
  box-shadow: 0 3px 14px rgba(51, 78, 127, .16);
}
.brand-switch { display: flex; height: 50px; padding: 4px; border: 0; border-radius: 8px; background: rgba(255,255,255,.14); cursor: pointer; }
.brand-switch b { display: grid; place-items: center; min-width: 96px; padding: 0 20px; color: white; letter-spacing: .5px; }
.brand-switch b { border-radius: 7px; background: #173b83; font-family: Georgia, serif; }
.brand { display: flex; align-items: baseline; margin-left: 40px; }
.brand-mark { margin-right: 2px; font-size: 32px; font-weight: 900; transform: rotate(45deg); }
.brand strong { font-family: Georgia, "Noto Serif SC", serif; font-size: 28px; letter-spacing: 1px; }
.brand small { margin-left: 8px; font-size: 9px; letter-spacing: 1.5px; opacity: .55; }
.topnav { display: flex; height: 100%; margin-left: 28px; }
.topnav a { position: relative; display: grid; place-items: center; min-width: 88px; padding: 0 18px; font-size: 16px; }
.topnav a:hover { background: rgba(255,255,255,.16); }
.topnav a.active { color: white; font-weight: 700; background: rgba(255,255,255,.16); }
.topnav a.active::after { content: ""; position: absolute; inset: auto 16px 0; height: 3px; background: white; }
.top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.term-badge { padding: 4px 11px; border-radius: 12px; background: rgba(38,118,112,.18); color: #8a6b00; font-size: 12px; font-weight: 700; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: transparent; font-size: 20px; cursor: pointer; }
.user-chip { display: flex; align-items: center; gap: 8px; min-width: 120px; padding: 4px 12px 4px 5px; border: 1px solid rgba(255,255,255,.65); border-radius: 22px; background: rgba(255,255,255,.13); cursor: pointer; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--blue-deep); font-weight: 800; }
.user-name { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-menu { display: none; }

.sidebar {
  position: fixed; z-index: 35; inset: var(--topbar) auto 0 0; width: var(--sidebar);
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px;
  background: var(--surface); border-right: 1px solid var(--line);
}
.side-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 66px; min-height: 62px; border: 0; border-radius: 7px; background: transparent; color: #66738a; cursor: pointer; }
.side-item span { font-size: 23px; font-weight: 700; }
.side-item small { font-size: 11px; }
.side-item:hover, .side-item.active { color: var(--blue); background: var(--blue-soft); }
.side-divider { width: 54px; height: 1px; margin: 8px 0; background: var(--line); }

.workspace { min-height: 100vh; padding: calc(var(--topbar) + 24px) 24px 40px calc(var(--sidebar) + 28px); outline: 0; }
.page-shell { max-width: 1640px; margin: 0 auto; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 800 19px/1.3 Georgia, "Noto Serif SC", serif; }
.title-icon { color: var(--blue); font-size: 23px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); }

.library-grid { display: grid; grid-template-columns: minmax(650px, 1fr) 320px; gap: 24px; }
.filters { grid-column: 1; padding: 2px 0 18px; }
.filter-row { display: flex; align-items: center; gap: 7px; min-height: 48px; }
.filter-label { flex: 0 0 72px; color: #606b7d; }
.filter-chip { padding: 8px 13px; border: 0; border-radius: 6px; background: transparent; color: #586477; cursor: pointer; }
.filter-chip:hover { color: var(--blue); background: var(--blue-soft); }
.filter-chip.active { color: #fff; background: var(--blue); box-shadow: 0 3px 9px rgba(76,142,232,.22); }
.search-row { display: grid; grid-template-columns: 160px minmax(220px, 350px) 1fr; gap: 12px; margin-top: 8px; }
.field { width: 100%; min-height: 40px; padding: 0 13px; color: var(--ink); background: var(--surface); border: 1px solid #d5deea; border-radius: 6px; outline: 0; }
.field:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(76,142,232,.12); }
.hot-strip { grid-column: 1; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 4px 0 20px; }
.hot-title { flex: 0 0 auto; font-weight: 800; }
.hot-scroller { display: flex; gap: 8px; overflow: hidden; }
.hot-tag { flex: 0 0 auto; padding: 5px 12px; border-radius: 14px; color: white; font-size: 12px; font-weight: 700; }
.hot-tag:nth-child(4n+1) { background: var(--green); }
.hot-tag:nth-child(4n+2) { background: var(--blue); }
.hot-tag:nth-child(4n+3) { background: var(--amber); }
.hot-tag:nth-child(4n) { background: var(--red); }

.challenge-card { grid-column: 1; overflow: hidden; }
.card-head { display: flex; align-items: center; min-height: 64px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.card-head h2 { margin: 0; font: 800 18px Georgia, "Noto Serif SC", serif; }
.card-head .count { margin-left: 12px; padding: 3px 8px; border-radius: 10px; color: #8a94a5; background: #f0f2f5; font-size: 12px; }
.head-actions { display: flex; gap: 9px; margin-left: auto; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-weight: 700; cursor: pointer; }
.btn:hover { border-color: var(--blue); color: var(--blue); }
.btn.primary { color: white; border-color: var(--blue); background: var(--blue); }
.btn.success { color: white; border-color: #63be2f; background: #63be2f; }
.btn.danger { color: white; border-color: var(--red); background: var(--red); }
.btn.small { min-height: 32px; padding: 0 11px; font-size: 12px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { height: 48px; padding: 0 14px; color: #3d4654; background: #fbfcfe; text-align: left; font-size: 13px; }
td { height: 62px; padding: 8px 14px; border-top: 1px solid #edf0f5; color: #5f6878; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: #f5f9ff; }
.challenge-row { cursor: pointer; }
.challenge-row.solved { background: linear-gradient(90deg, rgba(44,190,88,.1), transparent 35%); }
.id-cell { width: 72px; font-family: ui-monospace, monospace; font-size: 12px; font-weight: 800; }
.title-cell { min-width: 280px; color: #4c5667; font-size: 15px; }
.tag-list { display: flex; gap: 5px; min-width: 210px; }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid #a8ccff; border-radius: 11px; color: #4b91ee; background: #f9fcff; font-size: 11px; white-space: nowrap; }
.category { font-weight: 800; }
.category.WEB { color: #2f8de0; } .category.PWN { color: #d64a59; } .category.REVERSE { color: #8e61d3; }
.category.CRYPTO { color: #d59210; } .category.MISC { color: #36a164; } .category.MOBILE { color: #3aa7a7; } .category.AI { color: #d15f9a; }
.score { font-weight: 800; color: #3e4a5d; }
.stars { white-space: nowrap; color: #f0ad00; letter-spacing: 1px; }
.stars .off { color: #cdd3dd; }
.rate-bar { display: flex; width: 130px; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 2px; background: #dfe4ec; }
.rate-bar i { background: var(--green); }
.empty { padding: 70px 20px; color: var(--muted); text-align: center; }

.right-rail { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 20px; }
.rail-card { padding: 18px; }
.rail-title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 15px; }
.calendar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendar-grid span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-size: 12px; }
.calendar-grid .muted { color: #aab2c0; }
.calendar-grid .today { color: #1d7a45; background: #c9f49c; font-weight: 800; }
.progress-ring { --progress: 0deg; display: grid; place-items: center; width: 150px; aspect-ratio: 1; margin: 26px auto; border-radius: 50%; background: conic-gradient(var(--blue) var(--progress), #e8edf7 0); }
.progress-ring::before { content: ""; width: 126px; aspect-ratio: 1; border-radius: 50%; background: var(--surface); }
.progress-copy { position: absolute; text-align: center; }
.progress-copy strong { display: block; color: var(--blue); font-size: 24px; }
.stat-line { display: flex; align-items: center; margin: 11px 2px; }
.stat-line i { width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: var(--blue); }
.stat-line:nth-of-type(2) i { background: var(--green); }
.stat-line:nth-of-type(3) i { background: var(--amber); }
.stat-line b { margin-left: auto; }

.detail-page { position: fixed; z-index: 20; inset: var(--topbar) 0 0 var(--sidebar); min-height: 0; display: grid; grid-template-columns: 1fr 1fr; padding: 18px; gap: 10px; background: var(--canvas); }
.detail-pane { min-width: 0; min-height: 0; overflow: auto; background: var(--surface); border: 1px solid #b6cef1; border-radius: 7px; }
.detail-tabs { position: sticky; z-index: 2; top: 0; display: flex; height: 50px; border-bottom: 1px solid var(--line); background: #fafbfd; }
.detail-tabs button { padding: 0 20px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #8a919d; font-weight: 700; cursor: pointer; }
.detail-tabs button.active { color: var(--blue); background: white; }
.problem { display: flex; min-height: 0; flex-direction: column; padding: 22px 20px 18px; }
.problem h1 { margin: 0 0 16px; font: 500 clamp(25px, 2.2vw, 38px)/1.25 Georgia, "Noto Serif SC", serif; }
.problem-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.problem-description { margin: 28px 0; padding: 20px; border-left: 3px solid var(--blue); background: #f7faff; font-size: 16px; line-height: 1.8; white-space: pre-wrap; }
.problem-space { flex: 0 0 clamp(28px, 7vh, 72px); }
.challenge-arena { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 22px 0 4px; padding: 15px 17px; border: 1px solid #c9d9f0; border-radius: 7px; background: #f2f7fd; }
.challenge-arena > div:first-child { display: grid; gap: 4px; }
.challenge-arena b { color: #274566; }
.challenge-arena small { color: var(--muted); }
.challenge-arena-actions { display: flex; gap: 8px; flex-shrink: 0; }
.challenge-arena.unavailable { border-color: var(--line); background: #f6f7f9; }
.submit-box { display: flex; gap: 9px; max-width: 610px; margin: 12px auto 24px; }
.detail-nav { display: flex; gap: 9px; padding-top: 15px; border-top: 1px solid var(--line); }
.detail-nav .next { margin-left: auto; }
.accordion-row { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.note-pane { display: flex; flex-direction: column; overflow: hidden; }
.note-toolbar { display: flex; align-items: center; gap: 4px; min-height: 45px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: #f7f8fa; }
.tool { min-width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; font-weight: 800; cursor: pointer; }
.tool:hover { color: var(--blue); background: var(--blue-soft); }
.note-editor { flex: 1; width: 100%; min-height: 360px; padding: 28px 34px; resize: none; border: 0; outline: 0; color: #313b4b; background: var(--surface); font: 15px/1.8 ui-monospace, "Noto Sans Mono", monospace; }
.note-status { display: flex; justify-content: space-between; padding: 7px 12px; color: #8b95a5; background: #e8ebf0; font-size: 12px; }

.simple-page { max-width: 1200px; margin: 0 auto; }
.hero-line { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }
.hero-line h1 { margin: 0; font: 800 30px Georgia, "Noto Serif SC", serif; }
.hero-line p { margin: 7px 0 0; color: var(--muted); }
.rank-card { overflow: hidden; }
.course-page { max-width: 1320px; }
.course-count { padding: 7px 12px; border: 1px solid #a8ccff; border-radius: 14px; color: var(--blue-deep); background: var(--blue-soft); font-size: 12px; font-weight: 800; }
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.course-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.course-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(52, 76, 112, .18); }
.course-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #dfe9f5, #c9dfd7); }
.course-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.course-card:hover .course-cover img { transform: scale(1.025); }
.course-cover span { position: absolute; right: 12px; bottom: 12px; padding: 6px 10px; border-radius: 5px; color: white; background: rgba(20, 35, 52, .78); font-size: 11px; font-weight: 800; }
.course-copy { display: flex; min-height: 188px; flex-direction: column; padding: 20px; }
.course-copy h2 { margin: 0 0 10px; font: 800 20px Georgia, "Noto Serif SC", serif; }
.course-copy p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.course-copy b { display: flex; justify-content: space-between; margin-top: auto; padding-top: 18px; color: var(--blue-deep); font-size: 13px; }
.course-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 280px; padding: 40px; border: 1px dashed #bdc9d9; border-radius: 7px; color: var(--muted); text-align: center; }
.course-empty b { color: var(--ink); font: 800 20px Georgia, "Noto Serif SC", serif; }
.course-thumb { display: block; width: 86px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; background: #e6ebf2; }
.course-description { max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.external-link { color: var(--blue-deep); font-weight: 700; white-space: nowrap; }
.learning-page { max-width: 1080px; margin: 0 auto; }
.learning-profile { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding: 26px 30px; border-radius: 7px; color: white; background: linear-gradient(110deg, #275ca8, #287f72); box-shadow: var(--shadow); }
.learning-profile span { font-size: 12px; opacity: .75; }
.learning-profile h1 { margin: 6px 0; font: 800 28px Georgia, "Noto Serif SC", serif; }
.learning-profile p { margin: 0; opacity: .8; }
.learning-profile > strong { display: grid; min-width: 120px; text-align: center; font-size: 34px; }
.learning-profile > strong small { font-size: 11px; font-weight: 500; opacity: .75; }
.learning-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.learning-stats div { display: grid; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); text-align: center; }
.learning-stats b { color: var(--blue-deep); font-size: 24px; }
.learning-stats span { color: var(--muted); font-size: 12px; }
.learning-timeline { overflow: hidden; }
.learning-event { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; min-height: 76px; padding: 12px 20px; border: 0; border-top: 1px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; }
.learning-event:hover { background: #f7faff; }
.learning-event-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: white; background: #72859e; font-weight: 800; }
.learning-event-icon.solve { background: var(--green); }
.learning-event-icon.attempt { background: var(--amber); }
.learning-event-icon.arena { background: #287f72; }
.learning-event-icon.post, .learning-event-icon.reply { background: var(--blue); }
.learning-event b, .learning-event small { display: block; }
.learning-event small { margin-top: 4px; color: var(--muted); }
.learning-event time { color: var(--muted); font-size: 12px; }
.learning-modal { width: min(980px, 100%); }
.learning-modal .learning-page { max-height: calc(100vh - 180px); overflow: auto; }
.forum-page { max-width: 1080px; }
.forum-list { overflow: hidden; }
.forum-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) 64px; gap: 16px; align-items: center; min-height: 112px; padding: 18px 22px; border-bottom: 1px solid var(--line); cursor: pointer; }
.forum-row:last-child { border-bottom: 0; }
.forum-row:hover { background: #f7faff; }
.forum-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: white; background: #6d8db9; font-weight: 800; }
.forum-avatar.teacher { background: #287d5b; }
.forum-summary { min-width: 0; }
.forum-title-line { display: flex; align-items: center; gap: 9px; }
.forum-title-line h2 { overflow: hidden; margin: 0; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.forum-summary p { overflow: hidden; margin: 8px 0; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.forum-summary small, .forum-topic small, .forum-reply small { color: var(--muted); }
.forum-replies { display: grid; place-items: center; color: var(--muted); }
.forum-replies b { color: var(--blue-deep); font-size: 18px; }
.forum-replies span { font-size: 11px; }
.forum-state, .teacher-mark { padding: 3px 7px; border-radius: 4px; color: #986a09; background: #fff0c9; font-size: 11px; font-weight: 800; white-space: nowrap; }
.teacher-mark { margin-left: 7px; color: #197147; background: #ddf4e7; }
.forum-detail-nav { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.forum-admin-actions { display: flex; gap: 8px; }
.forum-topic { padding: 24px; }
.forum-topic > header { display: flex; align-items: center; gap: 14px; }
.forum-topic h1 { margin: 0 0 6px; font: 800 25px Georgia, "Noto Serif SC", serif; }
.forum-topic .forum-state { margin-left: auto; }
.forum-topic > p { margin: 24px 0 4px; color: #465267; font-size: 15px; line-height: 1.9; white-space: pre-wrap; }
.forum-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 280px)); gap: 10px; margin-top: 16px; }
.forum-images img { display: block; width: 100%; max-height: 420px; border: 1px solid var(--line); border-radius: 6px; object-fit: contain; background: #f5f7fa; }
.forum-image-tools { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.forum-image-tools span { color: var(--muted); font-size: 12px; }
.forum-image-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.forum-image-preview figure { position: relative; width: 104px; height: 78px; margin: 0; }
.forum-image-preview img { width: 100%; height: 100%; border: 1px solid var(--line); border-radius: 5px; object-fit: cover; }
.forum-image-preview button { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 2px solid white; border-radius: 50%; color: white; background: var(--red); cursor: pointer; }
.image-button { margin: 0 !important; }
.forum-thread, .forum-compose { margin-top: 16px; overflow: hidden; }
.forum-reply { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px 24px; border-top: 1px solid var(--line); }
.forum-reply:first-of-type { border-top: 0; }
.forum-reply header { display: flex; align-items: center; min-height: 24px; }
.forum-reply header small { margin-left: auto; }
.forum-reply p { margin: 10px 0 0; line-height: 1.8; white-space: pre-wrap; }
.text-danger { margin-left: 12px; padding: 2px 5px; border: 0; color: var(--red); background: transparent; cursor: pointer; }
.forum-compose { padding: 22px 24px; }
.forum-compose h2 { margin: 0 0 16px; font: 800 18px Georgia, "Noto Serif SC", serif; }
.reply-form textarea { min-height: 120px; padding-top: 12px; resize: vertical; }
.reply-form .btn { margin-top: 10px; }
.forum-locked { padding: 16px; border-radius: 6px; color: #8b6414; background: #fff5d9; text-align: center; }
.arena-login { max-width: 560px; margin: 80px auto; padding: 48px; text-align: center; }
.arena-login .arena-icon { margin: 0 auto 16px; }
.arena-login h1 { font: 800 30px Georgia, "Noto Serif SC", serif; }
.arena-login p { margin-bottom: 24px; color: var(--muted); }
.arena-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.arena-card { display: flex; min-height: 330px; flex-direction: column; padding: 22px; }
.arena-card-head { display: flex; align-items: center; gap: 13px; }
.arena-card-head h2 { margin: 0 0 3px; font: 800 20px Georgia, "Noto Serif SC", serif; }
.arena-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 7px; color: white; background: linear-gradient(135deg, #276bd2, #31ad83); font-size: 27px; }
.arena-slug, .expires { color: var(--muted); font: 12px ui-monospace, monospace; }
.instance-state { margin-left: auto; padding: 4px 9px; border-radius: 11px; color: #7d8797; background: #edf0f4; font-size: 11px; font-weight: 800; }
.instance-state.running { color: #168343; background: #dff6e6; }
.arena-card > p { min-height: 48px; color: #697589; line-height: 1.7; }
.arena-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.arena-specs { display: flex; gap: 18px; margin: 22px 0; padding: 13px 0; color: #526077; border-block: 1px solid var(--line); font-size: 12px; }
.arena-actions { display: flex; align-items: center; gap: 9px; margin-top: auto; }
.arena-actions .expires { margin-left: auto; }
.arena-error { margin-bottom: 12px; padding: 9px 11px; color: #a53d47; background: #fff0f1; border-radius: 5px; font-size: 12px; }
.runtime-badge { padding: 7px 12px; border-radius: 14px; font-size: 12px; font-weight: 800; }
.runtime-badge.ready { color: #16743d; background: #daf3e2; }
.runtime-badge.unavailable { color: #9b4a27; background: #fff0d9; }
.rank-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: white; background: #a9b3c2; font-weight: 800; }
tr:nth-child(1) .rank-number { background: #e8ae20; } tr:nth-child(2) .rank-number { background: #8b9bb1; } tr:nth-child(3) .rank-number { background: #b97e54; }
.admin-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.admin-card { overflow: hidden; }
.admin-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.admin-tabs button { min-height: 44px; padding: 0 20px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-weight: 800; cursor: pointer; }
.admin-tabs button.active { color: var(--blue); border-bottom-color: var(--blue); }
.admin-tabs span { margin-left: 6px; padding: 2px 7px; border-radius: 10px; background: var(--blue-soft); font-size: 11px; }
.admin-panel { display: grid; gap: 14px; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-search, .toolbar-actions { display: flex; align-items: center; gap: 8px; }
.admin-search .field { width: min(360px, 40vw); }
.export-control { display: flex; align-items: center; gap: 6px; }
.export-control .field { width: 150px; }
.user-pagination { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.user-pagination > div { display: flex; align-items: center; gap: 10px; }
.user-pagination b { color: var(--ink); font-size: 12px; }
.delete-user-button { margin-right: auto; }
.delete-warning { padding: 16px; border: 1px solid #f2c5c8; border-radius: 6px; background: #fff4f5; }
.delete-warning p { margin: 8px 0 0; color: #8f4c53; line-height: 1.7; }
.cell-sub { display: block; margin-top: 4px; color: var(--muted); }
.admin-hint, .modal-sub { margin: 0; color: var(--muted); font-size: 12px; }
.user-summary { display: flex; align-items: center; gap: 24px; padding: 13px 15px; border-radius: 6px; background: var(--blue-soft); }
.user-summary .check-line { margin-left: auto; }
.check-line { display: flex !important; align-items: center; gap: 8px; cursor: pointer; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--green); }
.status-dot.off { background: #aab2bf; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(24,34,53,.42); backdrop-filter: blur(4px); }
.modal { width: min(480px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 26px; background: white; border-radius: 8px; box-shadow: 0 20px 70px rgba(19,33,56,.28); }
.modal.wide { width: min(720px, 100%); }
.modal-head { display: flex; align-items: center; margin-bottom: 22px; }
.modal-head h2 { margin: 0; font: 800 23px Georgia, "Noto Serif SC", serif; }
.modal-head button { margin-left: auto; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 7px; color: #525f72; font-weight: 700; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-group textarea { min-height: 110px; padding-top: 10px; resize: vertical; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.login-actions .register-button { margin-right: auto; color: var(--blue-deep); border-color: #b7d2f5; background: var(--blue-soft); }
.register-notice { padding: 20px; border: 1px solid #c9dbef; border-radius: 7px; background: #f5f9fe; text-align: center; }
.register-notice span { display: inline-block; margin-bottom: 10px; color: #9b6500; font: 800 18px Georgia, "Noto Serif SC", serif; }
.register-notice p { margin: 4px 0 14px; color: var(--muted); line-height: 1.7; }
.register-notice a { color: var(--blue-deep); font-weight: 800; }
.demo-accounts { margin-top: 18px; padding: 13px; border-radius: 6px; color: #617087; background: #f2f6fb; font-size: 12px; line-height: 1.8; }
.toast-region { position: fixed; z-index: 150; top: 78px; right: 22px; display: flex; flex-direction: column; gap: 9px; }
.toast { min-width: 260px; padding: 13px 16px; color: white; border-radius: 6px; background: #26374f; box-shadow: var(--shadow); animation: toast-in .22s ease-out; }
.toast.success { background: #279b50; } .toast.error { background: #ce4d57; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

body.dark { --ink: #e8edf7; --muted: #9ca8bc; --line: #344158; --surface: #1d2839; --canvas: #151e2c; --shadow: 0 4px 18px rgba(0,0,0,.22); }
body.dark .field, body.dark .btn, body.dark .modal { color: var(--ink); background: var(--surface); }
body.dark .challenge-arena { border-color: #405b79; background: #202f43; }
body.dark .challenge-arena b { color: var(--ink); }
body.dark th, body.dark .detail-tabs, body.dark .note-toolbar { background: #202d40; }
body.dark .challenge-row.solved { background: rgba(44,190,88,.08); }
body.dark .problem-description { background: #202d40; }
body.dark .course-cover { background: linear-gradient(135deg, #293b52, #27443e); }
body.dark .forum-row:hover { background: #202d40; }
body.dark .forum-topic > p { color: var(--ink); }
body.dark .register-notice { border-color: #405b79; background: #202f43; }
body.dark .delete-warning { border-color: #74464c; background: #3a272d; }
body.dark .learning-event:hover { background: #202d40; }

@media (max-width: 1100px) {
  .brand-switch span, .brand small { display: none; }
  .brand-switch b { min-width: 70px; }
  .brand { margin-left: 18px; }
  .topnav a { min-width: auto; padding: 0 13px; }
  .library-grid { grid-template-columns: 1fr; }
  .right-rail { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: repeat(2, 1fr); }
  .detail-page { grid-template-columns: 1fr; position: static; padding: calc(var(--topbar) + 18px) 18px 30px calc(var(--sidebar) + 18px); }
  .detail-pane { min-height: 650px; }
  .arena-grid { grid-template-columns: 1fr; }
  .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  :root { --sidebar: 0px; }
  .topbar { padding: 0 10px; }
  .brand-switch, .topnav, .term-badge, .top-actions .icon-button { display: none; }
  .mobile-menu { display: grid; }
  .brand { margin: 0 0 0 8px; }
  .brand strong { font-size: 22px; }
  .user-chip { min-width: 0; margin-left: auto; padding-right: 6px; }
  .user-name { display: none; }
  .sidebar { width: 78px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .workspace { padding: calc(var(--topbar) + 16px) 12px 30px; }
  .filter-row { align-items: flex-start; overflow-x: auto; }
  .filter-label { flex-basis: 54px; padding-top: 8px; }
  .search-row { grid-template-columns: 1fr; }
  .hot-title { display: none; }
  .card-head { align-items: flex-start; gap: 10px; }
  .head-actions { flex-wrap: wrap; }
  .head-actions .btn span { display: none; }
  .right-rail { display: block; }
  .right-rail .rail-card { margin-bottom: 14px; }
  .detail-page { padding: calc(var(--topbar) + 10px) 10px 24px; }
  .detail-pane { min-height: 600px; }
  .problem { padding: 18px 14px; }
  .submit-box { flex-direction: column; }
  .challenge-arena { align-items: stretch; flex-direction: column; }
  .challenge-arena-actions { flex-direction: column; }
  .challenge-arena-actions .btn { width: 100%; }
  .detail-tabs { overflow-x: auto; }
  .detail-tabs button { flex: 0 0 auto; padding: 0 14px; }
  .note-editor { padding: 20px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-line { align-items: flex-start; flex-direction: column; gap: 12px; }
  .admin-toolbar, .admin-search, .toolbar-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .admin-search .field { width: 100%; }
  .toolbar-actions .btn { width: 100%; }
  .export-control { width: 100%; }
  .export-control .field { width: 100%; }
  .user-pagination { align-items: stretch; flex-direction: column; gap: 10px; }
  .user-pagination > div { justify-content: space-between; }
  .user-summary { align-items: flex-start; flex-direction: column; gap: 8px; }
  .user-summary .check-line { margin-left: 0; }
  .arena-actions { align-items: stretch; flex-direction: column; }
  .arena-actions .btn { width: 100%; }
  .arena-actions .expires { margin-left: 0; }
  .course-grid { grid-template-columns: 1fr; }
  .learning-profile { align-items: flex-start; padding: 22px 18px; }
  .learning-profile > strong { min-width: 80px; font-size: 28px; }
  .learning-stats { grid-template-columns: repeat(2, 1fr); }
  .learning-event { grid-template-columns: 36px minmax(0, 1fr); padding: 12px 14px; }
  .learning-event time { grid-column: 2; }
  .forum-row { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 14px; }
  .forum-replies { display: none; }
  .forum-detail-nav { align-items: stretch; flex-direction: column; }
  .forum-admin-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .forum-topic { padding: 18px 16px; }
  .forum-topic > header { align-items: flex-start; }
  .forum-topic .forum-state { margin-left: 0; }
  .forum-reply { padding: 18px 14px; }
  .forum-reply header { align-items: flex-start; flex-wrap: wrap; }
  .forum-reply header small { width: 100%; margin: 4px 0 0; }
  .forum-images { grid-template-columns: 1fr; }
  .forum-image-tools { align-items: flex-start; flex-direction: column; }
  .title-cell { min-width: 220px; }
}