:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-soft: #f9fafc;
  --surface-tint: #fff4f2;
  --ink: #171a21;
  --ink-soft: #5f636d;
  --muted: #969aa4;
  --line: #e9eaee;
  --line-strong: #dcdfe5;
  --brand: #e85d52;
  --brand-dark: #c9473f;
  --brand-soft: #fff0ee;
  --accent: #e85d52;
  --accent-soft: #fff0ee;
  --warning: #c88718;
  --warning-soft: #fff7e7;
  --danger: #d34e5a;
  --danger-soft: #fff0f2;
  --success: #347a68;
  --success-soft: #eaf7f3;
  --shadow-sm: 0 1px 2px rgb(20 24 34 / 3%), 0 8px 24px rgb(20 24 34 / 4%);
  --shadow-md: 0 20px 54px rgb(20 24 34 / 11%);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --content: 1180px;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1218;
  --surface: #171b23;
  --surface-soft: #1d222c;
  --surface-tint: #261e1e;
  --ink: #f1f3f7;
  --ink-soft: #c2c7d0;
  --muted: #8e95a2;
  --line: #292f3a;
  --line-strong: #39414e;
  --brand: #f07166;
  --brand-dark: #ff968d;
  --brand-soft: #352320;
  --accent: #f07166;
  --accent-soft: #352320;
  --warning: #e0a33d;
  --warning-soft: #312816;
  --danger: #ed7882;
  --danger-soft: #321f24;
  --success: #69b69f;
  --success-soft: #183129;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 18%), 0 10px 28px rgb(0 0 0 / 18%);
  --shadow-md: 0 22px 58px rgb(0 0 0 / 38%);
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgb(232 93 82 / 25%); outline-offset: 2px; }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 1.08fr) minmax(420px, .92fr); background: var(--surface); }
.auth-intro { position: relative; overflow: hidden; min-height: 100vh; padding: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; color: #fff; background: linear-gradient(145deg, #171b24 0%, #2a303c 60%, #414754 100%); }
.auth-intro::before, .auth-intro::after { content: ""; position: absolute; border: 1px solid rgb(255 255 255 / 13%); border-radius: 50%; pointer-events: none; }
.auth-intro::before { width: 620px; height: 620px; right: -300px; top: -250px; }
.auth-intro::after { width: 360px; height: 360px; left: -180px; bottom: -150px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--brand); box-shadow: 0 8px 22px rgb(232 93 82 / 22%); font-size: 17px; font-weight: 800; }
.brand > span:last-child { display: grid; gap: 1px; }
.brand strong { font-size: 17px; letter-spacing: .02em; }
.brand small { color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.brand-large { position: relative; z-index: 1; }
.brand-large .brand-mark { width: 46px; height: 46px; color: var(--brand-dark); background: #fff; box-shadow: none; }
.brand-large strong { font-size: 20px; }
.brand-large small { color: rgb(255 255 255 / 62%); }
.auth-copy { position: relative; z-index: 1; max-width: 670px; margin: auto 0; padding: 80px 0 56px; }
.eyebrow { margin: 0 0 18px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.auth-copy .eyebrow { color: #ffb5ae; }
.auth-copy h1 { margin: 0; max-width: 650px; font-size: clamp(38px, 4.6vw, 66px); line-height: 1.13; letter-spacing: -.045em; }
.auth-copy > p:last-child { max-width: 570px; margin: 28px 0 0; color: rgb(255 255 255 / 74%); font-size: 17px; line-height: 1.85; }
.auth-points { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.auth-points li { display: grid; gap: 7px; padding: 18px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 16px; color: rgb(255 255 255 / 76%); background: rgb(255 255 255 / 7%); backdrop-filter: blur(8px); font-size: 13px; }
.auth-points span { color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.auth-panel { display: grid; place-items: center; padding: 48px clamp(28px, 6vw, 88px); background: var(--surface); }
.auth-card { width: min(100%, 420px); }
.auth-card h2 { margin: 0; font-size: 30px; letter-spacing: -.025em; }
.auth-card .section-copy { margin-top: 10px; }
.auth-tabs { display: flex; gap: 22px; margin: 32px 0 25px; border-bottom: 1px solid var(--line); }
.auth-tabs button { position: relative; border: 0; padding: 0 0 12px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 700; }
.auth-tabs button.active { color: var(--brand); }
.auth-tabs button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--brand); }
.stack-form { display: grid; gap: 18px; }
.stack-form label, .field { display: grid; gap: 8px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); background: var(--surface); transition: border-color .16s, box-shadow .16s; }
input, select { min-height: 46px; padding: 0 13px; }
textarea { min-height: 96px; padding: 12px 13px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 4px rgb(232 93 82 / 10%); }
input::placeholder, textarea::placeholder { color: #a7adba; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 64px; }
.text-button { border: 0; color: var(--brand); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.password-field .text-button { position: absolute; top: 0; right: 4px; height: 46px; }
.form-tip, .form-error { min-height: 18px; margin: -7px 0 0; font-size: 12px; font-weight: 500; line-height: 1.5; }
.form-tip { color: var(--muted); }
.form-error { color: var(--danger); }
.auth-security { margin: 24px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }

.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 11px; padding: 0 16px; background: transparent; cursor: pointer; font-size: 13px; font-weight: 750; transition: transform .14s, border-color .14s, background .14s, color .14s; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .46; cursor: not-allowed; transform: none; }
.button-primary { color: #fff; background: var(--brand); box-shadow: 0 8px 20px rgb(232 93 82 / 18%); }
.button-primary:hover { background: var(--brand-dark); }
.button-secondary { border-color: var(--line-strong); background: var(--surface); }
.button-secondary:hover { border-color: #bfc4d2; background: var(--surface-soft); }
.button-quiet { color: var(--brand); background: var(--brand-soft); }
.button-danger { color: var(--danger); background: var(--danger-soft); }
.button-wide { width: 100%; min-height: 48px; }
.button-small { min-height: 34px; padding: 0 11px; border-radius: 9px; font-size: 12px; }
.icon-button { width: 40px; min-width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; }

.topbar { position: sticky; z-index: 50; top: 0; height: 70px; border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(16px); }
.topbar-inner { width: min(calc(100% - 40px), var(--content)); height: 100%; margin: auto; display: flex; align-items: center; gap: 34px; }
.desktop-nav { align-self: stretch; display: flex; gap: 4px; }
.desktop-nav a { position: relative; min-width: 68px; display: grid; place-items: center; color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--ink); }
.desktop-nav a.active::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brand); }
.topbar-actions { position: relative; margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 0; color: var(--ink-soft); background: var(--surface); cursor: pointer; box-shadow: 0 2px 10px rgb(25 30 43 / 4%); transition: color .15s, border-color .15s, background .15s, transform .15s; }
.topbar-icon-button:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-soft); transform: translateY(-1px); }
.topbar-icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: block; }
.profile-button { min-height: 44px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 12px; padding: 4px 7px; background: transparent; cursor: pointer; }
.profile-button:hover { background: var(--surface-soft); }
.profile-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #d84e45, #f07a70); font-size: 13px; font-weight: 800; }
.profile-avatar-large { width: 72px; height: 72px; border-radius: 20px; font-size: 26px; }
.profile-copy { display: grid; gap: 1px; text-align: left; }
.profile-copy strong { font-size: 12px; }
.profile-copy small { color: var(--muted); font-size: 10px; }

