:root {
    --ink: #202335;
    --muted: #7a7f96;
    --line: #e7e9f1;
    --soft: #f7f8fc;
    --card: #fff;
    --purple: #5b5ce2;
    --purple-dark: #4849c7;
    --purple-soft: #f0f0ff;
    --teal: #1c9a8a;
    --orange: #e9854f;
    --shadow: 0 12px 32px rgba(44, 49, 91, .06);
    --radius: 18px;
}

/* Dark theme refinements that must also win over mobile defaults */
html[data-theme="dark"] .feed-tabs { border-color: var(--line); background: #20253d; }
html[data-theme="dark"] .feed-tabs a.active,
html[data-theme="dark"] .feed-tabs a:hover { background: #2b3050; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
html[data-theme="dark"] .category-filter { border-color: var(--line); background: #1b2035; }
html[data-theme="dark"] .category-filter.active,
html[data-theme="dark"] .category-filter:hover { background: var(--purple-soft); }
html[data-theme="dark"] .search-form { border-color: var(--line); background: #1b2035; }
html[data-theme="dark"] .capture-mode { border-color: var(--line); background: #20253d; }
html[data-theme="dark"] .capture-mode.camera-mode { border-color: #725333; background: #3a2d22; }
html[data-theme="dark"] .capture-mode.gallery-mode { border-color: #44457e; background: #252746; }
html[data-theme="dark"] .composer-tools select[name="answer_choice"] { border-color: #725333; background: #3a2d22; }
html[data-theme="dark"] .answer-choice-pill { border-color: #725333; background: #3a2d22; }
html[data-theme="dark"] .status-summary.understood,
html[data-theme="dark"] .status-pill.understood { color: #8de0c5; background: #17382f; }
html[data-theme="dark"] .status-summary.bookmarked,
html[data-theme="dark"] .status-summary.reminder,
html[data-theme="dark"] .status-pill.bookmarked,
html[data-theme="dark"] .status-pill.revisit { color: #f2c77c; background: #3d3020; }
html[data-theme="dark"] .status-pill.unresolved { color: #ffaaa1; background: #3b2528; }
html[data-theme="dark"] .status-pill.neutral { color: #b2bad3; background: #2a3046; }
html[data-theme="dark"] .similar-question,
html[data-theme="dark"] .exam-custom-dates,
html[data-theme="dark"] .exam-check,
html[data-theme="dark"] .exam-radio { border-color: var(--line); background: #20253d; }
html[data-theme="dark"] .similar-question:hover,
html[data-theme="dark"] .exam-check:has(input:checked),
html[data-theme="dark"] .exam-radio:has(input:checked) { background: var(--purple-soft); }
html[data-theme="dark"] .mobile-menu summary,
html[data-theme="dark"] .mobile-menu-panel { border-color: var(--line); background: #1b2035; }
html[data-theme="dark"] .mobile-menu-panel a { color: var(--ink); }

/* Admin moderation tools */
.moderation-panel { margin-top: 14px; padding: 18px; }
.moderation-panel-head, .moderation-card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.moderation-panel-head h2 { margin: 4px 0 0; font-size: 19px; }
.moderation-badge { padding: 5px 9px; color: var(--purple); border-radius: 999px; background: var(--purple-soft); font-size: 11px; font-weight: 700; white-space: nowrap; }
.moderation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.moderation-card { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fbfbff; }
.moderation-card.is-banned { border-color: #f1c3bb; background: #fff9f8; }
.moderation-card-title { justify-content: flex-start; color: var(--ink); font-size: 13px; }
.moderation-card-title span { display: grid; width: 27px; height: 27px; place-items: center; color: var(--purple); border-radius: 9px; background: var(--purple-soft); }
.moderation-card p { margin: 9px 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.moderation-warning { color: #b24e3f !important; }
.moderation-inline-form { display: flex; align-items: center; gap: 7px; }
.moderation-inline-form input { min-width: 0; flex: 1; height: 35px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 11px; }
.button-danger { color: #fff; border-color: #c75548; background: #c75548; }
.moderation-ip { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.moderation-ip code { color: var(--ink); font-size: 12px; }
.moderation-ip small { color: var(--muted); font-size: 10px; }
.moderation-manual-ip { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.moderation-manual-ip summary { color: var(--purple); cursor: pointer; font-size: 12px; font-weight: 700; }
.moderation-manual-ip form { margin-top: 10px; }

/* Mobile web-app installation suggestion */
.pwa-install-prompt { position: fixed; right: 18px; bottom: 18px; left: 18px; z-index: 80; display: none; align-items: center; gap: 11px; padding: 12px 13px; color: var(--ink); border: 1px solid #dddfff; border-radius: 16px; background: rgba(255,255,255,.98); box-shadow: 0 14px 34px rgba(44,49,91,.18); }
.pwa-install-prompt.is-visible { display: flex; }
.pwa-install-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: #fff; border-radius: 12px; background: var(--purple); font-size: 19px; }
.pwa-install-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.pwa-install-copy strong { font-size: 13px; }
.pwa-install-copy span { color: var(--muted); font-size: 11px; line-height: 1.35; }
.pwa-install-action, .pwa-install-close { border: 0; cursor: pointer; }
.pwa-install-action { min-height: 34px; padding: 0 12px; color: #fff; border-radius: 9px; background: var(--purple); font-weight: 700; }
.pwa-install-close { align-self: flex-start; padding: 0 2px; color: #9397ab; background: transparent; font-size: 20px; line-height: 1; }
@media (min-width: 741px) { .pwa-install-prompt { display: none !important; } }

* { box-sizing: border-box; }
html { background: var(--soft); }
body { margin: 0; color: var(--ink); background: var(--soft); font: 15px/1.6 "DM Sans", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.topbar { height: 74px; max-width: 1240px; margin: auto; padding: 0 28px; display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); background: rgba(247,248,252,.92); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: "Space Grotesk", Arial, sans-serif; font-size: 17px; letter-spacing: -.025em; white-space: nowrap; }
.brand strong { color: var(--purple); }
.brand-mark { width: 34px; height: 34px; display: block; flex: 0 0 auto; line-height: 0; }
.brand-mark img { display: block; width: 100%; height: 100%; }
.topnav { display: flex; align-self: stretch; gap: 22px; }
.topnav a { position: relative; display: flex; align-items: center; color: var(--muted); font-weight: 600; }
.topnav a.active, .topnav a:hover { color: var(--ink); }
.topnav a.active:after { content: ""; position: absolute; bottom: 0; left: 4px; right: 4px; height: 3px; border-radius: 4px 4px 0 0; background: var(--purple); }
.top-search-form { display: flex; align-items: center; gap: 5px; width: 236px; padding: 4px 5px 4px 10px; margin-left: 0; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.86); box-shadow: 0 4px 12px rgba(44,49,91,.03); }
.top-search-form > span { color: var(--purple); font-size: 20px; line-height: 1; }
.top-search-form input { width: 100%; min-width: 0; padding: 4px 2px; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 13px; }
.top-search-form input::placeholder { color: #9da1b5; }
.top-search-form button { display: inline-grid; width: 27px; height: 27px; place-items: center; flex: 0 0 auto; color: var(--purple); border: 0; border-radius: 8px; background: var(--purple-soft); font-size: 14px; font-weight: 800; }
.top-search-form:focus-within { border-color: #c9caf4; box-shadow: 0 0 0 3px rgba(91,92,226,.08); }
.account-area { display: flex; align-items: center; gap: 9px; margin-left: auto; min-width: 0; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 11px; font-weight: 700; transition: .18s ease; }
.theme-toggle:hover { color: var(--purple); border-color: #c9caf4; background: var(--purple-soft); transform: translateY(-1px); }
.theme-toggle span:first-child { display: inline-grid; width: 19px; height: 19px; place-items: center; color: var(--purple); border-radius: 7px; background: var(--purple-soft); font-size: 14px; line-height: 1; }
.account-links { display: flex; align-items: center; gap: 9px; }
.header-login-link { padding: 7px 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.header-login-link:hover { color: var(--purple); }
.user-name { color: var(--muted); font-size: 13px; max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 32px; height: 32px; display: inline-grid; place-items: center; flex: 0 0 auto; color: #fff; background: linear-gradient(135deg, #8586f7, #5b5ce2); border-radius: 50%; font-weight: 700; font-size: 13px; }
.avatar.has-photo { overflow: hidden; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar.large { width: 40px; height: 40px; }
.avatar.small { width: 34px; height: 34px; font-size: 12px; }
.role-chip { padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.role-chip.student { color: var(--purple); background: var(--purple-soft); }
.role-chip.teacher { color: #ad6a16; background: #fff3d8; }
.role-chip.admin { color: #9b3b55; background: #ffe9ef; }
.page-content { max-width: 1240px; padding: 38px 28px 70px; margin: auto; }
.mobile-tabbar { display: none; }
.mobile-menu { position: relative; display: block; flex: 0 0 auto; }
.mobile-menu summary { display: grid; width: 36px; height: 36px; place-items: center; color: var(--purple); border: 1px solid #e0e1f3; border-radius: 10px; background: transparent; font-size: 18px; line-height: 1; list-style: none; cursor: pointer; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu[open] summary { color: #fff; border-color: var(--purple); background: var(--purple); }
.mobile-menu-panel { position: absolute; top: calc(100% + 9px); right: -4px; z-index: 40; display: grid; min-width: 200px; gap: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 14px 30px rgba(44,49,91,.16); }
.mobile-menu-panel > span { padding: 4px 8px 6px; color: #9a9dae; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.mobile-menu-panel a { padding: 10px 9px; color: var(--ink); border-radius: 9px; font-size: 13px; font-weight: 700; }
.mobile-menu-panel a:hover, .mobile-menu-panel a.active { color: var(--purple); background: var(--purple-soft); }
.mobile-menu-divider { height: 1px; padding: 0 !important; margin: 4px 8px; background: var(--line); }
.mobile-menu-panel .menu-theme-toggle { width: 100%; justify-content: flex-start; margin-top: 1px; border: 0; background: transparent; }
.admin-view-float { position: fixed; z-index: 60; right: 22px; bottom: 22px; width: min(260px, calc(100vw - 28px)); color: var(--ink); border: 1px solid #dedff4; border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 14px 36px rgba(44,49,91,.16); backdrop-filter: blur(12px); }
.admin-view-float summary { display: flex; align-items: center; gap: 9px; padding: 8px 11px; cursor: pointer; list-style: none; }
.admin-view-float summary::-webkit-details-marker { display: none; }
.admin-view-float summary > span:last-child { display: grid; gap: 0; min-width: 0; }
.admin-view-float summary b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-view-float summary small { color: var(--muted); font-size: 9px; }
.admin-view-orb { display: inline-grid; width: 29px; height: 29px; place-items: center; flex: 0 0 auto; color: #fff; border-radius: 50%; background: linear-gradient(145deg, #d66d87, #9b3b55); font: 700 12px/1 "Space Grotesk", Arial, sans-serif; box-shadow: 0 5px 12px rgba(155,59,85,.22); }
.admin-view-form { display: grid; gap: 7px; padding: 0 11px 11px; border-top: 1px solid var(--line); }
.admin-view-form label { padding-top: 9px; color: var(--muted); font-size: 10px; font-weight: 700; }
.admin-view-form select { width: 100%; min-height: 35px; padding: 7px 9px; color: var(--ink); border: 1px solid #dfe1eb; border-radius: 9px; background: #fff; font-size: 12px; }
.admin-view-form .button { width: 100%; min-height: 35px; padding: 8px 10px; font-size: 11px; }
.admin-view-readonly { color: #9b3b55; font-size: 10px; line-height: 1.35; }
.admin-preview-banner { display: flex; align-items: center; gap: 11px; padding: 13px 16px; margin-bottom: 15px; border-color: #e7d8df; background: linear-gradient(110deg, #fff8fa, #fff); }
.admin-preview-banner-icon { display: inline-grid; width: 30px; height: 30px; place-items: center; flex: 0 0 auto; color: #fff; border-radius: 50%; background: #b6526c; font-size: 13px; }
.admin-preview-banner strong { display: block; color: #9b3b55; font-size: 12px; }
.admin-preview-banner p { margin: 1px 0 0; color: var(--muted); font-size: 11px; }
.preview-readonly-note { margin-left: auto; color: #9b3b55; font-size: 10px; font-weight: 700; }
body.admin-preview-mode form:not(.admin-view-form):not(.search-form):not(.top-search-form) { opacity: .62; pointer-events: none; }
body.admin-preview-mode .button, body.admin-preview-mode button { cursor: default; }
.eyebrow, .card-kicker, .picker-label { display: block; color: var(--purple); font-size: 11px; letter-spacing: .15em; font-weight: 700; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Space Grotesk", Arial, sans-serif; letter-spacing: -.04em; }
h1 { margin-bottom: 8px; font-size: clamp(30px, 4vw, 45px); line-height: 1.1; }
h2 { margin-bottom: 5px; font-size: 23px; }
h3 { margin-bottom: 5px; font-size: 18px; line-height: 1.35; }
.subtitle, .muted { color: var(--muted); }
.subtitle { margin-bottom: 0; font-size: 16px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 10px; padding: 10px 17px; font-size: 14px; font-weight: 700; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--purple); box-shadow: 0 7px 17px rgba(91,92,226,.22); }
.button-primary:hover { background: var(--purple-dark); }
.button.is-submitting, .button:disabled { cursor: wait; opacity: .72; transform: none; }
.button-outline { color: var(--purple); border-color: #d9daf6; background: #fff; }
.button-small { padding: 7px 13px; font-size: 13px; }
.button-wide { width: 100%; }
.card-surface { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.flash-stack { display: grid; gap: 8px; margin-bottom: 18px; }
.flash { padding: 11px 15px; border-radius: 12px; font-weight: 600; }
.flash.success { color: #197761; background: #e6f8f1; border: 1px solid #c6eddf; }
.flash.error { color: #a24343; background: #fff0ef; border: 1px solid #f3d1cf; }
.flash-links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 7px; }
.flash-links a { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.dashboard-head { display: flex; width: calc(100% - 323px); justify-content: space-between; align-items: start; gap: 25px; margin-bottom: 26px; }
.head-stats { display: flex; gap: 28px; padding: 9px 0 4px; }
.head-stats div { display: grid; gap: 1px; text-align: right; }
.head-stats strong { font: 700 26px/1 "Space Grotesk", Arial, sans-serif; }
.head-stats span { color: var(--muted); font-size: 12px; }
.dashboard-head > div:first-child { flex: 1; padding-top: 5px; }
.dashboard-hero-copy { min-width: 0; }
.dashboard-hero-line { position: relative; display: block; min-height: 105px; }
.dashboard-hero-line > div:first-child { padding-right: 210px; }
.dashboard-hero-line h1 { max-width: 650px; margin-bottom: 9px; }
.dashboard-hero-line h1 span { color: var(--purple); }
.hero-note { position: absolute; top: 0; right: 0; display: grid; width: 190px; height: 55px; justify-items: center; padding: 10px 2px 0; color: #7374ee; font-family: "Segoe Print", "Caveat", "Comic Sans MS", cursive; font-size: 17px; font-weight: 600; line-height: 1.05; text-align: center; transform: rotate(-4deg); }
.hero-arrow { position: absolute; top: 44px; right: 0; display: block; width: 120px; height: 87px; margin: 0; overflow: visible; color: #7374ee; }
.hero-arrow-stroke { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.2; }
.hero-arrow-tip { stroke-width: 3; }
.today-summary { position: relative; width: 100%; flex: 0 0 auto; padding: 22px 17px 8px; overflow: hidden; border-color: #dedff3; background: linear-gradient(145deg, #fff 0%, #fbfbff 58%, #f4f5ff 100%); box-shadow: 0 14px 30px rgba(73,75,155,.1); }
.today-summary:before { position: absolute; top: 0; right: 22px; left: 22px; height: 3px; content: ""; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, #6d6ff1, #a1a2ff 48%, #6ccbb3); }
.today-summary:after { position: absolute; top: -42px; right: -42px; width: 126px; height: 126px; content: ""; border: 1px solid rgba(111,112,240,.13); border-radius: 50%; box-shadow: 0 0 0 12px rgba(111,112,240,.035), 0 0 0 25px rgba(111,112,240,.025); }
.side-column > .today-summary { margin-top: -150px; margin-bottom: 0; }
.today-summary-head { position: relative; z-index: 1; padding-bottom: 14px; border-bottom: 1px solid #e7e8f3; }
.today-summary-head, .today-summary-head > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.summary-heading { justify-content: flex-start !important; }
.summary-heading > div { display: grid; gap: 2px; }
.today-summary-head strong { font-size: 12px; }
.summary-heading small { color: #a0a3b7; font-size: 10px; }
.today-summary-head time { color: var(--muted); font-size: 11px; }
.summary-icon { display: inline-grid; width: 30px; height: 30px; place-items: center; color: #fff; border-radius: 10px; background: linear-gradient(145deg, #7779f5, #5b5ce2); box-shadow: 0 6px 12px rgba(91,92,226,.22); font-size: 17px; font-weight: 800; }
.summary-today-label { display: flex; align-items: center; gap: 7px; padding: 13px 0 7px; color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.summary-today-label i { width: 4px; height: 4px; border-radius: 50%; background: #b1b2ed; }
.summary-today-label span:last-child { color: #a0a3b7; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.today-summary-today { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0 0 12px; }
.today-summary-today > div { display: grid; gap: 3px; padding: 11px 10px 10px; border: 1px solid #e7e8f4; border-radius: 12px; background: rgba(255,255,255,.86); }
.today-summary-today > div:last-child { border-color: #d4eee6; background: rgba(244,252,249,.92); }
.summary-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.today-summary-today strong { color: var(--ink); font: 700 25px/1 "Space Grotesk", Arial, sans-serif; }
.today-summary-today small { color: #a0a3b7; font-size: 10px; }
.summary-stat-icon { display: inline-grid; width: 25px; height: 25px; place-items: center; color: var(--purple); border-radius: 8px; background: var(--purple-soft); font-size: 14px; font-weight: 800; }
.summary-stat-icon.solved { color: var(--teal); background: #e6f8f1; }
.today-summary-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 10px; border-top: 1px solid #e5e6f3; border-bottom: 1px solid #e5e6f3; }
.summary-total-title { display: grid; gap: 3px; color: var(--ink); font-size: 11px; font-weight: 800; }
.summary-total-title small { color: #a0a3b7; font-size: 9px; font-weight: 500; }
.summary-total-values { display: flex; gap: 13px; }
.summary-total-values > span { display: grid; gap: 2px; padding-left: 10px; border-left: 2px solid #dcdcfa; }
.summary-total-values > span + span { border-left-color: #cceee5; }
.summary-total-values strong { color: var(--ink); font: 700 17px/1 "Space Grotesk", Arial, sans-serif; }
.summary-total-values small { color: var(--muted); font-size: 9px; }
.today-summary-link { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 12px; padding: 9px 10px; color: var(--purple); border: 1px solid #e1e1ff; border-radius: 10px; background: linear-gradient(90deg, #f0efff, #f8f7ff); font-size: 10px; font-weight: 800; }
.today-summary-link b { font-size: 14px; }
.today-summary-link span:last-child { white-space: nowrap; }
.today-summary-link span { font-size: 10px; line-height: 1.2; }
.student-picker { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 66px; padding: 13px 18px; margin-bottom: 22px; border: 1px solid #dadbf7; border-radius: 15px; background: linear-gradient(100deg, #f5f4ff, #fff); }
.student-picker.compact { color: var(--ink); }
.student-picker strong { display: block; font-size: 14px; }
.student-picker select { min-width: 210px; padding: 9px 11px; color: var(--ink); border: 1px solid #d7d8ef; border-radius: 9px; background: #fff; outline: none; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; align-items: start; gap: 27px; }
.feed-column { min-width: 0; }
.composer { padding: 19px 20px 16px; margin-bottom: 28px; }
.composer-top { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; }
.composer-top div { display: grid; gap: 1px; }
.composer-top div span { color: var(--muted); font-size: 12px; }
.capture-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 13px; }
.capture-mode { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 39px; padding: 8px 9px; color: #666b82; border: 1px solid var(--line); border-radius: 10px; background: #fbfbfd; font-size: 12px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.capture-mode:hover { color: var(--purple); border-color: #c9caf4; background: var(--purple-soft); }
.capture-mode small { color: var(--purple); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.capture-mode.camera-mode { color: #b26826; border-color: #f0dfc3; background: #fffaf0; }
.capture-mode.gallery-mode { color: var(--purple); border-color: #dcdcf8; background: #f8f8ff; }
.upload-preview { display: flex; gap: 8px; padding: 4px 0 11px; overflow-x: auto; scrollbar-width: none; }
.upload-preview::-webkit-scrollbar { display: none; }
.upload-preview-item { position: relative; flex: 0 0 auto; width: 70px; }
.upload-preview-image-wrap { position: relative; }
.upload-preview-item img { display: block; width: 70px; height: 70px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; }
.upload-remove { position: absolute; z-index: 2; top: 5px; right: 5px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: #fff; border: 2px solid rgba(255,255,255,.96); border-radius: 999px; background: rgba(30,34,62,.78); box-shadow: 0 3px 9px rgba(20,24,51,.22); font-size: 19px; line-height: 1; cursor: pointer; transition: transform .16s ease, background .16s ease; }
.upload-remove:hover, .upload-remove:focus-visible { background: #e05268; transform: scale(1.06); outline: none; }
.upload-preview-item span { display: block; width: 100%; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.question-upload-preview-item { width: 150px; padding: 7px; border: 1px solid #e7e7f2; border-radius: 11px; background: #fbfbff; }
.question-upload-preview-item img { width: 136px; height: 104px; }
.question-upload-preview-item > span { font-size: 10px; }
.upload-preview-fields { display: grid; gap: 5px; padding-top: 7px; }
.upload-preview-field { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #6e7186; font-size: 10px; font-weight: 700; }
.upload-preview-field > span { width: auto; margin: 0; font-size: inherit; }
.upload-preview-field select { min-width: 0; max-width: 91px; padding: 4px 5px; color: #5557a8; border: 1px solid #dcdcff; border-radius: 6px; background: #fff; font-size: 10px; font-weight: 800; }
.upload-answer-choice { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 7px; color: #8f5b0e; font-size: 10px; font-weight: 700; }
.upload-answer-choice > span { width: auto; margin: 0; color: inherit; font-size: inherit; }
.upload-answer-choice select { min-width: 40px; padding: 4px 5px; color: #8f5b0e; border: 1px solid #f0dfc0; border-radius: 6px; background: #fff; font-size: 11px; font-weight: 800; }
.upload-count { color: var(--purple); font-size: 11px; font-weight: 700; }
.composer-hint { color: var(--muted); font-size: 10px; }
.composer-paste-hint { margin: -5px 0 11px; color: #9b9eb0; font-size: 10px; }
.composer-paste-hint kbd { padding: 2px 5px; color: #6668b3; border: 1px solid #dddff3; border-radius: 4px; background: #f7f7ff; font: 700 9px/1.2 inherit; }
.composer textarea, .composer input, .solution-composer textarea { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; resize: none; }
.title-input { padding: 5px 0 9px; border-bottom: 1px solid var(--line) !important; font-size: 14px; }
.composer textarea { min-height: 47px; padding: 11px 0 7px; font-size: 16px; }
.composer textarea::placeholder, textarea::placeholder, input::placeholder { color: #b0b3c1; }
.composer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.composer-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.composer-tools select { max-width: 145px; padding: 6px 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; background: var(--soft); font-size: 12px; }
.composer-tools select[name="answer_choice"] { max-width: 170px; color: #8f5b0e; border-color: #f0dfc0; background: #fff8e9; }
.upload-button { display: inline-flex; align-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 8px; padding: 6px 9px; cursor: pointer; font-size: 12px; font-weight: 700; }
.upload-button.full { width: 100%; margin: 5px 0 10px; }
.composer-tools small, .solution-composer > small { max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.join-banner, .teacher-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 28px; }
.join-banner p, .teacher-banner p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.join-banner .button, .teacher-banner .button { margin-left: auto; }
.join-icon, .teacher-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 auto; color: #fff; border-radius: 13px; background: var(--purple); font-size: 20px; }
.teacher-icon { color: #a96e20; background: #fff0cb; }
.feed-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.feed-toolbar h2 { margin-bottom: 0; }
.feed-toolbar > div > span { color: var(--muted); font-size: 12px; }
.feed-tabs { display: flex; gap: 7px; margin: -3px 0 13px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #f4f5fa; }
.feed-tabs a { flex: 1; padding: 8px 11px; color: var(--muted); border-radius: 9px; font-size: 12px; font-weight: 700; text-align: center; transition: .18s ease; }
.feed-tabs a.active, .feed-tabs a:hover { color: var(--purple); background: #fff; box-shadow: 0 4px 12px rgba(44,49,91,.07); }
.feed-tabs .unanswered-feed-tab { color: #b55349; }
.feed-tabs .unanswered-feed-tab.active, .feed-tabs .unanswered-feed-tab:hover { color: #a3473e; }
.feed-tabs b { margin-left: 4px; font-size: 10px; }
.search-form { display: flex; align-items: center; width: 205px; padding: 3px 4px 3px 11px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.search-form input { width: 100%; min-width: 0; padding: 5px 0; border: 0; outline: 0; font-size: 13px; }
.search-form button { width: 27px; height: 27px; color: var(--purple); border: 0; border-radius: 7px; background: var(--purple-soft); font-size: 20px; line-height: 1; }
.category-row { display: flex; gap: 7px; margin-bottom: 15px; overflow-x: auto; scrollbar-width: none; }
.category-row::-webkit-scrollbar { display: none; }
.category-filter { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 7px 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; background: #fff; font-size: 12px; font-weight: 600; }
.category-filter.active, .category-filter:hover { color: var(--purple); border-color: #cecff5; background: var(--purple-soft); }
.category-filter i, .category-side i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; }
.category-filter small { opacity: .7; }
.question-list { display: grid; gap: 11px; }
.question-card { padding: 16px 19px 13px; transition: .18s ease; }
.question-card:hover { transform: translateY(-2px); box-shadow: 0 15px 33px rgba(44,49,91,.1); }
.question-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 11px; }
.answer-choice-pill { padding: 4px 7px; color: #8f5b0e; border: 1px solid #f0dfc0; border-radius: 6px; background: #fff5df; font-size: 10px; }
.answer-choice-pill b { font-size: 11px; }
.category-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; }
.dot-separator { color: #c7c9d3; }
.question-category-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.question-category-link:hover { color: var(--purple); }
.question-topic-link { color: inherit; font-weight: 600; }
.question-topic-link:hover { color: var(--purple); }
.question-main { display: block; padding: 10px 0 11px; }
.question-main h3 { font-size: 19px; }
.question-main p { max-width: 700px; margin: 0; color: var(--muted); white-space: pre-line; }
.profile-link { color: inherit; }
.profile-link:hover { color: var(--purple); }
.feed-preview { position: relative; width: min(100%, 570px); height: 235px; margin: 1px 0 14px; overflow: hidden; border-radius: 13px; background: var(--soft); }
.feed-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feed-preview img[data-lightbox], .library-preview img[data-lightbox], .profile-preview img[data-lightbox], .question-image[data-lightbox], .solution-image[data-lightbox], .avatar img[data-lightbox], .upload-preview-item img[data-lightbox] { cursor: zoom-in; }
.feed-preview span, .library-preview span, .profile-preview span { position: absolute; right: 9px; bottom: 9px; padding: 4px 7px; color: #fff; border-radius: 6px; background: rgba(32,35,53,.68); font-size: 10px; font-weight: 700; }
.image-label { display: inline-block; margin-top: 8px; color: var(--purple); font-size: 12px; font-weight: 700; }
.question-footer, .detail-actions { display: flex; align-items: center; gap: 14px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.question-footer a { margin-left: auto; color: var(--purple); font-weight: 700; }
.quick-bookmark { margin: 0; }
.quick-bookmark button { padding: 3px 6px; color: #9a6a22; border: 0; border-radius: 6px; background: transparent; font-size: 18px; line-height: 1; }
.quick-bookmark button:hover { background: #fff5df; }
.solution-count b { color: var(--ink); }
.solution-count.has-solutions b { color: var(--purple); }
.question-status-summary { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); }
.status-summary { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; }
.status-summary.understood { color: #197c67; background: #e6f7f1; }
.status-summary.bookmarked { color: #8f5b0e; background: #fff2d4; }
.status-summary.reminder { color: #a66a1d; background: #fff5df; }
.status-summary.next-review { color: var(--purple); background: var(--purple-soft); }
.status-pill { display: inline-flex; align-items: center; padding: 3px 8px; margin-left: auto; border-radius: 99px; font-size: 10px; font-weight: 700; }
.status-pill.revisit { color: #a66a1d; background: #fff2d4; }
.status-pill.understood { color: #197c67; background: #e6f7f1; }
.status-pill.unresolved { color: #b55349; background: #fff0ee; }
.status-pill.bookmarked { color: #8f5b0e; background: #fff2d4; }
.status-pill.neutral { color: #657088; background: #eef1f6; }
.side-column { display: grid; gap: 14px; }
.side-card { padding: 18px; }
.side-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font: 700 17px "Space Grotesk", Arial, sans-serif; }
.side-symbol { color: var(--purple); font-size: 24px; }
.side-card p { margin-bottom: 15px; color: var(--muted); font-size: 13px; }
.text-link { color: var(--purple); font-size: 13px; font-weight: 700; }
.side-link-row { display: flex; flex-wrap: wrap; gap: 11px; }
.unresolved-link { color: #b55349; }
.similar-questions { width: 100%; max-width: none; padding: 18px 20px 20px; margin: 0; }
.similar-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 12px; }
.similar-heading h2 { margin: 0; font-size: 17px; }
.similar-heading a { color: var(--purple); font-size: 11px; font-weight: 800; white-space: nowrap; }
.similar-heading a span { font-size: 15px; vertical-align: -1px; }
.similar-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.similar-question { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #ececf5; border-radius: 12px; background: linear-gradient(145deg, #fff, #fbfbff); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.similar-question:hover { background: var(--purple-soft); }
.similar-question:hover { border-color: #d4d5f8; box-shadow: 0 8px 18px rgba(73,75,155,.08); transform: translateY(-1px); }
.similar-question > img, .similar-placeholder { width: 62px; height: 62px; flex: 0 0 62px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); object-fit: cover; }
.similar-placeholder { display: grid; place-items: center; color: #aaaaf1; font: 24px "Space Grotesk", Arial, sans-serif; }
.similar-copy { display: grid; min-width: 0; gap: 1px; }
.similar-copy strong { overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.similar-copy span, .similar-copy small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.similar-copy small { color: #8b8fa2; }
.similar-empty { margin: 0; padding: 9px 4px 4px; color: var(--muted); font-size: 12px; }
.category-side { padding: 16px 0; }
.category-side .side-title { padding: 0 17px; }
.category-side > a { display: flex; justify-content: space-between; align-items: center; padding: 8px 17px; color: var(--muted); font-size: 13px; }
.category-side > a:hover { color: var(--purple); background: var(--purple-soft); }
.category-side > a span { display: flex; align-items: center; gap: 9px; }
.category-side > a small { color: #b1b3c0; }
.side-note { display: flex; gap: 10px; padding: 5px 5px; color: #95651c; }
.side-note > span { color: #dca43f; font-size: 19px; }
.side-note strong { font-size: 12px; }
.side-note p { margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.empty-state { padding: 52px 20px; text-align: center; }
.empty-state.compact { padding: 30px 18px; }
.empty-state.full-width { grid-column: 1 / -1; }
.empty-mark { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 13px; color: var(--purple); background: var(--purple-soft); border-radius: 16px; font: 30px "Space Grotesk", Arial, sans-serif; }
.empty-state h3 { margin-bottom: 5px; }
.empty-state p { max-width: 400px; margin: 0 auto 18px; color: var(--muted); }
.login-layout { display: grid; grid-template-columns: 1.1fr .72fr; align-items: center; gap: clamp(45px, 8vw, 125px); min-height: calc(100vh - 180px); max-width: 1050px; margin: 0 auto; }
.login-copy h1 { margin-top: 12px; font-size: clamp(40px, 5.8vw, 68px); }
.login-copy h1 em { color: var(--purple); font-style: normal; }
.login-copy > p { max-width: 530px; color: var(--muted); font-size: 17px; }
.login-points { display: grid; gap: 8px; margin-top: 28px; color: #535874; font-size: 13px; font-weight: 600; }
.login-card { padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 20px 55px rgba(44,49,91,.1); }
.login-card h2 { margin: 6px 0 4px; font-size: 26px; }
.login-card > p { margin-bottom: 22px; font-size: 13px; }
.login-form { display: grid; gap: 8px; }
.login-form > label { color: #555a70; font-size: 12px; font-weight: 700; }
.login-form > input { padding: 12px 13px; border: 1px solid #dfe1eb; border-radius: 10px; outline-color: var(--purple); }
.login-form > label .field-hint { float: right; color: #a3a6b3; font-size: 10px; font-weight: 500; }
.role-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 12px; }
.role-option { display: flex; gap: 8px; padding: 11px 9px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.role-option:has(input:checked) { border-color: #bfc0f3; background: var(--purple-soft); }
.role-option input { accent-color: var(--purple); margin-top: 3px; }
.role-option span { display: grid; gap: 1px; }
.role-option b { font-size: 12px; }
.role-option small { color: var(--muted); font-size: 10px; line-height: 1.25; }
.privacy-note { padding-top: 17px; margin-top: 20px; border-top: 1px solid var(--line); color: #a4a7b5; font-size: 11px; line-height: 1.5; }
.privacy-note code { color: #6769b5; font-family: Consolas, monospace; }
.auth-switch { padding-top: 15px; margin-top: 15px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; text-align: center; }
.auth-switch a { color: var(--purple); font-weight: 800; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 900px); gap: 0; max-width: 900px; margin: 0 auto; }
.detail-main, .detail-side, .detail-solutions { grid-column: 1; min-width: 0; }
.detail-side { margin-top: 18px; }
.detail-composer { margin-top: 30px; }
.detail-side > .similar-questions { margin-top: 20px; }
.detail-solutions { grid-column: 1; min-width: 0; }
.back-link { display: inline-block; margin: 0 0 15px; color: var(--muted); font-size: 13px; font-weight: 600; }
.back-link:hover { color: var(--purple); }
.detail-question { padding: 22px 23px 15px; }
.detail-question h1 { margin: 14px 0 17px; font-size: clamp(27px, 4vw, 39px); letter-spacing: -.03em; }
.question-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.question-title-row h1 { min-width: 0; flex: 1; }
.question-title-tools { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: 0 0 auto; margin: 14px 0 0; }
.question-title-row .content-owner-actions { width: auto; flex: 0 0 auto; margin: 0; }
.question-tools-menu { position: relative; z-index: 8; width: fit-content; margin: -4px 0 12px auto; }
.detail-question > .question-tools-menu { display: none; }
.question-tools-menu summary { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; color: var(--purple); border: 1px solid #dfe0f5; border-radius: 9px; background: #fafaff; font-size: 11px; font-weight: 800; cursor: pointer; list-style: none; }
.question-tools-menu summary::-webkit-details-marker { display: none; }
.question-tools-menu summary:hover, .question-tools-menu[open] summary { border-color: #c9caf4; background: var(--purple-soft); }
.question-tools-menu summary > span { font-size: 14px; line-height: 1; }
.question-tools-menu summary > b { font-size: 14px; line-height: 1; transition: transform .18s ease; }
.question-tools-menu[open] summary > b { transform: rotate(180deg); }
.question-tools-popover { position: absolute; top: calc(100% + 8px); right: 0; display: grid; width: min(330px, calc(100vw - 54px)); gap: 7px; padding: 13px; border: 1px solid #dedff1; border-radius: 13px; background: #fff; box-shadow: 0 16px 36px rgba(44,49,91,.16); }
.question-tools-kicker { color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.question-tools-popover > strong { margin: -3px 0 3px; color: var(--ink); font-size: 14px; }
.question-tools-popover form { margin: 0; }
.question-tools-popover button, .question-tools-popover > a, .question-tool-disabled { display: flex; align-items: center; width: 100%; gap: 9px; padding: 9px; color: var(--ink); border: 1px solid transparent; border-radius: 9px; background: #fbfbff; text-align: left; cursor: pointer; }
.question-tools-popover button:hover, .question-tools-popover > a:hover { border-color: #d9daf6; background: var(--purple-soft); }
.question-tool-icon { display: inline-grid; width: 27px; height: 27px; place-items: center; flex: 0 0 27px; color: var(--purple); border-radius: 8px; background: #ededff; font-size: 15px; }
.question-tools-popover button > span:nth-child(2), .question-tools-popover > a > span:nth-child(2), .question-tool-disabled > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.question-tools-popover button b, .question-tools-popover > a b, .question-tool-disabled b { font-size: 11px; }
.question-tools-popover button small, .question-tools-popover > a small, .question-tool-disabled small { color: var(--muted); font-size: 9px; }
.question-tools-popover button i, .question-tools-popover > a i { margin-left: auto; color: var(--purple); font-size: 15px; font-style: normal; }
.question-tool-disabled { color: var(--muted); cursor: default; opacity: .72; }
.question-tools-trigger { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 5px 9px; color: var(--purple); border: 1px solid #e1e1f3; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 800; }
.question-tools-trigger:hover { border-color: #c8c9f4; background: var(--purple-soft); }
.question-tools-trigger > span:first-child { font-size: 14px; line-height: 1; }
.question-tools-trigger.has-activity { color: #4d4fca; border-color: #cfd0f7; background: #f1f1ff; }
.question-tools-trigger.has-activity > em { color: #6d70ee; font-size: 8px; font-style: normal; line-height: 1; }
.question-tools-trigger.has-activity:hover { border-color: #bfc1f2; background: #eaeaFF; }
.question-tools-page { max-width: 1020px; margin: 0 auto; }
.question-tools-page-hero { display: flex; align-items: center; gap: 16px; padding: 4px 2px 2px; margin: 18px 0 24px; }
.question-tools-page-hero .exam-hero-icon { display: inline-grid; width: 50px; height: 50px; place-items: center; flex: 0 0 50px; color: #fff; border-radius: 15px; background: linear-gradient(145deg, #7778f3, #5658db); box-shadow: 0 11px 24px rgba(91,92,226,.22); font-size: 22px; }
.question-tools-page-hero h1 { margin: 5px 0 6px; font-size: clamp(30px, 4vw, 43px); }
.question-tools-page-hero .subtitle { max-width: 700px; margin-bottom: 0; }
.question-tools-page-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(285px, .78fr); gap: 16px; align-items: start; }
.question-tools-left { display: contents; }
.question-tools-right { display: grid; align-content: start; gap: 18px; min-width: 0; }
.question-tools-preview, .question-tools-list, .question-tools-previews { border-radius: 18px; box-shadow: 0 12px 30px rgba(44,49,91,.06); }
.question-tools-preview, .question-tools-list { padding: 22px; }
.question-tools-preview { min-width: 0; grid-column: 1 / -1; }
.question-tools-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.question-tools-preview-head a { color: var(--purple); font-size: 11px; font-weight: 800; }
.question-tools-preview h2 { margin: 12px 0 5px; font-size: 20px; }
.question-tools-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 11px; }
.question-tools-meta i { font-style: normal; }
.question-tools-content { margin: 15px 0 0; color: #5c6178; font-size: 13px; line-height: 1.6; white-space: pre-line; }
.question-tools-images { display: grid; gap: 8px; padding: 8px; margin-top: 15px; border: 1px solid #e4e5f0; border-radius: 13px; background: linear-gradient(145deg, #f8f8ff, #f1f1f9); }
.question-tools-images img { display: block; width: 100%; max-height: 330px; border: 1px solid #e3e4ef; border-radius: 9px; background: #fff; object-fit: contain; cursor: zoom-in; }
.question-tools-text-mark { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 17px; color: var(--muted); border-radius: 10px; background: #f7f7ff; font-size: 12px; }
.question-tools-text-mark span { color: #b5b6f3; font: 700 30px/1 Georgia, serif; }
.question-tools-text-mark p { margin: 0; }
.question-tools-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.question-tools-list { grid-column: 1; }
.question-tools-right { grid-column: 2; }
.question-tools-list > .card-kicker, .question-tools-list > h2, .question-tools-list > .question-tools-list-intro { grid-column: 1 / -1; }
.question-tools-list h2 { margin: 6px 0 5px; font-size: 21px; }
.question-tools-list-intro { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.question-tools-list form { display: flex; min-width: 0; margin: 0; }
.question-tool-card { display: flex; align-items: center; width: 100%; height: 100%; gap: 11px; margin-top: 0; padding: 12px; color: var(--ink); border: 1px solid #e4e5f0; border-radius: 11px; background: #fbfbff; text-align: left; cursor: pointer; }
.question-tool-card:hover { border-color: #cfd0f6; background: var(--purple-soft); transform: translateY(-1px); }
.question-tool-card-icon { display: inline-grid; width: 34px; height: 34px; place-items: center; flex: 0 0 34px; border-radius: 10px; font-size: 17px; }
.question-tool-card-icon.purple { color: var(--purple); background: #ededff; }
.question-tool-card-icon.green { color: #1b927c; background: #e8f8f3; }
.question-tool-card-icon.orange { color: #b67825; background: #fff4df; }
.question-tool-card-icon.blue { color: #2f72c8; background: #eaf3ff; }
.question-tool-card > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.question-tool-card b { font-size: 12px; }
.question-tool-card small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.question-tool-card > i { margin-left: auto; color: var(--purple); font-size: 17px; font-style: normal; }
.question-tool-card.is-disabled { color: var(--muted); cursor: default; opacity: .72; }
.question-tool-card.is-disabled:hover { border-color: #e4e5f0; background: #fbfbff; transform: none; }
.question-tool-card.is-complete { cursor: default; background: #fbfcff; }
.question-tool-card.is-complete:hover { border-color: #e4e5f0; background: #fbfcff; transform: none; }
.question-tool-results { display: grid; gap: 12px; margin-top: 18px; }
.question-tool-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 0 2px; }
.question-tool-results-heading h2 { margin: 5px 0 0; font-size: 21px; }
.question-tool-results-heading > span { color: var(--muted); font-size: 11px; }
.question-tool-result { padding: 18px 20px; }
.question-tool-result-head { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid #ececf6; }
.question-tool-result-head > div { display: grid; gap: 3px; }
.question-tool-delete-form { margin-left: auto; }
.question-tool-delete-form .text-action { padding: 4px 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: 10px; }
.question-tool-delete-form .text-action:hover { border-color: #f0cdd6; background: #fff5f7; }
.question-tool-delete-form.admin-tool-delete .text-action { color: #a73d58; border-color: #f0d3dc; background: #fff7f9; }
.question-tool-delete-form.admin-tool-delete .text-action:hover { border-color: #df9caf; background: #ffedf2; }
.question-tool-result-head strong { font-size: 14px; }
.question-tool-result-head small { color: var(--muted); font-size: 11px; }
.question-tool-result-icon { display: inline-grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; font-size: 16px; }
.question-tool-result-icon.purple { color: var(--purple); background: #ededff; }
.question-tool-result-icon.green { color: #1b927c; background: #e8f8f3; }
.question-tool-result-icon.orange { color: #b67825; background: #fff4df; }
.question-tool-result-icon.blue { color: #2f72c8; background: #eaf3ff; }
.question-tool-result-body { max-height: none; padding-top: 15px; }
.question-tools-previews { position: sticky; top: 18px; min-width: 0; padding: 18px; }
.question-tools-previews-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.question-tools-previews-heading h2 { margin: 5px 0 0; font-size: 21px; }
.question-tools-previews-heading > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.question-tools-preview-list { display: grid; gap: 8px; max-height: 218px; margin-top: 15px; padding-right: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.question-tools-preview-list::-webkit-scrollbar { width: 5px; }
.question-tools-preview-list::-webkit-scrollbar-track { border-radius: 5px; background: #f1f1fa; }
.question-tools-preview-list::-webkit-scrollbar-thumb { border-radius: 5px; background: #c9c9ee; }
.question-tools-preview-list { scrollbar-color: #c9c9ee #f1f1fa; scrollbar-width: thin; }
.question-tools-preview-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; color: var(--ink); border: 1px solid #e6e6f0; border-radius: 11px; background: #fbfbff; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.question-tools-preview-item:hover { border-color: #cccef4; background: var(--purple-soft); transform: translateY(-1px); }
.question-tools-preview-item > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.question-tools-preview-item strong { font-size: 12px; }
.question-tools-preview-item small { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.question-tools-preview-item > i { margin-left: auto; color: var(--purple); font-size: 16px; font-style: normal; }
.question-tools-preview-item.green > i { color: #1b927c; }
.question-tools-preview-item.orange > i { color: #b67825; }
.question-tools-preview-item.blue > i { color: #2f72c8; }
.question-tools-preview-empty { display: grid; justify-items: start; gap: 5px; padding: 16px 13px; color: var(--muted); border: 1px dashed #dedfee; border-radius: 11px; background: #fcfcff; }
.question-tools-preview-empty span { color: var(--purple); font-size: 19px; }
.question-tools-preview-empty strong { color: var(--ink); font-size: 12px; }
.question-tools-preview-empty small { font-size: 10px; line-height: 1.45; }
.question-tool-result { scroll-margin-top: 22px; }
.question-rotate-control { display: inline-flex; align-items: center; gap: 5px; max-width: 30px; overflow: hidden; padding: 5px 7px; color: var(--muted); border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 11px; font-weight: 700; opacity: 0; white-space: nowrap; transition: max-width .2s ease, color .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease; }
.question-rotate-control .rotate-icon { color: var(--purple); font-size: 19px; line-height: 1; }
.question-rotate-control:hover, .question-rotate-control:focus-visible { max-width: 132px; color: var(--purple); border-color: #dadaf8; background: var(--purple-soft); outline: 0; }
.detail-question:hover .question-rotate-control, .detail-question:focus-within .question-rotate-control { opacity: 1; }
.question-image { transition: transform .25s ease; }
.question-body, .solution-body { color: #50546a; font-size: 16px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.solution-markdown { white-space: normal; }
.solution-markdown h1, .solution-markdown h2, .solution-markdown h3, .solution-markdown h4, .solution-markdown h5, .solution-markdown h6 { margin: 1.2em 0 .45em; color: var(--ink); line-height: 1.25; }
.solution-markdown h1 { font-size: 24px; }
.solution-markdown h2 { font-size: 21px; }
.solution-markdown h3 { font-size: 18px; }
.solution-markdown p { margin: 0 0 12px; }
.solution-markdown ul, .solution-markdown ol { padding-left: 24px; margin: 0 0 14px; }
.solution-markdown li { padding-left: 4px; margin: 5px 0; }
.solution-markdown blockquote { padding: 8px 13px; margin: 12px 0; color: #626781; border-left: 3px solid #b8b9f3; background: #f7f7ff; }
.solution-markdown hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.solution-markdown code { padding: 2px 5px; color: #5557a8; border-radius: 5px; background: #ececff; font-family: Consolas, monospace; font-size: .88em; }
.solution-markdown pre { padding: 12px; overflow-x: auto; border-radius: 10px; background: #27283b; color: #f5f5ff; }
.solution-markdown pre code { padding: 0; color: inherit; background: transparent; }
.solution-markdown a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.ai-solution-body { position: relative; }
.ai-solution-body.is-collapsed { max-height: 310px; overflow: hidden; }
.ai-solution-body.is-collapsed::after { position: absolute; right: 0; bottom: 0; left: 0; height: 90px; pointer-events: none; content: ""; background: linear-gradient(transparent, #fff); }
.solution-more { display: inline-flex; align-items: center; gap: 5px; padding: 7px 0; margin-top: 4px; color: var(--purple); border: 0; background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.solution-more:hover { color: #3f40a8; }
.solution-more span { font-size: 15px; }
.question-image, .solution-image { display: block; max-width: 100%; max-height: 600px; margin-top: 18px; border-radius: 12px; object-fit: contain; }
.question-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; }
.question-gallery .question-image { width: 100%; height: auto; min-height: 0; margin-top: 18px; background: var(--soft); }
.question-gallery.single-image { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 0; padding: 14px; margin-top: 4px; border: 1px solid #e8e8f4; border-radius: 17px; background: linear-gradient(145deg, #fafaff, #f3f3fb); }
.question-gallery.single-image .question-image { width: auto; height: auto; max-width: min(100%, 690px); max-height: min(68vh, 620px); margin: 0 auto; background: transparent; }
.question-gallery.is-quarter-turned { align-content: center; overflow: hidden; }
.question-comments { padding-top: 10px; margin-top: 12px; border-top: 1px solid #ececf5; }
.question-comments-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.question-comments-heading > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.question-comments-heading h2 { margin: 2px 0 0; font-size: 14px; }
.question-comments-heading > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.question-comments-intro { margin: 6px 0 1px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.question-comments .comment-form { align-items: center; margin-top: 5px; padding-top: 0; }
.question-comments .comment-form textarea { height: 34px; min-height: 34px; padding: 7px 10px; resize: none; overflow: hidden; }
.question-comments .comment-form .button { min-height: 34px; padding: 7px 11px; }
.ai-status { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-top: 17px; color: #5557a8; border: 1px solid #dcdcff; border-radius: 12px; background: linear-gradient(135deg, #f7f7ff, #f0f0ff); }
.ai-status > div { min-width: 0; flex: 1; }
.ai-status > form { margin-left: auto; }
.ai-status-icon { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; color: #fff; border-radius: 8px; background: var(--purple); font-size: 16px; }
.ai-status strong { font-size: 12px; }
.ai-status p { margin: 2px 0 0; color: #7c7fa3; font-size: 11px; line-height: 1.45; }
.ai-status.processing { color: #216f7c; border-color: #c8e8ea; background: linear-gradient(135deg, #f2fbfb, #eaf8f8); }
.ai-status.processing .ai-status-icon { background: #2996a1; }
.ai-status.failed { color: #9a4d48; border-color: #f0d2cf; background: #fff8f7; }
.ai-status.failed .ai-status-icon { background: #d86a60; }
.ai-retry-button { flex: 0 0 auto; padding: 7px 10px; color: #9a4d48; border: 1px solid #e7bdb8; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.ai-retry-button:hover { color: #783c38; border-color: #d99a94; background: #fff4f2; }
.detail-actions { margin-top: 22px; flex-wrap: wrap; }
.detail-actions form { margin: 0; }
.state-button.auto-category { color: #6c53b5; border-color: #ddd2f2; background: #fbf8ff; }
.state-button.auto-category:hover { color: #57409b; border-color: #cbb9eb; background: #f4edff; }
.auto-category-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1.35fr); align-items: center; gap: 18px; padding: 14px; margin-top: 13px; border: 1px solid #ddd2f2; border-radius: 12px; background: linear-gradient(120deg, #fbf9ff, #fff); }
.auto-category-review-copy { display: grid; min-width: 0; gap: 3px; }
.auto-category-review-copy .card-kicker { color: #7758b7; font-size: 9px; }
.auto-category-review-copy strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.auto-category-review-copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.auto-category-review-form { display: grid; gap: 9px; min-width: 0; }
.auto-category-review-selects { display: grid; grid-template-columns: minmax(120px, .75fr) minmax(190px, 1.25fr); gap: 8px; }
.auto-category-review-selects label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 800; }
.auto-category-review-selects label.is-disabled { opacity: .55; }
.auto-category-review-selects select { width: 100%; min-width: 0; min-height: 35px; padding: 7px 28px 7px 9px; color: var(--ink); border: 1px solid #dcd8f1; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 700; }
.auto-category-review-selects select:focus { outline: 2px solid #cbc3f2; outline-offset: 1px; }
.auto-category-review-actions { display: flex; justify-content: flex-end; gap: 7px; }
.auto-category-review-actions .button { min-height: 35px; padding: 8px 11px; font-size: 11px; }
.content-owner-actions { display: inline-flex; align-items: center; gap: 10px; }
.detail-question > .content-owner-actions { justify-content: flex-end; width: 100%; margin: -4px 0 4px; }
.content-owner-actions form { margin: 0; }
.text-action { padding: 4px 0; color: var(--muted); border: 0; background: transparent; font-size: 12px; font-weight: 700; }
.text-action:hover { color: var(--purple); }
.text-action.danger { color: #b55349; }
.text-action.danger:hover { color: #8f4039; }
.state-button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12px; font-weight: 700; }
.state-button.understood { color: #197c67; }
.state-button.revisit { color: #a66a1d; }
.state-button.selected { background: #e9f8f2; border-color: #b9eadb; }
.state-button.revisit.selected { background: #fff5df; border-color: #f2d9a2; }
.state-button.bookmark { color: #8f5b0e; border-color: #f0dfc0; }
.state-button.bookmark.selected { color: #8f5b0e; background: #fff2d4; border-color: #e6ba6f; }
.repeat-control { position: relative; }
.repeat-options { position: absolute; z-index: 3; top: calc(100% + 8px); right: 0; width: 238px; padding: 12px; border: 1px solid #e7d9bd; border-radius: 12px; background: #fffdf7; box-shadow: 0 13px 30px rgba(44,49,91,.14); }
.repeat-options > span { display: block; margin-bottom: 8px; color: #9a6a22; font-size: 11px; font-weight: 700; }
.repeat-option-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.repeat-option-list form { margin: 0; }
.repeat-option { width: 100%; padding: 7px 4px; color: #8c6c38; border: 1px solid #f0dfc0; border-radius: 7px; background: #fff; font-size: 11px; font-weight: 700; }
.repeat-option:hover, .repeat-option.active { color: #8f5b0e; border-color: #e6ba6f; background: #fff2d4; }
.custom-reminder { padding-top: 10px; margin-top: 10px !important; border-top: 1px solid #f0e5d0; }
.custom-reminder label { display: block; margin-bottom: 5px; color: #9a6a22; font-size: 11px; font-weight: 700; }
.custom-reminder > div { display: flex; gap: 6px; }
.custom-reminder input { min-width: 0; flex: 1; padding: 6px 7px; color: #7f6438; border: 1px solid #f0dfc0; border-radius: 7px; background: #fff; font-size: 11px; }
.custom-reminder .repeat-option { flex: 0 0 auto; width: auto; padding-left: 9px; padding-right: 9px; }
.reminder-note { padding: 8px 0 0; color: #9a6a22; font-size: 11px; line-height: 1.5; }
.reminder-note strong { font-weight: 700; }
.repeat-clear { padding: 8px 0 1px; color: #ad5a51; border: 0; background: transparent; font-size: 11px; font-weight: 700; }
.repeat-clear:hover { color: #873c35; text-decoration: underline; }
.solutions-heading { display: flex; align-items: end; justify-content: space-between; margin: 28px 2px 12px; }
.solutions-heading h2 { margin: 0; }
.solutions-heading span { color: var(--muted); font-size: 12px; }
.solution-card { padding: 17px 19px; margin-bottom: 11px; }
.solution-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.solution-head > div { display: grid; gap: 1px; }
.solution-head > div span { color: var(--muted); font-size: 11px; }
.solution-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); }
.solution-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.solution-gallery .solution-image { width: 100%; height: 250px; margin-top: 0; background: var(--soft); }
.solution-comments { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.solution-comments.is-empty { display: flex; align-items: center; gap: 12px; padding-top: 10px; margin-top: 10px; }
.solution-comments.is-empty .comments-heading { flex: 0 0 auto; margin: 0; }
.solution-comments.is-empty .comment-form { min-width: 0; flex: 1; align-items: center; padding-top: 0; }
.solution-comments.is-empty .comment-form textarea { height: 36px; min-height: 36px; padding: 8px 10px; resize: none; overflow: hidden; }
.solution-comments.is-empty .comment-form .button { min-height: 36px; padding: 8px 11px; }
.comments-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: var(--muted); font-size: 11px; }
.comments-heading span { display: inline-grid; min-width: 20px; height: 20px; padding: 0 5px; place-items: center; color: #5c5db2; border-radius: 7px; background: var(--purple-soft); font-size: 10px; font-weight: 800; }
.comment-row { display: flex; align-items: flex-start; gap: 8px; padding: 9px 0; }
.comment-row + .comment-row { border-top: 1px solid #f0f0f5; }
.avatar.tiny { width: 25px; height: 25px; flex: 0 0 auto; font-size: 10px; }
.comment-row > div { min-width: 0; }
.comment-row-actions { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.comment-row-actions form { margin: 0; }
.comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 10px; }
.comment-meta strong { color: var(--ink); font-size: 11px; }
.comment-meta span { padding: 2px 5px; color: #ab711d; border-radius: 4px; background: #fff1ce; font-size: 9px; font-weight: 800; }
.comment-meta time { color: #a5a8b5; }
.comment-row p { margin: 3px 0 0; color: #555a70; font-size: 12px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.comment-form { display: flex; align-items: flex-end; gap: 8px; padding-top: 8px; }
.comment-form textarea { min-width: 0; flex: 1; min-height: 42px; padding: 9px 10px; color: var(--ink); border: 1px solid #dfe1eb; border-radius: 9px; outline-color: var(--purple); background: #fff; resize: vertical; font-size: 12px; }
.comment-form .button { flex: 0 0 auto; min-height: 40px; padding: 9px 12px; font-size: 11px; }
.comment-login-note { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.solution-understood { padding: 7px 10px; color: #197c67; border: 1px solid #c6eddf; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 700; }
.solution-understood:hover, .solution-understood.selected { background: #e6f8f1; }
.teacher-stamp { margin-left: auto; color: #ab711d; background: #fff1ce; padding: 3px 7px; border-radius: 5px; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.admin-stamp { margin-left: auto; color: #9b3b55; background: #ffe9ef; padding: 3px 7px; border-radius: 5px; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.member-stamp { margin-left: auto; color: #657088; background: #eef1f6; padding: 3px 7px; border-radius: 5px; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.ai-stamp { margin-left: auto; color: #5557a8; background: #e8e8ff; padding: 3px 7px; border-radius: 5px; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.solution-composer, .help-card { padding: 20px; }
.solution-composer h2, .help-card h2 { margin-top: 5px; font-size: 21px; }
.solution-composer p, .help-card p { font-size: 13px; }
.solution-composer textarea { min-height: 100px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15px; }
.solver-question-preview-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 2px 9px; margin: 10px 0 11px; color: #5557a8; border: 0; border-top: 1px solid #ececf6; background: transparent; cursor: pointer; text-align: left; font-size: 10px; font-weight: 800; }
.solver-question-preview-trigger:hover, .solver-question-preview-trigger:focus-visible { color: var(--purple); outline: 0; }
.solver-question-preview-trigger small { margin-left: auto; color: var(--muted); font-size: 9px; font-weight: 600; }
.solver-question-preview-trigger b { color: var(--purple); font-size: 14px; line-height: 1; }
.question-peek { position: fixed; z-index: 70; top: 92px; right: 18px; display: flex; width: min(360px, calc(100vw - 36px)); max-height: min(72vh, 680px); flex-direction: column; overflow: hidden; border: 1px solid #d9daf0; border-radius: 15px; background: #fff; box-shadow: 0 18px 48px rgba(38,41,82,.2); }
.question-peek[hidden] { display: none; }
.question-peek-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; color: var(--ink); border-bottom: 1px solid #ececf6; background: #fafaff; cursor: grab; touch-action: none; user-select: none; }
.question-peek-head.is-dragging { cursor: grabbing; }
.question-peek-head strong { font-size: 12px; }
.question-peek-head span { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; font-weight: 500; }
.question-peek-close { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; color: var(--muted); border: 1px solid #e2e3ef; border-radius: 8px; background: #fff; cursor: pointer; font-size: 18px; line-height: 1; }
.question-peek-close:hover, .question-peek-close:focus-visible { color: var(--purple); border-color: #cfd0f5; outline: 0; background: var(--purple-soft); }
.question-peek-body { min-height: 0; overflow: auto; padding: 10px; background: #f6f6fb; }
.question-peek-gallery { display: grid; gap: 10px; }
.question-peek-image { display: block; width: 100%; height: auto; max-height: 54vh; border: 1px solid #e2e3ef; border-radius: 10px; background: #fff; object-fit: contain; }
.solution-editor { resize: vertical !important; }
.format-note { padding: 9px 11px; margin: 2px 0 8px; color: var(--muted); border-radius: 9px; background: var(--soft); font-size: 12px; line-height: 1.55; }
.format-note strong { color: var(--purple); }
.format-note code { padding: 2px 4px; color: #5557a8; border-radius: 4px; background: #ececff; font-family: Consolas, monospace; font-size: 11px; }
.solution-editor-shell { overflow: hidden; border: 1px solid #dfe1ef; border-radius: 15px; background: #fff; box-shadow: 0 8px 20px rgba(66,68,130,.05); }
.solution-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px 11px; background: linear-gradient(135deg, #fbfbff, #f6f6ff); }
.solution-editor-head > div { display: grid; gap: 2px; min-width: 0; }
.solution-editor-head strong { color: var(--ink); font-size: 13px; }
.solution-editor-head span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.editor-live-state { flex: 0 0 auto; padding: 4px 8px; color: #5557a8 !important; border-radius: 99px; background: #eaeaff; font-size: 10px !important; font-weight: 800; }
.solution-editor-toolbar { display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 8px 10px; border-top: 1px solid #ececf6; border-bottom: 1px solid #ececf6; background: #fff; scrollbar-width: none; }
.solution-editor-toolbar::-webkit-scrollbar { display: none; }
.editor-tool { display: inline-grid; width: 31px; height: 30px; flex: 0 0 auto; place-items: center; padding: 0; color: #646780; border: 1px solid transparent; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 800; }
.editor-tool:hover, .editor-tool:focus-visible { color: var(--purple); border-color: #d8d8f7; outline: none; background: var(--purple-soft); }
.editor-tool.italic { font-family: Georgia, serif; font-size: 15px; font-style: italic; }
.editor-tool-divider { width: 1px; height: 20px; flex: 0 0 auto; margin: 0 2px; background: #e7e7f0; }
.solution-editor-canvas { display: block; width: 100%; min-height: 155px; overflow-y: auto; padding: 15px; color: var(--ink); outline: 0; background: #fff; font-size: 15px; line-height: 1.7; }
.solution-editor-canvas:focus { box-shadow: inset 0 0 0 2px rgba(91,92,226,.13); }
.solution-editor-canvas:empty::before { color: #a5a8b8; content: attr(data-placeholder); pointer-events: none; }
.solution-editor-canvas p { margin: 0 0 12px; font-size: inherit; }
.solution-editor-canvas h1, .solution-editor-canvas h2, .solution-editor-canvas h3, .solution-editor-canvas h4, .solution-editor-canvas h5, .solution-editor-canvas h6 { margin: 0 0 10px; color: var(--ink); line-height: 1.3; }
.solution-editor-canvas h3 { font-size: 18px; }
.solution-editor-canvas ul, .solution-editor-canvas ol { margin: 0 0 12px; padding-left: 24px; }
.solution-editor-canvas li { margin: 4px 0; }
.solution-editor-canvas blockquote { margin: 10px 0; padding: 8px 13px; color: #626781; border-left: 3px solid #b8b9f3; background: #f7f7ff; }
.solution-editor-canvas pre { margin: 10px 0; padding: 11px 13px; overflow-x: auto; color: #f5f5ff; border-radius: 9px; background: #27283b; font-family: Consolas, monospace; font-size: .9em; }
.editor-tool.is-active { color: var(--purple); border-color: #d8d8f7; background: var(--purple-soft); }
.editor-math-popover { display: grid; gap: 8px; padding: 11px 12px; border-bottom: 1px solid #ececf6; background: #fafaff; }
.editor-math-popover[hidden] { display: none; }
.editor-math-copy { display: grid; gap: 2px; }
.editor-math-copy strong { color: var(--ink); font-size: 12px; }
.editor-math-copy span { color: var(--muted); font-size: 11px; }
.editor-math-row { display: flex; align-items: center; gap: 7px; }
.editor-math-row input { min-width: 0; flex: 1; height: 34px; padding: 7px 10px; color: var(--ink); border: 1px solid #dfe1ef; border-radius: 8px; outline: 0; background: #fff; font: 14px Consolas, monospace; }
.editor-math-row input:focus { border-color: #aaaaf0; box-shadow: 0 0 0 3px rgba(91,92,226,.1); }
.editor-math-row .button { min-height: 34px; padding: 7px 11px; }
.editor-math-preview { min-height: 30px; padding: 5px 9px; color: #4f528d; border: 1px dashed #cfd0f0; border-radius: 8px; background: #f3f3ff; text-align: center; font-size: 16px; }
.editor-math { display: inline-block; margin: 0 2px; padding: 2px 5px; border: 1px solid #d9d9f2; border-radius: 6px; background: #f6f6ff; vertical-align: middle; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.editor-math:hover, .editor-math:focus { border-color: #aaaaf0; background: #eeeeff; box-shadow: 0 2px 8px rgba(91,92,226,.14); outline: 0; }
.editor-math mjx-container { margin: 0 !important; }
.solution-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 13px; color: #9a9dae; border-top: 1px solid #f0f0f6; background: #fcfcff; font-size: 10px; }
.solution-editor-footer span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solution-editor-footer span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.editor-help { padding: 0; margin: 8px 0 11px; }
.editor-help summary { padding: 9px 11px; color: #6c6ea1; cursor: pointer; list-style: none; }
.editor-help summary::-webkit-details-marker { display: none; }
.editor-help summary::before { display: inline-block; margin-right: 6px; content: '＋'; font-weight: 800; }
.editor-help[open] summary::before { content: '−'; }
.editor-help > div { padding: 0 11px 10px; }
.help-card .side-symbol { display: block; margin-bottom: 5px; }
.editor-page { max-width: 760px; margin: 0 auto; }
.solution-editor-page { max-width: 820px; }
.editor-card { padding: 27px; }
.editor-card h1 { margin: 7px 0 8px; font-size: 32px; }
.editor-card > .subtitle { margin-bottom: 25px; }
.editor-form { display: grid; gap: 8px; }
.editor-form > label, .editor-field-label { margin-top: 8px; color: #555a70; font-size: 12px; font-weight: 700; }
.editor-field-label span { color: #a3a6b3; font-size: 10px; font-weight: 500; }
.editor-form > input, .editor-form > textarea, .editor-form > select { width: 100%; padding: 11px 12px; color: var(--ink); border: 1px solid #dfe1eb; border-radius: 10px; outline-color: var(--purple); background: #fff; }
.editor-form > textarea { min-height: 110px; resize: vertical; }
.existing-image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; }
.existing-image { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: #fbfbfd; }
.existing-image img { display: block; width: 100%; height: 145px; border-radius: 7px; object-fit: cover; }
.existing-image span { display: flex; align-items: flex-start; gap: 5px; padding: 7px 1px 1px; color: #a44e48; font-size: 11px; font-weight: 600; }
.existing-image input { accent-color: #c95e55; }
.editor-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--line); }
.topics-page { max-width: 1120px; margin: 0 auto; }
.topics-hero { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: end; gap: 26px; margin: 0 auto 24px; }
.topics-hero h1 { margin: 8px 0 7px; font-size: clamp(32px, 5vw, 52px); }
.topics-hero h1 span { color: var(--purple); }
.topics-hero p { max-width: 600px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.topic-overview { position: relative; padding: 17px; overflow: hidden; border-color: #dedff3; background: linear-gradient(145deg, #fff, #f5f5ff); }
.topic-overview:after { position: absolute; right: -32px; bottom: -52px; width: 120px; height: 120px; content: ""; border: 1px solid #dfdfff; border-radius: 50%; box-shadow: 0 0 0 12px rgba(91,92,226,.04), 0 0 0 25px rgba(91,92,226,.025); }
.topic-overview-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; }
.topic-overview-icon { display: inline-grid; width: 30px; height: 30px; place-items: center; color: #fff; border-radius: 10px; background: linear-gradient(145deg, #7779f5, #5b5ce2); box-shadow: 0 6px 12px rgba(91,92,226,.2); font-size: 16px; }
.topic-overview-head > div { display: grid; gap: 2px; }
.topic-overview-head strong { font-size: 12px; }
.topic-overview-head small { color: var(--muted); font-size: 10px; }
.topic-overview-numbers { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 5px; margin-top: 15px; }
.topic-overview-numbers strong { color: var(--purple); font: 700 28px/1 "Space Grotesk", Arial, sans-serif; }
.topic-overview-numbers span { color: var(--muted); font-size: 11px; }
.topic-progress { height: 7px; overflow: hidden; border-radius: 99px; background: #e7e7f6; }
.topic-overview .topic-progress { position: relative; z-index: 1; margin-top: 10px; }
.topic-progress i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #6869ec, #69c5ad); transition: width .25s ease; }
.topicless-callout { margin: 0 auto 18px; padding: 17px 18px 14px; border-color: #f0dfc1; background: linear-gradient(120deg, #fffdf9, #fffaf1); }
.topicless-callout-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topicless-callout-head > div { min-width: 0; }
.topicless-callout h2 { margin: 5px 0 4px; font-size: 18px; }
.topicless-callout p { max-width: 620px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.topicless-callout-head .button { flex: 0 0 auto; }
.topicless-question-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0e5d5; }
.topicless-question { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px; color: var(--ink); border: 1px solid #f0e6d8; border-radius: 9px; background: rgba(255,255,255,.76); }
.topicless-question:hover { border-color: #e7c98d; box-shadow: 0 5px 12px rgba(155,107,31,.08); }
.topicless-question > img { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 7px; object-fit: cover; cursor: zoom-in; }
.topicless-text-mark { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; color: #b47a26; border-radius: 7px; background: #fff2d9; font: 700 21px/1 Georgia, serif; }
.topicless-question > span:last-child { display: grid; min-width: 0; gap: 3px; }
.topicless-question strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.topicless-question small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.topicless-question small i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; }
.topics-workspace { display: grid; grid-template-columns: 246px minmax(0, 1fr); align-items: start; gap: 16px; }
.topics-sidebar { padding: 17px 12px 13px; }
.topics-sidebar-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 6px 13px; border-bottom: 1px solid var(--line); }
.topics-sidebar-head > div { display: grid; gap: 5px; }
.topics-sidebar-head .eyebrow { font-size: 9px; }
.topics-sidebar-head strong { font: 700 19px/1 "Space Grotesk", Arial, sans-serif; }
.topics-sidebar-count { display: inline-grid; min-width: 27px; height: 27px; place-items: center; color: var(--purple); border-radius: 9px; background: var(--purple-soft); font-size: 11px; font-weight: 800; }
.topic-subject-groups { display: grid; gap: 13px; padding-top: 13px; }
.topic-exam-group { display: grid; gap: 4px; }
.topic-exam-divider { display: flex; align-items: center; gap: 7px; padding: 0 7px 5px; color: var(--ink); }
.topic-exam-divider span { font-size: 15px; }
.topic-exam-divider strong { font: 700 12px/1 "Space Grotesk", Arial, sans-serif; letter-spacing: .08em; }
.topic-exam-divider i { height: 1px; flex: 1; background: linear-gradient(90deg, #dcdcf4, transparent); }
.topic-subject-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 7px 8px; color: var(--muted); border: 1px solid transparent; border-radius: 10px; transition: .16s ease; }
.topic-subject-link:hover { color: var(--purple); background: #fafaff; }
.topic-subject-link.active { color: var(--ink); border-color: #d7d8f8; background: var(--purple-soft); box-shadow: 0 5px 12px rgba(91,92,226,.06); }
.topic-subject-link.is-excluded { color: #a3a5b3; background: linear-gradient(90deg, #f4f4f8, #fff); }
.topic-subject-link.is-excluded .topic-subject-main span { text-decoration: line-through; text-decoration-thickness: 1px; }
.topic-subject-link.is-excluded.active { color: #777a8d; border-color: #dedee8; background: #f4f4f8; }
.topic-subject-skip { flex: 0 0 auto; padding: 3px 6px; color: #8b8e9f; border: 1px solid #dedfe8; border-radius: 999px; background: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.topic-subject-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topic-subject-main b { display: inline-grid; width: 24px; height: 24px; place-items: center; flex: 0 0 auto; font-size: 16px; }
.topic-subject-main span { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.topic-subject-count { flex: 0 0 auto; color: #a0a3b7; font-size: 10px; font-weight: 700; }
.topic-subject-link.active .topic-subject-count { color: var(--purple); }
.topics-panel { min-width: 0; padding: 22px; }
.topics-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.topic-selected-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.topic-selected-icon { display: inline-grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border-radius: 13px; background: var(--purple-soft); font-size: 23px; }
.topic-selected-title > div { display: grid; gap: 4px; min-width: 0; }
.topic-selected-title > div > span { color: var(--purple); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.topic-selected-title h2 { margin: 0; overflow: hidden; font-size: 25px; text-overflow: ellipsis; white-space: nowrap; }
.topic-panel-count { display: flex; align-items: baseline; gap: 4px; flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.topic-panel-count strong { color: var(--purple); font: 700 21px/1 "Space Grotesk", Arial, sans-serif; }
.topic-panel-count span { max-width: 150px; }
.subject-plan-card { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 12px; border: 1px solid #dedff8; border-radius: 12px; background: linear-gradient(110deg, #fafaff, #f3f3ff); }
.subject-plan-card.is-excluded { border-color: #dedee7; background: linear-gradient(110deg, #f7f7f9, #f1f1f5); }
.subject-plan-icon { display: grid; width: 30px; height: 30px; place-items: center; flex: 0 0 auto; border-radius: 9px; background: var(--purple-soft); font-size: 15px; }
.subject-plan-card.is-excluded .subject-plan-icon { background: #e7e7ed; filter: grayscale(1); }
.subject-plan-card > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; flex: 1; }
.subject-plan-card strong { font-size: 11px; }
.subject-plan-card span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.subject-plan-card button { flex: 0 0 auto; padding: 7px 9px; color: var(--purple); border: 1px solid #dadaf8; border-radius: 8px; background: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.subject-plan-card.is-excluded button { color: #398776; border-color: #cce9df; background: #f3fffb; }
.topic-panel-progress { display: flex; align-items: center; gap: 10px; padding: 14px 0 3px; color: var(--muted); font-size: 11px; }
.topic-panel-progress > span { flex: 0 0 auto; }
.topic-panel-progress > span b { color: var(--ink); }
.topic-panel-progress .topic-progress { flex: 1; }
.topic-panel-progress > strong { color: var(--teal); font-size: 11px; }
.topic-list { display: grid; gap: 9px; margin-top: 11px; }
.topic-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border: 1px solid #e8e9f3; border-radius: 13px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.topic-item:before { width: 4px; min-height: 48px; align-self: stretch; flex: 0 0 auto; content: ""; border-radius: 99px; background: #d8dae6; }
.topic-item:hover { border-color: #d8d9f5; box-shadow: 0 8px 18px rgba(44,49,91,.06); }
.topic-state-studying { border-color: #f0dfc3; background: linear-gradient(100deg, #fffdf9, #fffaf2); }
.topic-state-studying:before { background: #e5a03d; }
.topic-state-review { border-color: #dcdcf8; background: linear-gradient(100deg, #fdfdff, #f8f8ff); }
.topic-state-review:before { background: #7779ed; }
.topic-item.is-completed { border-color: #d0eee4; background: linear-gradient(100deg, #fbfffd, #f6fcfa); }
.topic-item.is-completed:before { background: #51b79f; }
.topic-check { position: relative; display: block; flex: 0 0 auto; margin-top: 2px; cursor: pointer; }
.topic-check input { position: absolute; opacity: 0; }
.topic-check span { display: grid; width: 25px; height: 25px; place-items: center; color: transparent; border: 1.5px solid #cfd1e3; border-radius: 8px; background: #fff; font-size: 15px; font-weight: 900; transition: .16s ease; }
.topic-check:hover span { border-color: var(--purple); }
.topic-check input:focus-visible + span { outline: 3px solid rgba(91,92,226,.15); outline-offset: 2px; }
.topic-check input:checked + span { color: #fff; border-color: var(--teal); background: var(--teal); box-shadow: 0 4px 9px rgba(28,154,138,.2); }
.topic-item-content { min-width: 0; flex: 1; }
.topic-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topic-item-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 auto; }
.topic-item-head-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; flex: 0 0 auto; }
.topic-order { color: #aaaec1; font: 700 10px/1 "Space Grotesk", Arial, sans-serif; }
.topic-item h3 { margin: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.topic-question-inline { display: inline-flex; align-items: center; gap: 4px; padding: 4px 5px; color: var(--purple); border-radius: 7px; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; transition: background .16s ease, color .16s ease; }
.topic-question-inline > span:first-child { color: #85889d; font-weight: 700; }
.topic-question-inline:hover { color: #4b4dc8; background: var(--purple-soft); }
.topic-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 7px; font-size: 9px; font-weight: 800; }
.status-not_started { color: #777b92; background: #f0f1f6; }
.status-studying { color: #ae6c1e; background: #fff3dc; }
.status-review { color: var(--purple); background: var(--purple-soft); }
.status-completed { color: #228671; background: #e4f7f0; }
.status-not_started { box-shadow: inset 0 0 0 1px #e4e5ed; }
.status-studying { box-shadow: inset 0 0 0 1px #f3dfbd; }
.status-review { box-shadow: inset 0 0 0 1px #deddf8; }
.status-completed { box-shadow: inset 0 0 0 1px #c9ebe0; }
.is-subject-excluded .topic-list { opacity: .48; filter: grayscale(.4); pointer-events: none; }
.is-subject-excluded .topic-item h3, .is-subject-excluded .topic-item .topic-order { text-decoration: line-through; text-decoration-thickness: 1px; }
.topic-item-edit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; margin-top: 9px; }
.topic-item textarea { min-height: 34px; padding: 8px 9px; border: 1px solid #ececf4; border-radius: 8px; background: #fafaff; color: var(--ink); font-size: 12px; resize: vertical; }
.topic-item textarea:focus { border-color: #c8c9f4; outline: 0; box-shadow: 0 0 0 3px rgba(91,92,226,.08); }
.topic-item-actions { display: flex; align-items: center; gap: 6px; }
.topic-item-actions select { max-width: 126px; padding: 7px; color: var(--muted); border: 1px solid #e4e5ef; border-radius: 8px; background: #fff; font-size: 10px; }
.topic-item-actions button { padding: 7px 9px; color: var(--purple); border: 1px solid #dadaf8; border-radius: 8px; background: var(--purple-soft); font-size: 10px; font-weight: 800; }
.topic-item-actions button:hover { background: #e4e3ff; }
.library-head { display: flex; justify-content: space-between; align-items: end; max-width: 900px; margin: 0 auto 25px; }
.library-head .back-link { display: block; }
.library-head h1 { margin: 11px 0 7px; }
.library-head-actions { display: flex; align-items: center; gap: 14px; }
.library-mark { color: var(--purple); font: 70px/1 "Space Grotesk", Arial, sans-serif; opacity: .2; }
.library-tabs { display: flex; gap: 6px; max-width: 900px; margin: 0 auto 17px; padding-bottom: 10px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.library-tabs a { flex: 0 0 auto; padding: 8px 12px; color: var(--muted); border-radius: 8px; font-size: 13px; font-weight: 700; }
.library-tabs a.active, .library-tabs a:hover { color: var(--purple); background: var(--purple-soft); }
.library-tabs .unsolved-tab { color: #b55349; }
.library-tabs .unsolved-tab.active, .library-tabs .unsolved-tab:hover { color: #a3473e; background: #fff0ee; }
.library-tabs .unsolved-tab b { margin-left: 3px; font-size: 11px; }
.library-tabs .bookmark-tab { color: #9a6a22; }
.library-tabs .bookmark-tab.active, .library-tabs .bookmark-tab:hover { color: #8f5b0e; background: #fff5df; }
.library-callout { display: flex; align-items: flex-start; gap: 11px; max-width: 900px; padding: 13px 15px; margin: 0 auto 17px; border: 1px solid #f2d6d3; border-radius: 13px; background: #fff8f7; }
.library-callout > span { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; color: #fff; border-radius: 8px; background: #d86a60; font-weight: 800; }
.library-callout strong { color: #8f4039; font-size: 13px; }
.library-callout p { margin: 1px 0 0; color: var(--muted); font-size: 12px; }
.topic-library-callout { border-color: #f0dfc1; background: #fffaf1; }
.topic-library-callout > span { background: #d99b3e; }
.topic-library-callout strong { color: #8f641f; }
.topic-library-callout .text-link { margin-left: auto; flex: 0 0 auto; }
.library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; max-width: 900px; margin: 0 auto; }
.library-group-heading { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; padding: 8px 2px 1px; color: var(--ink); font-size: 14px; font-weight: 800; }
.library-group-heading small { color: var(--muted); font-size: 11px; font-weight: 500; }
.library-card { min-height: 185px; display: flex; flex-direction: column; padding: 16px; transition: .18s ease; }
.library-card:hover { transform: translateY(-2px); border-color: #c9caf4; }
.library-preview { position: relative; height: 128px; margin: -16px -16px 13px; overflow: hidden; border-radius: 17px 17px 0 0; background: var(--soft); }
.library-preview img { width: 100%; height: 100%; object-fit: cover; }
.library-card-top { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.library-card-top .status-pill { margin-left: auto; }
.library-card h3 { margin-top: 18px; font-size: 17px; }
.library-card p { margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.library-card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.library-card-bottom span:last-child { color: var(--purple); font-size: 17px; }
.exam-page { max-width: 980px; margin: 0 auto; }
.exam-create-page { max-width: 860px; }
.exam-page-head, .exam-view-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.exam-page-head h1, .exam-view-head h1 { margin: 9px 0 7px; }
.exam-hero-icon, .exam-list-icon { display: inline-grid; width: 46px; height: 46px; place-items: center; flex: 0 0 auto; color: #fff; border-radius: 15px; background: linear-gradient(145deg, #8586f7, #5b5ce2); box-shadow: 0 10px 22px rgba(91,92,226,.22); font-size: 22px; }
.exam-create-hero { display: flex; align-items: center; gap: 15px; margin: 18px 0 23px; }
.exam-create-hero h1 { margin: 4px 0 6px; }
.exam-create-card { padding: 25px; }
.exam-form-section { display: grid; gap: 8px; margin-bottom: 20px; }
.exam-form-section > label { display: flex; align-items: baseline; gap: 8px; color: var(--ink); font-weight: 800; }
.exam-form-section > label small { color: var(--muted); font-size: 11px; font-weight: 500; }
.exam-form-section input, .exam-form-section select { min-height: 44px; width: 100%; padding: 10px 12px; color: var(--ink); border: 1px solid #dfe1eb; border-radius: 11px; background: #fff; outline: none; }
.exam-form-section input:focus, .exam-form-section select:focus { border-color: #bfc0f3; box-shadow: 0 0 0 3px rgba(91,92,226,.08); }
.exam-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.exam-check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.exam-check, .exam-radio { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 9px 11px; color: #555970; border: 1px solid #e5e6f1; border-radius: 10px; background: #fbfbfe; font-size: 12px; font-weight: 700; cursor: pointer; }
.exam-check:has(input:checked), .exam-radio:has(input:checked) { color: var(--purple); border-color: #c9caf4; background: var(--purple-soft); }
.exam-check input, .exam-radio input { width: 16px; min-height: 16px; accent-color: var(--purple); }
.exam-field-note { margin: -10px 0 0; color: var(--muted); font-size: 11px; }
.exam-order-row { display: flex; gap: 10px; flex-wrap: wrap; }
.exam-radio { min-width: 220px; }
.exam-time-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.exam-time-grid .exam-radio { min-width: 0; }
.exam-custom-dates { display: flex; align-items: end; gap: 10px; margin-top: 10px; padding: 11px; border: 1px solid #e1e2f1; border-radius: 11px; background: #fbfbff; }
.exam-custom-dates[hidden] { display: none; }
.exam-custom-dates > div { display: grid; flex: 1; gap: 5px; }
.exam-custom-dates label { color: var(--muted); font-size: 10px; font-weight: 700; }
.exam-custom-dates input { min-height: 39px; }
.exam-custom-dates > span { padding-bottom: 11px; color: var(--purple); font-weight: 800; }
.exam-create-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.exam-create-footer strong { color: var(--purple); font: 700 18px/1 "Space Grotesk", Arial, sans-serif; }
.exam-list-page .exam-page-head { margin-bottom: 20px; }
.exam-list { overflow: hidden; }
.exam-list-row { display: flex; align-items: center; gap: 13px; padding: 16px 19px; border-bottom: 1px solid var(--line); transition: background .18s ease; }
.exam-list-row:last-child { border-bottom: 0; }
.exam-list-row:hover { background: var(--purple-soft); }
.exam-list-link { display: flex; align-items: center; gap: 13px; min-width: 0; flex: 1; }
.exam-list-row form { margin: 0; }
.exam-list-icon { width: 37px; height: 37px; border-radius: 12px; font-size: 16px; }
.exam-list-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.exam-list-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-list-copy small { color: var(--muted); font-size: 11px; }
.exam-list-arrow { color: var(--purple); font-size: 20px; }
.exam-view-head { display: block; overflow: hidden; padding: 0 27px 18px; border-color: #dfe2eb; border-radius: 16px; background: #fff; }
.exam-document-topline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 45px; gap: 12px; border-bottom: 1px solid #e4e6ee; color: #62677c; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.exam-document-brand { display: inline-flex; align-items: baseline; gap: 7px; color: var(--purple); letter-spacing: .13em; }
.exam-document-brand b { font: 800 13px/1 "Space Grotesk", Arial, sans-serif; }
.exam-document-brand small { color: #969bad; font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.exam-document-name { justify-self: center; color: #3e4255; font-size: 9px; }
.exam-document-topline time { justify-self: end; color: #85899b; font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.exam-document-rule { display: none; }
.exam-document-main { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 21px 0 16px; }
.exam-title-block { min-width: 0; }
.exam-section-label { display: block; margin-bottom: 6px; color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.exam-title-block h1 { margin: 0 0 9px; color: #151a2c; font-size: clamp(30px, 4vw, 42px); line-height: 1.08; }
.exam-document-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #6d7286; font-size: 11px; }
.exam-document-meta i { width: 3px; height: 3px; border-radius: 50%; background: #a4a8b7; }
.exam-toolbar { display: flex; flex: 0 0 auto; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.exam-toolbar .button { min-height: 38px; }
.exam-delete-form { margin: 0; }
.exam-delete-button { color: #b55349; border-color: #f0d8d4; background: #fff; }
.exam-delete-button:hover { color: #8f4039; border-color: #e4bcb6; background: #fff8f7; }
.exam-document-note { display: flex; align-items: center; gap: 9px; padding-top: 12px; border-top: 1px solid #ececf2; color: #85899b; font-size: 10px; }
.exam-document-note strong { color: #45495c; }
.exam-document-note span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-booklet { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; overflow: hidden; padding: 31px 28px 28px; border-color: #cfd4df; border-radius: 12px; background: linear-gradient(120deg, #fff 0%, #fbfbff 100%); box-shadow: 0 8px 20px rgba(44,49,91,.04); }
.exam-booklet:before { position: absolute; inset: 0; pointer-events: none; content: ""; background: repeating-linear-gradient(0deg, transparent 0, transparent 36px, rgba(91,92,226,.025) 37px); }
.exam-booklet-ribbon { position: absolute; top: 0; right: 26px; left: 26px; padding: 8px 0; color: var(--purple); border-bottom: 1px solid #e5e6f2; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.exam-question { position: relative; z-index: 1; min-width: 0; padding: 18px 0 20px; border-bottom: 1px solid #e5e6f2; break-inside: avoid; }
.exam-question-top { display: flex; align-items: start; gap: 10px; margin-bottom: 9px; }
.exam-question-number { display: inline-grid; width: 25px; height: 25px; place-items: center; flex: 0 0 auto; color: #171b2b; border: 1px solid #bfc4d1; border-radius: 50%; background: #fff; font: 700 11px/1 "Space Grotesk", Arial, sans-serif; }
.exam-question-top > div { min-width: 0; }
.exam-question-top strong { display: block; color: var(--ink); font-size: 14px; line-height: 1.35; }
.exam-question-top small { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.exam-question-content { margin: 0 0 11px; color: #4f536a; font-size: 13px; }
.exam-question-content p { margin: 0 0 5px; }
.exam-question-images { display: grid; gap: 7px; margin: 8px 0 10px; }
.exam-question-images img { display: block; width: 100%; max-height: 235px; border: 1px solid #e3e4ef; border-radius: 9px; background: #f4f5fa; object-fit: contain; cursor: zoom-in; }
.exam-question-link { display: inline-flex; color: var(--purple); font-size: 11px; font-weight: 800; }
.exam-answer-key { margin-top: 18px; overflow: hidden; border: 1px solid #dfe1ee; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(44,49,91,.04); }
.exam-answer-key summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px; color: var(--ink); cursor: pointer; list-style: none; }
.exam-answer-key summary::-webkit-details-marker { display: none; }
.exam-answer-key summary:hover { background: #fbfbff; }
.exam-answer-key-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.exam-answer-key-title > span:last-child { display: grid; gap: 1px; }
.exam-answer-key-title strong { font-size: 13px; }
.exam-answer-key-title small { color: var(--muted); font-size: 10px; }
.exam-answer-key-icon { display: inline-grid; width: 29px; height: 29px; place-items: center; color: var(--teal); border-radius: 9px; background: #e8f8f3; font-size: 15px; font-weight: 800; }
.exam-answer-key-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--purple); font-size: 11px; font-weight: 800; white-space: nowrap; }
.exam-answer-key-toggle span { font-size: 17px; line-height: 1; transition: transform .18s ease; }
.exam-answer-key[open] .exam-answer-key-toggle span { transform: rotate(180deg); }
.exam-answer-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 14px 17px 17px; border-top: 1px solid #ececf2; background: #fcfcff; }
.exam-answer-entry { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 35px; padding: 6px 9px; border: 1px solid #e4e5ef; border-radius: 9px; background: #fff; font-size: 11px; }
.exam-answer-entry span { color: var(--muted); }
.exam-answer-entry strong { display: inline-grid; width: 22px; height: 22px; place-items: center; color: var(--purple); border-radius: 50%; background: var(--purple-soft); font-size: 11px; }
.profile-page { max-width: 1060px; margin: 0 auto; }
.profile-hero { position: relative; overflow: hidden; margin-bottom: 27px; }
.profile-cover { position: relative; height: 154px; overflow: hidden; background: linear-gradient(115deg, #4849c7 0%, #7678ef 56%, #a9a4ff 100%); }
.profile-cover:after { content: ""; position: absolute; inset: -80px -20px auto auto; width: 410px; height: 250px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; transform: rotate(-20deg); box-shadow: 0 0 0 24px rgba(255,255,255,.06), 0 0 0 48px rgba(255,255,255,.045); }
.profile-orbit { position: absolute; top: 28px; right: 185px; width: 100px; height: 100px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.profile-cover-note { position: absolute; right: 24px; bottom: 18px; z-index: 1; color: rgba(255,255,255,.8); font-size: 10px; letter-spacing: .18em; font-weight: 700; }
.profile-identity { display: flex; align-items: center; gap: 15px; padding: 0 25px; }
.profile-avatar { width: 78px; height: 78px; margin-top: -31px; border: 5px solid #fff; font-size: 29px; box-shadow: 0 8px 18px rgba(44,49,91,.18); }
.profile-name-block { min-width: 0; padding: 17px 0 11px; }
.profile-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.profile-name-line h1 { margin: 0; font-size: 28px; }
.profile-name-block p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.profile-subline { margin-top: 4px; color: #9a6a22; font-size: 11px; font-weight: 700; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr) 1.4fr; gap: 1px; padding: 15px 25px 19px; border-top: 1px solid var(--line); }
.profile-stats div { display: grid; gap: 1px; padding-right: 16px; border-right: 1px solid var(--line); }
.profile-stats div:last-child { border: 0; }
.profile-stats strong { font: 700 24px/1 "Space Grotesk", Arial, sans-serif; }
.profile-stats span, .profile-stats b { color: var(--muted); font-size: 11px; font-weight: 500; }
.profile-join { align-content: center; padding-left: 18px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 295px; gap: 27px; align-items: start; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin: 0 2px 13px; }
.section-heading h2 { margin: 3px 0 0; }
.section-heading > span { color: var(--muted); font-size: 12px; }
.profile-question-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.profile-question-card { display: block; min-height: 225px; overflow: hidden; padding: 14px; transition: .2s ease; }
.profile-question-card:hover { transform: translateY(-3px); border-color: #c9caf4; box-shadow: 0 16px 33px rgba(44,49,91,.11); }
.profile-preview { position: relative; height: 130px; margin: -14px -14px 12px; overflow: hidden; background: var(--soft); }
.profile-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-text-preview { display: flex; height: 130px; align-items: center; gap: 2px; margin: -14px -14px 12px; padding: 14px; background: linear-gradient(135deg, #f0f0ff, #f8f8ff); }
.profile-text-preview > span { color: #b3b4f2; font: 700 48px/1 Georgia, serif; }
.profile-text-preview p { margin: 8px 0 0; color: #676b88; font-size: 14px; line-height: 1.45; }
.profile-card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.profile-question-card h3 { margin: 0; font-size: 16px; }
.profile-side { display: grid; gap: 14px; }
.profile-about, .profile-solutions { padding: 19px; }
.profile-about h2 { margin: 6px 0 16px; font-size: 20px; }
.profile-about > p { margin: 0; color: var(--muted); font-size: 13px; }
.profile-info-list { display: grid; gap: 5px; margin-top: 12px; color: #666b82; font-size: 12px; font-weight: 600; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-tags span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; color: #5e637a; border: 1px solid var(--line); border-radius: 8px; background: #fbfbfd; font-size: 11px; }
.profile-tags i { width: 7px; height: 7px; border-radius: 50%; }
.profile-tags b { color: var(--purple); font-size: 10px; }
.profile-solutions .section-heading { margin-bottom: 8px; }
.profile-solution-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.profile-solution-row > div { min-width: 0; flex: 1; }
.profile-solution-row strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-solution-row p { margin: 2px 0 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.profile-solution-row > span:last-child { color: var(--purple); font-size: 17px; }
.mini-dot { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 6px; border-radius: 50%; }
.profile-edit-page { max-width: 920px; margin: 0 auto; }
.profile-edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 295px; gap: 27px; align-items: start; }
.profile-edit-card { padding: 26px; }
.profile-edit-card h1 { margin: 7px 0 8px; font-size: 31px; }
.profile-edit-card > .subtitle { margin-bottom: 25px; font-size: 14px; }
.profile-form { display: grid; gap: 8px; }
.profile-form > label { margin-top: 9px; color: #555a70; font-size: 12px; font-weight: 700; }
.profile-form > label span { color: #a3a6b3; font-size: 10px; font-weight: 500; }
.profile-form > input, .profile-form > textarea { width: 100%; padding: 11px 12px; color: var(--ink); border: 1px solid #dfe1eb; border-radius: 10px; outline-color: var(--purple); background: #fff; resize: vertical; }
.profile-form > textarea { min-height: 85px; }
.profile-security-block { display: grid; gap: 8px; padding: 15px; margin-top: 12px; border: 1px solid #e3e3f2; border-radius: 12px; background: #fafaff; }
.profile-security-heading { display: grid; gap: 2px; padding-bottom: 3px; }
.profile-security-heading strong { color: var(--ink); font-size: 13px; }
.profile-security-heading span { color: var(--muted); font-size: 10px; }
.profile-security-block label { margin-top: 5px; color: #555a70; font-size: 12px; font-weight: 700; }
.profile-security-block label span { color: #a3a6b3; font-size: 10px; font-weight: 500; }
.profile-security-block input { width: 100%; padding: 11px 12px; color: var(--ink); border: 1px solid #dfe1eb; border-radius: 10px; outline-color: var(--purple); background: #fff; }
.profile-photo-field { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.profile-edit-avatar { width: 66px; height: 66px; font-size: 23px; }
.profile-photo-field > div { display: grid; gap: 5px; }
.profile-photo-field .upload-button { width: fit-content; }
.profile-photo-field small { color: var(--muted); font-size: 11px; }
.profile-remove-photo { display: inline-flex; align-items: center; gap: 5px; color: #a44e48; font-size: 11px; font-weight: 600; }
.profile-remove-photo input { accent-color: #c95e55; }
.profile-form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--line); }
.profile-edit-note { padding: 21px; }
.profile-edit-note .side-symbol { display: block; margin-bottom: 5px; }
.profile-edit-note h2 { margin-bottom: 6px; font-size: 21px; }
.profile-edit-note p { color: var(--muted); font-size: 13px; }
.profile-edit-preview { display: grid; grid-template-columns: auto 1fr; gap: 1px 7px; align-items: center; padding: 12px; margin-top: 17px; border-radius: 12px; background: var(--purple-soft); }
.profile-edit-preview .mini-dot { grid-row: span 2; width: 8px; height: 8px; margin: 0; background: var(--purple); }
.profile-edit-preview strong { font-size: 12px; }
.profile-edit-preview small { color: var(--muted); font-size: 10px; }
.image-lightbox { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(18, 21, 38, .88); backdrop-filter: blur(8px); }
.image-lightbox[hidden] { display: none; }
.image-lightbox-frame { display: grid; max-width: min(1200px, 94vw); max-height: 88vh; gap: 10px; place-items: center; margin: 0; }
.image-lightbox-frame img { display: block; width: auto; max-width: 94vw; height: auto; max-height: 82vh; border-radius: 12px; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.35); object-fit: contain; }
.image-lightbox-frame figcaption { max-width: 90vw; overflow: hidden; color: rgba(255,255,255,.84); font-size: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.image-lightbox-close { position: absolute; top: 18px; right: 20px; display: grid; width: 44px; height: 44px; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.12); font-size: 30px; line-height: 1; cursor: pointer; }
.image-lightbox-close:hover { background: rgba(255,255,255,.22); }
body.lightbox-open { overflow: hidden; }

@media (max-width: 850px) {
    .dashboard-head { width: auto; }
    .topbar { gap: 24px; padding: 0 20px; }
    .top-search-form { width: min(236px, 28vw); margin-left: 0; }
    .workspace-grid, .detail-layout { grid-template-columns: 1fr; }
    .workspace-grid { display: grid; }
    .feed-column { display: contents; grid-column: auto; grid-row: auto; }
    .feed-column > .composer { grid-column: 1; grid-row: 1; }
    .feed-column > .feed-toolbar { grid-column: 1; grid-row: 3; }
    .feed-column > .feed-tabs { grid-column: 1; grid-row: 4; }
    .feed-column > .category-row { grid-column: 1; grid-row: 5; }
    .feed-column > .question-list { grid-column: 1; grid-row: 6; }
    .side-column { display: contents; }
    .side-column > .today-summary { grid-column: 1; grid-row: 2; width: 100%; margin: 0 0 22px; }
    .side-column > .side-card { grid-column: 1; }
    .side-column > .side-card:nth-child(2) { grid-row: 7; }
    .side-column > .side-card:nth-child(3) { grid-row: 8; }
    .side-column > .side-card:nth-child(4) { grid-row: 9; }
    .detail-solutions { grid-column: auto; }
    .detail-side { display: grid; grid-template-columns: 1fr 1fr; }
    .similar-questions { max-width: none; margin-left: 0; }
    .question-rotate-control { opacity: 1; }
    .side-note { grid-column: 1 / -1; }
    .auto-category-review { grid-template-columns: 1fr; align-items: stretch; }
    .topics-hero { grid-template-columns: 1fr; }
    .topic-overview { max-width: 310px; }
    .topics-workspace { grid-template-columns: 210px minmax(0, 1fr); gap: 12px; }
    .topics-panel { padding: 17px; }
    .login-layout { gap: 35px; }
}

/* Optional dark theme */
html[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f0f2ff;
    --muted: #a7aec8;
    --line: #353b59;
    --soft: #111426;
    --card: #1b2035;
    --purple: #8586ff;
    --purple-dark: #9b9cff;
    --purple-soft: #2a2c55;
    --teal: #67c9b7;
    --orange: #f0a06d;
    --shadow: 0 16px 40px rgba(0, 0, 0, .22);
    background: var(--soft);
}
html[data-theme="dark"] body { background: var(--soft); }
html[data-theme="dark"] .topbar { border-bottom-color: var(--line); background: rgba(17, 20, 38, .94); }
html[data-theme="dark"] .top-search-form,
html[data-theme="dark"] .button-outline,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .admin-view-float,
html[data-theme="dark"] .pwa-install-prompt { border-color: var(--line); background: #1b2035; }
html[data-theme="dark"] .top-search-form input,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color: var(--ink); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { border-color: var(--line); background: #171b2e; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7f87a5; }
html[data-theme="dark"] .top-search-form button,
html[data-theme="dark"] .theme-toggle span:first-child { background: var(--purple-soft); }
html[data-theme="dark"] .topnav a.active,
html[data-theme="dark"] .topnav a:hover { color: var(--ink); }
html[data-theme="dark"] .card-surface { border-color: var(--line); background: var(--card); box-shadow: var(--shadow); }
html[data-theme="dark"] .today-summary { border-color: #3d4265; background: linear-gradient(145deg, #1d2239 0%, #1a1f35 58%, #20234a 100%); }
html[data-theme="dark"] .today-summary-head,
html[data-theme="dark"] .today-summary-total { border-color: #353b59; }
html[data-theme="dark"] .today-summary-today > div { border-color: #353b59; background: rgba(35, 40, 65, .82); }
html[data-theme="dark"] .today-summary-today > div:last-child { border-color: #315c58; background: rgba(27, 59, 57, .48); }
html[data-theme="dark"] .today-summary-link { border-color: #40427c; background: linear-gradient(90deg, #2b2d5a, #252746); }
html[data-theme="dark"] .moderation-card { border-color: var(--line); background: #20253d; }
html[data-theme="dark"] .moderation-card.is-banned { border-color: #754940; background: #382326; }
html[data-theme="dark"] .feed-card,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .solution-card,
html[data-theme="dark"] .profile-question-card,
html[data-theme="dark"] .profile-about,
html[data-theme="dark"] .profile-solutions { background: var(--card); }
html[data-theme="dark"] .question-gallery,
html[data-theme="dark"] .question-image-frame,
html[data-theme="dark"] .solution-image-frame,
html[data-theme="dark"] .upload-preview-item,
html[data-theme="dark"] .editor-card,
html[data-theme="dark"] .solution-editor,
html[data-theme="dark"] .exam-booklet { border-color: var(--line); background: #171b2e; }
html[data-theme="dark"] .solution-editor-toolbar,
html[data-theme="dark"] .solution-editor-footer,
html[data-theme="dark"] .editor-help,
html[data-theme="dark"] .hint-bar,
html[data-theme="dark"] .exam-document-note { border-color: var(--line); background: #20253d; }
html[data-theme="dark"] .flash.success { color: #8de0c5; border-color: #286452; background: #17382f; }
html[data-theme="dark"] .flash.error { color: #ffaaa1; border-color: #703d3a; background: #3b2528; }
html[data-theme="dark"] .admin-preview-banner { border-color: #633f51; background: linear-gradient(110deg, #352330, #25203a); }
html[data-theme="dark"] .mobile-tabbar { border-top-color: var(--line); background: rgba(18, 22, 39, .98); box-shadow: 0 -8px 25px rgba(0, 0, 0, .28); }
html[data-theme="dark"] .mobile-tabbar .mobile-add > span { border-color: var(--soft); }
html[data-theme="dark"] .pwa-install-icon { color: #16192b; background: var(--purple); }

@media (max-width: 600px) {
    .theme-toggle { width: 32px; min-width: 32px; padding: 5px; }
    .theme-toggle-label { display: none; }
}

@media (max-width: 600px) {
    .moderation-panel { margin-top: 10px; padding: 14px; }
    .moderation-panel-head { align-items: flex-start; }
    .moderation-grid { grid-template-columns: 1fr; }
    .moderation-inline-form { align-items: stretch; flex-wrap: wrap; }
    .moderation-inline-form input { flex-basis: 100%; }
    .moderation-inline-form .button { width: 100%; }
    html, body { overflow-x: hidden; }
    body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
    .topbar { position: sticky; top: 0; z-index: 30; height: 62px; padding: 0 15px; gap: 9px; box-shadow: 0 5px 16px rgba(44,49,91,.04); }
    .topbar .topnav { display: none; }
    .topbar .brand { min-width: 0; flex: 1; overflow: hidden; }
    .topbar .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-menu { position: relative; display: block; flex: 0 0 auto; }
    .mobile-menu summary { display: grid; width: 36px; height: 36px; place-items: center; color: var(--purple); border: 1px solid #e0e1f3; border-radius: 10px; background: #fff; font-size: 19px; line-height: 1; list-style: none; cursor: pointer; }
    .mobile-menu summary::-webkit-details-marker { display: none; }
    .mobile-menu[open] summary { color: #fff; border-color: var(--purple); background: var(--purple); }
    .mobile-menu-panel { position: absolute; top: calc(100% + 9px); right: -4px; display: grid; min-width: 190px; gap: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 14px 30px rgba(44,49,91,.16); }
    .mobile-menu-panel > span { padding: 4px 8px 6px; color: #9a9dae; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
    .mobile-menu-panel a { padding: 10px 9px; color: var(--ink); border-radius: 9px; font-size: 13px; font-weight: 700; }
    .mobile-menu-panel a:hover, .mobile-menu-panel a.active { color: var(--purple); background: var(--purple-soft); }
    .top-search-form { position: relative; width: 38px; height: 38px; padding: 4px; margin: 0; overflow: hidden; border-radius: 10px; }
    .top-search-form > span { width: 28px; text-align: center; }
    .top-search-form input { position: absolute; inset: 0 31px 0 30px; width: auto; padding: 0; opacity: 0; }
    .top-search-form button { position: absolute; inset: 4px; width: 28px; height: 28px; background: transparent; font-size: 0; }
    .top-search-form button::after { content: "⌕"; font-size: 20px; }
    .top-search-form:focus-within { position: absolute; z-index: 11; right: 13px; left: 13px; width: auto; background: #fff; }
    .top-search-form:focus-within input { opacity: 1; }
    .top-search-form:focus-within button { inset: 4px 4px 4px auto; background: var(--purple-soft); font-size: 14px; }
    .top-search-form:focus-within button::after { content: "↵"; font-size: 14px; }
    .brand { font-size: 14px; }
    .brand-mark { width: 30px; height: 30px; }
    .topnav { gap: 15px; font-size: 13px; }
    .account-area { gap: 5px; }
    .account-links { gap: 5px; }
    .header-login-link { display: none; }
    .account-area .user-name, .role-chip { display: none; }
    .mobile-menu-panel .menu-theme-toggle { width: 100%; min-width: 0; padding: 8px 9px; }
    .mobile-menu-panel .menu-theme-toggle .theme-toggle-label { display: inline; }
    .page-content { padding: 23px 13px 35px; }
    .dashboard-head { display: block; margin-bottom: 22px; }
    .dashboard-hero-line { display: block; min-height: 0; }
    .dashboard-hero-line > div:first-child { padding-right: 0; }
    .dashboard-hero-line h1 { max-width: none; }
    .hero-note { display: none; }
    .topics-hero { display: block; margin-bottom: 18px; }
    .topics-hero h1 { font-size: 34px; }
    .topics-hero p { font-size: 14px; }
    .topicless-callout { padding: 14px 13px 12px; }
    .topicless-callout-head { align-items: stretch; flex-direction: column; gap: 11px; }
    .topicless-callout-head .button { width: 100%; }
    .topicless-question-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .topicless-question { gap: 5px; padding: 5px; }
    .topicless-question > img, .topicless-text-mark { width: 30px; height: 30px; }
    .topicless-question strong { font-size: 9px; }
    .topicless-question small { font-size: 8px; }
    .topic-overview { max-width: none; margin-top: 17px; }
    .topics-workspace { grid-template-columns: 1fr; gap: 12px; }
    .topics-sidebar { order: 1; padding: 14px 10px 11px; }
    .topics-panel { order: 2; padding: 15px 13px; }
    .topic-subject-groups { grid-template-columns: 1fr 1fr; gap: 10px; }
    .topic-subject-link { min-height: 38px; padding: 6px; }
    .topic-subject-main { gap: 4px; }
    .topic-subject-main b { width: 21px; font-size: 14px; }
    .topic-subject-main span { font-size: 11px; }
    .topics-panel-head { align-items: flex-start; flex-direction: column; gap: 10px; }
    .topic-panel-count { padding-left: 53px; }
    .subject-plan-card { align-items: flex-start; flex-wrap: wrap; }
    .subject-plan-card > div:nth-child(2) { padding-top: 1px; }
    .subject-plan-card form { width: 100%; margin-left: 40px; }
    .subject-plan-card button { width: 100%; min-height: 38px; }
    .topic-panel-progress { gap: 7px; }
    .topic-item { gap: 9px; padding: 12px 10px; }
    .topic-item-head { align-items: center; flex-wrap: wrap; gap: 6px; }
    .topic-item-title { flex: 1 1 135px; }
    .topic-item-head-right { flex: 0 1 auto; }
    .topic-item-edit { grid-template-columns: 1fr; }
    .topic-item-actions { justify-content: space-between; }
    .topic-item-actions select { max-width: none; min-height: 38px; flex: 1; }
    .topic-item-actions button { min-height: 38px; }
    .today-summary { width: 100%; margin-top: 18px; }
    .head-stats { justify-content: flex-start; gap: 22px; margin-top: 18px; padding: 0; }
    .head-stats div { text-align: left; }
    .head-stats strong { font-size: 22px; }
    .student-picker { align-items: flex-start; flex-direction: column; }
    .student-picker select { width: 100%; min-width: 0; }
    .composer, .question-card, .detail-question, .solution-card { padding-left: 14px; padding-right: 14px; border-radius: 15px; }
    .composer { box-shadow: 0 8px 24px rgba(44,49,91,.09); }
    .capture-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 0 -2px 12px; }
    .capture-mode { min-height: 46px; flex-direction: column; gap: 1px; padding: 6px 3px; font-size: 11px; line-height: 1.2; }
    .capture-mode:first-letter { font-size: 18px; }
    .capture-mode small { font-size: 8px; }
    .upload-preview-item, .upload-preview-item img { width: 64px; }
    .upload-preview-item img { height: 64px; }
    .question-upload-preview-item { width: 140px; padding: 6px; }
    .question-upload-preview-item img { width: 128px; height: 92px; }
    .upload-remove { width: 32px; height: 32px; top: 4px; right: 4px; }
    .composer-hint { display: none; }
    .composer-bottom { align-items: stretch; flex-wrap: wrap; }
    .composer-tools { width: 100%; max-width: none; }
    .composer-tools select { max-width: 120px; }
    .composer-bottom > .button { width: 100%; }
    .feed-toolbar { align-items: start; flex-direction: column; }
    .search-form { width: 100%; }
    .feed-tabs { margin-top: -5px; }
    .question-main h3 { font-size: 17px; }
    .question-main p { font-size: 14px; }
    .feed-preview { height: 190px; }
    .question-footer { gap: 8px; }
    .detail-side { display: flex; flex-direction: column; }
    .similar-questions { width: 100%; }
    .similar-list { grid-template-columns: 1fr; }
    .join-banner, .teacher-banner { align-items: flex-start; flex-wrap: wrap; }
    .join-banner .button, .teacher-banner .button { margin-left: 53px; }
    .login-layout { display: block; min-height: unset; }
    .login-copy { margin: 18px 0 34px; }
    .login-copy h1 { font-size: 43px; }
    .login-copy > p { font-size: 15px; }
    .login-card { padding: 22px; }
    .role-options { grid-template-columns: 1fr; }
    .library-head { align-items: start; }
    .library-head-actions { align-items: start; gap: 8px; }
    .library-head-actions .button { font-size: 11px; padding: 7px 9px; }
    .library-mark { display: none; }
    .library-grid { grid-template-columns: 1fr; gap: 12px; }
    .library-card { min-height: 150px; overflow: hidden; }
    .library-preview { height: 180px; }
    .profile-identity { align-items: flex-start; flex-wrap: wrap; padding: 0 15px; }
    .profile-avatar { width: 65px; height: 65px; margin-top: -25px; border-width: 4px; }
    .profile-name-block { flex: 1; padding-top: 11px; }
    .profile-name-line h1 { font-size: 23px; }
    .profile-exit { margin: -3px 0 0 auto; }
    .profile-stats { grid-template-columns: repeat(3, 1fr); padding: 13px 15px 16px; }
    .profile-stats div { padding-right: 8px; }
    .profile-stats strong { font-size: 20px; }
    .profile-stats span { font-size: 9px; }
    .profile-join { display: none !important; }
    .profile-grid { grid-template-columns: 1fr; gap: 24px; }
    .profile-edit-layout { grid-template-columns: 1fr; gap: 14px; }
    .profile-edit-card, .profile-edit-note { padding: 18px 15px; border-radius: 15px; }
    .profile-edit-card h1 { font-size: 27px; }
    .profile-photo-field { align-items: flex-start; }
    .profile-photo-field .upload-button { min-height: 44px; }
    .profile-form-actions { flex-direction: column-reverse; }
    .profile-form-actions .button { width: 100%; min-height: 44px; }
    .profile-question-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .profile-question-card { min-height: 190px; padding: 11px; border-radius: 14px; }
    .profile-preview, .profile-text-preview { height: 105px; margin: -11px -11px 9px; }
    .profile-text-preview { padding: 10px; }
    .profile-text-preview > span { font-size: 35px; }
    .profile-text-preview p { font-size: 11px; }
    .profile-card-meta { gap: 4px; font-size: 8px; }
    .profile-card-meta { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .profile-question-card h3 { font-size: 14px; }
    .detail-actions { gap: 8px; }
    .detail-actions .solution-count { width: 100%; }
    .question-tools-trigger { min-height: 38px; padding: 7px 10px; }
    .detail-question > .content-owner-actions { margin-top: -5px; }
    .question-title-row { display: block; }
    .question-title-tools { margin: -3px 0 8px; }
    .question-title-row .content-owner-actions { justify-content: flex-end; margin: 0; }
    .question-rotate-control { max-width: 132px; }
    .solution-actions { align-items: flex-start; flex-wrap: wrap; }
    .solution-actions > form { margin-left: auto; }
    .solution-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .solution-gallery .solution-image { height: 180px; }
    .ai-status { flex-wrap: wrap; padding: 11px 12px; }
    .ai-status > form { width: 100%; margin: 2px 0 0 35px; }
    .ai-retry-button { width: 100%; min-height: 38px; }
    .solution-comments.is-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
    .solution-comments.is-empty .comment-form { grid-column: 1 / -1; width: 100%; display: flex; align-items: center; flex-direction: row; gap: 6px; }
    .solution-comments.is-empty .comment-form .button { width: auto; min-height: 36px; }
    .comment-form { align-items: stretch; flex-direction: column; }
    .comment-form .button { width: 100%; min-height: 42px; }
    .question-peek { top: auto; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom)); left: 10px; width: auto; max-height: 48vh; }
    .question-peek-image { max-height: 38vh; }
    .question-tools-page-grid { grid-template-columns: 1fr; gap: 13px; }
    .question-tools-preview, .question-tools-list, .question-tools-right { grid-column: auto; }
    .question-tools-left { display: grid; gap: 13px; }
    .question-tools-list { grid-template-columns: 1fr; }
    .question-tools-list > .card-kicker, .question-tools-list > h2, .question-tools-list > .question-tools-list-intro { grid-column: auto; }
    .question-tools-previews { position: static; }
    .question-tools-preview-list { max-height: 280px; }
    .question-tools-page-hero { align-items: flex-start; }
    .question-tools-page-hero h1 { font-size: 29px; }
    .question-tools-preview, .question-tools-list { padding: 16px 14px; border-radius: 15px; }
    .question-tools-images img { max-height: 270px; }
    .solution-composer { padding: 16px 14px; }
    .solution-composer h2 { font-size: 22px; }
    .solution-editor-head { align-items: flex-start; padding: 13px 12px 10px; }
    .solution-editor-head span:not(.editor-live-state) { max-width: 210px; }
    .solution-editor-toolbar { padding: 8px; }
    .editor-tool { width: 34px; height: 32px; }
    .solution-editor-canvas { min-height: 180px; padding: 13px; font-size: 16px; }
    .editor-math-row { flex-wrap: wrap; }
    .editor-math-row input { flex-basis: 100%; height: 40px; font-size: 16px; }
    .editor-math-row .button { min-height: 40px; flex: 1; }
    .solution-editor-footer { padding: 8px 11px; }
    .editor-help { font-size: 11px; }
    .state-button, .solution-understood { min-height: 42px; }
    .repeat-control { width: 100%; }
    .repeat-options { position: static; width: 100%; margin-top: 8px; }
    .repeat-option-list { grid-template-columns: repeat(3, 1fr); }
    .repeat-option { min-height: 40px; }
    .auto-category-review { grid-template-columns: 1fr; align-items: stretch; gap: 12px; }
    .auto-category-review-copy strong { white-space: normal; }
    .auto-category-review-selects { grid-template-columns: 1fr; }
    .auto-category-review-actions { width: 100%; }
    .auto-category-review-actions .button { flex: 1; }
    .detail-question h1 { font-size: 28px; }
    .question-body, .solution-body { font-size: 15px; }
    .question-gallery { grid-template-columns: 1fr; }
    .question-gallery .question-image { height: auto; max-height: 480px; }
    .question-gallery.single-image { padding: 9px; }
    .question-gallery.single-image .question-image { height: auto; max-height: 560px; }
    .editor-card { padding: 19px 15px; border-radius: 15px; }
    .editor-card h1 { font-size: 27px; }
    .editor-actions { flex-direction: column-reverse; }
    .editor-actions .button { width: 100%; min-height: 44px; }
    .existing-image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .existing-image img { height: 125px; }
    .image-lightbox { padding: 16px 10px; }
    .image-lightbox-frame img { max-width: calc(100vw - 20px); max-height: 78vh; border-radius: 10px; }
    .image-lightbox-close { top: 12px; right: 12px; }
    .admin-view-float { right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); }
    .exam-page-head, .exam-view-head { align-items: flex-start; flex-direction: column; gap: 14px; }
    .exam-page-head .button, .exam-view-head .button { width: 100%; }
    .exam-view-head { padding: 0 15px 15px; }
    .exam-document-topline { grid-template-columns: 1fr auto; min-height: 43px; gap: 8px; }
    .exam-document-name { grid-column: 1 / -1; grid-row: 2; justify-self: start; padding-bottom: 7px; font-size: 8px; }
    .exam-document-topline time { grid-column: 2; grid-row: 1; }
    .exam-document-brand small { display: none; }
    .exam-document-main { display: block; padding: 17px 0 14px; }
    .exam-title-block h1 { font-size: 31px; }
    .exam-document-meta { gap: 6px; font-size: 10px; }
    .exam-toolbar { width: 100%; margin-top: 16px; }
    .exam-toolbar .button { width: auto; min-width: 0; flex: 1; padding-right: 8px; padding-left: 8px; font-size: 11px; white-space: nowrap; }
    .exam-document-note { align-items: flex-start; flex-direction: column; gap: 2px; }
    .exam-document-note span { white-space: normal; }
    .exam-create-hero { align-items: flex-start; }
    .exam-create-hero h1 { font-size: 30px; }
    .exam-create-card { padding: 17px 14px; border-radius: 15px; }
    .exam-filter-grid, .exam-check-grid, .exam-time-grid { grid-template-columns: 1fr; gap: 10px; }
    .exam-custom-dates { align-items: stretch; flex-wrap: wrap; }
    .exam-custom-dates > div { flex-basis: calc(50% - 16px); }
    .exam-custom-dates > span { display: none; }
    .exam-check { min-height: 46px; }
    .exam-create-footer { align-items: stretch; flex-direction: column; }
    .exam-create-footer .button { width: 100%; min-height: 46px; }
    .exam-toolbar { width: 100%; }
    .exam-toolbar .button { flex: 1; }
    .exam-toolbar .exam-delete-form { display: flex; min-width: 0; flex: 1; }
    .exam-toolbar .exam-delete-button { width: 100%; }
    .exam-booklet { grid-template-columns: 1fr; gap: 0; padding: 31px 15px 20px; border-radius: 15px; }
    .exam-booklet-ribbon { right: 15px; left: 15px; }
    .exam-question { padding: 15px 0 17px; }
    .exam-question-images img { max-height: 330px; }
    .exam-answer-key { margin-top: 13px; border-radius: 13px; }
    .exam-answer-key summary { padding: 12px 13px; }
    .exam-answer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 11px 13px 13px; }
    .exam-answer-entry { min-height: 34px; padding: 5px 7px; }
    .mobile-tabbar { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(73px + env(safe-area-inset-bottom)); overflow: visible; padding: 7px max(6px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-right)); border-top: 1px solid rgba(220,222,235,.9); background: rgba(255,255,255,.985); box-shadow: 0 -8px 25px rgba(44,49,91,.1); isolation: isolate; }
    .mobile-tabbar.has-user { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .mobile-tabbar a { display: grid; width: auto; min-width: 0; min-height: 52px; place-items: center; align-content: center; gap: 3px; padding: 4px 2px; color: #85899f; border-radius: 12px; font-weight: 700; -webkit-tap-highlight-color: transparent; }
    .mobile-tabbar a:not(.mobile-add).active { color: var(--purple); background: var(--purple-soft); }
    .mobile-tabbar a span { font-size: 21px; line-height: 1; }
    .mobile-tabbar a small { overflow: hidden; max-width: 100%; font-size: 10px; line-height: 1.1; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-tabbar .mobile-add { position: relative; width: auto; min-width: 0; height: 52px; padding-top: 17px; color: var(--purple); border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .mobile-tabbar .mobile-add > span { position: absolute; top: -28px; left: 50%; display: grid; width: 50px; height: 50px; place-items: center; color: #fff; border: 4px solid var(--soft); border-radius: 17px; background: var(--purple); box-shadow: 0 8px 18px rgba(91,92,226,.3); font-size: 25px; line-height: 1; transform: translateX(-50%); }
    .mobile-tabbar .mobile-add small { color: var(--purple); }
}

@media (max-width: 600px) {
    html[data-theme="dark"] .mobile-menu summary { border-color: var(--line); background: #1b2035; }
    html[data-theme="dark"] .mobile-menu-panel { border-color: var(--line); background: #1b2035; box-shadow: 0 14px 30px rgba(0,0,0,.3); }
    html[data-theme="dark"] .mobile-menu-panel a { color: var(--ink); }
    html[data-theme="dark"] .mobile-tabbar { border-top-color: var(--line); background: rgba(18,22,39,.98); }
}

/* Community forum */
.community-page { max-width: 1120px; margin: 0 auto; }
.community-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px; padding: 30px 4px 24px; }
.community-hero h1 { max-width: 650px; margin: 8px 0 8px; font-size: clamp(32px, 5vw, 54px); line-height: 1.05; }
.community-hero h1 span { color: var(--purple); }
.community-hero p { max-width: 620px; margin: 0; color: var(--muted); font-size: 15px; }
.community-hero-actions { display: grid; justify-items: end; gap: 15px; }
.community-stats { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: 11px; }
.community-stats span + span { padding-left: 16px; border-left: 1px solid var(--line); }
.community-stats strong { margin-right: 3px; color: var(--ink); font: 700 18px/1 "Space Grotesk", Arial, sans-serif; }
.community-safety { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-bottom: 20px; border-color: #dfe0f6; background: linear-gradient(100deg, var(--purple-soft), var(--card)); }
.community-safety > span { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--card); font-size: 18px; }
.community-safety div { min-width: 0; flex: 1; }
.community-safety strong { font-size: 12px; }
.community-safety p { margin: 1px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.community-safety a { color: var(--purple); font-size: 11px; font-weight: 800; white-space: nowrap; }
.community-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); align-items: start; gap: 18px; }
.community-sidebar { display: grid; gap: 14px; min-width: 0; }
.community-category-panel, .community-rules { padding: 17px; }
.community-category-panel .section-heading { margin-bottom: 12px; }
.community-category-panel .section-heading h2 { font-size: 18px; }
.community-category-list { display: grid; gap: 4px; }
.community-category-link { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 7px; border-radius: 11px; transition: .18s ease; }
.community-category-link:hover, .community-category-link.active { background: var(--purple-soft); }
.community-category-link > span:nth-child(2) { display: grid; min-width: 0; gap: 1px; }
.community-category-link strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.community-category-link small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.community-category-link > b { color: var(--muted); font-size: 11px; }
.community-category-icon, .forum-category-icon, .community-thread-icon { display: grid; place-items: center; border-radius: 11px; background: var(--purple-soft); }
.community-category-icon { width: 36px; height: 36px; font-size: 18px; }
.community-rules h2 { margin: 8px 0 5px; font-size: 18px; }
.community-rules p { margin: 0 0 11px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.community-rules ul { display: grid; gap: 6px; padding: 0; margin: 10px 0 0; color: var(--muted); font-size: 11px; list-style: none; }
.community-rules li:before { margin-right: 7px; color: var(--teal); content: "✓"; font-weight: 800; }
.community-rules a, .community-report-link { color: var(--purple); font-size: 11px; font-weight: 800; }
.community-report-link { display: block; padding: 0 8px; }
.community-main { min-width: 0; }
.community-main-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.community-main-head h2 { margin: 7px 0 0; font-size: 22px; }
.community-search { display: flex; align-items: center; width: 220px; min-width: 0; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.community-search input { width: 100%; min-width: 0; padding: 5px 0; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: 12px; }
.community-search button { display: grid; width: 28px; height: 28px; place-items: center; flex: 0 0 auto; color: var(--purple); border: 0; border-radius: 8px; background: var(--purple-soft); font-size: 18px; }
.community-thread-list { display: grid; gap: 9px; }
.community-thread-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; transition: .18s ease; }
.community-thread-row:hover { border-color: #c9caf4; transform: translateY(-1px); }
.community-thread-icon { width: 40px; height: 40px; flex: 0 0 auto; font-size: 19px; }
.community-thread-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.community-thread-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 10px; }
.community-thread-meta b { color: var(--purple); font-weight: 800; }
.community-thread-meta i { padding: 2px 5px; color: var(--muted); border-radius: 5px; background: var(--purple-soft); font-style: normal; font-size: 9px; }
.community-thread-copy > strong { overflow: hidden; color: var(--ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.community-thread-copy > small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.community-thread-count { display: grid; min-width: 45px; justify-items: center; gap: 1px; color: var(--muted); }
.community-thread-count strong { color: var(--ink); font: 700 17px/1 "Space Grotesk", Arial, sans-serif; }
.community-thread-count small { font-size: 9px; }
.community-thread-arrow { color: var(--purple); font-size: 18px; }
.back-link { display: inline-flex; margin-bottom: 13px; color: var(--muted); font-size: 12px; font-weight: 600; }
.back-link:hover { color: var(--purple); }
.forum-category-page, .forum-thread-page, .forum-compose-page, .forum-reports-page { padding-top: 10px; }
.forum-category-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 21px; margin-bottom: 25px; }
.forum-category-icon { width: 52px; height: 52px; background: var(--purple-soft); font-size: 25px; }
.forum-category-hero h1 { margin: 5px 0 3px; font-size: 29px; }
.forum-category-hero p { margin: 0; color: var(--muted); font-size: 12px; }
.forum-category-actions { justify-self: end; }
.forum-list-head { margin-bottom: 13px; }
.forum-list-head h2 { font-size: 23px; }
.forum-compose { max-width: 780px; padding: 24px; margin: 0 auto; }
.forum-compose-head { display: flex; align-items: center; gap: 13px; padding-bottom: 19px; margin-bottom: 19px; border-bottom: 1px solid var(--line); }
.forum-compose-head h1 { margin: 5px 0 2px; font-size: 28px; }
.forum-compose-head p { margin: 0; color: var(--muted); font-size: 12px; }
.forum-compose form { display: grid; gap: 7px; }
.forum-compose label { margin-top: 7px; color: var(--ink); font-size: 12px; font-weight: 800; }
.forum-compose input, .forum-compose textarea, .forum-reply-box textarea, .forum-post-actions input { width: 100%; padding: 11px 12px; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: var(--soft); outline: 0; font-size: 13px; }
.forum-compose input:focus, .forum-compose textarea:focus, .forum-reply-box textarea:focus, .forum-post-actions input:focus { border-color: #bfc0f3; box-shadow: 0 0 0 3px rgba(91,92,226,.09); }
.forum-compose textarea { min-height: 220px; resize: vertical; }
.forum-compose-foot, .forum-reply-box form > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); }
.forum-compose-foot > span, .forum-reply-box form > div > span { color: var(--muted); font-size: 10px; }
.forum-thread-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; align-items: start; gap: 18px; }
.forum-thread-layout main { display: grid; gap: 13px; min-width: 0; }
.forum-thread-head { padding: 23px; }
.forum-thread-head h1 { margin: 10px 0 14px; font-size: clamp(26px, 4vw, 37px); line-height: 1.12; }
.forum-thread-byline, .forum-post-user { display: flex; align-items: center; gap: 9px; }
.forum-thread-byline > span:last-child, .forum-post-user > span:last-child { display: grid; gap: 1px; }
.forum-thread-byline small, .forum-post-user small { color: var(--muted); font-size: 10px; }
.forum-post { padding: 18px; }
.forum-opening { border-color: #dfe0f6; }
.forum-post-label { margin-bottom: 12px; color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.forum-post-content { color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; }
.forum-post-actions { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.forum-post-actions > form { display: flex; gap: 6px; }
.forum-post-actions details { position: relative; }
.forum-post-actions summary { color: var(--muted); cursor: pointer; font-size: 10px; list-style: none; }
.forum-post-actions summary::-webkit-details-marker { display: none; }
.forum-post-actions details form { position: absolute; z-index: 2; bottom: calc(100% + 8px); left: 0; display: flex; width: 270px; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: var(--shadow); }
.forum-post-actions details form .button { flex: 0 0 auto; }
.forum-post-actions input { height: 34px; padding: 7px 9px; font-size: 11px; }
.forum-replies { display: grid; gap: 9px; }
.forum-replies .section-heading { margin: 2px 0 0; }
.forum-replies .section-heading h2 { font-size: 21px; }
.forum-post-user { padding-bottom: 11px; margin-bottom: 11px; border-bottom: 1px solid var(--line); }
.forum-post-user em { width: max-content; padding: 1px 5px; color: var(--teal); border-radius: 4px; background: #e6f8f1; font-size: 9px; font-style: normal; font-weight: 800; }
.forum-empty-replies { padding: 19px; color: var(--muted); font-size: 12px; text-align: center; }
.forum-reply-box { padding: 19px; }
.forum-reply-box h2 { margin: 6px 0 4px; font-size: 20px; }
.forum-reply-box > p { color: var(--muted); font-size: 12px; }
.forum-reply-box form { display: grid; gap: 7px; margin-top: 12px; }
.forum-reply-box textarea { min-height: 105px; resize: vertical; }
.community-mini-categories { display: grid; gap: 3px; margin-top: 11px; }
.community-mini-categories a { display: flex; align-items: center; gap: 8px; padding: 7px; color: var(--muted); border-radius: 8px; font-size: 11px; font-weight: 700; }
.community-mini-categories a:hover { color: var(--purple); background: var(--purple-soft); }
.community-mini-categories a span { font-size: 16px; }
.forum-report-list { display: grid; gap: 9px; max-width: 900px; }
.forum-report-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; }
.forum-report-row > div:first-child { min-width: 0; }
.forum-report-row strong { display: block; margin-top: 5px; overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.forum-report-row p { margin: 5px 0; color: var(--muted); font-size: 12px; }
.forum-report-row small { color: var(--muted); font-size: 10px; }
.forum-report-status { display: inline-flex; padding: 3px 7px; border-radius: 6px; color: var(--purple); background: var(--purple-soft); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.forum-report-status.open { color: #b55349; background: #fff0ee; }
.forum-report-status.dismissed { color: var(--muted); background: var(--soft); }
.forum-report-actions, .forum-report-actions form { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 850px) {
    .community-layout, .forum-thread-layout { grid-template-columns: 1fr; }
    .community-sidebar { order: 2; }
    .forum-thread-layout .community-sidebar { order: 0; }
    .community-category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 7px; }
}

@media (max-width: 600px) {
    .community-page { padding-top: 2px; }
    .community-hero { grid-template-columns: 1fr; gap: 14px; padding: 19px 0 16px; }
    .community-hero h1 { font-size: 34px; }
    .community-hero p { font-size: 13px; }
    .community-hero-actions { display: flex; align-items: center; justify-content: space-between; }
    .community-hero-actions .button { min-height: 38px; padding: 8px 12px; }
    .community-stats { gap: 9px; }
    .community-stats span + span { padding-left: 9px; }
    .community-safety { align-items: flex-start; padding: 11px; }
    .community-safety a { display: none; }
    .community-category-list { grid-template-columns: 1fr; }
    .community-main-head { align-items: stretch; flex-direction: column; gap: 9px; }
    .community-search { width: 100%; }
    .community-thread-row { gap: 9px; padding: 11px; }
    .community-thread-icon { width: 34px; height: 34px; font-size: 16px; }
    .community-thread-copy > strong { font-size: 12px; }
    .community-thread-count { display: none; }
    .community-thread-arrow { font-size: 16px; }
    .forum-category-hero { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
    .forum-category-actions { grid-column: 1 / -1; justify-self: stretch; }
    .forum-category-actions .button { width: 100%; }
    .forum-category-hero h1 { font-size: 25px; }
    .forum-compose { padding: 16px 14px; }
    .forum-compose-foot, .forum-reply-box form > div { align-items: stretch; flex-direction: column; }
    .forum-compose-foot .button, .forum-reply-box form > div .button { width: 100%; }
    .forum-thread-head, .forum-post, .forum-reply-box { padding: 15px; }
    .forum-thread-head h1 { font-size: 27px; }
    .forum-post-actions { align-items: flex-start; flex-direction: column; }
    .forum-post-actions > form { width: 100%; flex-wrap: wrap; }
    .forum-post-actions > form .button { flex: 1; }
    .forum-post-actions details form { position: static; width: min(100%, 320px); margin-top: 7px; }
    .forum-report-row { align-items: stretch; flex-direction: column; gap: 12px; }
    .forum-report-actions { width: 100%; }
    .forum-report-actions .button { flex: 1; }
}