.account-page-header { margin-bottom: 22px; }
.secondary-page-header { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; padding: 0 2px; }.secondary-page-header > div { min-width: 0; display: grid; gap: 3px; }.secondary-page-header .eyebrow { margin: 0; font-size: 13px; }.secondary-page-header > div > span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.secondary-page-header > .button { flex: 0 0 auto; }
.my-home, .public-profile, .settings-page, .profile-editor-page { width: min(100%, 900px); margin: 0 auto; }
.my-home { display: grid; gap: 20px; }.my-home-hero { min-height: 108px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 5px 4px; cursor: pointer; }.profile-avatar-xl { width: 76px; height: 76px; border-radius: 23px; font-size: 26px; }.my-home-hero h1, .public-profile-identity h1 { margin: 0; font-size: 25px; letter-spacing: -.035em; }.my-home-hero p, .public-profile-identity p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }.my-home-chevron { color: #b5b8c0; font-size: 32px; font-weight: 300; }.my-home-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px; border: 0; border-radius: 19px; }.my-home-stat { display: grid; justify-items: center; gap: 2px; padding: 2px 4px; border-right: 1px solid var(--line); }.my-home-stat:last-child { border-right: 0; }.my-home-stat strong { font-size: 17px; line-height: 1.2; }.my-home-stat small { color: var(--muted); font-size: 10px; }.my-home-section { display: grid; gap: 10px; }.my-home-section > h2 { margin: 0 2px; font-size: 15px; }.my-home-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; padding: 15px 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }.my-home-action { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 6px; border: 0; color: var(--ink); background: transparent; cursor: pointer; }.my-home-action-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-size: 21px; }.my-home-action-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.my-home-action strong { font-size: 12px; font-weight: 650; }.my-home-action small { color: var(--muted); font-size: 10px; }.utility-icon { color: var(--ink-soft); background: var(--surface-soft); }.my-home-action:hover .utility-icon { color: var(--brand-dark); background: var(--brand-soft); }.logout-wide { width: 100%; margin-top: 2px; background: var(--surface); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); box-shadow: none; }
.profile-back-button { min-height: 38px; margin-bottom: 14px; border: 0; border-radius: 10px; padding: 0 12px; color: var(--ink-soft); background: var(--surface); cursor: pointer; }.public-profile-card { padding: 24px 26px 18px; }.public-profile-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 17px; }.public-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 500px; margin: 16px auto 0; padding-top: 11px; border-top: 1px solid var(--line); }.public-profile-actions { min-height: 32px; display: flex; justify-content: center; gap: 8px; margin-top: 12px; }.public-profile-dynamics { display: grid; gap: 11px; margin-top: 18px; }.profile-dynamic-card { padding: 17px; }.profile-dynamic-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }.profile-dynamic-card > p { margin: 12px 0; color: var(--ink); font-size: 14px; line-height: 1.7; white-space: pre-wrap; }.profile-dynamic-card > small { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink-soft); background: var(--surface-soft); font-size: 11px; line-height: 1.6; }.profile-dynamic-actions { display: flex; gap: 14px; margin-top: 11px; color: var(--muted); font-size: 10px; }.profile-editor-card, .settings-card { padding: 24px; }.profile-editor-card { max-width: 720px; margin: 0 auto; }.profile-editor-card .profile-card-head h1, .settings-card h1 { margin: 0; font-size: 22px; }.settings-list { display: grid; margin: 18px 0 26px; border-top: 1px solid var(--line); }.settings-list-item { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-bottom: 1px solid var(--line); text-align: left; background: transparent; cursor: pointer; }.settings-list-item span { display: grid; gap: 4px; }.settings-list-item strong { font-size: 13px; }.settings-list-item small { color: var(--muted); font-size: 10px; }.settings-list-item b { color: var(--muted); font-size: 18px; font-weight: 400; }.settings-password-form { max-width: 520px; padding-top: 6px; }.settings-password-form h2 { margin: 0 0 2px; font-size: 17px; }.comment-author { border: 0; padding: 0; color: var(--ink); background: transparent; cursor: pointer; font-size: 12px; font-weight: 750; }.comment-author:hover { color: var(--brand-dark); }.comment-avatar-button { border: 0; padding: 0; cursor: pointer; }
.connections-page { width: min(100%, 760px); margin: 0 auto; }
.connections-shell { overflow: hidden; padding: 0; border-radius: 20px; }
.connections-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.connections-tab { position: relative; min-height: 66px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 750; }
.connections-tab::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 34px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; transform: translateX(-50%); }
.connections-tab:hover { color: var(--ink); background: var(--surface-soft); }
.connections-tab.active { color: var(--brand-dark); }
.connections-tab.active::after { background: var(--brand); }
.connections-tab.disabled { color: var(--muted); cursor: not-allowed; background: var(--surface-soft); opacity: .72; }
.connections-tab small { min-width: 24px; padding: 2px 7px; border-radius: 999px; color: inherit; background: color-mix(in srgb, currentColor 9%, transparent); font-size: 9px; font-variant-numeric: tabular-nums; }
.connections-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px; margin: 16px 18px 10px; padding: 4px 5px 4px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.connections-search > span { width: 20px; height: 20px; display: grid; place-items: center; color: var(--muted); }
.connections-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.connections-search input { min-height: 38px; border: 0; padding: 0 7px; background: transparent; box-shadow: none; }
.connections-search input:focus { box-shadow: none; }
.connections-search-clear { width: 32px; height: 32px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 20px; }
.connections-search-clear:hover { color: var(--ink); background: var(--surface); }
.connections-search-submit { min-width: 58px; height: 34px; border: 0; border-radius: 9px; padding: 0 12px; color: #fff; background: var(--brand); cursor: pointer; font-size: 11px; font-weight: 750; }
.connections-summary { min-height: 38px; display: flex; align-items: center; padding: 0 19px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.connections-list { display: grid; }
.connection-person { min-height: 82px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 18px; border-bottom: 1px solid var(--line); }
.connection-person:last-child { border-bottom: 0; }
.connection-person-link { min-width: 0; min-height: 82px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; padding: 10px 0; }
.connection-person-link:hover .connection-person-copy strong { color: var(--brand-dark); }
.connection-avatar { width: 52px; height: 52px; border-radius: 50%; font-size: 17px; }
.connection-person-copy { min-width: 0; display: grid; gap: 6px; }
.connection-person-copy strong, .connection-person-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connection-person-copy strong { font-size: 14px; }
.connection-person-copy small { color: var(--muted); font-size: 10px; }
.connection-follow-button { min-width: 78px; min-height: 34px; border: 1px solid var(--brand); border-radius: 11px; padding: 0 12px; color: var(--brand-dark); background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.connection-follow-button:hover { color: #fff; background: var(--brand); }
.connection-follow-button.following { border-color: var(--line-strong); color: var(--ink-soft); background: var(--surface-soft); }
.connection-follow-button:disabled { border-color: var(--line); color: var(--muted); background: var(--surface-soft); cursor: default; opacity: .7; }
.connections-empty { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--muted); text-align: center; }
.connections-empty strong { color: var(--ink-soft); font-size: 14px; }
.connections-empty span { font-size: 11px; }
.connections-more { width: calc(100% - 36px); min-height: 40px; margin: 4px 18px 16px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-soft); background: var(--surface-soft); cursor: pointer; font-size: 11px; font-weight: 700; }
.connections-more:hover { border-color: var(--line-strong); color: var(--ink); }
.settings-hub { display: grid; gap: 24px; }
.settings-page-header { min-height: 48px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.settings-page-header h1 { margin: 0; text-align: center; font-size: 22px; letter-spacing: -.025em; }
.settings-page-header button { width: 40px; height: 40px; border: 0; border-radius: 11px; color: var(--ink); background: var(--surface); cursor: pointer; font-size: 28px; font-weight: 300; line-height: 1; }
.settings-section { display: grid; gap: 10px; }
.settings-section-title { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding: 0 4px; }
.settings-section-title h2 { margin: 0; font-size: 16px; }
.settings-section-title p { margin: 0; color: var(--muted); font-size: 10px; }
.settings-row-card, .settings-toggle-card { overflow: hidden; padding: 0; border-radius: 17px; }
.settings-detail-row { width: auto; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 20px; border: 0; border-bottom: 1px solid var(--line); padding: 0; text-align: left; color: var(--ink); background: transparent; }
.settings-detail-row:last-child { border-bottom: 0; }
.settings-detail-row > span, .settings-toggle-row > span:first-child { min-width: 0; display: grid; gap: 4px; }
.settings-detail-row strong, .settings-toggle-row strong { font-size: 13px; }
.settings-detail-row small, .settings-toggle-row small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.settings-detail-row > b { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 500; }
.settings-detail-row > b i { margin-left: 8px; color: var(--line-strong); font-size: 21px; font-style: normal; vertical-align: -1px; }
.settings-detail-row.interactive { cursor: pointer; }
.settings-detail-row.interactive:hover { color: var(--brand-dark); }
.settings-password-panel { display: grid; gap: 14px; padding: 18px 20px; border-radius: 17px; }
.settings-inline-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-inline-heading h3 { margin: 0; font-size: 14px; }
.settings-inline-heading button { border: 0; color: var(--brand-dark); background: transparent; cursor: pointer; font-size: 11px; }
.settings-password-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.settings-password-panel > .button { justify-self: end; }
.settings-toggle-row { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 20px; border-bottom: 1px solid var(--line); cursor: pointer; }
.settings-toggle-row:last-of-type { border-bottom: 0; }
.settings-save-status { min-height: 18px; margin: 0; padding: 0 20px 8px; color: var(--success); font-size: 10px; text-align: right; }
.profile-privacy-tip { margin: 16px 0 0; padding: 11px 13px; border-radius: 11px; color: var(--ink-soft); background: var(--surface-soft); font-size: 11px; line-height: 1.55; }
.notification-hint-region { position: fixed; z-index: 260; top: 14px; left: 50%; width: min(88vw, 360px); transform: translateX(-50%); pointer-events: none; }
.notification-hint { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--line-strong) 80%, transparent); border-radius: 12px; color: var(--ink); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 10px 30px rgb(20 24 34 / 14%); backdrop-filter: blur(16px); animation: notification-hint-in .18s ease-out; }
.notification-hint > span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent); }
.notification-hint p { overflow: hidden; margin: 0; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.notification-hint.leaving { opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s; }
@keyframes notification-hint-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.profile-card { padding: 24px; }
.profile-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.profile-card-head h2 { margin: 0; font-size: 18px; }
.profile-card-head p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.profile-avatar-editor { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.profile-avatar-editor > div { min-width: 0; }
.profile-avatar-editor strong, .profile-avatar-editor small { display: block; }
.profile-avatar-editor small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.avatar-picker { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.avatar-choice { width: 42px; height: 42px; display: grid; place-items: center; border: 2px solid transparent; border-radius: 14px; color: var(--ink-soft); background: var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; font-size: 15px; }
.avatar-choice:hover, .avatar-choice.active { border-color: #fff; color: var(--brand-dark); background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand), 0 6px 16px rgb(232 93 82 / 16%); transform: translateY(-1px); }
.profile-avatar img, .comment-avatar img, .avatar-choice img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.profile-avatar > span, .comment-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; }
.avatar-editor-main { min-width: 0; flex: 1; }
.avatar-editor-copy { display: grid; gap: 4px; }
.avatar-editor-copy small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.avatar-choice { overflow: hidden; padding: 0; }
.avatar-choice img { border-radius: 11px; }
.avatar-upload-button { min-height: 34px; display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--ink-soft); background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 700; }
.avatar-upload-button:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.avatar-upload-button span { font-size: 16px; line-height: 1; }
.shortcut-notes { color: #896c2b; background: #fff4d9; }.shortcut-favorites { color: #9b6730; background: #fff0e1; }.shortcut-wrong { color: #a44f58; background: #fdecef; }
.shortcut-comments { color: #4d91bd; background: #e9f5ff; }.shortcut-likes { color: #b97836; background: #fff5df; }
.profile-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.privacy-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 16px 0 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-soft); font-size: 11px; }
.privacy-settings legend { padding: 0 5px; color: var(--muted); font-size: 11px; }.privacy-settings label { display: flex; align-items: center; gap: 7px; }.privacy-settings input { width: 16px; height: 16px; accent-color: var(--brand); }
.message-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 14px; background: var(--surface-soft); }.message-tab { min-width: 0; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; padding: 0 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; white-space: nowrap; }.message-tab:hover { color: var(--ink); }.message-tab.active { color: var(--brand-dark); background: var(--surface); box-shadow: 0 2px 10px rgb(24 29 41 / 8%); }.message-tab small { min-width: 20px; padding: 2px 5px; border-radius: 99px; color: inherit; background: color-mix(in srgb, currentColor 10%, transparent); font-size: 9px; font-variant-numeric: tabular-nums; }.message-panel { min-height: 210px; padding: 19px 20px; }.message-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }.message-panel-head h2 { margin: 0; font-size: 16px; }.message-panel-head > span { color: var(--muted); font-size: 10px; }.message-list { display: grid; gap: 0; }.message-list article { padding: 13px 1px; border-bottom: 1px solid var(--line); }.message-list article:last-child { border-bottom: 0; }.message-list strong { font-size: 11px; }.message-list p { margin: 5px 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }.message-list time { color: var(--muted); font-size: 10px; }.message-empty { margin: 48px 0 36px; color: var(--muted); font-size: 12px; text-align: center; }
.study-section-heading { min-height: 34px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.study-section-heading > div { display: grid; gap: 4px; }.study-section-heading h2 { margin: 0; font-size: 16px; }.study-section-heading span, .study-section-heading time { color: var(--muted); font-size: 11px; }.private-label { color: #538477 !important; }
.question-note-slot { margin-top: 25px; }.question-note { padding: 18px 0 21px; border-top: 1px solid var(--line); }.note-form { display: grid; gap: 9px; margin-top: 12px; }.note-form textarea { min-height: 110px; border-color: #d7e5df; background: #f4faf7; color: var(--ink); line-height: 1.75; }.note-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.note-form-actions small { color: var(--muted); font-size: 10px; }.note-form-actions > div { display: flex; gap: 7px; }
.comment-actions { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }.comment-actions .text-button { min-height: 28px; }.comment-avatar { overflow: hidden; }
.personal-feed { display: grid; gap: 10px; }.personal-content-card { padding: 17px 18px; }.personal-content-meta { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px 9px; }.personal-content-meta time { margin-left: auto; color: var(--muted); font-size: 10px; }.personal-content-author { max-width: min(260px, 42vw); overflow: hidden; border: 0; padding: 0; color: var(--ink-soft); background: transparent; cursor: pointer; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.personal-content-author:hover { color: var(--brand-dark); }.personal-content-card h2 { margin: 11px 0 5px; font-size: 14px; line-height: 1.65; }.personal-content-path { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }.personal-content-body { margin-top: 12px; padding: 12px 13px; border-radius: 11px; color: var(--ink); font-size: 12px; line-height: 1.72; white-space: pre-wrap; overflow-wrap: anywhere; }.personal-content-body.comment { background: #fff5f2; border: 1px solid #f1d8d2; }.personal-content-body.note { background: #f4faf7; border: 1px solid #d7e5df; }.personal-content-body.like { background: #fff8e9; border: 1px solid #f0dfb9; }.personal-content-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; color: var(--muted); font-size: 9px; }.personal-feed-footer { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.admin-comment-search { display: flex; align-items: flex-end; gap: 9px; margin: -2px 0 15px; }.admin-comment-search .field { flex: 1; }.admin-comment-list { display: grid; gap: 0; }.admin-comment-item { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 11px; padding: 15px 0; border-top: 1px solid var(--line); }.admin-comment-main { min-width: 0; }.admin-comment-main p { margin: 7px 0; color: var(--ink); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }.admin-comment-source { display: grid; gap: 3px; padding: 9px 11px; border-radius: 9px; background: var(--surface-soft); }.admin-comment-source span { overflow: hidden; color: var(--ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.admin-comment-source small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.admin-forum-search { display: grid; grid-template-columns: minmax(220px, 1fr) 150px 150px auto; align-items: end; gap: 9px; margin: -2px 0 8px; }.admin-forum-summary { margin-bottom: 10px; color: var(--muted); font-size: 10px; }.admin-forum-list { display: grid; gap: 9px; }.admin-forum-item { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }.admin-forum-item-head, .admin-forum-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.admin-forum-item-head > div { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }.admin-forum-item-head strong { font-size: 11px; }.admin-forum-item-head time, .admin-forum-item-foot > span { color: var(--muted); font-size: 10px; }.admin-forum-item h3 { margin: 11px 0 5px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }.admin-forum-item > p { margin: 0 0 12px; color: var(--ink-soft); font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }.admin-forum-audit { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }.admin-forum-audit .section-heading { margin-bottom: 10px; }.admin-forum-audit-list { display: grid; gap: 0; }.admin-forum-audit-list article { padding: 11px 0; border-top: 1px solid var(--line); }.admin-forum-audit-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.admin-forum-audit-list strong { font-size: 11px; }.admin-forum-audit-list time, .admin-forum-audit-list small { color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }.admin-forum-audit-list p { margin: 5px 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.provider-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }.provider-settings-card { min-width: 0; display: grid; gap: 13px; }.provider-card-heading, .vector-management-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.provider-card-heading > div { min-width: 0; display: grid; gap: 4px; }.provider-card-heading h3 { margin: 0; }.provider-card-heading span { color: var(--muted); font-size: 10px; }.provider-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.model-select-field { position: relative; }.model-combobox { display: grid; grid-template-columns: minmax(0, 1fr) 38px; }.model-combobox input { min-width: 0; border-radius: 10px 0 0 10px; }.model-combobox button { border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 10px 10px 0; color: var(--muted); background: var(--surface-soft); cursor: pointer; }.model-combobox button:hover { color: var(--brand-dark); background: var(--brand-soft); }.model-dropdown { position: absolute; z-index: 20; top: calc(100% + 5px); right: 0; left: 0; max-height: 260px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-md); }.model-dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 7px; color: var(--muted); font-size: 10px; }.model-option-list { display: grid; gap: 3px; }.model-option-list button { min-width: 0; display: grid; gap: 2px; padding: 8px 9px; border: 0; border-radius: 8px; text-align: left; background: transparent; cursor: pointer; }.model-option-list button:hover { background: var(--brand-soft); }.model-option-list strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.model-option-list small { color: var(--muted); font-size: 9px; }.model-dropdown-state { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 6px; color: var(--muted); font-size: 11px; }.model-dropdown-state.error { color: var(--danger); }.semantic-settings-card { display: grid; gap: 14px; margin-top: 13px; }.vector-management-card { display: grid; gap: 15px; margin-top: 13px; }.vector-management-head h3 { margin: 0; }.vector-management-head p { max-width: 600px; margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }.vector-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.vector-facts span { min-width: 0; display: grid; gap: 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }.vector-facts small { color: var(--muted); font-size: 10px; }.vector-facts strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.vector-progress { display: grid; gap: 7px; }.vector-progress > div { height: 8px; overflow: hidden; border-radius: 99px; background: #e9ebf0; }.vector-progress > div span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #f0a094); transition: width .3s ease; }.vector-progress p { display: flex; justify-content: space-between; margin: 0; color: var(--muted); font-size: 10px; }.vector-operation-error { margin: 0; padding: 10px 12px; border-radius: 10px; color: var(--danger); background: #fff1f2; font-size: 11px; }
.avatar-crop-modal { width: min(100%, 500px); }.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.modal-heading h2 { margin: 0; }.modal-heading p { margin-bottom: 0; }.icon-button { width: 34px; height: 34px; border: 0; border-radius: 9px; color: var(--muted); background: var(--surface-soft); cursor: pointer; font-size: 21px; }.icon-button:hover { color: var(--ink); background: var(--line); }.avatar-crop-canvas-wrap { position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 8px auto 15px; overflow: hidden; border-radius: 20px; background: #f3f4f7; box-shadow: inset 0 0 0 1px rgb(20 24 36 / 8%); }.avatar-crop-canvas-wrap canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }.avatar-crop-canvas-wrap canvas:active { cursor: grabbing; }.avatar-crop-guide { position: absolute; inset: 9%; border: 1px solid rgb(255 255 255 / 75%); border-radius: 31%; box-shadow: 0 0 0 999px rgb(20 24 36 / 20%); pointer-events: none; }.avatar-zoom-control { display: grid; grid-template-columns: auto minmax(0, 1fr) 45px; align-items: center; gap: 10px; margin: 0 4px 18px; color: var(--muted); font-size: 11px; }.avatar-zoom-control input { accent-color: var(--brand); }.avatar-zoom-control output { text-align: right; color: var(--ink-soft); }

.workspace { width: min(calc(100% - 40px), var(--content)); margin: 0 auto; padding: 34px 0 72px; }
.workspace:focus { outline: none; }
.page { min-height: calc(100vh - 176px); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-header-compact { margin-bottom: 14px; }
.page-header-compact .eyebrow { margin: 0; }
.page-title { min-width: 0; }
.page-title h1 { margin: 0; font-size: clamp(25px, 3vw, 34px); line-height: 1.22; letter-spacing: -.035em; }
.section-copy { margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel { padding: 22px; }
.loading-state, .empty-state { min-height: 240px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 40px 20px; text-align: center; color: var(--ink-soft); }
.loading-spinner { width: 28px; height: 28px; border: 3px solid var(--brand-soft); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 17px; color: var(--brand); background: var(--brand-soft); font-size: 24px; }
.empty-state h3 { margin: 2px 0 0; color: var(--ink); font-size: 17px; }
.empty-state p { max-width: 430px; margin: 0; font-size: 13px; line-height: 1.7; }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.today-summary-card { margin-bottom: 8px; padding: 11px 20px 14px; border: 0; border-radius: 18px; box-shadow: 0 6px 20px rgb(38 42 57 / 5%); }.today-summary-head { min-height: 25px; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }.today-summary-head h2 { margin: 0; font-size: 17px; letter-spacing: -.035em; }.today-summary-head time { color: var(--muted); font-size: 9px; white-space: nowrap; }.today-summary-metrics { display: grid; grid-template-columns: 1.05fr repeat(4, 1fr); align-items: center; gap: 10px; padding-top: 10px; }.today-score { width: 64px; height: 64px; display: grid; place-items: center; align-content: center; margin: auto; border: 9px solid var(--surface-soft); border-radius: 50%; }.today-score span { font-size: 19px; line-height: 1; letter-spacing: -.035em; }.today-score small, .today-metric small { margin-top: 4px; color: var(--muted); font-size: 9px; }.today-metric { min-width: 0; display: grid; justify-items: center; }.today-metric strong { max-width: 100%; overflow: hidden; font-size: clamp(16px, 2vw, 20px); font-weight: 500; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }.today-shortcuts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-bottom: 13px; padding: 10px 14px 9px; border: 0; border-radius: 18px; box-shadow: 0 6px 20px rgb(38 42 57 / 5%); }.today-shortcut { min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 1px 8px; border-right: 1px solid var(--line); }.today-shortcut:last-child { border-right: 0; }.today-shortcut:hover strong { color: var(--brand-dark); }.today-shortcut-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; font-size: 20px; line-height: 1; }.shortcut-wrong { color: #d95c55; background: #fde9e8; }.shortcut-favorites { color: #df7466; background: #fff0ed; }.shortcut-notes { color: #7164cf; background: #f0edff; }.shortcut-comments { color: #4d91bd; background: #e9f5ff; }.shortcut-likes { color: #bf8a3d; background: #fff5df; }.today-shortcut strong { font-size: 11px; font-weight: 600; }.today-shortcut small { color: var(--muted); font-size: 9px; }
.stat-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.stat-card small { display: block; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.stat-card strong { display: block; overflow: hidden; margin-top: 7px; font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.stat-card span { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 11px; }

.breadcrumbs { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; color: var(--muted); font-size: 12px; }
.breadcrumbs button { max-width: min(380px, 70vw); overflow: hidden; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumbs button:hover { color: var(--brand); }
.breadcrumbs span { color: #c0c4ce; }
.library-view-toolbar { min-height: 42px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }
.library-view-toolbar > span { color: var(--muted); font-size: 11px; }
.library-view-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: #f0f2f5; }
.library-view-switch button { min-width: 76px; min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.library-view-switch button.active { color: var(--ink); background: var(--surface); box-shadow: 0 2px 8px rgb(25 30 43 / 9%); }
.guided-library { overflow: hidden; border: 0; border-radius: 22px; box-shadow: 0 8px 28px rgb(28 33 49 / 6%); }
.guided-library-head { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 24px; }
.guided-library-head h2 { margin: 0; font-size: 17px; }
.guided-library-head > span { padding: 5px 8px; border-radius: 8px; color: var(--brand-dark); background: var(--brand-soft); font-size: 9px; white-space: nowrap; }
.guide-tag-row { padding: 11px 24px 13px; border-top: 1px solid var(--line); }
.guide-tag-head { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.guide-tag-head > strong { color: var(--ink-soft); font-size: 11px; }
.guide-tag-head > button { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 8px; padding: 0 9px; color: var(--brand-dark); background: var(--surface-soft); cursor: pointer; font-size: 10px; font-weight: 750; }
.guide-tag-head > button:hover { background: var(--brand-soft); }
.guide-tag-head > button span { width: 12px; display: inline-grid; place-items: center; font-size: 11px; }
.guide-tags { min-width: 0; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; overflow: hidden; transition: max-height .2s ease; }
.guide-tags.expanded { max-height: 1000px; }
.guide-tags.collapsed { max-height: 42px; }
.guide-tag { width: 156px; min-width: 156px; height: 42px; flex: 0 0 156px; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 7px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 9px; color: var(--ink-soft); background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 750; text-align: left; transition: border-color .15s, color .15s, background .15s, box-shadow .15s; }
.guide-tag:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-soft); }
.guide-tag.active { border-color: #edc8c4; color: #b14e46; background: #fff2f0; box-shadow: 0 2px 7px rgb(31 35 51 / 7%); }
.guide-tag-check { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #c8ccd4; border-radius: 5px; background: #f7f8fa; }
.guide-tag-check::after { color: #fff; font-size: 10px; font-weight: 900; content: "✓"; opacity: 0; }
.guide-tag.active .guide-tag-check { border-color: #b14e46; background: #b14e46; }
.guide-tag.active .guide-tag-check::after { opacity: 1; }
.guide-tag-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-tag small { color: var(--muted); font-size: 9px; font-weight: 700; }
.guide-tag.active small { color: #9b5a55; }
.guided-library-body { display: grid; gap: 10px; padding: 18px 24px 24px; border-top: 1px solid var(--line); background: #fafbfc; }
.guide-branch { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.guide-branch.open { border-color: #e4c7c3; box-shadow: 0 7px 22px rgb(34 39 55 / 6%); }
.guide-branch-trigger { width: 100%; min-height: 70px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 0; padding: 11px 16px; text-align: left; background: transparent; cursor: pointer; }
.guide-branch-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--brand-dark); background: var(--brand-soft); font-size: 18px; }
.guide-branch-copy { min-width: 0; display: grid; gap: 5px; }
.guide-branch-copy strong { font-size: 14px; }
.guide-branch-copy small { color: var(--muted); font-size: 10px; }
.guide-branch-arrow { color: var(--muted); transition: transform .16s; }
.guide-branch.open .guide-branch-arrow { transform: rotate(180deg); }
.guide-branch-body { padding: 0 16px 16px 62px; }
.guide-branch-loading { min-height: 100px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 11px; }
.guide-branch-loading .loading-spinner { width: 22px; height: 22px; }
.guide-file-list { display: grid; gap: 7px; }
.guide-file-list > button { width: 100%; min-height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; text-align: left; background: var(--surface); cursor: pointer; }
.guide-file-list > button:hover { border-color: #efb9b3; background: #fffafa; }
.guide-file-copy { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.guide-file-list strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.guide-file-list small { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.guide-file-list b { color: var(--muted); font-size: 17px; font-weight: 400; }
.guide-nested-folder { margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.guide-nested-folder > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; cursor: pointer; list-style: none; }
.guide-nested-folder > summary::-webkit-details-marker { display: none; }
.guide-nested-folder > summary::before { content: "+"; width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #7568b5; background: #f1efff; }
.guide-nested-folder[open] > summary::before { content: "−"; }
.guide-nested-folder > summary span { flex: 1; font-size: 12px; font-weight: 700; }
.guide-nested-folder > summary small { color: var(--muted); font-size: 9px; }
.guide-nested-content { display: grid; gap: 7px; padding: 0 10px 10px 44px; }
.guide-direct-files { display: grid; gap: 9px; margin-bottom: 5px; }
.guide-direct-files h3 { margin: 0; font-size: 12px; }
.guide-empty { margin: 0; padding: 18px; color: var(--muted); text-align: center; font-size: 11px; }
.library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.library-item { min-width: 0; min-height: 116px; display: flex; align-items: center; gap: 15px; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: left; background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.library-item:hover { transform: translateY(-2px); border-color: #efc8c4; box-shadow: 0 10px 26px rgb(37 40 66 / 8%); }
.library-icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: var(--brand); background: var(--brand-soft); font-size: 19px; font-weight: 800; }
.library-main { min-width: 0; flex: 1; }
.library-main strong { display: -webkit-box; overflow: hidden; font-size: 15px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.library-main small { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.library-arrow { color: #b1b6c3; font-size: 18px; }

.outline-card { overflow: hidden; }
.outline-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.outline-mode-row { width: 100%; min-width: 0; display: flex; align-items: center; gap: 10px; }
.outline-mode-row .segmented { width: min(520px, 100%); min-width: 0; flex: 0 1 520px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.outline-order-row { width: 100%; min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
.outline-order-segmented { width: min(520px, 100%); min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.outline-order-arrow { margin-left: 4px; color: var(--brand-dark); font-size: inherit; font-weight: 800; line-height: 1; }
.segmented { display: inline-flex; gap: 3px; padding: 4px; border-radius: 11px; background: #f0f2f7; }
.segmented button { width: 100%; min-width: 0; min-height: 34px; border: 0; border-radius: 8px; padding: 0 clamp(7px, 1.2vw, 14px); color: var(--ink-soft); background: transparent; cursor: pointer; font-size: 12px; font-weight: 750; white-space: nowrap; }
.segmented button.active { color: var(--brand-dark); background: var(--surface); box-shadow: 0 1px 6px rgb(31 35 51 / 9%); }
.outline-summary { margin-left: auto; color: var(--ink-soft); font-size: 12px; }
.outline-groups { display: grid; gap: 22px; padding: 22px; }
.outline-group { display: grid; gap: 12px; }
.outline-group-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; }
.outline-group-title span:last-child { color: var(--muted); font-weight: 500; }
.type-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.type-dot.type-b { background: #8e62c8; }
.type-dot.type-x { background: var(--accent); }
.type-dot.type-subjective { background: var(--warning); }
.type-dot.type-year { background: #4f79a7; }
.type-dot.type-position { background: #4d846f; }
.type-dot.type-random { background: #8e62c8; }
.number-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.number-button { aspect-ratio: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-soft); background: var(--surface-soft); cursor: pointer; font-size: 11px; font-weight: 700; }
.number-button:hover { border-color: var(--brand); color: var(--brand); }
.number-button.correct { border-color: #b8ded2; color: var(--success); background: var(--success-soft); }
.number-button.wrong { border-color: #f0c4c8; color: var(--danger); background: var(--danger-soft); }
.number-button.ungraded { border-color: #edd39e; color: var(--warning); background: var(--warning-soft); }
.number-button.answered { border-color: #cbd1db; color: #616875; background: #f0f2f5; }
.number-button.drafted { border-color: #b7bdc8; border-style: dashed; color: #5f6672; background: #eceff3; }
.number-button.current { border-color: var(--brand); color: #fff; background: var(--brand); box-shadow: 0 5px 13px rgb(232 93 82 / 20%); }
.saved-outline-list { display: grid; gap: 8px; }
.saved-outline-item { min-width: 0; min-height: 50px; display: flex; align-items: stretch; gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.saved-outline-open { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; border: 0; padding: 0 8px; text-align: left; background: transparent; cursor: pointer; }
.saved-outline-open > span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--brand-dark); background: var(--brand-soft); font-size: 11px; font-weight: 800; }
.saved-outline-open strong { overflow: hidden; color: var(--ink-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.saved-outline-remove { align-self: center; flex: 0 0 auto; }

.search-hero { padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.search-box { display: flex; gap: 9px; margin-top: 0; }
.search-box input { min-height: 52px; border-color: rgb(232 93 82 / 24%); background: rgb(255 255 255 / 88%); font-size: 15px; }
.search-box .button { min-width: 100px; }
.search-preference-panel { margin-top: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.search-preference-toolbar { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; background: #f5f6f8; }
.search-preference-toolbar strong { color: var(--ink-soft); font-size: 11px; }
.search-preference-toolbar-actions { display: inline-flex; align-items: center; gap: 6px; }
.search-preference-reset { min-height: 32px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.search-preference-reset:hover { color: var(--brand-dark); border-color: rgb(232 93 82 / 35%); background: var(--brand-soft); }
.search-preference-toggle { min-height: 32px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 8px; padding: 0 9px; color: var(--brand-dark); background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 750; box-shadow: 0 1px 4px rgb(31 35 51 / 7%); }
.search-preference-toggle:hover { background: var(--brand-soft); }
.search-preference-toggle > span { width: 13px; display: inline-grid; place-items: center; font-size: 12px; }
.search-preference-body { border-top: 1px solid var(--line); }
.search-control-row { min-width: 0; display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; }
.search-control-row + .search-control-row { border-top: 1px solid var(--line); }
.search-control-label { color: var(--ink-soft); font-size: 11px; font-weight: 800; white-space: nowrap; }
.search-toggle-grid { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.search-filter-toggle { width: 108px; min-width: 108px; min-height: 38px; flex: 0 0 108px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 8px; color: var(--ink-soft); background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 750; white-space: nowrap; transition: border-color .15s, color .15s, background .15s, box-shadow .15s; }
.search-filter-toggle > span { width: 16px; height: 16px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #c8ccd4; border-radius: 5px; background: #f7f8fa; }
.search-filter-toggle > span::after { color: #fff; font-size: 10px; font-weight: 900; content: "✓"; opacity: 0; }
.search-filter-toggle:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-soft); }
.search-filter-toggle.active { border-color: var(--filter-border, #d8dbe2); color: var(--filter-color, var(--ink)); background: var(--filter-bg, var(--surface-soft)); box-shadow: 0 2px 7px rgb(31 35 51 / 7%); }
.search-filter-toggle.active > span { border-color: var(--filter-color, var(--brand)); background: var(--filter-color, var(--brand)); }
.search-filter-toggle.active > span::after { opacity: 1; }
.search-mode-list { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.search-mode-toggle:disabled { cursor: not-allowed; filter: grayscale(.55); opacity: .48; }
.search-type-list { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.search-filter-toggle.palette-0 { --filter-color: #b14e46; --filter-border: #edc8c4; --filter-bg: #fff2f0; }
.search-filter-toggle.palette-1 { --filter-color: #6f539b; --filter-border: #d9cdec; --filter-bg: #f7f2fc; }
.search-filter-toggle.palette-2 { --filter-color: #456f99; --filter-border: #cdddec; --filter-bg: #eff6fb; }
.search-filter-toggle.palette-3 { --filter-color: #347a68; --filter-border: #c3dfd6; --filter-bg: #edf8f4; }
.search-filter-toggle.palette-4 { --filter-color: #91651e; --filter-border: #ead8ae; --filter-bg: #fff8e6; }
.search-filter-toggle.palette-5 { --filter-color: #a14f69; --filter-border: #e9ccd6; --filter-bg: #fff2f6; }
.search-filter-toggle.palette-6 { --filter-color: #557b3f; --filter-border: #d0e1c5; --filter-bg: #f3f9ef; }
.search-filter-toggle.palette-7 { --filter-color: #8a5740; --filter-border: #e5d0c5; --filter-bg: #fbf4f0; }
.search-filter-toggle.palette-8 { --filter-color: #4f6b7f; --filter-border: #cedbe3; --filter-bg: #f1f6f8; }
.search-filter-toggle.palette-9 { --filter-color: #796027; --filter-border: #e5d9b8; --filter-bg: #fbf8ed; }
.search-filter-toggle.palette-10 { --filter-color: #66568f; --filter-border: #d8d0e8; --filter-bg: #f6f3fa; }
.search-filter-toggle.palette-11 { --filter-color: #3f777d; --filter-border: #c8dfe1; --filter-bg: #eff8f8; }
.search-type-list.all-selected .search-type-toggle:not(.active),
.search-type-list.all-selected .search-type-toggle:not(.active):hover { --filter-color: var(--ink-soft); --filter-border: var(--line); --filter-bg: var(--surface); }
.results-header { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; }
.results-header h2 { margin: 0; font-size: 17px; }
.results-header span { color: var(--muted); font-size: 12px; }
.result-list { display: grid; gap: 12px; }
.question-card { padding: 22px; }
.question-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
.badge { min-height: 24px; display: inline-flex; align-items: center; border-radius: 7px; padding: 0 8px; color: var(--brand-dark); background: var(--brand-soft); font-size: 10px; font-weight: 800; }
.badge-neutral { color: var(--ink-soft); background: #f0f2f6; }
.badge-warn { color: #93650f; background: var(--warning-soft); }
.question-stem { margin: 0; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.75; white-space: pre-wrap; }
.option-list { display: grid; gap: 8px; margin: 17px 0 0; padding: 0; list-style: none; }
.option-row { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink); background: var(--surface-soft); font-size: 13px; line-height: 1.6; }
.option-row.correct { color: var(--ink); background: var(--success-soft); box-shadow: inset 0 0 0 1px #b8ded2; }
.option-row.correct .option-label { border-color: var(--success); color: #fff; background: var(--success); }
.option-row .option-state { margin-left: auto; }
.option-label { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--ink); background: var(--surface); font-size: 10px; font-weight: 800; }
.solution-stack { display: grid; gap: 14px; margin-top: 18px; }
.solution-section { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.solution-heading { min-height: 46px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.solution-heading strong { color: var(--ink); font-size: 13px; }
.solution-content { padding: 15px 16px 17px; color: var(--ink); font-size: 13px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.solution-answer { border-color: #c9e4da; background: #fbfefc; }
.solution-answer .solution-heading { border-bottom-color: #d9ede6; background: #edf8f4; }
.solution-answer .solution-content { color: var(--ink); font-size: 14px; font-weight: 600; }
.solution-answer .solution-heading strong { color: #276655; }
.solution-point { border-color: #eadcb6; background: #fffdf8; }
.solution-point .solution-heading { border-bottom-color: #efe3c5; background: #fff7e5; }
.solution-point .solution-heading strong { color: #8b641c; }
.solution-explanation { border-color: #d5e0ee; background: #fbfcff; }
.solution-explanation .solution-heading { border-bottom-color: #dfe7f1; background: #f0f5fb; }
.solution-explanation .solution-heading strong { color: #456786; }
.answer-summary { margin: 0; }
.answer-summary strong { font-size: 17px; font-weight: 850; }
.standard-answer-value, .user-answer-value.correct { color: var(--success); }
.user-answer-value.incorrect { color: var(--danger); }
.user-answer-value.neutral { color: var(--warning); }
.search-hit { color: var(--brand); font-weight: 800; background: transparent; }
.source-path { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.55; }
.question-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

.page-practice { width: min(calc(100vw - 40px), 1320px); margin-left: 50%; transform: translateX(-50%); }
.practice-top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.practice-top-main { min-width: 0; flex: 1; }
.practice-top h1 { overflow: hidden; margin: 0; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.practice-top p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.mode-chip { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 6px; color: var(--brand-dark); background: var(--brand-soft); font-size: 10px; font-weight: 800; }
.mode-speed { color: #9b6818; background: #fff5dc; }
.mode-test { color: #49688c; background: #edf4fb; }
.mode-memorize { color: #68705f; background: #f0f3eb; }
.timer-pill { min-width: 92px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 800; }
.practice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.practice-question { min-height: 580px; display: flex; flex-direction: column; padding: clamp(20px, 3vw, 34px); }
.practice-question .question-stem { font-size: 18px; line-height: 1.85; }
.practice-progress { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.practice-progress > strong { min-width: 0; flex: 0 0 auto; font-size: 13px; white-space: nowrap; }
.practice-progress > strong small { color: var(--muted); font-size: 10px; font-weight: 650; }
.practice-progress > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 11px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.practice-order-label { color: var(--brand-dark); font-size: 10px; font-weight: 800; }
.session-result { display: flex; gap: 10px; margin: -4px 0 22px; padding: 14px; border: 1px solid #f1d5d1; border-radius: 13px; background: #fff8f7; }
.session-result span { flex: 1; display: grid; gap: 3px; padding-right: 10px; border-right: 1px solid #f1e0de; }
.session-result span:last-child { border-right: 0; }
.session-result small { color: var(--muted); font-size: 10px; }
.session-result strong { color: var(--brand-dark); font-size: 18px; }
.session-result em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 500; }
.answer-options { display: grid; gap: 10px; margin-top: 24px; }
.answer-option { width: 100%; min-width: 0; display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--line); border-radius: 12px; padding: 13px; color: var(--ink-soft); text-align: left; background: var(--surface); cursor: pointer; line-height: 1.65; transition: border-color .14s, background .14s, color .14s; }
.answer-option:hover { border-color: #efc1bd; background: #fffafa; }
.answer-option.selected { border-color: #b9bec8; color: #4f5662; background: #f1f2f4; }
.answer-option.correct { border-color: #8dc8b5; color: var(--success); background: var(--success-soft); }
.answer-option.incorrect { border-color: #e39ca4; color: var(--danger); background: var(--danger-soft); }
.answer-option:disabled { cursor: default; }
.answer-option .option-label { margin-top: 1px; }
.answer-option.selected .option-label { border-color: #858c98; color: #fff; background: #858c98; }
.answer-option.incorrect .option-label { border-color: var(--danger); color: #fff; background: var(--danger); }
.answer-option.correct .option-label { border-color: var(--success); color: #fff; background: var(--success); }
.option-text { min-width: 0; flex: 1; }
.option-state { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--success); font-size: 0; }
.option-state::after { color: #fff; font-size: 13px; font-weight: 900; content: "✓"; }
.answer-option.incorrect .option-state { background: var(--danger); }
.answer-option.incorrect .option-state::after { content: "×"; }
.answer-options-review .answer-option { cursor: default; }
.subjective-answer { margin-top: 22px; }
.practice-solution { margin-top: 24px; }
.practice-solution .solution-stack { margin-top: 0; }
.practice-feedback-note { margin: 18px 0 0; padding: 10px 12px; border-radius: 9px; color: #64758d; background: #f2f6fa; font-size: 12px; line-height: 1.55; }
.practice-feedback-note.wrong { color: #a34c44; background: #fff2ef; }
.question-comments-slot { margin-top: 32px; }
.question-comments { padding-top: 26px; border-top: 1px solid var(--line); }
.comments-heading { min-height: 30px; display: flex; align-items: center; gap: 9px; }
.comments-heading h2 { margin: 0; font-size: 16px; letter-spacing: -.015em; }
.comments-heading span { color: var(--muted); font-size: 11px; }
.comment-list { display: grid; gap: 0; margin-top: 8px; }
.comment-item { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.comment-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }.comment-reaction { min-height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-soft); cursor: pointer; font-size: 11px; }.comment-reaction:hover, .comment-reaction.active { border-color: #efb9b4; color: var(--brand-dark); background: var(--brand-soft); }.comment-reaction span { margin-left: 3px; font-variant-numeric: tabular-nums; }.comment-reply { margin-left: 34px; padding-left: 12px; border-left: 2px solid var(--brand-soft); }
.comment-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #76534f; background: #f7ecea; font-size: 12px; font-weight: 800; }
.comment-main { min-width: 0; }
.comment-meta { min-width: 0; display: flex; align-items: center; gap: 9px; }
.comment-meta strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.comment-meta time { color: var(--muted); font-size: 10px; }
.comment-delete { min-height: 28px; margin-left: auto; color: var(--muted); }
.comment-delete:hover { color: var(--danger); }
.comment-main p { margin: 7px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.comments-empty, .comments-error, .comments-loading { min-height: 58px; margin: 8px 0 0; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.comments-loading .loading-spinner { width: 18px; height: 18px; border-width: 2px; }
.comments-error { justify-content: space-between; color: var(--danger); }
.comment-form { display: grid; gap: 9px; margin-top: 16px; }
.comment-form textarea { min-height: 86px; background: var(--surface-soft); font-size: 13px; line-height: 1.7; }
.comment-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.comment-form-actions small { color: var(--muted); font-size: 10px; }
.practice-footer { margin-top: auto; padding: 8px; display: flex; align-items: stretch; gap: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.practice-footer-button { min-width: 0; min-height: 42px; flex: 1 1 0; padding-inline: 9px; border-radius: 11px; box-shadow: none; }
.practice-footer-icon { min-width: 18px; display: inline-grid; place-items: center; font-size: 17px; line-height: 1; }
.practice-footer-label { white-space: nowrap; }
.practice-footer-main { flex-grow: 1.3; }
.practice-footer-favorite { color: #7b6170; }
.practice-footer-favorite:hover { color: var(--brand-dark); background: var(--brand-soft); }
.practice-footer-favorite.favorited, .favorite-button.favorited { border-color: #efc3bf; color: var(--brand-dark); background: var(--brand-soft); }
.practice-outline { position: sticky; top: 87px; overflow: hidden; max-height: calc(100vh - 110px); }
.practice-outline-grabber { display: none; }
.practice-outline-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.practice-outline-head > div { min-width: 0; display: grid; gap: 2px; }
.practice-outline-head strong { font-size: 13px; }
.practice-outline-head small { color: var(--brand-dark); font-size: 9px; font-weight: 750; white-space: nowrap; }
.practice-outline-head > span { min-width: 0; flex: 1; overflow: hidden; margin-left: 10px; color: var(--muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.practice-outline-close, .practice-outline-backdrop { display: none; }
.practice-outline-body { overflow-y: auto; max-height: calc(100vh - 170px); padding: 15px; }
.practice-outline .number-grid { grid-template-columns: repeat(5, 1fr); }
.mobile-outline-trigger { display: none; }

@keyframes question-forward-in { from { opacity: .3; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes question-backward-in { from { opacity: .3; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } }
.practice-question.slide-forward { animation: question-forward-in .18s ease-out; }
.practice-question.slide-backward { animation: question-backward-in .18s ease-out; }

.admin-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 18px; }
.admin-nav { position: sticky; top: 88px; align-self: start; display: grid; gap: 5px; padding: 8px; }
.admin-nav button { min-height: 42px; border: 0; border-radius: 9px; padding: 0 12px; color: var(--ink-soft); text-align: left; background: transparent; cursor: pointer; font-size: 13px; font-weight: 700; }
.admin-nav button:hover, .admin-nav button.active { color: var(--brand-dark); background: var(--brand-soft); }
.admin-content { min-width: 0; display: grid; gap: 16px; }
.admin-section { padding: 22px; }
.catalog-export-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 15px; }
.catalog-export-facts span { min-width: 0; display: grid; gap: 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); }
.catalog-export-facts small { color: var(--muted); font-size: 10px; }
.catalog-export-facts strong { font-size: 17px; }
.catalog-export-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .55fr); align-items: end; gap: 15px; }
.catalog-export-card h3 { margin-bottom: 6px; }
.catalog-export-card p { max-width: 700px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.catalog-export-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.catalog-export-actions > span { color: var(--muted); font-size: 10px; line-height: 1.55; }
.catalog-import-divider { height: 1px; margin: 20px 0; background: var(--line); }
.catalog-import-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); align-items: end; gap: 15px; }
.catalog-import-card h3 { margin-bottom: 6px; }
.catalog-import-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.catalog-import-card input[type="file"] { min-width: 0; width: 100%; padding: 8px; }
.catalog-import-workspace { min-width: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.catalog-import-records { min-width: 0; align-self: start; display: grid; gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.catalog-import-records-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 5px 7px; color: var(--muted); font-size: 10px; }
.catalog-import-record { min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; padding: 9px; color: var(--ink); text-align: left; background: transparent; cursor: pointer; }
.catalog-import-record:hover, .catalog-import-record.active { border-color: color-mix(in srgb, var(--brand) 28%, var(--line)); background: var(--brand-soft); }
.catalog-import-record > span { min-width: 0; flex: 1; display: grid; gap: 3px; }
.catalog-import-record strong, .catalog-import-record small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-import-record strong { font-size: 11px; }.catalog-import-record small { color: var(--muted); font-size: 9px; }
.catalog-import-record em { flex: 0 0 auto; font-style: normal; }
.catalog-import-detail { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.catalog-import-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.catalog-import-detail-head > div { min-width: 0; display: grid; gap: 4px; }
.catalog-import-detail-head strong, .catalog-import-detail-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-import-detail-head strong { font-size: 13px; }.catalog-import-detail-head span { color: var(--muted); font-size: 9px; }
.catalog-import-mapping { display: grid; gap: 12px; margin: 12px 0; padding: 13px; border-radius: 11px; background: var(--surface-soft); }
.catalog-import-mapping-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.catalog-import-preview td:nth-child(3) { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-import-errors { display: grid; gap: 5px; margin-top: 12px; padding: 12px; border: 1px solid #efd5d7; border-radius: 10px; background: #fff5f5; }
.catalog-import-errors strong { color: #a13f49; font-size: 11px; }.catalog-import-errors span { color: #574d52; font-size: 10px; line-height: 1.55; }
.catalog-import-empty { margin-top: 14px; padding: 22px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); text-align: center; font-size: 11px; }
.admin-status-banner { min-width: 0; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 15px 16px; border: 1px solid #e6d9b8; border-radius: 14px; background: #fffaf0; }
.admin-status-banner.ready { border-color: #cbe3da; background: #f2faf7; }
.admin-status-banner > div { min-width: 0; flex: 1; display: grid; gap: 3px; }
.admin-status-banner strong { font-size: 13px; }
.admin-status-banner small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #d7a744; box-shadow: 0 0 0 5px rgb(215 167 68 / 12%); }
.status-dot.ready, .admin-status-banner.ready .status-dot { background: var(--success); box-shadow: 0 0 0 5px rgb(52 122 104 / 12%); }
.admin-mini-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.admin-mini-stats span { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface-soft); font-size: 11px; }
.admin-mini-stats strong { color: var(--ink); font-size: 15px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; font-size: 18px; }
.section-heading p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-group { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.settings-group h3 { margin: 0 0 14px; font-size: 14px; }
.solution-row { min-width: 0; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; }
.solution-row:last-child { border-bottom: 0; }
.solution-row strong { color: var(--ink); font-size: 12px; }
.solution-row span { min-width: 0; overflow: hidden; color: var(--ink-soft); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.create-user-box { margin-bottom: 16px; }
.field-spaced { margin-top: 10px; }
.settings-group .stack-form { gap: 13px; }
.inline-fields { display: grid; grid-template-columns: 1fr 120px; gap: 10px; }
.switch-row { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.switch-copy strong { display: block; font-size: 13px; }
.switch-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; border-radius: 20px; background: #c9cdd8; cursor: pointer; transition: .2s; }
.switch span::after { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 20%); transition: .2s; }
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(18px); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th, .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.data-table th { color: var(--muted); background: var(--surface-soft); font-size: 10px; letter-spacing: .04em; }
.data-table tr:last-child td { border-bottom: 0; }
.table-actions { display: flex; gap: 6px; }
.user-identity { display: flex; align-items: center; gap: 9px; }
.user-identity > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(145deg, #d84e45, #f07a70); font-size: 11px; font-weight: 800; }
.user-identity > span img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.user-identity strong { color: var(--ink); font-size: 12px; }
.compact-select { min-width: 104px; min-height: 34px; border-radius: 9px; padding: 0 9px; font-size: 11px; }
.status-pill { min-height: 25px; display: inline-flex; align-items: center; border-radius: 8px; padding: 0 8px; color: var(--success); background: var(--success-soft); font-size: 10px; font-weight: 800; }
.status-pill.disabled { color: var(--muted); background: #f0f1f4; }
.status-pill.active, .status-pill.pending { color: #8d6b2d; background: #fff4d9; }.status-pill.complete { color: var(--success); background: var(--success-soft); }
.status-pill.archived { color: var(--muted); background: var(--surface-soft); }
.current-user-label { min-height: 34px; display: inline-flex; align-items: center; color: var(--muted); font-size: 11px; }
.model-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }
.model-status-grid > div { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; row-gap: 2px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.model-status-grid .status-dot { grid-row: 1 / span 2; }
.model-status-grid small { color: var(--muted); font-size: 10px; }
.model-status-grid strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.mobile-nav { display: none; }
.toast-region { position: fixed; z-index: 200; top: 18px; right: 18px; display: grid; gap: 8px; pointer-events: none; }
.toast { max-width: min(380px, calc(100vw - 36px)); padding: 12px 15px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow-md); font-size: 12px; line-height: 1.55; animation: toast-in .2s ease-out; }
.toast.error { border-color: #f0c3c8; color: var(--danger); background: #fffafb; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-7px); } }
.modal-backdrop { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 20px; background: rgb(20 24 36 / 46%); backdrop-filter: blur(4px); }
.modal { width: min(100%, 430px); border-radius: 18px; padding: 24px; background: var(--surface); box-shadow: var(--shadow-md); }
.modal h2 { margin: 0; font-size: 20px; }
.modal p { margin: 11px 0 22px; color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 980px) {
  .auth-page { grid-template-columns: 1fr 1fr; }
  .auth-intro { padding: 36px; }
  .auth-points { grid-template-columns: 1fr; }
  .auth-points li { display: flex; align-items: center; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .number-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .practice-layout { grid-template-columns: minmax(0, 1fr) 270px; }
  .admin-layout { grid-template-columns: 175px minmax(0, 1fr); }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .auth-page { display: block; background: var(--surface); }
  .auth-intro { min-height: 260px; padding: 26px 22px 30px; border-radius: 0 0 28px 28px; }
  .brand-large .brand-mark { width: 40px; height: 40px; }
  .auth-copy { margin: 48px 0 0; padding: 0; }
  .auth-copy h1 { max-width: 520px; font-size: clamp(30px, 9vw, 43px); }
  .auth-copy > p:last-child { margin-top: 15px; font-size: 13px; line-height: 1.7; }
  .auth-points { display: none; }
  .auth-panel { display: block; padding: 30px 22px 22px; }
  .auth-card { margin: auto; }
  .auth-card h2 { font-size: 25px; }
  .topbar { height: 60px; }
  .topbar-inner { width: calc(100% - 28px); gap: 10px; }
  .brand small, .desktop-nav, .profile-copy, .profile-button > span:last-child { display: none; }
  .topbar-actions { gap: 6px; }
  .topbar-icon-button { width: 36px; height: 36px; border-radius: 10px; }
  .topbar-icon-button svg { width: 18px; height: 18px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .profile-button { padding: 0; }
  .profile-avatar { width: 34px; height: 34px; }
  .workspace { width: calc(100% - 28px); padding: 22px 0 30px; }
  .page { min-height: calc(100vh - 150px); }
  .page-header { align-items: flex-start; margin-bottom: 18px; }
  .page-header.page-header-compact { margin-bottom: 12px; }
  .secondary-page-header { min-height: 40px; margin-bottom: 11px; }.secondary-page-header .eyebrow { font-size: 12px; }.secondary-page-header > div > span { max-width: 210px; }.secondary-page-header > .button { min-height: 40px; padding-inline: 9px; }
  .page-title h1 { font-size: 25px; }
  .page-header .header-actions { flex: 0 0 auto; }
  .header-actions .button .desktop-label { display: none; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stat-card { padding: 14px; }
  .stat-card strong { font-size: 21px; }
  .today-summary-card { margin-bottom: 7px; padding: 8px 10px 10px; border-radius: 16px; }.today-summary-head { min-height: 22px; gap: 7px; padding-bottom: 4px; }.today-summary-head h2 { font-size: 15px; }.today-summary-head time { font-size: 8px; }.today-summary-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding-top: 8px; }.today-score { width: 47px; height: 47px; border-width: 7px; }.today-score span { font-size: 15px; }.today-score small, .today-metric small { margin-top: 2px; font-size: 8px; white-space: nowrap; }.today-metric strong { font-size: 14px; }.today-shortcuts { margin-bottom: 11px; padding: 7px 3px 6px; border-radius: 16px; }.today-shortcut { gap: 2px; padding: 1px 3px; }.today-shortcut-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 18px; }.today-shortcut strong { font-size: 10px; }.today-shortcut small { font-size: 8px; }
  .library-grid { grid-template-columns: 1fr; gap: 9px; }
  .library-view-toolbar { min-height: 38px; margin: -3px 0 11px; }
  .library-view-toolbar > span { display: none; }
  .library-view-switch button { min-width: 68px; min-height: 33px; }
  .guided-library { border-radius: 18px; }
  .guided-library-head { min-height: 42px; padding: 8px 15px; }
  .guided-library-head h2 { font-size: 16px; }
  .guide-tag-row { padding: 9px 15px 12px; }
  .guide-tag-head { margin-bottom: 6px; }
  .guide-tag { width: 142px; min-width: 142px; flex-basis: 142px; }
  .guided-library-body { padding: 13px 11px 16px; }
  .guide-branch-trigger { min-height: 64px; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 9px; padding: 9px 11px; }
  .guide-branch-icon { width: 29px; height: 29px; }
  .guide-branch-body { padding: 0 10px 11px; }
  .guide-file-list > button { min-height: 56px; padding: 8px 9px; }
  .guide-file-copy { display: grid; gap: 3px; }
  .guide-file-list strong { max-width: 100%; }
  .guide-nested-content { padding: 0 7px 8px 12px; }
  .library-item { min-height: 88px; padding: 14px; }
  .library-icon { width: 40px; height: 40px; }
  .outline-toolbar { align-items: flex-start; padding: 14px; }
  .outline-mode-row .segmented { width: 100%; flex: 1 1 auto; max-width: none; overflow: hidden; }
  .outline-order-segmented { width: 100%; }
  .outline-summary { width: 100%; margin-left: 0; }
  .outline-groups { padding: 16px 14px; }
  .number-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
  .search-hero { padding: 22px 17px; border-radius: 18px; }
  .search-box { display: grid; grid-template-columns: 1fr auto; }
  .search-box .button { min-width: 70px; padding: 0 13px; }
  .search-control-row { grid-template-columns: 1fr; gap: 7px; padding: 10px; }
  .search-filter-toggle { padding-inline: 7px; }
  .question-card { padding: 17px; }
  .question-stem { font-size: 15px; }
  .solution-stack { gap: 11px; }
  .solution-heading { min-height: 43px; padding: 0 13px; }
  .solution-content { padding: 13px 13px 15px; font-size: 13px; line-height: 1.82; }
  .page-practice { width: 100%; margin-left: 0; transform: none; }
  .practice-top { margin-bottom: 12px; }
  .practice-top .button-secondary { width: 38px; min-width: 38px; padding: 0; }
  .practice-top .button-secondary span { display: none; }
  .practice-top h1 { font-size: 15px; }
  .timer-pill { min-width: 79px; }
  .practice-layout { display: block; }
  .practice-question { min-height: calc(100vh - 190px); border-radius: 15px; padding: 18px 15px; }
  .practice-question .question-stem { font-size: 16px; line-height: 1.8; }
  .practice-progress { margin-bottom: 18px; }
  .answer-options { margin-top: 19px; }
  .answer-option { padding: 12px 10px; font-size: 13px; }
  .practice-footer { position: sticky; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 5; margin: 22px -15px -18px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: rgb(255 255 255 / 95%); backdrop-filter: blur(10px); }
  .practice-footer .button { padding: 0 11px; }
  .practice-outline { display: none; position: fixed; z-index: 120; inset: auto 0 0; max-height: 76vh; border-radius: 22px 22px 0 0; box-shadow: 0 -20px 55px rgb(20 24 36 / 18%); }
  .practice-outline.open { display: block; animation: outline-sheet-in .18s ease-out; }
  .practice-outline-grabber { width: 46px; height: 5px; display: block; margin: 9px auto 2px; border-radius: 5px; background: #d7dae1; touch-action: none; }
  .practice-outline-backdrop.open { position: fixed; z-index: 110; inset: 0; display: block; border: 0; background: rgb(18 22 31 / 34%); backdrop-filter: blur(2px); }
  .practice-outline-close { width: 32px; height: 32px; flex: 0 0 auto; margin-left: 8px; border: 0; border-radius: 10px; display: grid; place-items: center; color: var(--ink-soft); background: #f1f2f5; cursor: pointer; font-size: 19px; }
  body.outline-open { overflow: hidden; }
  .practice-outline-body { max-height: calc(76vh - 72px); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .practice-outline .number-grid { grid-template-columns: repeat(6, 1fr); }
  .mobile-outline-trigger { display: inline-flex; }
  .admin-layout { display: block; }
  .admin-nav { position: static; display: flex; overflow-x: auto; margin-bottom: 12px; padding: 4px; }
  .admin-nav button { flex: 0 0 auto; text-align: center; }
  .admin-section { padding: 17px 14px; }
  .catalog-export-card { grid-template-columns: 1fr; }
  .catalog-export-actions { grid-column: auto; align-items: flex-end; }
  .catalog-import-card, .catalog-import-workspace { grid-template-columns: 1fr; }
  .catalog-import-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-import-records-head { grid-column: 1 / -1; }
  .catalog-import-mapping-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-status-banner { align-items: flex-start; }
  .admin-status-banner .badge { display: none; }
  .admin-status-banner small { white-space: normal; }
  .model-status-grid { grid-template-columns: 1fr; }
  .my-home { gap: 16px; }.my-home-hero { min-height: 88px; gap: 12px; padding: 2px; }.profile-avatar-xl { width: 62px; height: 62px; border-radius: 19px; }.my-home-hero h1, .public-profile-identity h1 { font-size: 20px; }.my-home-stats { padding: 8px 6px; border-radius: 16px; }.my-home-stat strong { font-size: 16px; }.my-home-actions { row-gap: 14px; padding: 12px 4px; border-radius: 16px; }.my-home-action { gap: 5px; }.my-home-action-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 19px; }.my-home-action-icon svg { width: 20px; height: 20px; }.my-home-action strong { font-size: 11px; }.public-profile-card { padding: 16px 15px 12px; }.public-profile-head { gap: 12px; }.public-profile-head > .button { min-width: 58px; padding: 0 9px; }.public-profile-stats { margin-top: 12px; padding-top: 8px; }.public-profile-actions { margin-top: 9px; }.profile-editor-card, .settings-card { padding: 18px 14px; }.profile-back-button { margin-left: -4px; }.profile-dynamic-card { padding: 15px; }
  .connections-shell { margin-inline: -4px; border-radius: 16px; }.connections-tab { min-height: 56px; font-size: 13px; }.connections-search { margin: 12px 12px 8px; }.connections-summary { min-height: 34px; padding-inline: 14px; }.connection-person { min-height: 74px; gap: 8px; margin-inline: 13px; }.connection-person-link { min-height: 74px; gap: 11px; }.connection-avatar { width: 46px; height: 46px; }.connection-follow-button { min-width: 68px; padding-inline: 9px; }.connections-more { width: calc(100% - 26px); margin-inline: 13px; }
  .profile-card { padding: 17px 14px; }
  .profile-card-head { margin-bottom: 18px; }
  .profile-fields-grid, .privacy-settings { grid-template-columns: 1fr; }
  .message-tabs { gap: 2px; margin-bottom: 10px; padding: 3px; border-radius: 12px; }.message-tab { min-height: 42px; gap: 3px; padding: 0 3px; font-size: 10px; }.message-tab small { min-width: 17px; padding-inline: 4px; font-size: 8px; }.message-panel { min-height: 190px; padding: 15px 13px; }
  .profile-avatar-editor { align-items: flex-start; }
  .avatar-picker { gap: 6px; }
  .avatar-choice { width: 36px; height: 36px; }
  .avatar-upload-button { min-height: 36px; }
  .settings-grid { grid-template-columns: 1fr; }
  .provider-settings-grid { grid-template-columns: 1fr; }
  .vector-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .vector-facts span { padding: 9px 8px; }
  .vector-facts strong { font-size: 10px; }
  .admin-comment-search { align-items: stretch; flex-direction: column; }
  .admin-comment-item { grid-template-columns: 32px minmax(0, 1fr); }
  .admin-comment-item > .button { grid-column: 2; justify-self: start; }
  .admin-forum-search { grid-template-columns: 1fr 1fr; }
  .admin-forum-search .field:first-child, .admin-forum-search .button { grid-column: 1 / -1; }
  .admin-forum-item-head, .admin-forum-item-foot { align-items: flex-start; flex-direction: column; }
  .admin-forum-item-foot .table-actions { justify-content: flex-start; }
  .personal-content-card { padding: 14px; }.personal-content-meta time { width: 100%; margin-left: 0; }.personal-content-author { max-width: calc(100% - 72px); }.personal-content-card h2 { font-size: 13px; }.personal-content-card .question-actions { justify-content: flex-start; gap: 6px; }.personal-feed-footer { justify-content: space-between; }
  .inline-fields { grid-template-columns: 1fr; }
  .user-table-wrap { overflow: visible; border: 0; }
  .user-table thead { display: none; }
  .user-table, .user-table tbody, .user-table tr, .user-table td { display: block; width: 100%; }
  .user-table tbody { display: grid; gap: 10px; }
  .user-table tr { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
  .user-table td { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; padding: 6px 0; white-space: normal; }
  .user-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 700; }
  .user-table .table-actions { flex: 1; justify-content: flex-end; flex-wrap: wrap; }
  .mobile-nav { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px env(safe-area-inset-bottom); border-top: 1px solid rgb(224 227 235 / 92%); background: rgb(255 255 255 / 95%); backdrop-filter: blur(16px); }
  .mobile-nav a { display: grid; place-items: center; align-content: center; gap: 2px; color: var(--muted); }
  .mobile-nav a > span { height: 24px; font-size: 20px; font-weight: 600; line-height: 1; }
  .mobile-nav a small { font-size: 10px; font-weight: 700; }
  .mobile-nav a.active { color: var(--brand); }
  .toast-region { top: 10px; right: 10px; }
}

@media (max-width: 760px) {
  body.in-session { overflow-x: hidden; padding-bottom: 0; background: var(--surface); }
  body.in-session .topbar,
  body.in-session .mobile-nav { display: none; }
  body.in-session .workspace { width: 100%; min-height: 100dvh; padding: 0; }
  body.in-session .page { min-height: 100dvh; }
  body.in-session .page-practice { width: 100%; margin: 0; transform: none; }
  body.in-session .practice-top { position: fixed; z-index: 70; top: 0; left: 0; right: auto; width: 100vw; max-width: 100vw; min-height: 62px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 72px 52px; align-items: center; gap: 6px; overflow: hidden; contain: layout paint; margin: 0; padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top)); border-bottom: 1px solid rgb(230 232 236 / 94%); background: rgb(255 255 255 / 94%); backdrop-filter: blur(18px); }
  body.in-session .practice-top .button-secondary { grid-column: 1; width: 34px; min-width: 34px; min-height: 34px; padding: 0; border: 0; background: transparent; font-size: 22px; }
  body.in-session .practice-top .button-secondary span { display: none; }
  body.in-session .practice-top-main { grid-column: 2; overflow: hidden; }
  body.in-session .practice-top-main h1 { font-size: 14px; }
  body.in-session .practice-top-main p { margin-top: 2px; font-size: 10px; }
  body.in-session .timer-pill { grid-column: 3; width: 72px; min-width: 72px; min-height: 32px; border: 0; background: #f7f8fa; font-size: 10px; }
  body.in-session .practice-top:not(.has-finish) .timer-pill { grid-column: 3 / 5; justify-self: end; }
  body.in-session .practice-top .button-danger { grid-column: 4; width: 52px; min-width: 52px; min-height: 32px; padding: 0 5px; border-radius: 8px; font-size: 11px; }
  body.in-session .practice-layout { display: block; overflow-x: clip; padding-top: 68px; }
  body.in-session .practice-question { min-height: calc(100dvh - 68px); margin: 0; padding: 18px 17px calc(102px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; touch-action: pan-y; }
  body.in-session .practice-progress { margin-bottom: 20px; }
  body.in-session .practice-progress strong { font-size: 12px; }
  body.in-session .practice-progress span { font-size: 10px; }
  body.in-session .practice-question .question-stem { font-size: 18px; line-height: 1.72; letter-spacing: -.015em; }
  body.in-session .answer-options { gap: 9px; margin-top: 24px; }
  body.in-session .answer-option { min-height: 52px; align-items: center; padding: 13px 11px; border-radius: 13px; font-size: 14px; line-height: 1.6; }
  body.in-session .answer-option .option-label { width: 27px; height: 27px; border-radius: 50%; font-size: 11px; }
  body.in-session .practice-footer { position: fixed; z-index: 65; right: 0; bottom: 0; left: 0; margin: 0; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(229 231 235 / 95%); background: rgb(255 255 255 / 96%); backdrop-filter: blur(18px); }
  body.in-session .practice-footer { gap: 5px; }
  body.in-session .practice-footer .button { min-width: 0; min-height: 42px; padding: 0 5px; border-radius: 10px; font-size: 11px; }
  body.in-session .practice-footer-icon { display: none; }
  body.in-session .mobile-outline-trigger { display: inline-flex; }
  body.in-session .practice-footer-main { flex-grow: 1.25; }
  body.in-session .practice-feedback-note { margin-top: 16px; }
  body.in-session .session-result { margin-top: -2px; }
  body.in-session .question-comments-slot { margin-top: 28px; }
  body.in-session .question-comments { padding-top: 22px; }
  body.in-session .comment-item { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  body.in-session .comment-avatar { width: 32px; height: 32px; }
  body.in-session .comment-form textarea { min-height: 82px; }
}

@keyframes outline-sheet-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 390px) {
  .workspace { width: calc(100% - 22px); }
  .number-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .segmented button { padding: 0 4px; font-size: 11px; }
  .guide-tag { width: 126px; min-width: 126px; flex-basis: 126px; }
  .guide-tag small { display: none; }
  .search-filter-toggle { width: 102px; min-width: 102px; flex-basis: 102px; padding-inline: 5px; }
  .practice-footer .button { min-height: 38px; padding: 0 10px; font-size: 12px; }
  body.in-session .practice-footer { padding-inline: 8px; gap: 4px; }
  body.in-session .practice-footer .button { padding-inline: 3px; font-size: 10px; }
  body.in-session .practice-progress { align-items: flex-start; flex-direction: column; gap: 6px; }
  body.in-session .practice-progress > span { width: 100%; text-align: left; }
}

@media (max-width: 760px) {
  .settings-hub { gap: 20px; }
  .settings-page-header { min-height: 42px; grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .settings-page-header h1 { font-size: 19px; }
  .settings-page-header button { width: 38px; height: 38px; }
  .settings-section-title { align-items: flex-start; flex-direction: column; gap: 3px; }
  .settings-row-card, .settings-toggle-card, .settings-password-panel { border-radius: 15px; }
  .settings-detail-row, .settings-toggle-row { min-height: 62px; margin-inline: 14px; }
  .settings-detail-row strong, .settings-toggle-row strong { font-size: 12px; }
  .settings-password-panel { padding: 16px 14px; }
  .settings-password-fields { grid-template-columns: 1fr; }
  .settings-password-panel > .button { width: 100%; }
  .settings-save-status { padding-inline: 14px; }
  .notification-hint-region { top: 9px; width: min(92vw, 340px); }
}

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

.ai-layout { display: grid; grid-template-columns: minmax(240px, 286px) minmax(0, 1fr); gap: 14px; min-height: min(720px, calc(100dvh - 144px)); }
.ai-sidebar { min-height: 0; display: flex; align-self: stretch; flex-direction: column; overflow: hidden; padding: 0; }
.ai-sidebar-head { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.ai-sidebar-head > div { display: flex; align-items: baseline; gap: 7px; }
.ai-sidebar-head strong { color: var(--ink); font-size: 13px; }
.ai-sidebar-head > div span { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.ai-sidebar-head .button { min-height: 36px; padding-inline: 10px; }
.ai-conversation-list { min-height: 0; display: grid; align-content: start; gap: 4px; flex: 1; overflow: auto; padding: 8px; }
.ai-conversation { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid transparent; border-radius: 12px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.ai-conversation:hover { background: var(--surface-soft); }
.ai-conversation:disabled { opacity: .52; cursor: not-allowed; }
.ai-conversation.active { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.ai-conversation-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--brand-dark); background: color-mix(in srgb, var(--brand-soft) 72%, var(--surface)); font-size: 11px; font-weight: 800; }
.ai-conversation-copy { min-width: 0; display: grid; gap: 3px; }
.ai-conversation-copy strong, .ai-conversation-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-conversation-copy strong { font-size: 12px; }
.ai-conversation-copy > span { color: var(--muted); font-size: 10px; }
.ai-conversation > small { align-self: start; color: var(--muted); font-size: 8px; white-space: nowrap; }
.ai-sidebar-empty { padding: 34px 12px; color: var(--muted); font-size: 11px; text-align: center; }
.ai-chat-panel { min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.ai-chat-head { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 17px; border-bottom: 1px solid var(--line); }
.ai-chat-head > div:first-child { min-width: 0; display: grid; gap: 3px; }
.ai-chat-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ai-chat-head small { color: var(--muted); font-size: 9px; }
.ai-chat-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.ai-chat-actions .danger { color: var(--danger); }
.ai-chat-actions button:disabled { opacity: .45; cursor: not-allowed; }
.ai-inline-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #f0c8ca; color: #8d3d43; background: #fff3f3; font-size: 11px; }
.ai-messages { min-height: 0; display: grid; align-content: start; gap: 17px; flex: 1; overflow: auto; padding: 22px clamp(16px, 3vw, 34px); overscroll-behavior: contain; }
.ai-message { display: grid; gap: 6px; max-width: min(88%, 760px); }
.ai-message.user { justify-self: end; justify-items: end; }
.ai-message-role { padding-inline: 3px; color: var(--muted); font-size: 9px; font-weight: 750; }
.ai-message-body { min-height: 42px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 5px 15px 15px 15px; color: var(--ink); background: var(--surface-soft); font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; }
.ai-message.user .ai-message-body { min-height: 0; border-color: color-mix(in srgb, var(--brand) 24%, var(--line)); border-radius: 15px 5px 15px 15px; color: var(--brand-dark); background: var(--brand-soft); }
.ai-message.streaming .ai-message-body { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); background: color-mix(in srgb, var(--surface-soft) 78%, var(--brand-soft)); }
.ai-message-actions { display: flex; flex-wrap: wrap; gap: 9px; padding-inline: 4px; }
.ai-message-actions .text-button { color: var(--muted); font-size: 10px; }
.ai-message-actions .text-button:hover { color: var(--brand-dark); }
.ai-stream-cursor { width: 7px; height: 16px; display: inline-block; margin-left: 3px; border-radius: 2px; background: var(--brand); vertical-align: -3px; animation: ai-stream-blink .85s steps(1) infinite; }
@keyframes ai-stream-blink { 50% { opacity: .2; } }
.ai-citations { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; color: var(--muted); font-size: 9px; }
.ai-citations > span:first-child { color: var(--ink-soft); font-weight: 750; }
.ai-citations a, .ai-citation-static { display: inline-flex; max-width: 100%; overflow: hidden; border-radius: 7px; padding: 3px 7px; color: var(--brand-dark); background: var(--brand-soft); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.ai-citations a:hover { text-decoration: underline; }
.ai-welcome { min-height: 300px; display: grid; place-items: center; align-content: center; padding: 24px; color: var(--muted); text-align: center; }
.ai-welcome > span { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 11px; border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line)); border-radius: 14px; color: var(--brand); background: var(--brand-soft); font-size: 21px; }
.ai-welcome h2 { margin: 0; color: var(--ink); font-size: 17px; }
.ai-welcome p { max-width: 470px; margin: 8px 0 0; font-size: 11px; line-height: 1.7; }
.ai-starter-prompts { width: min(100%, 560px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.ai-starter-prompts button { min-height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; color: var(--ink-soft); background: var(--surface); cursor: pointer; font-size: 11px; font-weight: 700; }
.ai-starter-prompts button:hover { border-color: color-mix(in srgb, var(--brand) 28%, var(--line)); color: var(--brand-dark); background: var(--brand-soft); }
.ai-composer { display: grid; gap: 8px; padding: 12px 17px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.ai-context-label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.ai-context-label select { min-height: 32px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); background: var(--surface-soft); font-size: 10px; }
.ai-composer-box { position: relative; }
.ai-composer textarea { min-height: 82px; padding: 12px 52px 12px 13px; resize: vertical; }
.ai-composer textarea:disabled { opacity: .72; cursor: wait; }
.ai-send-button { position: absolute; right: 9px; bottom: 9px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; color: #fff; background: var(--brand); cursor: pointer; font-size: 18px; font-weight: 800; }
.ai-send-button:hover { background: var(--brand-dark); }
.ai-send-button.stop { background: var(--ink-soft); font-size: 10px; }
.ai-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-composer-foot span { color: var(--muted); font-size: 9px; }
.ai-draft-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.ai-no-conversation { display: grid; place-items: center; align-content: center; flex: 1; gap: 4px; padding: 20px; }
.ai-no-conversation .empty-state { min-height: 220px; background: transparent; box-shadow: none; }
.practice-ai-action { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.practice-ai-action .button { color: var(--brand-dark); }
.forum-commandbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#forum-search-form { min-width: 0; display: flex; flex: 0 1 520px; align-items: center; gap: 7px; }
#forum-search-form input { min-width: 0; min-height: 42px; flex: 1; }
.forum-search-clear { flex: 0 0 auto; }
.forum-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; margin-bottom: 12px; padding: 13px 15px; }
.forum-filter-group { min-width: 0; display: flex; align-items: center; gap: 10px; }
.forum-filter-group > span { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 750; }
.forum-section-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.forum-section-chip { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; color: var(--ink-soft); background: var(--surface); cursor: pointer; font-size: 10px; font-weight: 700; }
.forum-section-chip.active { border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); color: var(--brand-dark); background: var(--brand-soft); }
.forum-section-chip small { color: var(--muted); font-size: 8px; }
.forum-sort-controls { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.forum-sort-controls button { min-height: 40px; border: 0; border-left: 1px solid var(--line); padding: 0 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }
.forum-sort-controls button:first-child { border-left: 0; }
.forum-sort-controls button.active { color: var(--brand-dark); background: var(--brand-soft); }
.forum-result-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 2px 9px; }
.forum-result-meta strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.forum-result-meta span { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.forum-composer { display: grid; gap: 13px; margin-bottom: 12px; padding: 18px; border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); box-shadow: 0 12px 34px rgb(21 26 38 / 7%); }
.forum-composer-head { display: flex; align-items: center; justify-content: space-between; }
.forum-composer-head strong { font-size: 15px; }
.forum-composer-actions > span { color: var(--muted); font-size: 9px; }
.forum-composer label, .forum-reply-form label { display: grid; gap: 7px; color: var(--ink-soft); font-size: 10px; font-weight: 750; }
.forum-composer select { min-height: 42px; }
.forum-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.forum-list { display: grid; gap: 8px; }
.forum-topic-card { width: 100%; display: grid; gap: 8px; padding: 16px 18px; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.forum-topic-card:hover { border-color: color-mix(in srgb, var(--brand) 26%, var(--line)); box-shadow: 0 12px 28px rgb(17 24 39 / 7%); transform: translateY(-1px); }
.forum-topic-meta { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 9px; }
.forum-topic-meta time { margin-left: auto; }
.forum-section-label { display: inline-flex; align-items: center; min-height: 22px; border-radius: 7px; padding: 0 7px; color: var(--brand-dark) !important; background: var(--brand-soft); font-weight: 750; }
.forum-topic-card h2 { margin: 1px 0 0; font-size: 16px; line-height: 1.45; }
.forum-topic-card > p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.forum-topic-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 4px; color: var(--muted); font-size: 9px; }
.forum-load-more { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px; color: var(--muted); font-size: 10px; }
.forum-detail-shell { width: min(100%, 920px); margin: 0 auto; }
.forum-detail-head { min-height: 42px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.forum-detail-head .danger, .forum-reply-head .danger { color: var(--danger); }
.forum-manage-actions { display: inline-flex; align-items: center; gap: 10px; }
.forum-topic-detail { padding: clamp(18px, 3vw, 28px); }
.forum-topic-detail h1 { margin: 13px 0 17px; font-size: clamp(23px, 3vw, 31px); line-height: 1.38; overflow-wrap: anywhere; }
.forum-author { display: flex; align-items: center; gap: 9px; }
.forum-author-link { max-width: 100%; border: 0; padding: 0; color: var(--ink); text-align: left; background: transparent; cursor: pointer; }
.forum-author-link:hover strong { color: var(--brand-dark); }
.forum-author > img, .forum-author > span:first-child { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--brand-soft); object-fit: cover; font-size: 11px; }
.forum-author > span:last-child { display: grid; gap: 2px; }
.forum-author strong { font-size: 11px; }
.forum-author small { color: var(--muted); font-size: 9px; }
.forum-body { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.forum-reactions { display: flex; align-items: center; gap: 7px; margin-top: 15px; }
.forum-reactions button { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 9px; padding: 0 10px; color: var(--muted); background: var(--surface); cursor: pointer; font-size: 10px; font-weight: 700; }
.forum-reactions button:hover, .forum-reactions button.active { border-color: #bfdccc; color: #27624b; background: #edf8f2; }
.forum-reactions button.active.disagree { border-color: #efc3c5; color: #99464a; background: #fff2f2; }
.forum-reactions button span { font-variant-numeric: tabular-nums; }
.forum-replies { display: grid; gap: 8px; margin-top: 22px; }
.forum-replies-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 3px; }
.forum-replies-head h2 { margin: 0; font-size: 16px; }
.forum-replies-head span { color: var(--muted); font-size: 10px; }
.forum-reply { padding: 15px 17px; }
.forum-reply-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 10px; }
.forum-floor { align-self: center; color: var(--muted); font-size: 9px; white-space: nowrap; }
.forum-reply-parent { margin: 11px 0 -4px 43px; padding-left: 9px; border-left: 2px solid color-mix(in srgb, var(--brand) 36%, var(--line)); color: var(--brand-dark); font-size: 10px; font-weight: 700; }
.forum-reply-parent span { color: var(--muted); font-weight: 600; }
.forum-reply > p { margin: 13px 0 0 43px; color: var(--ink-soft); font-size: 13px; line-height: 1.78; overflow-wrap: anywhere; }
.forum-reply > .forum-reactions { margin-left: 43px; }
.forum-reply-empty { padding: 42px 20px; color: var(--muted); text-align: center; font-size: 11px; }
.forum-reply-form { display: grid; gap: 11px; margin-top: 14px; padding: 17px; }
.forum-reply-form > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.forum-reply-form > .forum-reply-context { min-height: 36px; border-radius: 9px; padding: 5px 9px 5px 11px; color: var(--brand-dark); background: var(--brand-soft); font-size: 10px; font-weight: 700; }
.forum-reply-form small { color: var(--muted); font-size: 9px; }
.forum-moderated-notice { display: grid; gap: 4px; margin-top: 15px; padding: 17px; color: var(--ink-soft); }
.forum-moderated-notice strong { color: var(--danger); font-size: 12px; }
.forum-moderated-notice span { font-size: 10px; }

@media (max-width: 760px) {
  .ai-layout { grid-template-columns: 1fr; gap: 10px; min-height: 0; }
  .ai-sidebar { min-height: 0; order: 1; }
  .ai-sidebar-head { min-height: 54px; padding: 8px 10px 8px 13px; }
  .ai-conversation-list { display: flex; max-height: 76px; overflow-x: auto; overflow-y: hidden; padding: 6px; }
  .ai-conversation { flex: 0 0 212px; grid-template-columns: 28px minmax(0, 1fr); padding: 7px; }
  .ai-conversation-icon { width: 28px; height: 28px; }
  .ai-conversation > small { display: none; }
  .ai-chat-panel { min-height: min(650px, calc(100dvh - 210px)); order: 2; }
  .ai-messages { min-height: 320px; max-height: none; padding: 15px 13px; }
  .ai-message { max-width: 94%; }
  .ai-chat-head { padding-inline: 13px; }
  .ai-composer { padding: 12px 13px calc(14px + env(safe-area-inset-bottom)); }
  .ai-composer-foot { align-items: flex-end; }
  .ai-composer-foot span:first-child { max-width: 72%; line-height: 1.5; }
  .ai-starter-prompts { grid-template-columns: 1fr; gap: 7px; }
  .ai-starter-prompts button { min-height: 42px; }
  .forum-commandbar { align-items: stretch; flex-direction: column; }
  #forum-search-form { flex-basis: auto; }
  .forum-commandbar > .button { width: 100%; }
  .forum-toolbar { grid-template-columns: 1fr; padding: 12px; }
  .forum-filter-group { align-items: flex-start; flex-direction: column; gap: 7px; }
  .forum-section-chips { width: 100%; }
  .forum-sort-controls { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .forum-sort-controls button { padding-inline: 5px; }
  .forum-topic-meta { flex-wrap: wrap; }
  .forum-topic-meta time { margin-left: 0; }
  .forum-topic-card, .forum-topic-detail { padding: 15px; }
  .forum-topic-detail h1 { font-size: 23px; }
  .forum-reply-head { grid-template-columns: minmax(0, 1fr) auto; }
  .forum-reply-head > .forum-manage-actions { grid-column: 1 / -1; justify-self: end; }
  .forum-reply-parent, .forum-reply > p { margin-left: 0; }
  .forum-reply > .forum-reactions { margin-left: 0; }
  .forum-composer-actions, .forum-reply-form > div { align-items: flex-end; }
  .forum-composer-actions > span, .forum-reply-form small { max-width: 56%; line-height: 1.5; }
}

:root[data-theme="dark"] .mobile-nav,
:root[data-theme="dark"] body.in-session .practice-top,
:root[data-theme="dark"] body.in-session .practice-footer,
:root[data-theme="dark"] .practice-footer { border-color: var(--line); background: color-mix(in srgb, var(--surface) 95%, transparent); }
:root[data-theme="dark"] .library-view-switch,
:root[data-theme="dark"] .segmented,
:root[data-theme="dark"] .search-preference-toolbar,
:root[data-theme="dark"] .guided-library-body,
:root[data-theme="dark"] .practice-outline-close,
:root[data-theme="dark"] body.in-session .timer-pill { background: var(--surface-soft); }
:root[data-theme="dark"] .search-box input { background: color-mix(in srgb, var(--surface) 90%, transparent); }
:root[data-theme="dark"] .guide-tag.active { border-color: #6e4642; color: var(--brand-dark); background: var(--brand-soft); }
:root[data-theme="dark"] .guide-tag-check,
:root[data-theme="dark"] .search-filter-toggle > span { border-color: var(--line-strong); background: var(--surface-soft); }
:root[data-theme="dark"] .guide-file-list > button:hover,
:root[data-theme="dark"] .answer-option:hover { background: var(--surface-soft); }
:root[data-theme="dark"] .badge-neutral,
:root[data-theme="dark"] .number-button.answered,
:root[data-theme="dark"] .answer-option.selected { color: var(--ink-soft); background: var(--surface-soft); }
:root[data-theme="dark"] .shortcut-wrong { color: #f09a94; background: #382321; }
:root[data-theme="dark"] .shortcut-favorites { color: #efaa91; background: #392721; }
:root[data-theme="dark"] .shortcut-notes { color: #b7acf8; background: #292641; }
:root[data-theme="dark"] .shortcut-comments { color: #8bc5e9; background: #1d3140; }
:root[data-theme="dark"] .shortcut-likes { color: #e4bc73; background: #372e1d; }
:root[data-theme="dark"] .personal-content-body.comment { border-color: #56342e; background: #2c211f; }
:root[data-theme="dark"] .personal-content-body.note,
:root[data-theme="dark"] .note-form textarea { border-color: #29483d; background: #1b2b25; }
:root[data-theme="dark"] .personal-content-body.like { border-color: #55452a; background: #2d281c; }
:root[data-theme="dark"] .ai-message.assistant .ai-message-body { background: var(--surface-soft); }
:root[data-theme="dark"] .ai-message.streaming .ai-message-body { border-color: #5e403c; background: #282326; }
:root[data-theme="dark"] .ai-inline-error { border-color: #5b3338; color: #f0afb4; background: #321f23; }
:root[data-theme="dark"] .forum-reactions button:hover,
:root[data-theme="dark"] .forum-reactions button.active { border-color: #315b4b; color: #8fd2b5; background: #1b3028; }
:root[data-theme="dark"] .forum-reactions button.active.disagree { border-color: #63383d; color: #e8a0a5; background: #342124; }
:root[data-theme="dark"] .ai-sidebar-empty,
:root[data-theme="dark"] .ai-welcome p,
:root[data-theme="dark"] .ai-composer-foot span { color: var(--muted); }
:root[data-theme="dark"] .solution-answer .solution-content,
:root[data-theme="dark"] .solution-point .solution-content,
:root[data-theme="dark"] .solution-explanation .solution-content { color: #171a21; }
:root[data-theme="dark"] .solution-answer .standard-answer-value,
:root[data-theme="dark"] .solution-answer .user-answer-value.correct { color: #276655; }
:root[data-theme="dark"] .solution-answer .user-answer-value.incorrect { color: #b23f4b; }
:root[data-theme="dark"] .solution-answer .user-answer-value.neutral { color: #8b641c; }
:root[data-theme="dark"] .avatar-crop-canvas-wrap,
:root[data-theme="dark"] .vector-progress > div { background: var(--surface-soft); }
:root[data-theme="dark"] .toast.error { background: var(--danger-soft); }
.admin-feedback-search { display: grid; grid-template-columns: minmax(220px, 1fr) 150px auto; align-items: end; gap: 9px; margin: -2px 0 8px; }
.admin-feedback-summary { margin-bottom: 10px; color: var(--muted); font-size: 10px; }
.admin-feedback-list { display: grid; gap: 9px; }
.admin-feedback-item { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.admin-feedback-item.resolved { opacity: .84; }
.admin-feedback-item-head, .admin-feedback-item-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-feedback-item-head > div { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.admin-feedback-item-head strong { font-size: 11px; }
.admin-feedback-item-head time, .admin-feedback-user, .admin-feedback-item-foot small { color: var(--muted); font-size: 10px; }
.admin-feedback-item > p { margin: 11px 0 14px; color: var(--ink); font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-feedback-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 10px; }.admin-feedback-pagination > div { display: flex; gap: 7px; }
.feedback-modal { width: min(520px, 100%); }
@media (max-width: 760px) {
  .admin-feedback-search { grid-template-columns: 1fr 1fr; }
  .admin-feedback-search .field:first-child, .admin-feedback-search .button { grid-column: 1 / -1; }
  .admin-feedback-item-head, .admin-feedback-item-foot { align-items: flex-start; flex-direction: column; }
}
.today-goal-edit { min-height: 32px; margin-left: auto; padding: 0 6px; font-size: 10px; white-space: nowrap; }
.today-goal-panel { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(160px, 1fr) minmax(190px, .9fr); align-items: end; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.today-goal-progress { min-width: 0; display: grid; gap: 6px; }.today-goal-progress > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.today-goal-progress strong { font-size: 10px; }.today-goal-progress small { color: var(--muted); font-size: 9px; white-space: nowrap; }.today-goal-progress progress { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 999px; background: var(--surface-soft); appearance: none; }.today-goal-progress progress::-webkit-progress-bar { border-radius: 999px; background: var(--surface-soft); }.today-goal-progress progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--brand), #e88b79); }.today-goal-progress progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--brand), #e88b79); }
.today-weekly-trend { min-width: 0; display: grid; gap: 5px; }.today-weekly-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.today-weekly-title strong { font-size: 10px; }.today-weekly-title small { color: var(--muted); font-size: 8px; }.today-weekly-bars { height: 28px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 4px; }.today-weekly-bars > span { min-width: 0; height: 28px; display: grid; grid-template-rows: 19px 9px; align-items: end; justify-items: center; }.today-weekly-bars i { width: min(16px, 100%); min-height: 2px; border-radius: 4px 4px 2px 2px; background: var(--line-strong); }.today-weekly-bars i.level-1 { height: 5px; background: #f3c1b8; }.today-weekly-bars i.level-2 { height: 9px; background: #eea797; }.today-weekly-bars i.level-3 { height: 14px; background: #e98c79; }.today-weekly-bars i.level-4 { height: 19px; background: var(--brand); }.today-weekly-bars small { color: var(--muted); font-size: 7px; line-height: 1; }
.study-goal-modal { width: min(480px, 100%); }
@media (max-width: 760px) {
  .today-goal-panel { grid-template-columns: 1fr 1fr; gap: 9px 10px; margin-top: 8px; padding-top: 8px; }
  .today-weekly-trend { grid-column: 1 / -1; }
  .today-goal-progress strong { font-size: 9px; }
  .today-goal-progress small { font-size: 8px; }
}
.history-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 14px; padding: 5px; border-radius: 14px; }.history-tabs button { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 10px; color: var(--ink-soft); background: transparent; }.history-tabs button:hover { background: var(--surface-soft); }.history-tabs button.active { color: var(--brand-dark); background: var(--brand-soft); box-shadow: 0 4px 12px rgb(220 101 82 / 12%); }.history-tabs span { font-size: 12px; font-weight: 600; }.history-tabs small { min-width: 20px; padding: 2px 5px; border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 9px; }
.history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.history-card { min-width: 0; display: grid; gap: 13px; padding: 17px; }.history-card-head, .history-card-foot, .history-progress > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.history-card-head > div, .history-card-actions { display: flex; align-items: center; gap: 7px; }.history-card-head time, .history-mode { color: var(--muted); font-size: 10px; }.history-card-title { min-width: 0; }.history-card-title h2 { margin: 0; overflow: hidden; font-size: 15px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }.history-card-title small { display: block; margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.history-progress { display: grid; gap: 7px; }.history-progress strong { font-size: 12px; }.history-progress small { color: var(--muted); font-size: 9px; }.history-progress progress { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 999px; background: var(--surface-soft); appearance: none; }.history-progress progress::-webkit-progress-bar { border-radius: 999px; background: var(--surface-soft); }.history-progress progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--brand), #e88b79); }.history-progress progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--brand), #e88b79); }.history-results { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; color: var(--ink-soft); font-size: 10px; }.history-results small { flex-basis: 100%; color: var(--muted); font-size: 9px; }.history-card-actions .button { flex: 0 0 auto; }.history-load-more { display: flex; margin: 15px auto 0; }
@media (max-width: 760px) {
  .history-list { grid-template-columns: 1fr; }
  .history-card { padding: 14px; }
  .history-card-head { align-items: flex-start; }
  .history-card-foot { align-items: flex-end; flex-wrap: wrap; }
  .history-results { flex: 1 1 170px; }
  .history-card-actions { margin-left: auto; }
}

.field-help { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.55; }
.provider-endpoint-preview { display: grid; gap: 7px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.provider-endpoint-preview > div { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 8px; }
.provider-endpoint-preview span { color: var(--muted); font-size: 9px; line-height: 1.6; }
.provider-endpoint-preview code { min-width: 0; overflow-wrap: anywhere; color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; line-height: 1.6; }

.history-archive-tools { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: -3px 0 14px; padding: 10px 13px 10px 16px; border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--danger-soft) 62%, var(--surface)); }
.history-archive-tools p { min-width: 0; display: grid; gap: 3px; margin: 0; }
.history-archive-tools strong { color: var(--ink); font-size: 11px; }
.history-archive-tools span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.history-archive-tools .button { flex: 0 0 auto; }

html.practice-ai-drawer-open,
body.practice-ai-drawer-open { overflow: hidden; overscroll-behavior: none; }
#practice-ai-drawer-root { position: relative; z-index: 180; }
.practice-ai-drawer-backdrop { position: fixed; z-index: 180; inset: 0; border: 0; padding: 0; background: rgb(15 18 26 / 38%); backdrop-filter: blur(2px); cursor: default; animation: ai-backdrop-in .18s ease-out; }
.practice-ai-drawer { position: fixed; z-index: 181; top: 0; right: 0; width: min(520px, calc(100vw - 52px)); height: 100dvh; display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--line); background: var(--surface); box-shadow: -24px 0 70px rgb(8 12 20 / 22%); animation: ai-drawer-in .22s cubic-bezier(.22,.78,.2,1); }
.practice-ai-drawer-grabber { display: none; }
.practice-ai-drawer-head { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 17px; border-bottom: 1px solid var(--line); touch-action: pan-y; }
.practice-ai-drawer-head > div { min-width: 0; display: grid; gap: 3px; }
.practice-ai-drawer-head span { color: var(--brand-dark); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.practice-ai-drawer-head h2 { margin: 0; font-size: 18px; }
.practice-ai-context { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.practice-ai-context strong, .practice-ai-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.practice-ai-context strong { font-size: 11px; }
.practice-ai-context span { color: var(--muted); font-size: 9px; }
.practice-ai-context p { grid-column: 1 / -1; display: -webkit-box; overflow: hidden; margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.practice-ai-drawer-body { min-height: 0; display: flex; flex: 1; flex-direction: column; }
.practice-ai-drawer-state { min-height: 0; display: grid; flex: 1; place-items: center; align-content: center; padding: 20px; text-align: center; }
.practice-ai-drawer-state > .button { margin-top: 12px; }
.practice-ai-quick-prompts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.practice-ai-quick-prompts button { min-width: 0; min-height: 34px; border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); border-radius: 10px; padding: 0 6px; color: var(--brand-dark); background: var(--brand-soft); cursor: pointer; font-size: 10px; font-weight: 750; }
.practice-ai-quick-prompts button:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.practice-ai-messages { min-height: 0; max-height: none; padding: 16px; overscroll-behavior: contain; }
.practice-ai-welcome { min-height: 230px; }
.practice-ai-drawer .ai-composer { flex: 0 0 auto; padding: 12px 15px calc(14px + env(safe-area-inset-bottom)); }
.practice-ai-drawer .ai-composer textarea { min-height: 72px; max-height: 150px; resize: vertical; }
.ai-drawer-scope { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-drawer-scope span { color: var(--brand-dark); font-size: 10px; font-weight: 750; }
.ai-drawer-scope small { color: var(--muted); font-size: 9px; }
.ai-citation-static { font-weight: 650 !important; }
.ai-message.pending { opacity: .88; }

@keyframes ai-drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes ai-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 760px) {
  .history-archive-tools { align-items: flex-start; }
  .history-card-actions { flex-wrap: wrap; justify-content: flex-end; }
  .practice-ai-drawer { top: auto; bottom: 0; left: 0; width: 100%; height: min(88dvh, 760px); border-top: 1px solid var(--line); border-left: 0; border-radius: 23px 23px 0 0; box-shadow: 0 -24px 70px rgb(8 12 20 / 25%); animation-name: ai-drawer-up; }
  .practice-ai-drawer-grabber { width: 42px; height: 5px; display: block; flex: 0 0 auto; margin: 8px auto 0; border-radius: 99px; background: var(--line-strong); touch-action: pan-y; }
  .practice-ai-drawer-head { min-height: 57px; padding: 7px 13px 9px; }
  .practice-ai-drawer-head h2 { font-size: 16px; }
  .practice-ai-context { padding: 10px 14px; }
  .practice-ai-quick-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 9px 12px; }
  .practice-ai-quick-prompts button { min-height: 32px; }
  .practice-ai-messages { min-height: 0; padding: 12px; }
  .practice-ai-welcome { min-height: 160px; }
  .practice-ai-drawer .ai-composer { padding-inline: 12px; }
  .practice-ai-drawer .ai-composer-foot span { max-width: 58%; }
  .ai-drawer-scope small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@keyframes ai-drawer-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (max-width: 390px) {
  .history-archive-tools { flex-direction: column; gap: 9px; }
  .history-archive-tools .button { width: 100%; }
  .practice-ai-drawer { height: 90dvh; }
  .practice-ai-context p { -webkit-line-clamp: 1; }
  .practice-ai-drawer .ai-composer-foot span { max-width: 52%; font-size: 9px; }
}

.auth-intro-background { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; filter: brightness(.58) saturate(.82); pointer-events: none; }
.auth-intro.has-custom-background { background: #1f2530; }
.brand > span:last-child { min-width: 0; }
.brand-mark.compact, .site-preview-brand > b.compact { font-size: 10px; letter-spacing: -.08em; }
.auth-copy h1, .auth-copy > p, .brand-large strong, .brand-large small { overflow-wrap: anywhere; }
.topbar .brand { min-width: 0; max-width: min(300px, 38vw); }
.topbar .brand strong, .topbar .brand small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-page-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.admin-user-search { display: grid; grid-template-columns: minmax(220px, 1fr) 150px 150px auto; align-items: end; gap: 9px; margin: 15px 0 8px; }
.admin-list-summary { margin: 0 0 10px; color: var(--muted); font-size: 10px; }
.admin-bulk-bar { position: sticky; z-index: 12; top: 78px; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 13px; padding: 8px 10px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 8px 24px rgb(25 30 43 / 6%); backdrop-filter: blur(14px); }
.admin-bulk-bar.active { border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); box-shadow: 0 10px 28px rgb(232 93 82 / 9%); }
.admin-bulk-selection, .admin-bulk-actions { min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.admin-bulk-selection strong { color: var(--ink); font-size: 11px; white-space: nowrap; }
.admin-select-control { position: relative; min-height: 24px; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); cursor: pointer; font-weight: 650; }
.admin-select-control input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.admin-select-control > span { width: 18px; height: 18px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.admin-select-control input:checked + span, .admin-select-control input:indeterminate + span { border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 3px rgb(232 93 82 / 10%); }
.admin-select-control input:checked + span::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 900; }
.admin-select-control input:indeterminate + span::after { content: "−"; color: #fff; font-size: 13px; font-weight: 900; }
.admin-select-control input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.admin-select-control input:disabled + span { opacity: .4; cursor: not-allowed; }
.admin-select-control small { font-size: 10px; }
.admin-select-column { width: 42px; text-align: center !important; }
.admin-select-column .admin-select-control small, .admin-comment-item > .admin-select-control small, .admin-forum-select-row .admin-select-control small { display: none; }
.data-table tr.selected td, .admin-comment-item.selected, .admin-forum-item.selected { background: color-mix(in srgb, var(--brand-soft) 56%, var(--surface)); }
.admin-comment-item { grid-template-columns: 22px 34px minmax(0, 1fr) auto; }
.admin-comment-item > .admin-select-control { margin-top: 4px; }
.admin-forum-select-row { display: flex; align-items: center; justify-content: flex-start; margin: -5px 0 8px; }
.admin-list-pagination { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.admin-list-pagination > div { display: flex; gap: 7px; }

.site-settings-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr); align-items: start; gap: 18px; }
.site-settings-editor { min-width: 0; display: grid; gap: 14px; }
.site-settings-group { display: grid; gap: 14px; }
.site-settings-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.site-settings-group-head h3 { margin: 0; }
.site-settings-group-head p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.site-field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .32fr); gap: 10px; }
.site-setting-field > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.site-setting-field > span small { color: var(--muted); font-size: 9px; font-weight: 500; }
.site-setting-field textarea { min-height: 76px; resize: vertical; line-height: 1.6; }
.site-setting-field em { color: var(--muted); font-size: 9px; font-style: normal; font-weight: 500; line-height: 1.55; }
.site-feature-fields { display: grid; gap: 10px; }
.site-feature-fields > span { color: var(--ink-soft); font-size: 12px; font-weight: 750; }
.site-feature-fields .compact { padding-left: 12px; border-left: 2px solid var(--line); }
.site-settings-save-status { min-height: 18px; margin: -2px 0 0; color: var(--muted); font-size: 10px; text-align: right; }
.site-settings-save-status.unsaved { color: var(--warning); }
.site-settings-actions, .site-background-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.site-background-form { display: grid; gap: 14px; }
.site-background-picker { min-height: 82px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px dashed var(--line-strong); border-radius: 12px; padding: 12px; color: var(--ink-soft); text-align: center; background: var(--surface); cursor: pointer; }
.site-background-picker:hover { border-color: var(--brand); background: var(--brand-soft); }
.site-background-picker strong { font-size: 12px; }
.site-background-picker span { color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.site-background-picker input { width: min(100%, 300px); color: var(--muted); font-size: 9px; }
.site-background-meta { color: var(--muted); font-size: 9px; line-height: 1.5; }
.site-preview-panel { position: sticky; top: 88px; min-width: 0; display: grid; gap: 9px; }
.site-preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-inline: 3px; }
.site-preview-heading strong { font-size: 12px; }
.site-preview-heading span { color: var(--muted); font-size: 9px; }
.site-login-preview { position: relative; isolation: isolate; min-height: 590px; overflow: hidden; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #171b24, #2a303c 60%, #414754); box-shadow: 0 20px 54px rgb(18 22 31 / 18%); }
.site-login-preview::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(145deg, rgb(17 21 30 / 86%), rgb(39 45 58 / 72%)); opacity: 0; }
.site-login-preview.has-background::after { opacity: 1; }
.site-login-preview > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-preview-content { min-height: 590px; display: flex; flex-direction: column; padding: 25px; }
.site-preview-brand { display: flex; align-items: center; gap: 10px; }
.site-preview-brand > b { width: 40px; height: 40px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--brand-dark); background: #fff; font-size: 16px; }
.site-preview-brand > span { min-width: 0; display: grid; gap: 2px; }
.site-preview-brand strong, .site-preview-brand small { overflow-wrap: anywhere; }
.site-preview-brand strong { font-size: 16px; }
.site-preview-brand small { color: rgb(255 255 255 / 64%); font-size: 8px; letter-spacing: .05em; }
.site-preview-copy { margin: auto 0; padding: 50px 0 40px; }
.site-preview-copy > span { display: block; margin-bottom: 12px; color: #ffb5ae; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.site-preview-copy h3 { margin: 0; font-size: clamp(27px, 3vw, 41px); line-height: 1.16; letter-spacing: -.04em; overflow-wrap: anywhere; }
.site-preview-copy p { margin: 17px 0 0; color: rgb(255 255 255 / 74%); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.site-preview-content ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.site-preview-content li { min-width: 0; display: grid; gap: 5px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 10px; padding: 10px; color: rgb(255 255 255 / 78%); background: rgb(255 255 255 / 7%); font-size: 9px; line-height: 1.45; overflow-wrap: anywhere; }
.site-preview-content li span { color: #fff; font-size: 8px; font-weight: 850; letter-spacing: .1em; }

@media (max-width: 1100px) {
  .site-settings-layout { grid-template-columns: 1fr; }
  .site-preview-panel { position: static; }
  .site-login-preview, .site-preview-content { min-height: 500px; }
}

@media (max-width: 760px) {
  .topbar .brand { max-width: min(220px, 58vw); }
  .topbar .brand small { display: none; }
  .admin-page-toolbar { margin-bottom: 8px; }
  .admin-user-search { grid-template-columns: 1fr 1fr; }
  .admin-user-search .field:first-child, .admin-user-search .button { grid-column: 1 / -1; }
  .admin-bulk-bar { position: sticky; top: 64px; align-items: stretch; flex-direction: column; }
  .admin-bulk-selection, .admin-bulk-actions { width: 100%; }
  .admin-bulk-actions .button { flex: 1 1 auto; }
  .admin-comment-item { grid-template-columns: 22px 32px minmax(0, 1fr); }
  .admin-comment-item > .admin-select-control { grid-column: 1; }
  .admin-comment-item > .comment-avatar { grid-column: 2; }
  .admin-comment-main { grid-column: 3; }
  .admin-comment-item > .button { grid-column: 3; }
  .user-table td.admin-select-column { justify-content: flex-end; }
  .site-field-grid { grid-template-columns: 1fr; }
  .site-settings-actions, .site-background-actions { align-items: stretch; flex-direction: column; }
  .site-settings-actions .button, .site-background-actions .button { width: 100%; }
  .site-login-preview, .site-preview-content { min-height: 470px; }
  .site-preview-content { padding: 20px; }
  .site-preview-content ol { grid-template-columns: 1fr; }
  .site-preview-content li { display: flex; align-items: center; }
}

/* System management workspace */
.admin-nav { gap: 8px; padding: 10px; }
.admin-nav-group { min-width: 0; display: grid; gap: 3px; }
.admin-nav-group + .admin-nav-group { margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--line); }
.admin-nav-group > span { padding: 0 10px 5px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.admin-nav button { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.admin-nav button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-nav-state { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--line-strong); }
.admin-nav-state.ready { background: var(--success); }
.admin-nav-state.loading { border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--line)); border-top-color: var(--brand); background: transparent; animation: spin .7s linear infinite; }
.admin-nav-state.error { background: var(--danger); }
.admin-nav-state.stale { background: #d7a744; }
.admin-page-toolbar { min-height: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-bottom: 12px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); }
.admin-toolbar-context { min-width: 0; display: grid; gap: 2px; }
.admin-toolbar-context strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.admin-toolbar-context span { color: var(--muted); font-size: 9px; }
.admin-section-state { min-height: 330px; display: grid; place-items: center; }
.admin-load-error { max-width: 430px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.admin-load-error > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--danger); background: var(--danger-soft); font-weight: 900; }
.admin-load-error h2 { margin: 3px 0 0; font-size: 17px; }
.admin-load-error p { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.admin-runtime-notice { min-height: 46px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line)); border-radius: 12px; color: var(--ink-soft); background: color-mix(in srgb, var(--brand-soft) 44%, var(--surface)); }
.admin-runtime-notice .loading-spinner { width: 17px; height: 17px; border-width: 2px; }
.admin-runtime-notice > span:not(.loading-spinner) { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: var(--danger); background: var(--danger-soft); font-size: 10px; font-weight: 900; }
.admin-runtime-notice strong { font-size: 10px; }
.admin-runtime-notice small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.admin-runtime-notice.error { border-color: color-mix(in srgb, var(--danger) 24%, var(--line)); background: color-mix(in srgb, var(--danger-soft) 54%, var(--surface)); }
.admin-section-heading { align-items: center; }
.admin-section-heading > div { min-width: 0; }
.admin-section-heading > .button { flex: 0 0 auto; }
.admin-user-search, .admin-comment-search, .admin-forum-search, .admin-feedback-search { margin: 12px 0 8px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.admin-list-summary, .admin-forum-summary, .admin-feedback-summary { min-height: 26px; display: flex; align-items: center; margin-bottom: 7px; }
.admin-create-panel { padding: 0; overflow: hidden; }
.admin-create-panel > summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; cursor: pointer; list-style: none; }
.admin-create-panel > summary::-webkit-details-marker { display: none; }
.admin-create-panel > summary > span { min-width: 0; display: grid; gap: 3px; }
.admin-create-panel > summary strong { font-size: 12px; }
.admin-create-panel > summary small { color: var(--muted); font-size: 9px; }
.admin-create-panel > summary b { width: 26px; height: 26px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--brand-dark); background: var(--brand-soft); font-size: 15px; transition: transform .18s ease; }
.admin-create-panel[open] > summary b { transform: rotate(45deg); }
.admin-create-panel > form { display: grid; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.admin-bulk-divider { width: 1px; height: 24px; margin-inline: 2px; background: var(--line-strong); }
.admin-comment-item > .button, .admin-forum-item .table-actions .button { white-space: nowrap; }
.table-actions { flex-wrap: wrap; justify-content: flex-end; }
.user-table .table-actions { min-width: 190px; }
.destructive-modal { border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line)); }
.destructive-modal-heading { display: flex; align-items: center; gap: 11px; }
.destructive-modal-heading > span { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--danger); background: var(--danger-soft); font-size: 17px; font-weight: 900; }
.destructive-modal-heading > div { min-width: 0; display: grid; gap: 2px; }
.destructive-modal-heading h2 { font-size: 18px; }
.destructive-modal-heading small { color: var(--danger); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.destructive-modal > p { margin-bottom: 17px; }
.destructive-confirm-field code { border-radius: 5px; padding: 2px 5px; color: var(--danger); background: var(--danger-soft); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; overflow-wrap: anywhere; }
.destructive-confirm-field input { border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); }
.destructive-reason textarea { min-height: 88px; resize: vertical; }

@media (max-width: 760px) {
  .admin-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .admin-nav { position: static; display: grid; overflow: visible; margin-bottom: 0; padding: 8px; }
  .admin-nav-group { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .admin-nav-group + .admin-nav-group { margin-top: 0; padding-top: 7px; }
  .admin-nav-group > span { grid-column: 1 / -1; padding: 0 5px 2px; }
  .admin-nav button { min-width: 0; min-height: 40px; justify-content: center; padding-inline: 6px; text-align: center; font-size: 10px; }
  .admin-nav button > span { white-space: normal; }
  .admin-nav-state { display: none; }
  .admin-page-toolbar { position: sticky; z-index: 20; top: 68px; }
  .admin-bulk-bar { top: 124px; }
  .admin-runtime-notice { grid-template-columns: auto minmax(0, 1fr) auto; }
  .admin-runtime-notice strong { align-self: end; }
  .admin-runtime-notice small { grid-column: 2 / -1; white-space: normal; }
  .admin-section-heading { align-items: flex-start; }
  .admin-section-heading > .button { min-width: 64px; }
  .admin-bulk-divider { width: 100%; height: 1px; margin-block: 2px; }
  .user-table .table-actions { min-width: 0; }
  .destructive-modal { padding: 20px 17px; }
}

@media (max-width: 480px) {
  .admin-nav-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-toolbar-context span { display: none; }
  .admin-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .admin-section-heading p { font-size: 10px; }
}