html{background:#f6f7fb;color-scheme:light}html[data-theme="dark"]{background:#0e1117;color-scheme:dark}
:root {
  color-scheme: light;
  --ink: #171923;
  --muted: #687082;
  --faint: #9399a8;
  --canvas: #f6f7fb;
  --surface: #ffffff;
  --soft: #f1f2f8;
  --line: #e5e7ef;
  --violet: #6d5dfc;
  --violet-2: #9587ff;
  --violet-soft: #efedff;
  --object: #ff674d;
  --light: #f4b53c;
  --environment: #5979ff;
  --shadow: 0 18px 60px rgba(44, 46, 72, .10);
  --sidebar: 252px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --surface-2: #f6f8fc;
  --surface-3: #edf1f9;
  --line-2: #ccd6e8;
  --ink-2: #3c4658;
  --tint: #eaf2ff;
  --tint-line: #c8dcff;
  --accent-soft: #8fb4f2;
  --accent: #4f8dff;
  --accent-strong: #2c6ce0;
  --danger: #a34945;
  --danger-line: #efc5c1;
  --danger-bg: #fff2f1;
  --warn: #8a6d1f;
  --warn-line: #ecdca6;
  --warn-bg: #fdf6e3;
  --ring: rgba(79,141,255,.34);
  --ok: #2f8a45;
  --dim: #c3cad8;
  --series-rx: #2a78d6;
  --series-tx: #eb6834;
  --meter-track: #edf1f9;
}

:root[data-theme="dark"] {
  --surface: #151a24;
  --surface-2: #10141d;
  --surface-3: #1b2230;
  --line: #273043;
  --line-2: #344059;
  --ink: #e8ecf5;
  --ink-2: #c2cbdc;
  --muted: #939db2;
  --faint: #717c92;
  --canvas: #0e1117;
  --soft: #1b2130;
  --violet: #8b7bff;
  --violet-2: #a89bff;
  --violet-soft: #241f3a;
  --tint: #1a2438;
  --tint-line: #2c4266;
  --accent-soft: #3d5d94;
  --accent: #5f9aff;
  --accent-strong: #8cb6ff;
  --danger: #e5817a;
  --danger-line: #5c322f;
  --danger-bg: #2a1b1a;
  --warn: #d8b45c;
  --warn-line: #4a3d1c;
  --warn-bg: #2b2412;
  --shadow: 0 8px 26px rgba(0,0,0,.34);
  --ring: rgba(95,154,255,.42);
  --ok: #54b06c;
  --dim: #3b4453;
  --series-rx: #3987e5;
  --series-tx: #d95926;
  --meter-track: #1b2230;
  color-scheme: dark;
}
:root[data-theme="dark"] .page-admin {
  --line: #273043; --ink: #e8ecf5; --muted: #939db2; --faint: #717c92;
  --shadow: 0 8px 26px rgba(0,0,0,.34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; min-height: 100%; }
[hidden] { display: none !important; }
/* Controls follow the preferences set in the head, before the app script loads. */
.lang-for-zh, .theme-for-dark { display: none; }
:root:lang(zh) .lang-for-en, :root[data-theme="dark"] .theme-for-light { display: none; }
:root:lang(zh) .lang-for-zh, :root[data-theme="dark"] .theme-for-dark { display: inline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.page-index { margin: 0; background: var(--canvas); color: var(--ink); }
.page-admin {
  margin: 0; color: var(--ink); background: var(--surface-2);
  display: flex; flex-direction: column; min-height: 100vh;
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --line: #e2e7f2; --ink: #151a26; --muted: #6b7488; --faint: #8d96a9;
  --shadow: 0 8px 26px rgba(30,44,74,.07);
}


:where(.page-index) :where(button, select, input) { font: inherit; }
.page-admin button, .page-admin input, .page-admin select { font-family: inherit; }

.page-index button, .page-index a { -webkit-tap-highlight-color: transparent; }
:where(.page-index) button { color: inherit; }
.page-index svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-defs { position: fixed; width: 0; height: 0; overflow: hidden; }

.page-admin a { color: var(--accent); text-decoration: none; }
.page-admin :where(button,a,input,select):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }







.app-shell { min-height: 100vh; }
.sidebar {
  overflow-y: auto; overscroll-behavior: contain;
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 20;
  display: flex; flex-direction: column; padding: 25px 18px 18px;
  background: rgba(255,255,255,.92); border-right: 1px solid var(--line); backdrop-filter: blur(22px);
}
.page-index .brand { display: flex; align-items: center; gap: 11px; padding: 0 12px 30px; color: var(--ink); text-decoration: none; font-size: 24px; font-weight: 780; letter-spacing: -.7px; }
.page-index .brand-mark { position: relative; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; box-shadow: 0 6px 16px rgba(31,34,48,.16); }.brand-mark { border: 0; outline: 0; }.brand-mark img { display: block; width: 100%; height: 100%; stroke: none; fill: none; filter: none; }
.nav { display: grid; gap: 7px; }
.nav-item { display: flex; align-items: center; gap: 13px; min-height: 46px; padding: 0 14px; border-radius: 11px; color: #525866; text-decoration: none; font-size: 14px; font-weight: 560; transition: .2s ease; }
.nav-item svg { width: 19px; }
.nav-item:hover { background: #f5f5fa; color: var(--ink); }
.nav-item.active { color: var(--violet); background: linear-gradient(90deg, #f1efff, #f9f8ff); box-shadow: inset 3px 0 var(--violet); }
.sidebar-spacer { flex: 1; min-height: 30px; }
.plan-card { padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, #fff, #f8f7ff); box-shadow: 0 10px 30px rgba(66,61,110,.07); }
.plan-kicker { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.plan-kicker svg { width: 17px; color: var(--violet); }.plan-engine { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(52,184,123,.12); color: #1f7a4d; font-size: 10.5px; font-weight: 700; white-space: nowrap; }.plan-engine i { width: 7px; height: 7px; border-radius: 50%; background: #34b87b; box-shadow: 0 0 0 3px rgba(52,184,123,.18); }.plan-engine.offline { background: rgba(217,119,6,.14); color: #b45309; }.plan-engine.offline i { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.18); }
.plan-card strong { display: block; margin-top: 10px; overflow: hidden; font-size: 18px; letter-spacing: -.3px; white-space: nowrap; text-overflow: ellipsis; }
.plan-card p { margin: 3px 0 10px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.plan-meter { height: 4px; margin-bottom: 13px; overflow: hidden; border-radius: 4px; background: #e8e7f1; }
.plan-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--violet-2)); transition: width .4s ease; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 9px; border: 0; text-decoration: none; font-weight: 650; font-size: 13px; cursor: pointer; }
.button-soft { width: 100%; background: var(--violet-soft); color: var(--violet); }
.page-index .avatar { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; color: white; background: linear-gradient(145deg, #757c91, #aeb4c6); font-size: 13px; }

.main { display: flex; flex-direction: column; min-height: 100vh; padding-left: var(--sidebar); }
.topbar { position: sticky; top: 0; z-index: 15; height: 68px; display: flex; align-items: center; justify-content: flex-end; padding: 0 34px; border-bottom: 1px solid rgba(225,227,236,.85); background: rgba(255,255,255,.79); backdrop-filter: blur(20px); }
.studio-status i { width: 8px; height: 8px; border-radius: 50%; background: #34b87b; box-shadow: 0 0 0 5px rgba(52,184,123,.10); }
.top-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-actions > :not(.credit-pill) { flex: none; }
#creditBalance { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.page-index[data-session-state="loading"] #profileName,
.page-index[data-session-state="loading"] #creditBalance { display: inline-block; min-width: 64px; min-height: 1em; border-radius: 4px; color: transparent; background: var(--soft); }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.icon-button:hover { background: var(--soft); }.icon-button svg { width: 19px; }
.mobile-menu, .navigation-close, .navigation-backdrop { display: none; }
.navigation-backdrop[hidden] { display: none; }
.page-index :where(button, a, select, input):focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.main, .content, .hero > *, .studio-grid > *, .result-grid > *, .project-detail-grid > *, .data-row > *, .card-head > *, .stats-row > * { min-width: 0; }
.content { flex: 1 0 auto; max-width: none; margin: 0; padding: 22px 34px 56px; }

.hero { min-height: 265px; display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); align-items: center; gap: 32px; overflow: hidden; }
.eyebrow, .section-eyebrow { color: #7c718f; font-size: 10px; font-weight: 760; letter-spacing: .16em; }
.eyebrow { display: flex; align-items: center; gap: 9px; line-height: 1.5; }
.eyebrow > span:first-child { flex: 0 0 26px; height: 1px; background: linear-gradient(90deg, var(--object), var(--environment)); }
.hero h1 { margin: 13px 0 16px; max-width: 680px; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.05em; }
.hero h1 em { font-style: normal; color: transparent; background: linear-gradient(90deg, #5a53f2 5%, #9682ff 55%, #577cff); background-clip: text; -webkit-background-clip: text; }
.hero-copy > p { max-width: 650px; margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.signal-key { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; color: #555c6a; font-size: 11px; font-weight: 650; }
.signal-key span { display: flex; align-items: center; gap: 7px; }.signal { width: 7px; height: 7px; border-radius: 50%; }.signal.object { background: var(--object); }.signal.light { background: var(--light); }.signal.environment { background: var(--environment); }
.hero-visual { position: relative; width: 100%; height: 250px; display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; inset: 10% 4%; border-radius: 50%; background: radial-gradient(circle, rgba(111,94,255,.17), rgba(124,146,255,.05) 42%, transparent 70%); filter: blur(5px); }
.world-card { position: relative; z-index: 2; width: min(420px, 90%); aspect-ratio: 2.05; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 26px 70px rgba(88,76,161,.18), inset 0 0 50px rgba(255,255,255,.7); transform: perspective(700px) rotateX(5deg); }
.world-card img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: saturate(.95) contrast(1.02) brightness(1.09); }
.world-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,247,251,.76), transparent 25%, transparent 72%, rgba(246,247,251,.72)), linear-gradient(0deg, rgba(246,247,251,.7), transparent 35%); }
.scan-line { position: absolute; z-index: 3; left: 15%; right: 15%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(94,100,255,.75), transparent); box-shadow: 0 0 14px rgba(94,100,255,.8); animation: scan 4s ease-in-out infinite; }
@keyframes scan { 0%,100%{transform:translateY(-55px);opacity:.25}50%{transform:translateY(55px);opacity:1} }
.orbital { position: absolute; z-index: 1; width: min(390px, 96%); height: 110px; border: 1px solid rgba(111,94,255,.20); border-radius: 50%; }.orbit-one { transform: rotate(8deg); }.orbit-two { transform: rotate(-9deg) scale(.82); border-color: rgba(255,103,77,.14); }
.float-chip { position: absolute; z-index: 4; padding: 7px 10px; border: 1px solid rgba(255,255,255,.9); border-radius: 7px; background: rgba(255,255,255,.76); box-shadow: 0 8px 25px rgba(54,57,85,.12); backdrop-filter: blur(12px); font: 600 8px/1.1 ui-monospace, monospace; letter-spacing: .08em; }
.chip-objects { left: 7%; top: 32%; color: #d84d37; }.chip-lights { right: 3%; bottom: 26%; color: #a87814; }

.studio-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.studio-tabs { height: 62px; display: flex; align-items: stretch; padding: 0 22px; border-bottom: 1px solid var(--line); }
.studio-tab { position: relative; padding: 0 18px; border: 0; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.studio-tab.active { color: var(--ink); font-weight: 680; }.studio-tab.active::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--violet); }
.studio-tab:disabled { cursor: default; opacity: .58; }.studio-tab small { margin-left: 6px; padding: 2px 5px; border-radius: 5px; background: var(--soft); font-size: 8px; text-transform: uppercase; }
.studio-status { display: flex; align-items: center; gap: 8px; margin: auto 4px auto auto; color: var(--muted); font-size: 11px; }
.studio-grid { display: grid; grid-template-columns: minmax(0,1fr) 310px; }
.studio-main { padding: 22px; }
.upload-zone { position: relative; aspect-ratio: 16 / 9; width: 100%; height: auto; min-height: 0; display: grid; place-items: center; overflow: hidden; border: 1.5px dashed #d4d6e0; border-radius: 13px; background: linear-gradient(145deg,#f8f8fc,#f3f3f9); cursor: pointer; transition: .22s ease; }
.upload-zone:hover, .upload-zone.dragging { border-color: var(--violet); background: var(--violet-soft); box-shadow: inset 0 0 0 3px rgba(109,93,252,.05); }
.upload-zone.has-image { border-style: solid; background: #10131c; }
.upload-zone:not(.has-image) { min-height: 240px; }
.upload-copy { padding: 20px 14px; text-align: center; line-height: 1.5; }.upload-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 15px; border-radius: 16px; color: var(--violet); background: var(--surface); box-shadow: 0 9px 25px rgba(55,55,90,.09); }.upload-icon svg { width: 25px; }
.upload-copy strong { display: block; font-size: 15px; }.upload-copy p { margin: 7px 0; color: var(--muted); font-size: 13px; }.upload-copy u { color: var(--violet); text-decoration: none; }.upload-copy small { color: var(--faint); font-size: 10.5px; }
#uploadPreview { display: none; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }.has-image #uploadPreview { display: block; }.has-image .upload-copy { display: none; }
.remove-image { display: none; position: absolute; top: 11px; right: 11px; z-index: 2; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(17,20,28,.72); color: white; font-size: 21px; cursor: pointer; }.has-image .remove-image { display: block; }
.field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.field span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; font-weight: 650; }.field select { width: 100%; height: 43px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 12px; outline: none; }.field select:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(109,93,252,.10); }.field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.output-panel { display: flex; flex-direction: column; min-height: 0; gap: 11px; padding: 22px; border-left: 1px solid var(--line); background: linear-gradient(180deg,#fff,#fbfbfe); }
#sceneScale:disabled { opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--ink); cursor: default; appearance: none; background-image: none; padding-right: 12px; }
.output-label { margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 680; }
.output-choice { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 10px; min-height: 72px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); text-align: left; cursor: pointer; transition: .2s; }
.output-choice:hover { border-color: #c8c3ff; }.output-choice.selected { border-color: var(--violet); background: #faf9ff; box-shadow: 0 0 0 2px rgba(109,93,252,.07); }.choice-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 10px; background: var(--soft); color: #464c59; }.output-choice.selected .choice-icon { background: var(--violet-soft); color: var(--violet); }
.output-choice b,.output-choice small { display: block; }.output-choice b { font-size: 12px; }.output-choice small { margin-top: 4px; color: var(--faint); font-size: 9.5px; }.output-choice > i { width: 10px; height: 10px; border: 1px solid #c8cbd4; border-radius: 50%; }.output-choice.selected > i { border: 3px solid var(--violet); }
.generate-button { min-height: 72px; margin-top: auto; padding: 10px; border: 0; border-radius: 11px; color: white; background: linear-gradient(100deg,#6655f4,#8b72ff 62%,#9b8cff); box-shadow: 0 13px 27px rgba(109,93,252,.22); cursor: pointer; transition: .2s ease; }.generate-button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(109,93,252,.28); }.generate-button:disabled { cursor: not-allowed; filter: grayscale(.65); opacity: .53; box-shadow: none; }.generate-button svg { display: inline-block; margin-right: 8px; vertical-align: middle; width: 18px; }.generate-button span { font-weight: 700; font-size: 13px; }.generate-button small { display: block; margin-top: 5px; color: rgba(255,255,255,.72); font-size: 9.5px; }

.run-panel { scroll-margin-top: 88px; margin-top: 26px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }.run-panel[hidden] { display: none; }
.run-head,.section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.run-head h2,.section-head h2 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.03em; }
.progress-track { height: 6px; margin: 22px 0 16px; overflow: hidden; border-radius: 6px; background: #ececf3; }.progress-track span { display: block; width: 3%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--object),var(--light),var(--environment)); transition: width .5s ease; }
.stage-list { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin-bottom: 20px; }.stage { display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 8px 6px; border-radius: 9px; background: var(--soft); color: var(--faint); font-size: 9px; text-align: center; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }.stage.active { color: var(--violet); background: var(--violet-soft); font-weight: 750; }.stage.done { color: #28855d; background: #ebf8f2; }
.stage-duration { margin-left: 3px; font-size: 8px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; opacity: .85; }
.stage.failed { color: #b42318; background: #fff0ed; font-weight: 750; }
:root[data-theme="dark"] .stage.failed { color: #ff9f95; background: rgba(180,35,24,.18); }
@media (max-width: 1280px) { .stage-list { grid-template-columns: repeat(3,minmax(0,1fr)); } }
.result-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 290px; height: auto; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #11141c; }.result-viewer { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%,#252a39,#11141c 66%); }.result-viewer img { width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }.run-summary { position: absolute; top: 0; right: 0; bottom: 0; width: 290px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }.result-empty { display: grid; justify-items: center; gap: 12px; color: #7d8495; font-size: 12px; }.result-empty svg { width: 32px; height: 32px; }.run-summary { padding: 20px; border-left: 1px solid rgba(255,255,255,.08); color: #e9ecf4; background: #181b25; }.run-summary p { color: #949bad; font-size: 12px; line-height: 1.65; }.run-summary .metric { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: #aab0bf; font-size: 11px; }.run-summary .metric b { min-width: 0; color: white; overflow-wrap: anywhere; text-align: right; }.run-summary .metric { gap: 12px; }.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 5px; }.timeline-card { position: relative; min-height: 100px; overflow: hidden; border-radius: 10px; background: #181b25; cursor: pointer; }.timeline-card img { width: 100%; height: 100px; object-fit: cover; opacity: .82; }.timeline-card span { position: absolute; left: 8px; right: 8px; bottom: 7px; overflow: hidden; color: white; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 5px #000; }

.projects-section { padding-top: 40px; }.section-head { margin-bottom: 17px; }.project-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.project-card { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 10px 28px rgba(50,52,78,.06); transition: .22s; }.project-card:hover { transform: translateY(-3px); box-shadow: 0 17px 34px rgba(50,52,78,.11); }.project-image { position: relative; aspect-ratio: 1.65; overflow: hidden; background: var(--surface-3); }.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }.project-card:hover img { transform: scale(1.035); }.project-image > span { position: absolute; top: 9px; right: 9px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; color: white; background: rgba(20,22,29,.58); backdrop-filter: blur(8px); font-size: 8px; }.project-meta { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 12px; }.project-meta b,.project-meta small { display: block; }.project-meta b { font-size: 11.5px; }.project-meta small { margin-top: 4px; color: var(--faint); font-size: 9px; }.project-state { padding: 4px 6px; border-radius: 5px; font-size: 8px; font-weight: 700; }.project-state.ready { color: #26835a; background: #e9f7f0; }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 50; max-width: 360px; padding: 13px 16px; border-radius: 10px; color: white; background: #1a1d27; box-shadow: 0 15px 45px rgba(0,0,0,.25); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .22s; }.toast.show { opacity: 1; transform: translateY(0); }

.modal-backdrop[hidden], .account-menu[hidden] { display: none; }
.dashboard-view { min-height: calc(100vh - 150px); padding-top: 0; }
.page-title { margin-bottom: 28px; }.page-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }.page-title-copy { min-width: 0; flex: 1 1 320px; }.page-title-row h1 { margin: 6px 0 4px; font-size: clamp(28px,3vw,40px); }.page-title-row p { font-size: 12px; }.stats-inline { flex: none; grid-template-columns: repeat(4, minmax(104px, auto)); gap: 8px; margin: 0; }.stats-inline .stat-card { padding: 9px 12px; border-radius: 10px; }.stats-inline .stat-card span { font-size: 8.5px; }.stats-inline .stat-card strong { margin-top: 3px; font-size: 16px; }.stats-inline .stat-card small { display: none; }.page-title h1 { margin: 8px 0 7px; font-size: clamp(34px,4vw,52px); letter-spacing: -.05em; }.page-title p { max-width: 700px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 16px; }.stat-card { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }.stat-card span { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }.stat-card strong { display: block; margin-top: 8px; font-size: 23px; }.stat-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 9.5px; }
.dashboard-card { margin-bottom: 16px; padding: 21px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 12px 38px rgba(50,52,78,.06); }.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }.card-head h2 { margin: 0; font-size: 17px; }.card-head p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }.button.compact { width: auto; min-height: 34px; padding-inline: 12px; }
.data-list { display: grid; gap: 8px; }.data-row { display: grid; grid-template-columns: minmax(160px,1.5fr) repeat(3,minmax(90px,.7fr)) auto; align-items: center; gap: 14px; min-height: 62px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fcfcfe; }.data-primary b,.data-primary small { display: block; }.data-primary b { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }.data-primary small,.data-cell small { margin-top: 4px; color: var(--faint); font-size: 9px; }.data-cell span,.data-cell small { display: block; }.data-cell span { font-size: 10.5px; }.status-badge { justify-self: end; padding: 5px 8px; border-radius: 6px; color: #4f5664; background: var(--soft); font-size: 8.5px; font-weight: 750; text-transform: uppercase; }.status-badge.success,.status-badge.complete { color: #287e59; background: #e9f7f0; }.status-badge.running,.status-badge.queued,.status-badge.accepted { color: #6656d9; background: var(--violet-soft); }.status-badge.failed { color: #b14d40; background: #fff0ed; }.empty-state { display: grid; justify-items: center; gap: 7px; padding: 34px 16px; border: 1px dashed #d9dbe4; border-radius: 11px; color: var(--muted); text-align: center; }.empty-state b { color: var(--ink); font-size: 12px; }.empty-state p { margin: 0; font-size: 10px; }.empty-state button { margin-top: 5px; }
.billing-hero { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }.billing-hero > div { padding: 23px; background: var(--surface); }.billing-hero span,.billing-hero small { display: block; color: var(--muted); font-size: 10px; }.billing-hero strong { display: block; margin: 7px 0 5px; font-size: 31px; letter-spacing: -.04em; }.package-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 11px; }.package-card { position: relative; min-height: 145px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg,#fff,#f9f9fe); }.package-card.featured { border-color: #b9b1ff; background: linear-gradient(145deg,#fff,#f4f1ff); }.package-card span { color: var(--muted); font-size: 9px; }.package-card strong { display: block; margin: 7px 0 3px; font-size: 22px; }.package-card small { color: var(--faint); font-size: 9px; }.package-card button { position: absolute; left: 13px; right: 13px; bottom: 13px; height: 32px; border: 0; border-radius: 8px; color: white; background: var(--violet); font-size: 9.5px; font-weight: 700; cursor: pointer; }.package-card button:disabled { color: var(--faint); background: var(--soft); cursor: not-allowed; }.billing-notice { margin-top: 13px; padding: 13px; border-radius: 9px; color: #5f5598; background: var(--violet-soft); font-size: 10.5px; }
.notification-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.notification-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.notification-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; color: var(--violet); background: var(--violet-soft); }
.notification-icon.success { color: var(--ok); background: color-mix(in srgb,var(--ok) 12%,transparent); }
.notification-icon.failed { color: var(--danger); background: var(--danger-bg); }
.notification-copy { min-width: 0; flex: 1; }
.notification-copy h3 { margin: 0 0 6px; font-size: 14px; line-height: 1.4; }
.notification-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.notification-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 12px; }
.notification-meta time { color: var(--faint); font-size: 10px; }
.notification-meta a { display: inline-flex; align-items: center; min-height: 32px; color: var(--violet); font-size: 12px; font-weight: 650; text-decoration: none; }
.notification-meta a:hover { text-decoration: underline; }

.account-menu { position: fixed; bottom: 74px; left: 16px; z-index: 45; width: 250px; max-height: calc(100dvh - 90px); overflow-y: auto; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.97); box-shadow: 0 22px 55px rgba(32,34,50,.18); backdrop-filter: blur(18px); }
.account-menu > :is(a, button) { display: flex; align-items: center; width: 100%; min-height: 44px; margin-top: 5px; padding: 10px 11px; border: 0; border-radius: 8px; background: var(--soft); color: var(--ink); font-size: 12px; line-height: 1.4; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu > :is(a, button):hover:not(:disabled) { background: var(--violet-soft); color: var(--violet); }
.account-menu > button:disabled { opacity: .48; cursor: not-allowed; }
.account-menu > :is(a, button):focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 18px; background: rgba(22,24,34,.46); backdrop-filter: blur(8px); }.auth-modal { position: relative; width: min(420px,100%); min-width: 0; max-height: calc(100dvh - 36px); overflow-y: auto; overscroll-behavior: contain; padding: 30px; border-radius: 18px; background: var(--surface); box-shadow: 0 28px 90px rgba(20,22,35,.27); }.modal-close { position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--soft); font-size: 20px; cursor: pointer; }.auth-mark { display: block; margin-bottom: 20px; }.auth-modal h2 { margin: 8px 0 7px; font-size: 26px; letter-spacing: -.04em; }.auth-modal > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.auth-tabs { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; margin: 22px 0 16px; padding: 4px; border-radius: 10px; background: var(--soft); }.auth-tabs button { height: 35px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 10.5px; cursor: pointer; }.auth-tabs button.active { color: var(--ink); background: var(--surface); box-shadow: 0 4px 12px rgba(50,52,78,.08); font-weight: 700; }.auth-modal form { display: grid; gap: 12px; }.auth-modal label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 650; }.auth-modal label small { color: var(--faint); font-weight: 400; }.auth-modal input { width: 100%; height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; }.auth-modal input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(109,93,252,.10); }.auth-error { padding: 10px; border-radius: 8px; color: #a64035; background: #fff0ed; font-size: 10px; }.auth-submit { min-height: 48px; margin-top: 3px; }

.data-row[data-job-id] { cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.data-row[data-job-id]:hover,.data-row[data-job-id]:focus-visible { border-color: #bdb6ff; outline: none; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(65,57,145,.08); }
.project-list-row .data-primary { display: flex; align-items: center; gap: 12px; }
.project-row-copy { min-width: 0; }
.project-row-thumbnail { position: relative; flex: 0 0 72px; width: 72px; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--soft); }
.project-row-thumbnail > .project-preview-media { position: absolute; inset: 0; }
.project-row-thumbnail .project-preview-media > img { object-fit: cover; }
.project-row-thumbnail .project-preview-status { gap: 0; padding: 0; }
.project-row-thumbnail .project-preview-status svg { width: 20px; height: 20px; }
.project-row-thumbnail .project-preview-spinner { width: 14px; height: 14px; }
.project-row-date { font-variant-numeric: tabular-nums; line-height: 1.5; }
.project-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.project-detail-identity { min-width: 0; }
.project-detail-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; }
.project-detail-back:hover { color: var(--violet); }
.project-detail-header h1 { margin: 0; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -.035em; overflow-wrap: anywhere; }
.project-detail-header p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.project-scene-id { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; max-width: 100%; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.project-scene-id[hidden] { display: none; }
.project-scene-id code { min-width: 0; max-width: 100%; color: var(--ink); font-size: inherit; overflow-wrap: anywhere; user-select: all; }
.project-scene-id .button { flex: none; min-height: 28px; padding: 4px 7px; font-size: 11px; }
.project-detail-header > .status-badge { flex: none; margin-top: 30px; }
.project-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) clamp(310px,24vw,360px); gap: 18px; margin-bottom: 18px; }
.project-preview-card,.project-detail-summary { margin-bottom: 0; }
#projectDetailView { padding-top: 0; margin-top: 0; }
.project-detail-preview { display: grid; width: 100%; height: auto; aspect-ratio: var(--project-preview-ratio,16 / 9); max-height: min(820px,max(240px,calc(100dvh - 250px))); min-height: 0; overflow: hidden; place-items: center; border-radius: 10px; background: #11141c; }
.project-detail-preview:has(.project-preview-media:not([data-state="ready"])) { aspect-ratio: 16 / 9; min-height: 180px; }
.project-preview-media { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.project-preview-media > img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; visibility: hidden; }
.project-preview-media[data-state="ready"] > img { visibility: visible; }
.project-preview-status { grid-area: 1 / 1; display: grid; justify-items: center; align-content: center; gap: 12px; padding: 16px; color: #a1a9bb; font-size: 12px; }
.project-preview-status p { margin: 0; }
.project-preview-status svg { width: 28px; height: 28px; }
.project-preview-spinner { width: 22px; height: 22px; border: 2px solid #384055; border-top-color: #a89bff; border-radius: 50%; animation: project-preview-spin .8s linear infinite; }
.project-preview-media:not([data-state="loading"]) .project-preview-spinner, .project-preview-media[data-state="loading"] .project-preview-status svg { display: none; }
.project-preview-retry { min-height: 40px; padding: 0 18px; border: 1px solid #434b60; border-radius: 8px; color: #e8ecf5; background: #242b3b; font: inherit; cursor: pointer; }
.project-preview-retry:hover { background: #343c51; }
.project-preview-retry:focus-visible { outline: 2px solid #a89bff; outline-offset: 3px; }
.timeline-card > .project-preview-media { position: absolute; inset: 0; }
.timeline-card .project-preview-media > img { object-fit: cover; }
.timeline-card .project-preview-status { padding: 0 0 16px; }
.timeline-card .project-preview-spinner { width: 16px; height: 16px; }
@keyframes project-preview-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .project-preview-spinner { animation: none; } }
.project-preview-media > .input-parsing-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; fill: none; stroke: none; pointer-events: none; }
.project-preview-media:not([data-state="ready"]) > .input-parsing-overlay { display: none; }
.input-parsing-mark { color: #36e0ba; }
.input-parsing-mark.building { color: #b6a1ff; }
.input-parsing-box { fill: none; stroke: currentColor; stroke-width: 1.5px; }
.input-parsing-mark.estimated .input-parsing-box { stroke-dasharray: 5 4; }
.input-parsing-badge { fill: currentColor; }
.input-parsing-mark text { fill: #10131e; font-family: inherit; font-weight: 750; }
.input-parsing-mark.is-highlighted .input-parsing-box { fill: currentColor; fill-opacity: .18; stroke-width: 3px; stroke-dasharray: none; }
.input-parsing-counts { display: flex; flex-wrap: wrap; gap: 7px; }
.input-parsing-counts span { padding: 6px 9px; border-radius: 6px; color: var(--muted); background: var(--soft); font-size: 10px; }
.input-parsing-note { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.input-parsing-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(260px,100%),1fr)); gap: 9px; max-height: 360px; overflow-y: auto; margin: 0; padding: 2px; list-style: none; scrollbar-width: thin; }
.input-parsing-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; height: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--ink); text-align: left; cursor: pointer; }
.input-parsing-item:hover,.input-parsing-item:focus-visible,.input-parsing-item.is-highlighted { border-color: var(--violet); outline: none; background: var(--violet-soft); }
.input-parsing-number { display: grid; place-items: center; flex: none; min-width: 26px; height: 26px; padding-inline: 4px; border-radius: 6px; background: #d3f8ed; color: #176a55; font-size: 11px; font-weight: 750; }
.input-parsing-item.building .input-parsing-number { background: #e8e0ff; color: #6249ae; }
.input-parsing-copy { min-width: 0; }
.input-parsing-copy b { display: block; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.input-parsing-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.project-preview-card { display: flex; flex-direction: column; align-self: start; padding: 12px; }
.project-preview-card .project-detail-preview { flex: none; }
.project-timing { position: relative; display: flex; flex-direction: column; gap: 8px; flex: none; margin: 0; padding: 12px 2px 2px; }
.project-timing .timing-track { order: -1; }
.project-timing .timing-heading { margin-bottom: 0; }
.timing-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.timing-total { flex: none; margin-left: auto; white-space: nowrap; }
.timing-total b { margin-left: 5px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.timing-track { display: flex; width: 100%; height: 6px; overflow: hidden; border-radius: 3px; background: var(--soft); }
.timing-cloud { --timing-color: var(--violet); }
.run-downloads { margin-top: 16px; font-size: 13px; }
.run-downloads summary { cursor: pointer; margin-bottom: 12px; }
.timing-local { --timing-color: #39bda3; }
.timing-other { --timing-color: #778398; }
.timing-segment { height: 100%; flex-shrink: 0; background: var(--timing-color); cursor: help; }
.timing-segment + .timing-segment { box-shadow: inset 2px 0 var(--surface); }
.timing-segment:hover { filter: brightness(1.18); }
.timing-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.project-timing .timing-item { display: inline-flex; align-items: center; gap: 6px; min-height: 14px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; cursor: help; text-align: left; white-space: nowrap; }
.timing-item > i { width: 7px; height: 7px; flex: none; border-radius: 2px; background: var(--timing-color); }
.timing-item > b { color: var(--ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.timing-item:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.timing-tooltip { position: absolute; z-index: 25; bottom: calc(100% + 8px); left: 0; width: max-content; max-width: 100%; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.2); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.4; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; }
.timing-local .timing-tooltip { left: 50%; transform: translate(-50%, 3px); }
.timing-other .timing-tooltip { left: auto; right: 0; }
.timing-item:hover .timing-tooltip,.timing-item:focus .timing-tooltip,.timing-item.is-hovered .timing-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
.timing-local:hover .timing-tooltip,.timing-local:focus .timing-tooltip,.timing-local.is-hovered .timing-tooltip { transform: translate(-50%, 0); }
.timing-empty { margin: 0; padding: 5px 0; color: var(--muted); font-size: 10px; }
.project-detail-summary { contain: size; display: flex; flex-direction: column; min-height: 0; padding: 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.project-detail-summary > .card-head { flex: none; margin-bottom: 12px; }
.project-detail-summary > .card-head h2 { font-size: 15px; }
.project-detail-summary #projectDetailSummary { flex: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#projectDetailSummary > :not(.metric), #projectDetailSummary > .metric-reconstruction { grid-column: 1 / -1; }
.project-detail-summary .run-downloads { min-width: 0; overflow-wrap: anywhere; }
.project-failure, .failure-diagnostic { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; overflow-wrap: anywhere; }
.project-failure { background: var(--soft); }
.project-failure p, .failure-diagnostic p { margin: 0; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.failure-code { display: grid; gap: 5px; margin-top: 10px; font-size: 11px; }
.failure-code span, .failure-diagnostic span { color: var(--muted); font-size: 10px; }
.failure-code code { font-size: 11px; white-space: normal; }
.failure-diagnostic { display: grid; gap: 12px; }
.failure-diagnostic p { margin-top: 4px; }
.failure-details-toggle { width: 100%; margin-top: 9px; }
.failure-details-panel { display: grid; min-width: 0; gap: 9px; }
.failure-details-panel[hidden] { display: none; }
.failure-reason { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 6px; font-size: 12px; line-height: 1.6; }
.failure-reason span { color: var(--muted); }
.failure-raw { min-width: 0; }
.failure-raw summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 6px 0; }
.failure-raw summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.review-log-dialog { width: min(900px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 20px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface); overflow: hidden; }
.review-log-dialog[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.review-log-dialog::backdrop { background: rgba(22,24,34,.46); }
.review-log-dialog header, .review-log-dialog footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.review-log-dialog h2 { margin: 0; font-size: 20px; }
.review-log-dialog footer { margin-top: 16px; font-size: 12px; }
.review-log-dialog footer > div { display: flex; flex-wrap: wrap; gap: 6px; }
.review-log-note { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.review-log-content { display: grid; min-width: 0; min-height: 0; gap: 8px; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
.review-log-entry { min-width: 0; border: 1px solid var(--line); border-radius: 9px; }
.review-log-entry > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 12px; font-size: 12px; cursor: pointer; }
.review-log-entry > summary span { overflow-wrap: anywhere; }
.review-log-entry > summary small { color: var(--muted); }
.review-log-detail { padding: 0 12px 12px; min-width: 0; }
.review-log-step { margin-top: 12px; min-width: 0; }
.review-log-step h4 { margin: 12px 0 8px; font-size: 13px; }
.review-log-json { min-width: 0; margin-top: 8px; }
.review-log-json summary { color: var(--muted); font-size: 12px; padding: 6px 0; cursor: pointer; }
.review-log-json pre { max-height: 320px; max-width: 100%; margin: 4px 0; padding: 12px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 8px; background: var(--soft); font-size: 11px; line-height: 1.6; }
.moderation-image { min-width: 0; margin: 0; }
.moderation-image figcaption { margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.moderation-image-preview { width: 100%; aspect-ratio: 1; max-height: 360px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.project-detail-summary .metric { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-width: 0; padding: 8px; border-radius: 9px; background: var(--soft); }
.project-detail-summary .metric span { color: var(--muted); font-size: 10px; }
.project-detail-summary .metric b { max-width: 100%; font-size: 11px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.project-detail-summary .metric-reconstruction b { white-space: normal; overflow-wrap: anywhere; }
.project-detail-timeline .empty-state { grid-column: 1/-1; }.summary-stages { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }.summary-stages .card-head { margin-bottom: 8px; }.summary-stages .card-head h2 { font-size: 13px; }.summary-stages .card-head p { font-size: 10px; }.stage-squares { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-columns: auto; grid-auto-rows: max-content; align-content: start; gap: 8px; margin-top: 0; aspect-ratio: 3 / 2; overflow-x: hidden; overflow-y: auto; padding: 0 2px 0 0; scroll-snap-type: y proximity; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }.stage-squares .timeline-card { scroll-snap-align: start; }.stage-squares .empty-state { grid-column: span 3; }.stage-squares .timeline-card { min-height: 0; aspect-ratio: 1; border-radius: 8px; }.stage-squares .timeline-card img { height: 100%; }.stage-squares .timeline-card span { left: 5px; right: 5px; bottom: 5px; font-size: 8px; }.summary-stages [hidden] { display: none !important; }.summary-stages .card-head { align-items: center; }.seg-toggle { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }.seg-btn { border: 0; background: transparent; padding: 4px 9px; border-radius: 6px; font: inherit; font-size: 10px; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; }.seg-btn.active { background: var(--surface); color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,.08); }.seg-btn b { font-weight: 800; }.seg-btn[data-tip] { position: relative; }.seg-btn[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); right: 0; z-index: 20; width: max-content; max-width: 250px; padding: 7px 10px; border-radius: 8px; background: #1c1f2a; color: #fff; font-size: 10px; font-weight: 500; line-height: 1.45; text-align: left; white-space: normal; box-shadow: 0 8px 24px rgba(0,0,0,.22); opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; }.seg-btn[data-tip]::before { content: ""; position: absolute; bottom: calc(100% + 4px); right: 14px; z-index: 21; border: 5px solid transparent; border-top-color: #1c1f2a; opacity: 0; transition: opacity .12s ease; pointer-events: none; }.seg-btn[data-tip]:hover::after,.seg-btn[data-tip]:focus-visible::after,.seg-btn[data-tip]:hover::before,.seg-btn[data-tip]:focus-visible::before { opacity: 1; transform: none; }.summary-stages .card-head { overflow: visible; }.summary-stages .seg-toggle { position: relative; z-index: 3; }#projectHistoryList { height: 360px; overflow-y: auto; align-content: start; padding-right: 4px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.scene-download-grid { display: grid; gap: 9px; align-content: start; height: 320px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.scene-download-card { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fcfcfe; }
.summary-stages > .card-head { flex-direction: column; align-items: stretch; gap: 10px; }
.summary-stages .seg-toggle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.summary-stages .seg-btn { min-width: 0; }
.project-detail-summary .summary-stages { display: flex; flex-direction: column; flex: 1 0 140px; min-height: 140px; margin-top: 14px; padding-top: 14px; }
.project-detail-summary .summary-stages > .card-head { flex: none; }
.project-detail-summary .stage-squares { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
.project-detail-summary .timeline-card { aspect-ratio: 16 / 10; }
.project-detail-summary #projectDetailObjects .timeline-card { aspect-ratio: 1; }
.project-detail-summary .timeline-card span { font-size: 9px; }
.project-detail-summary .project-preview-media > img { object-fit: contain; }
.project-detail-downloads > .card-head { margin-bottom: 12px; }
.scene-download-card .download-format { display: grid; width: 46px; height: 38px; place-items: center; border-radius: 8px; color: #5a4bd0; background: var(--violet-soft); font-size: 9px; font-weight: 800; }
.scene-download-card b,.scene-download-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-download-card b { font-size: 11px; }.scene-download-card small { margin-top: 4px; color: var(--faint); font-size: 9px; }
.scene-download-card a { display: grid; place-items: center; text-decoration: none; }.scene-download-card .download-links { display: flex; align-items: center; gap: 6px; }.button.mini { min-height: 28px; padding-inline: 9px; font-size: 10.5px; font-weight: 750; }.button-ghost { width: auto; background: var(--soft); color: var(--muted); }.button-ghost:hover { color: inherit; }.scene-download-card[hidden] { display: none !important; }.download-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }.download-tools .button.compact { margin: 0; }.button-green { background: #1f9d63; color: #fff; }.button-green:hover { background: #17864f; color: #fff; }.button-green:focus-visible { outline: 2px solid rgba(31,157,99,.45); outline-offset: 2px; }


.boot-splash{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:280px}
.boot-ring{width:24px;height:24px;border-radius:50%;border:2.5px solid var(--tint-line);border-top-color:var(--accent);animation:boot-spin .8s linear infinite}
.boot-splash p{margin:0;font-size:12.5px;color:var(--muted);letter-spacing:.2px}
@keyframes boot-spin{to{transform:rotate(360deg)}}

.skl{display:block;border-radius:10px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:shimmer 1.3s ease-in-out infinite}
.data-list > .skl{min-height:64px}
.stats-row > .skl{min-height:96px;border-radius:13px}
.package-grid > .skl{min-height:145px;border-radius:12px}
.tiles > .skl{min-height:78px;border-radius:12px}
.records > .skl{min-height:44px;border-radius:9px}
.gpu-scroll > .skl{min-height:58px;border-radius:10px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.data-row[aria-busy="true"]{opacity:.55;pointer-events:none}

.page-admin header{display:flex;align-items:center;gap:16px;padding:12px 24px;flex-wrap:wrap;
       background:var(--surface);border-bottom:1px solid var(--line);color:var(--ink);
       position:sticky;top:0;z-index:50}
.page-admin header h1{margin:0;color:var(--ink);display:flex;flex-direction:column;gap:1px;font-size:16px;font-weight:680;letter-spacing:-.01em;line-height:1.15}
.page-admin header h1 .brand{color:var(--ink)}
.page-admin header h1 .h1-page{font-size:11.5px;font-weight:500;color:var(--muted)}
.brandmark{display:flex;align-items:center;gap:11px;flex:none;color:inherit;text-decoration:none}
.page-admin .brand-mark{position:relative;width:28px;height:28px;flex:none;border:0;border-radius:8px;background:transparent;box-shadow:0 6px 16px rgba(21,26,38,.16)}
.spacer{flex:1}

.runstate{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);font-size:11.5px;color:var(--muted)}
.pill strong{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:none}
.dot.ready{background:var(--ok)}
.dot.loading{background:var(--warn);animation:pulse 1.1s infinite}
.dot.err{background:var(--danger)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.toolbar{display:flex;align-items:center;gap:8px}
.toolbar > *{height:34px;box-sizing:border-box}
.toolbar .sep{width:1px;height:20px;background:var(--line);flex:none;align-self:center}
.btn-ghost{display:inline-flex;align-items:center;padding:0 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--line-2)}
.btn-ghost.on{border-color:var(--accent);background:var(--tint);color:var(--accent-strong)}
.btn-ghost:disabled{opacity:.4;cursor:default;background:var(--surface)}

.page-admin #live-toggle{min-height:34px;padding:0 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--muted);
  font-size:13px;font-weight:650}
.page-admin #live-toggle:hover{background:var(--surface-2);border-color:var(--line-2)}
.page-admin #live-toggle.on{border-color:transparent;background:var(--violet-soft);
  color:var(--violet)}
.page-admin #live-toggle.on:hover{background:var(--violet-soft);border-color:transparent;
  filter:brightness(.97)}

.page-admin main{max-width:1680px;width:100%;min-width:0;margin:0 auto;padding:20px 22px 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;flex:1}
.page-admin .card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:18px 20px;display:flex;flex-direction:column}
.page-admin .card > h2{margin:0 0 2px;font-size:14.5px;font-weight:650;letter-spacing:-.005em}
.page-admin .card > p.sub{margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.6}
.page-admin .admin-model-controls{display:grid;gap:14px;min-width:0;padding:4px 0}
.page-admin .admin-provider-group{display:grid;grid-template-columns:145px minmax(0,1fr);gap:12px;align-items:start;min-width:0}
.page-admin .admin-provider-label{margin:0;padding:13px 0;font-size:12px;font-weight:600;line-height:1.5;color:var(--muted)}
.page-admin .admin-provider-control{min-width:0}
.page-admin .admin-provider-config{display:grid;grid-template-columns:148px minmax(0,1fr);align-items:start;gap:12px;min-width:0}
.page-admin .admin-provider-models{min-width:0}
.page-admin .admin-location-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;min-width:0;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.page-admin .admin-location-toggle button{justify-content:center;min-width:0;min-height:44px;padding:6px 8px;border-color:transparent;border-radius:8px;background:transparent;font-size:12px}
.page-admin .admin-location-toggle button[aria-pressed="true"]{border-color:var(--line-2);background:var(--surface);color:var(--ink)}
.page-admin .admin-location-toggle button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.page-admin .admin-provider-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
.page-admin .admin-provider-config .admin-provider-options{grid-template-columns:repeat(var(--provider-count,1),minmax(0,240px))}
.page-admin #adminReconstructionChoices{grid-template-columns:repeat(4,minmax(0,1fr))}
.page-admin .admin-provider-options button{min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:600;line-height:1.4;overflow-wrap:anywhere;cursor:pointer}
.page-admin .admin-provider-options button:hover:not(:disabled){border-color:var(--accent);background:var(--surface-2)}
.page-admin .admin-provider-options button[aria-pressed="true"]{border-color:var(--accent);background:var(--tint);color:var(--accent-strong)}
.page-admin .admin-provider-options button:disabled{opacity:.45;cursor:default}
.page-admin .admin-provider-options button:focus-visible,.page-admin .admin-generation-options select:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.page-admin .admin-settings-status:not(.error){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.page-admin .admin-settings-status.error{margin:8px 0 0;color:var(--danger);font-size:12px;line-height:1.5}
.page-admin .admin-generation-options{display:flex;align-items:center;flex-wrap:wrap;gap:10px 20px;margin-top:10px}
.page-admin .admin-generation-options label{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted)}
.page-admin .admin-generation-options select{min-width:150px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background-color:var(--surface);color:var(--ink);font:inherit}
.page-admin .admin-model-attribution{margin-top:10px;font-size:12px}
@media(max-width:1100px){.page-admin #adminReconstructionChoices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.page-admin .admin-provider-group{grid-template-columns:minmax(0,1fr);gap:8px}.page-admin .admin-provider-label{padding:0}.page-admin .admin-provider-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.page-admin .admin-provider-config{grid-template-columns:minmax(0,1fr);gap:8px}.page-admin .admin-location-toggle{width:148px}.page-admin .admin-provider-config .admin-provider-options{grid-template-columns:repeat(2,minmax(0,1fr))}.page-admin .admin-provider-config .admin-provider-options[data-visible-count="1"]{grid-template-columns:minmax(0,240px)}}
@media(max-width:520px){.page-admin .admin-generation-options label{display:grid;width:100%;gap:5px}.page-admin .admin-generation-options select{width:100%;font-size:16px}}
.page-admin .admin-cloud-services{min-width:0;max-width:840px}
.page-admin .admin-cloud-heading{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;margin-bottom:8px}
.page-admin .admin-cloud-heading h2{margin:0;color:var(--muted);font-size:12px;font-weight:600}
.page-admin #cloud-services-checked{font-size:11px;color:var(--muted)}
.page-admin .cloud-services-table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left;font-size:12px}
.page-admin .cloud-services-table :is(th,td){padding:9px 12px 9px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere;vertical-align:top}
.page-admin .cloud-services-table th{color:var(--muted);font-size:11px;font-weight:500}
.page-admin .cloud-services-table :is(th,td):first-child{width:42%}
.page-admin .cloud-services-table :is(th,td):last-child{padding-right:0;width:33%;font-variant-numeric:tabular-nums}
.page-admin .cloud-service-status[data-state="healthy"]{color:var(--accent-strong)}
.page-admin .cloud-service-status[data-state="unhealthy"]{color:var(--danger)}
.page-admin .cloud-service-status:not([data-state="healthy"]):not([data-state="unhealthy"]),.page-admin .cloud-balance-stale{color:var(--warn)}
.page-admin .cloud-services-note{font-size:11px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:16px;align-items:stretch}
.page-admin .cols > .card{min-width:0;height:100%}
.grow{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.tile label{display:block;color:var(--faint);font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;margin-bottom:5px}
.tile b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.tile span{display:block;margin-top:3px;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.tile.alert b{color:var(--danger)}

.meter{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px}
.meter .name{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.meter .track{position:relative;height:14px;border-radius:7px;background:var(--meter-track);border:1px solid var(--line);overflow:hidden}
.meter .fill{position:absolute;inset:1px auto 1px 1px;border-radius:6px;background:var(--accent);transition:width .4s ease}
.meter .fill.mem{background:var(--accent-soft)}
.meter .fill.hot{background:var(--danger)}
.meter .val{font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.gpu-scroll{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));grid-auto-rows:max-content;align-content:start;gap:12px;overflow-y:auto;flex:1;min-height:0;padding-right:4px;min-width:0}
.page-admin .gpu-scroll > .gpu-row:only-child{grid-column:1/-1}
.gpu-row{border:1px solid var(--line);border-radius:11px;padding:14px;background:var(--surface-2);display:flex;flex-direction:column;gap:12px;min-width:0}
.gpu-monitor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.gpu-monitor-head h2{margin:0;font-size:14.5px;font-weight:650}
.gpu-monitor-state{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.gpu-monitor-state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.gpu-monitor-state[data-state="live"]{color:var(--ok)}
.gpu-monitor-state[data-state="stale"]{color:var(--warn)}
.gpu-monitor-report{margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.5;font-variant-numeric:tabular-nums}
.gpu-model{color:var(--muted);font-size:11px;line-height:1.4}
.gpu-sensors{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.gpu-trend{display:block;width:100%;height:64px;overflow:visible}
.gpu-trend-legend{display:flex;gap:12px;color:var(--muted);font-size:10px}
.gpu-trend-legend span{display:inline-flex;align-items:center;gap:5px}
.gpu-trend-legend i{width:8px;height:8px;border-radius:2px;background:var(--accent)}
.gpu-trend-legend .memory i{background:var(--series-tx)}
.gpu-scroll.is-stale .meter .fill,.gpu-scroll.is-stale .gpu-trend{opacity:.45}
.gpu-head{display:flex;align-items:baseline;gap:8px}
.gpu-head b{font-size:12.5px;font-weight:650;white-space:nowrap}
.gpu-head .env{font-size:11px;color:var(--faint);margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}

.sparkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;grid-auto-rows:148px}
.spark{border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--surface-2);min-width:0;display:flex;flex-direction:column}
.spark h3{margin:0;font-size:10px;font-weight:700;color:var(--faint);letter-spacing:.5px;text-transform:uppercase}
.spark .now{display:flex;gap:4px 10px;align-items:baseline;flex-wrap:wrap;margin:3px 0 6px;font-size:11px;color:var(--muted);min-height:18px;line-height:1.35}
.spark .now b{font-size:14px;font-weight:680;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.spark .now i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:0}
.spark .plot{position:relative;flex:1;min-height:52px}
.spark svg{display:block;width:100%;height:100%;min-height:52px;overflow:visible}

.records{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rec{border:1px solid var(--line);border-radius:11px;background:var(--surface-2);padding:10px 12px;display:grid;gap:8px;min-width:0}
.rec.click{cursor:pointer}
.rec.click:hover{border-color:var(--accent-soft)}
.rec.on{border-color:var(--accent);background:var(--tint)}
.rec.bad{border-color:var(--danger-line);background:var(--danger-bg)}
.rec-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;min-width:0}
.rec-head .who{font-weight:680;font-size:13px;color:var(--ink)}
.rec-head .when{margin-left:auto;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.rec-meta{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:0}
.rec-meta > span{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.rec-meta i{font-style:normal;color:var(--faint)}
.rec-meta b{color:var(--ink-2);font-weight:650}
.rec-note{font-size:11px;color:var(--muted);line-height:1.5;white-space:normal;overflow-wrap:anywhere;word-break:break-word;min-width:0}
.rec-note i{font-style:normal;color:var(--faint)}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:600;border:1px solid var(--line-2);background:var(--surface);color:var(--muted)}
.tag.ok{background:var(--tint);border-color:var(--tint-line);color:var(--accent-strong)}
.tag.err{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.tag.warn,.tag.admin{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.artifacts{padding:12px 0 2px;border-top:1px solid var(--line);margin-top:2px}

.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.filters select{height:32px;padding:0 10px;font:inherit;font-size:12.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;min-width:0}
.filters input{height:32px;padding:0 10px;font:inherit;font-size:12.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;min-width:0;flex:1 1 140px;max-width:220px}
.filters .btn-ghost{height:32px}

.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:11.5px;color:var(--muted)}
.pager .count{margin-right:auto;font-variant-numeric:tabular-nums}
.pager button{min-width:30px;height:28px;padding:0 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:11.5px;cursor:pointer;font-variant-numeric:tabular-nums}
.pager button:hover:not(:disabled){background:var(--surface-2);border-color:var(--line-2)}
.pager button.on{border-color:var(--accent);background:var(--tint);color:var(--accent-strong);font-weight:660}
.pager button:disabled{opacity:.4;cursor:default}
.pager .gap{padding:0 1px;color:var(--faint)}
.pager select{height:28px;padding:0 6px;border-radius:8px;font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:11.5px}
.pager label{display:inline-flex;align-items:center;gap:5px;margin-left:4px}

.blank{display:grid;place-items:center;gap:6px;padding:26px 10px;text-align:center;
  border:1px dashed var(--line-2);border-radius:11px;background:var(--surface-2);
  color:var(--faint);font-size:12.5px;line-height:1.6}
.blank.flat{border:0;background:none;border-radius:0;padding:18px 2px}
.page-admin .gate{flex:none;width:min(420px,calc(100% - 36px));margin:clamp(36px,10vh,100px) auto;
  border:1px solid var(--line);box-shadow:var(--shadow);text-align:left}
.gate .auth-mark{width:32px;height:32px;margin-bottom:20px}
.gate .gate-form{margin-top:22px}
.gate .auth-submit:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

.site-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:7px;padding:22px 24px 30px;color:var(--muted);font-size:11.5px;line-height:1.6}
.site-foot strong{color:var(--ink-2);font-weight:650}
/* Registration links retain the official Chinese text and wrap on small screens. */
.main > .site-foot{padding-top:0}
.site-foot-icp{display:flex;flex:0 0 100%;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 16px;width:100%;max-width:100%;margin:0;text-align:center;font-size:12px}
.site-foot .site-foot-icp a{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 6px;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color .2s ease}
.site-foot .site-foot-icp img{display:block;flex-shrink:0;width:18px;height:18px}
.site-foot .site-foot-icp a:hover{color:var(--ink);text-decoration:underline}
@media(max-width:560px){.site-foot .site-foot-icp a{min-height:40px}}

@media(max-width:1100px){
  .runstate{order:3;width:100%}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
}
@media(max-width:900px){
  .page-admin header{gap:10px;padding:10px 14px}
}
@media(max-width:860px){
  .cols{grid-template-columns:1fr}
  .page-admin .cols > .card{height:auto}
  .sparkgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:132px}
}
@media(max-width:760px){
  .page-admin main{padding:14px 12px 30px}
  .page-admin .card{padding:14px 14px}
  .page-admin .card > h2{font-size:13.5px}
  .page-admin .card > p.sub{margin-bottom:11px}
  .tile b{font-size:20px}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
  .rec{padding:9px 10px}
}
@media(max-width:520px){
  .sparkgrid{grid-template-columns:1fr}
  .runstate .pill{font-size:11px;padding:4px 9px}
  .filters input,.filters select{min-width:0;flex:1}
}

:root[data-theme="dark"] .sidebar { background: rgba(18,22,31,.92); }
:root[data-theme="dark"] .page-index .brand-mark { box-shadow: 0 6px 16px rgba(0,0,0,.35); }
:root[data-theme="dark"] .nav-item { color: #aeb6c6; }
:root[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,.045); color: var(--ink); }
:root[data-theme="dark"] .nav-item.active { color: var(--violet-2); background: linear-gradient(90deg, rgba(139,123,255,.18), rgba(139,123,255,.05)); box-shadow: inset 3px 0 var(--violet); }
:root[data-theme="dark"] .plan-card { background: linear-gradient(145deg, var(--surface), #191d2b); box-shadow: 0 10px 30px rgba(0,0,0,.32); }
:root[data-theme="dark"] .plan-meter { background: #262b3a; }:root[data-theme="dark"] .plan-engine { color: #5fd39a; }:root[data-theme="dark"] .plan-engine.offline { color: #f3b35b; }

:root[data-theme="dark"] .topbar { background: rgba(16,20,29,.82); border-bottom-color: var(--line); }
:root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] .section-eyebrow { color: #9aa0b5; }
:root[data-theme="dark"] .signal-key { color: #aeb6c6; }
:root[data-theme="dark"] .world-card { border-color: rgba(255,255,255,.08); box-shadow: 0 26px 70px rgba(0,0,0,.5), inset 0 0 50px rgba(0,0,0,.35); }
:root[data-theme="dark"] .world-card::after { background: linear-gradient(90deg, rgba(14,17,23,.78), transparent 25%, transparent 72%, rgba(14,17,23,.74)), linear-gradient(0deg, rgba(14,17,23,.72), transparent 35%); }
:root[data-theme="dark"] .float-chip { border-color: rgba(255,255,255,.08); background: rgba(20,24,33,.72); }

:root[data-theme="dark"] .upload-zone { border-color: #333a4d; background: linear-gradient(145deg,#161b26,#12161f); }
:root[data-theme="dark"] .upload-icon { background: var(--surface-3); }
:root[data-theme="dark"] .field span { color: #aeb6c6; }
:root[data-theme="dark"] .field-hint { color: #98a2b3; }
:root[data-theme="dark"] .field select { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .output-panel { background: linear-gradient(180deg, var(--surface), #181c29); border-left-color: var(--line); }
:root[data-theme="dark"] .output-label { color: #aeb6c6; }
:root[data-theme="dark"] .output-choice { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .output-choice:hover { border-color: #4a4470; }
:root[data-theme="dark"] .output-choice.selected { background: rgba(139,123,255,.08); border-color: var(--violet); }
:root[data-theme="dark"] .output-choice > i { border-color: #444c5e; }

:root[data-theme="dark"] .run-panel { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .progress-track { background: #262b3a; }
:root[data-theme="dark"] .stage.done { color: #7ee0b0; background: rgba(40,133,93,.18); }

:root[data-theme="dark"] .project-card { background: var(--surface); box-shadow: 0 10px 28px rgba(0,0,0,.34); }
:root[data-theme="dark"] .project-image { background: #262b3a; }
:root[data-theme="dark"] .project-state.ready { color: #7ee0b0; background: rgba(40,133,93,.18); }

:root[data-theme="dark"] .stat-card { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .dashboard-card { background: var(--surface); box-shadow: 0 12px 38px rgba(0,0,0,.3); }
:root[data-theme="dark"] .data-row { background: var(--surface-2); border-color: var(--line); }
:root[data-theme="dark"] .status-badge { color: var(--ink-2); background: var(--soft); }
:root[data-theme="dark"] .status-badge.success, :root[data-theme="dark"] .status-badge.complete { color: #7ee0b0; background: rgba(40,133,93,.18); }
:root[data-theme="dark"] .status-badge.running, :root[data-theme="dark"] .status-badge.queued, :root[data-theme="dark"] .status-badge.accepted { color: var(--violet-2); background: rgba(139,123,255,.14); }
:root[data-theme="dark"] .status-badge.failed { color: #f0a8a0; background: rgba(163,73,69,.2); }
:root[data-theme="dark"] .empty-state { border-color: #333a4d; }
:root[data-theme="dark"] .data-row[data-job-id]:hover, :root[data-theme="dark"] .data-row[data-job-id]:focus-visible { border-color: #4a4470; box-shadow: 0 9px 22px rgba(0,0,0,.35); }

:root[data-theme="dark"] .billing-hero > div { background: var(--surface); }
:root[data-theme="dark"] .package-card { background: linear-gradient(145deg, var(--surface), #191d2a); }
:root[data-theme="dark"] .package-card.featured { border-color: #4a4470; background: linear-gradient(145deg, var(--surface), #211d33); }
:root[data-theme="dark"] .billing-notice { color: var(--violet-2); }

:root[data-theme="dark"] .security-note { border-color: #3a3468; background: rgba(86,75,152,.14); color: #cbc6ef; }

:root[data-theme="dark"] .account-menu { background: rgba(18,22,31,.97); border-color: var(--line); }

:root[data-theme="dark"] .auth-modal { background: var(--surface); }
:root[data-theme="dark"] .auth-tabs { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .auth-tabs button.active { background: color-mix(in srgb, var(--violet) 24%, var(--surface-3)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 65%, transparent), 0 2px 6px rgba(0,0,0,.2); }
:root[data-theme="dark"] .auth-modal label > span { color: #aeb6c6; }
:root[data-theme="dark"] .auth-modal input { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .auth-error { color: #f0a8a0; background: rgba(163,73,69,.2); }

:root[data-theme="dark"] .scene-download-card { background: var(--surface-2); border-color: var(--line); }:root[data-theme="dark"] .seg-btn.active { background: var(--surface-2); }
:root[data-theme="dark"] .scene-download-card .download-format { color: var(--violet-2); }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .boot-ring { animation: none; border-top-color: var(--accent); }
  .skl { animation: none; background: var(--surface-3); }
}

.featured-scroll { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding: 2px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.featured-scroll .project-card { flex: 0 0 300px; scroll-snap-align: start; cursor: pointer; }
.featured-scroll::-webkit-scrollbar { height: 8px; }
.featured-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }
.output-panel .generate-button { margin-top: 0; margin-bottom: 6px; }
/* Fill the sidebar without letting offscreen thumbnails determine the grid row
   height. The gallery aspect ratio reserves a minimum of one thumbnail. */
.output-featured { display: flex; flex: 1 0 auto; flex-direction: column; min-height: 0; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--line); }
.output-featured .section-head { flex: none; flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: 10px; }
.output-featured .section-head h2 { margin: 2px 0 0; font-size: 13px; }
.output-featured .featured-hint { color: var(--faint); font-size: 9.5px; }
.output-featured .featured-scroll { flex: 1 0 auto; width: 100%; aspect-ratio: 16 / 9; min-height: 0; contain: size; display: grid; grid-template-columns: minmax(0,1fr); grid-auto-rows: max-content; align-content: start; gap: 8px; overflow-x: hidden; overflow-y: auto; padding: 0 2px 0 0; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.output-featured .project-card { position: relative; flex: none; display: block; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden; border-radius: 10px; box-shadow: none; scroll-snap-align: start; }
.output-featured .project-card:hover { transform: none; box-shadow: 0 6px 16px rgba(50,52,78,.10); }
.output-featured .project-image { aspect-ratio: auto; height: 100%; min-height: 0; }
.output-featured .project-image img { height: 100%; object-fit: cover; }
.output-featured .project-image > span { display: none; }
.output-featured .project-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 8px; background: linear-gradient(180deg, rgba(10,12,18,0), rgba(10,12,18,.8)); }
.output-featured .project-meta b { color: #fff; font-size: 11px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.output-featured .project-meta small,.output-featured .project-state { display: none; }
.featured-hint { color: var(--faint); font-size: 11px; }

.metric-warn b{color:var(--warn,#e0a03a);}

/* Shared responsive layout: keep controls and content available at every width. */
@media (max-width: 1280px) {
  .content { padding-inline: 24px; }
  .hero { gap: 24px; }
  .hero h1 { font-size: clamp(36px, 4vw, 52px); }
  .studio-grid { grid-template-columns: minmax(0,1fr) 280px; }
  .project-grid, .package-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-detail-grid { grid-template-columns: minmax(0,1fr); }
  .project-detail-summary { contain: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; column-gap: 24px; overflow: visible; }
  .project-detail-summary > .card-head, .project-detail-summary #projectDetailSummary { grid-column: 1; }
  .project-detail-summary .summary-stages { grid-column: 2; grid-row: 1 / span 2; min-height: 0; margin-top: 0; padding-top: 0; border-top: 0; }
  .project-detail-summary .stage-squares { flex: none; height: clamp(180px,28dvh,320px); max-height: none; }
  .project-detail-summary #projectDetailSummary { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 1024px) {
  .sidebar { z-index: 40; width: min(300px, calc(100% - 48px)); height: 100dvh; padding-bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-102%); transition: transform .24s ease; box-shadow: 18px 0 50px rgba(20,22,35,.14); }
  .sidebar.open { transform: translateX(0); }
  .navigation-close { display: grid; position: absolute; top: 16px; right: 12px; width: 44px; height: 44px; font-size: 26px; }
  .navigation-backdrop { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(10,12,20,.5); backdrop-filter: blur(3px); }
  .page-index.nav-open { overflow: hidden; }
  .main { padding-left: 0; }
  .mobile-menu { display: grid; flex: none; width: 44px; height: 44px; }
  .topbar { justify-content: space-between; gap: 12px; padding: 0 20px; }
  .top-actions { margin-left: auto; }
  .content { padding: 24px 20px 48px; }
  .hero { min-height: 0; margin-bottom: 24px; }
  .hero h1 { font-size: clamp(34px, 5vw, 48px); }
  .hero-visual { height: 230px; }
  .studio-grid, .result-grid, .project-detail-grid { grid-template-columns: minmax(0,1fr); }
  .output-panel { border-top: 1px solid var(--line); border-left: 0; }
  .output-featured { flex: none; }
  .output-featured .featured-scroll { flex: none; display: flex; aspect-ratio: auto; height: 168px; overflow-x: auto; overflow-y: hidden; padding: 0 0 6px; scroll-snap-type: x proximity; }
  .output-featured .project-card { flex: 0 0 min(280px, 85%); }
  .run-summary { position: static; width: auto; border-top: 1px solid rgba(255,255,255,.08); border-left: 0; }
  .run-summary #summaryContent { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
  .stage-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .stats-inline { width: 100%; }
  .stage-squares { aspect-ratio: auto; max-height: 320px; }
  .data-row { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  .data-row .status-badge { grid-column: 2; grid-row: 1; }
  .data-primary small, .data-cell { overflow-wrap: anywhere; }
  .scene-download-card { grid-template-columns: 46px minmax(0,1fr) auto; }
}
@media (max-width: 760px) {
  .project-list-row .data-primary { gap: 10px; }
  .project-row-thumbnail { flex-basis: 52px; width: 52px; }
  .hero { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .hero h1 { font-size: clamp(34px, 7vw, 48px); line-height: 1.08; }
  .hero-visual { height: auto; aspect-ratio: 2.8; min-height: 150px; max-height: 210px; }
  .world-card { width: min(420px, 94%); }
  .float-chip { display: none; }
  .hero-copy > p { font-size: 14px; }
  .billing-hero { grid-template-columns: minmax(0,1fr); }
  .field select, .auth-modal input { font-size: 16px; min-height: 44px; }
  .scene-download-card { grid-template-columns: 42px minmax(0,1fr); }
  .scene-download-card .download-links { grid-column: 1/-1; flex-wrap: wrap; }
  .button.compact, .button.mini, .seg-btn, .auth-tabs button { min-height: 40px; }
  .package-card { min-height: 162px; }
  .package-card button { height: 40px; }
}
@media (max-width: 560px) {
  .topbar { height: 64px; gap: 4px; padding-inline: 8px; }
  .top-actions { gap: 4px; }
  .top-actions .icon-button { width: 40px; height: 44px; padding: 0; justify-content: center; font-size: 16px; }
  .credit-unit { display: none; }
  .content { padding: 22px 14px 36px; }
  .eyebrow { font-size: 9px; letter-spacing: .12em; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 44px); }
  .signal-key { gap: 12px; margin-top: 18px; }
  .studio-tabs { height: 56px; padding: 0 10px; }
  .studio-status { font-size: 10px; }
  .studio-main, .output-panel, .run-panel, .dashboard-card { padding: 16px; }
  .notification-card { gap: 10px; padding: 14px; }
  .notification-icon { width: 32px; height: 32px; }
  .notification-meta { gap: 4px; margin-top: 8px; }
  .notification-meta a { min-height: 40px; }
  .upload-copy strong { font-size: 14px; }
  .upload-copy p { font-size: 12px; }
  .field-row { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .project-grid, .package-grid { grid-template-columns: minmax(0,1fr); }
  .stats-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .stat-card strong { overflow-wrap: anywhere; }
  .page-title-copy { flex-basis: 100%; }
  .run-head, .section-head { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
  .card-head { gap: 12px; }
  .stage-list { grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); }
  .run-summary #summaryContent { grid-template-columns: minmax(0,1fr); }
  .project-detail-header { gap: 12px; }
  .project-detail-header > .status-badge { margin-top: 28px; }
  .project-preview-card { padding: 8px; }
  .project-timing { padding-top: 10px; }
  .project-detail-summary #projectDetailSummary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-detail-summary { display: flex; }
  .project-detail-summary .summary-stages { flex: none; min-height: 0; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
  .project-detail-summary .stage-squares { height: auto; max-height: 260px; }
  .timing-legend { gap: 4px 12px; }
  .project-timing .timing-item { font-size: 10px; }
  .account-menu { right: 12px; left: 12px; width: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
  .auth-modal { padding: 24px 20px; max-height: calc(100dvh - 36px); overflow-y: auto; }
  .toast { left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); max-width: none; }
}
@media (max-width: 380px) {
  .stage-list { grid-template-columns: minmax(0,1fr); }
  .topbar { padding-inline: 4px; }
  .top-actions { gap: 2px; }
}
.payment-methods { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:12px; min-width:0; padding:0; margin:0 0 24px; border:0; }
.payment-methods legend { margin-bottom:10px; font-size:13px; font-weight:600; }
[data-provider="wechat"] { --pay-brand:#169650; }
[data-provider="alipay"] { --pay-brand:#1677ff; }
.payment-method { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:9px; min-height:76px; padding:14px 18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); cursor:pointer; transition:border-color .16s,background .16s,box-shadow .16s; }
.payment-method:not(.unavailable):has(input:checked) { border-color:var(--pay-brand); background:color-mix(in srgb,var(--pay-brand) 6%,var(--surface)); box-shadow:0 0 0 1px var(--pay-brand) inset; }
.payment-method:focus-within { outline:2px solid var(--pay-brand); outline-offset:3px; }
.payment-brand-logo { display:block; width:36px; max-width:100%; height:36px; object-fit:contain; }
.payment-method-name { font-size:13px; font-weight:600; }
.payment-method input { width:16px; height:16px; margin:0; accent-color:var(--pay-brand); }
.payment-method small { grid-column:1/-1; font-size:12px; opacity:.75; }
.payment-method.unavailable { --pay-brand:var(--muted); color:var(--muted); border-color:var(--line); background:var(--surface-2); box-shadow:none; cursor:not-allowed; }
.payment-method.unavailable .payment-brand-logo { filter:grayscale(1); opacity:.5; }

.checkin-card { display:grid; gap:16px; }
.checkin-card[hidden] { display:none; }
.checkin-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:16px 24px; }
.checkin-head h2 { margin:0 0 4px; font-size:16px; line-height:1.5; letter-spacing:-.02em; }
.checkin-head p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.checkin-button { flex:none; min-width:152px; min-height:42px; padding:10px 18px; border:1px solid transparent; border-radius:10px; background:var(--violet); color:#fff; font:inherit; font-size:12px; font-weight:600; line-height:1.5; cursor:pointer; transition:background .15s,box-shadow .15s; }
.checkin-button:hover:not(:disabled) { background:var(--violet-2); }
.checkin-button:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.checkin-button:disabled { border-color:var(--line); background:var(--soft); color:var(--muted); cursor:default; }
:root[data-theme="dark"] .checkin-button:not(:disabled) { color:var(--canvas); }
.checkin-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.checkin-day { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px 6px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--muted); }
.checkin-day-label { white-space:nowrap; font-size:12px; line-height:18px; font-weight:600; font-variant-numeric:tabular-nums; }
.checkin-day time { white-space:nowrap; font-size:10px; line-height:15px; font-variant-numeric:tabular-nums; }
.checkin-day.today { border-color:var(--violet); box-shadow:0 0 0 1px var(--violet) inset; color:var(--violet); background:var(--violet-soft); }
.checkin-day.done { color:var(--violet); background:var(--violet-soft); }
.checkin-day-state { position:absolute; top:3px; right:6px; font-size:10px; line-height:1; }
.checkin-meta { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:8px 16px; min-width:0; font-size:11px; line-height:20px; color:var(--muted); }
.checkin-status { min-width:0; margin:0; font-size:inherit; line-height:inherit; color:var(--violet); }
.checkin-meta > .checkin-status { grid-column:1; }
.checkin-status.error { color:var(--danger); }
.checkin-reset { grid-column:2; justify-self:end; text-align:right; }
@media (max-width:1000px) {
  .checkin-week { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:600px) {
  .checkin-head { grid-template-columns:minmax(0,1fr); gap:12px; }
  .checkin-button { justify-self:start; }
  .checkin-meta { grid-template-columns:minmax(0,1fr); gap:4px; }
  .checkin-meta > .checkin-status,.checkin-reset { grid-column:1; justify-self:start; text-align:left; }
}
@media (max-width:480px) {
  .checkin-week { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .checkin-button { width:100%; }
}

/* Shared navigation controls retain each page's account and workspace actions. */
.nav-pill { display:inline-flex; align-items:center; justify-content:center; flex:none; gap:8px; height:44px; min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:999px; background:color-mix(in srgb,var(--surface) 85%,transparent); color:var(--ink); font:inherit; font-size:14px; font-weight:600; line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:background .15s,border-color .15s,color .15s; }
.nav-pill:hover, .nav-pill[aria-expanded="true"] { border-color:var(--violet); background:var(--violet-soft); color:var(--violet); }
.nav-pill:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.nav-pill .nav-icon { width:19px; height:19px; flex:none; }
.nav-pill .nav-chevron { width:13px; height:13px; flex:none; transition:transform .15s; }
.nav-pill[aria-expanded="true"] .nav-chevron { transform:rotate(180deg); }
.nav-theme { width:44px; padding:0; }
.nav-language { min-width:100px; }
.language-menu-wrap { position:relative; flex:none; }
.language-menu { position:absolute; top:calc(100% + 9px); right:0; z-index:65; display:grid; width:172px; max-width:calc(100vw - 24px); padding:6px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.language-menu button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:42px; padding:10px 12px; border:0; border-radius:10px; background:transparent; color:var(--ink); font:inherit; font-size:13px; font-weight:500; line-height:1.4; text-align:left; cursor:pointer; }
.language-menu button:hover, .language-menu button:focus-visible, .language-menu button[aria-pressed="true"] { background:var(--violet-soft); color:var(--violet); }
.language-menu button[aria-pressed="true"]::after { content:"✓"; }
.language-menu button:focus-visible { outline:2px solid var(--violet); outline-offset:-2px; }
.language-error { margin:6px; color:var(--danger); font-size:12px; line-height:1.5; white-space:normal; }
.nav-sign-in, .page-admin a.nav-sign-in { min-width:96px; padding-inline:23px; border-color:var(--ink); background:var(--ink); color:var(--canvas); }
.nav-sign-in:hover, .page-admin a.nav-sign-in:hover { border-color:var(--violet); background:color-mix(in srgb,var(--ink) 90%,var(--violet)); color:var(--canvas); box-shadow:0 0 0 3px var(--violet-soft); }
.nav-sign-in:disabled { opacity:.7; cursor:wait; box-shadow:none; }
.page-index:not([data-session-state="ready"]) #profileButton .account-chevron { visibility:hidden; }
.toolbar .language-menu-wrap { height:44px; }
.account-toggle { display:flex; align-items:center; gap:9px; width:184px; max-width:100%; height:44px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.account-toggle:hover, .account-toggle[aria-expanded="true"] { background:var(--soft); border-color:var(--violet); }
.account-toggle:disabled { opacity:.7; cursor:wait; }
.account-toggle:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
.account-toggle .avatar { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:50%; background:var(--violet-soft); color:var(--violet); font-size:12px; font-weight:650; }
.account-copy { display:flex; flex:1; flex-direction:column; min-width:0; gap:2px; }
.account-copy b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.3; font-weight:650; }
.account-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; line-height:1.3; color:var(--muted); font-variant-numeric:tabular-nums; }
.account-copy .credit-value { color:var(--violet); font-weight:600; }
.account-copy .credit-unit { display:inline; }
.account-toggle .account-chevron { width:16px; height:16px; flex:none; color:var(--muted); transition:transform .15s; }
.account-toggle[aria-expanded="true"] .account-chevron { transform:rotate(180deg); }
.account-menu { top:76px; right:34px; bottom:auto; left:auto; width:224px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 90px); padding:7px; border-radius:16px; background:var(--surface); }
.page-admin .account-menu { z-index:65; }
.account-menu-summary { display:grid; gap:5px; margin:0 6px 4px; padding:10px 6px 14px; border-bottom:1px solid var(--line); }
.account-menu-summary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.account-menu-summary small { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.account-menu > :is(a,button) { min-height:42px; margin-top:3px; padding:10px 12px; border-radius:7px; background:transparent; font-size:12.5px; font-weight:550; }
.account-menu > :first-child { margin-top:0; }
.account-menu :is(#logoutButton, #consoleSignOut) { border-top:1px solid var(--line); border-radius:0 0 7px 7px; color:var(--danger, #d44949); }
.account-toggle [hidden], .account-menu [hidden] { display:none!important; }
@media(max-width:600px) {
  .top-actions { gap:6px; }
  .nav-pill { height:40px; min-height:40px; gap:6px; padding-inline:12px; font-size:12px; }
  .nav-theme { width:40px; padding:0; }
  .nav-language { min-width:86px; }
  .nav-sign-in, .page-admin a.nav-sign-in { min-width:76px; padding-inline:15px; }
  .toolbar .language-menu-wrap { height:40px; }
  .page-admin .toolbar { flex-wrap:wrap; justify-content:flex-end; gap:6px; }
  .top-actions .icon-button { width:32px; }
  .account-toggle { width:152px; padding:5px 7px; gap:6px; }
  .account-toggle .avatar { width:24px; height:24px; }
}
@media(max-width:360px) {
  .top-actions { gap:4px; }
  .nav-pill { height:38px; min-height:38px; }
  .nav-theme { width:38px; }
  .nav-language { min-width:80px; padding-inline:9px; }
  .nav-sign-in, .page-admin a.nav-sign-in { min-width:70px; padding-inline:12px; }
  .account-toggle { width:130px; }
  .toolbar .language-menu-wrap { height:38px; }
}


/* Shared payment dialog layout. Provider symbols remain separate from labels. */
#paymentModal {
  padding: 16px;
  background: rgba(13, 18, 25, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overscroll-behavior: contain;
}

.checkout-dialog {
  position: relative;
  width: min(392px, 100%);
  min-width: 0;
  max-height: calc(100dvh - 32px);
  margin: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(9, 15, 24, .22);
  text-align: left;
  scrollbar-width: thin;
}

.checkout-dialog [hidden] { display: none !important; }
.checkout-dialog .checkout-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.checkout-dialog .checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.checkout-dialog .payment-provider-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.checkout-dialog .payment-provider-badge img {
  display: block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.checkout-dialog .checkout-close {
  display: grid;
  flex: 0 0 32px;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.checkout-dialog .checkout-close:hover { background: var(--surface-2); color: var(--ink); }
.checkout-dialog .checkout-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.checkout-dialog .checkout-body { padding: 22px 24px 20px; text-align: center; }
.checkout-dialog .checkout-summary { display: grid; gap: 5px; margin: 0; }
.checkout-dialog .checkout-amount { color: var(--ink); font-size: 38px; font-weight: 650; line-height: 1.15; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.checkout-dialog .checkout-credits { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
.checkout-dialog .checkout-credits b { font-weight: 500; }
.checkout-dialog .checkout-qr {
  display: grid;
  place-items: center;
  width: 216px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 20px auto 0;
  padding: 8px;
  border: 1px solid #e4e8e9;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
.checkout-dialog .checkout-qr img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; object-fit: contain; }
.checkout-dialog .checkout-qr > [hidden] { display: none !important; }
.checkout-dialog .checkout-cashier { position: relative; width: 160px; height: 160px; overflow: hidden; }
/* Alipay adds 4px below its 198px QR. Reserve that space before scaling the
   complete code to match WeChat's quiet zone, including existing signed URLs. */
.checkout-dialog .checkout-frame { position: absolute; inset: 0 auto auto 0; display: block; width: 198px; height: 206px; max-width: none; border: 0; background: #fff; color-scheme: light; transform: scale(.8080808081); transform-origin: top left; }
.checkout-dialog .checkout-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.checkout-dialog .checkout-state { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.checkout-dialog .checkout-state:has(.checkout-status:only-child) { justify-content: center; }
.checkout-dialog .checkout-status { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: left; }
.checkout-dialog .checkout-status .dot,
.checkout-dialog .checkout-status[data-state]::before { content: ''; display: block; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--pay-brand, #169650); animation: none; }
.checkout-dialog .checkout-status .dot.err,
.checkout-dialog .checkout-status[data-state="error"]::before { background: var(--danger); }
.checkout-dialog .checkout-status[data-state="error"] { color: var(--danger); }
.checkout-dialog .checkout-status[data-state="success"] { color: var(--accent-strong); }
.checkout-dialog .checkout-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 10px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.checkout-dialog .checkout-details { min-width: 0; }
.checkout-dialog .checkout-details summary { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; color: var(--muted); font-size: 11px; line-height: 1.5; list-style: none; cursor: pointer; }
.checkout-dialog .checkout-details summary::-webkit-details-marker { display: none; }
.checkout-dialog .checkout-details summary::after { content: ''; width: 5px; height: 5px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.checkout-dialog .checkout-details[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.checkout-dialog .checkout-order { display: block; margin: 0 0 8px; color: var(--muted); font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.checkout-dialog .checkout-order code { display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; user-select: all; }
.checkout-dialog .checkout-cancel { flex-shrink: 0; min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; }
.checkout-dialog .checkout-cancel:hover:not(:disabled),
.checkout-dialog .checkout-details summary:hover { color: var(--ink); }
.checkout-dialog .checkout-cancel:disabled { opacity: .5; cursor: default; }
.checkout-dialog :is(button, summary):focus-visible { outline: 2px solid var(--pay-brand, var(--accent)); outline-offset: 3px; border-radius: 6px; }

@media (max-width: 380px) {
  .checkout-dialog .checkout-header { padding-inline: 16px; }
  .checkout-dialog .checkout-body { padding: 20px 18px 18px; }
  .checkout-dialog .checkout-footer { padding-inline: 16px; }
  .checkout-dialog .checkout-amount { font-size: 34px; }
  .checkout-dialog .checkout-state { gap: 10px; }
}


/* API documentation uses the shared dashboard cards and compact buttons. */
.rest-docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; color: var(--ink); }
.rest-docs .docs-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px 20px; min-width: 0; margin: 0; scroll-margin-top: 90px; }
.rest-docs .docs-endpoint { grid-column: 1; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 34px; margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.rest-docs code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.rest-docs .docs-endpoint code { min-width: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
.rest-docs .docs-method { flex: none; padding: 5px 8px; border-radius: 6px; background: var(--violet-soft); color: var(--violet); font: 700 11px/1.4 ui-monospace, monospace; letter-spacing: .02em; }
.rest-docs .docs-section > p { grid-column: 1 / -1; max-width: 90ch; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.rest-docs pre { grid-column: 1 / -1; min-width: 0; margin: 2px 0 0; padding: 16px 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--ink-2); line-height: 1.75; tab-size: 4; }
.rest-docs pre:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.rest-docs .docs-copy { grid-column: 2; grid-row: 1; justify-self: end; white-space: nowrap; }
.rest-docs .docs-copy:hover { background: var(--soft); }
.rest-docs .docs-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  .rest-docs .docs-section { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rest-docs .docs-endpoint { align-items: flex-start; gap: 8px; }
  .rest-docs .docs-endpoint code { font-size: 13px; }
  .rest-docs pre { padding: 14px; }
  .rest-docs .docs-copy { grid-column: 1; grid-row: auto; }
}

/* Payment artwork is loaded directly from each provider's official CDN. */
img[src^="https://gtimg.wechatpay-global.com/pay_en/img/common/logo.svg"] { object-fit: fill; }

/* Refund records */
.refunds-section { margin-top: 24px; min-width: 0; }
.refunds-section h2 { margin: 0 0 10px; }
.refunds-section > p { color: inherit; opacity: .75; line-height: 1.6; }
.refunds-section table { width: 100%; border-collapse: collapse; font-size: 13px; }
.refunds-section th, .refunds-section td { padding: 12px 10px; text-align: left; border-bottom: 1px solid color-mix(in srgb,currentColor 14%,transparent); vertical-align: top; }
.refunds-section td:first-child { max-width: 200px; overflow-wrap: anywhere; font-family: ui-monospace,monospace; font-size: 11px; }
.refunds-section small { display: block; margin-top: 5px; opacity: .7; }
.refunds-section .table-scroll { overflow-x: auto; }
.refunds-section .button { white-space: nowrap; min-height: 34px; font-size: 12px; }
.refund-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; }
.refund-filter { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.refund-filter select { width: auto; max-width: 220px; }

/* Admin refunds follow the console's spacing, controls and theme tokens. */
.refunds-section[data-refund-mode="admin"] { margin-top: 0; }
.refunds-section[data-refund-mode="admin"] .refund-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.refunds-section[data-refund-mode="admin"] .refund-heading-copy { min-width: 0; flex: 1; }
.refunds-section[data-refund-mode="admin"] .refund-heading h2 { margin: 0 0 4px; font-size: 15px; font-weight: 650; letter-spacing: -.005em; }
.refunds-section[data-refund-mode="admin"] .refund-heading .sub { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.refunds-section[data-refund-mode="admin"] .refund-filter { display: grid; flex: none; align-items: start; gap: 6px; margin: 0; min-width: 220px; }
.refunds-section[data-refund-mode="admin"] .refund-filter > span { color: var(--muted); font-size: 11px; font-weight: 600; }
.refunds-section[data-refund-mode="admin"] .refund-filter select { width: 100%; max-width: 260px; }
.refunds-section[data-refund-mode="admin"] .table-scroll { border: 1px solid var(--line); border-radius: 11px; }
.refunds-section[data-refund-mode="admin"] .table-scroll:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.refunds-section[data-refund-mode="admin"] table { min-width: 880px; font-size: 12px; line-height: 1.6; }
.refunds-section[data-refund-mode="admin"] th, .refunds-section[data-refund-mode="admin"] td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
.refunds-section[data-refund-mode="admin"] th { background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.refunds-section[data-refund-mode="admin"] td { color: var(--ink-2); }
.refunds-section[data-refund-mode="admin"] tbody tr:last-child td { border-bottom: 0; }
.refunds-section[data-refund-mode="admin"] .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.refunds-section[data-refund-mode="admin"] [data-refund-user] { font-weight: 600; overflow-wrap: anywhere; }
.refunds-section[data-refund-mode="admin"] [data-refund-date] { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.refunds-section[data-refund-mode="admin"] [data-refund-reason] { min-width: 140px; max-width: 280px; overflow-wrap: anywhere; }
.refunds-section[data-refund-mode="admin"] [data-refund-review] { max-width: 280px; color: var(--muted); font-size: 11px; opacity: 1; }
.refunds-section[data-refund-mode="admin"] [data-refund-review]:empty { display: none; }
.refunds-section[data-refund-mode="admin"] .tag { max-width: 180px; }
.refunds-section[data-refund-mode="admin"] [data-refund-status]:is([data-state="paid"], [data-state="succeeded"]) { background: var(--tint); border-color: var(--tint-line); color: var(--ok); }
.refunds-section[data-refund-mode="admin"] [data-refund-status]:is([data-state="pending_review"], [data-state="approved"], [data-state="processing"]) { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.refunds-section[data-refund-mode="admin"] [data-refund-status]:is([data-state="failed"], [data-state="action_required"]) { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger); }
.refunds-section[data-refund-mode="admin"] .refund-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.refunds-section[data-refund-mode="admin"] .btn-ghost { justify-content: center; min-height: 32px; padding-inline: 10px; font-size: 11.5px; white-space: nowrap; }
.refunds-section[data-refund-mode="admin"] .refund-approve { border-color: var(--violet); background: var(--violet-soft); color: var(--violet); }
.refunds-section[data-refund-mode="admin"] .refund-reject { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger); }
.refunds-section[data-refund-mode="admin"] .refund-reject:hover:not(:disabled) { border-color: var(--danger); }
.refunds-section[data-refund-mode="admin"] .blank { margin: 0; padding: 24px 18px; opacity: 1; }
.refunds-section[data-refund-mode="admin"] .refund-pagination { justify-content: flex-start; gap: 6px; margin-top: 12px; }
.refunds-section[data-refund-mode="admin"] [data-refund-action-empty] { color: var(--faint); }
.refunds-section[data-refund-mode="admin"] [data-refund-message] { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--danger-line); border-radius: 9px; background: var(--danger-bg); color: var(--danger); font-size: 12px; line-height: 1.5; opacity: 1; }
@media (max-width: 640px) {
  .refunds-section[data-refund-mode="admin"] .refund-heading { flex-direction: column; gap: 14px; }
  .refunds-section[data-refund-mode="admin"] .refund-filter { width: 100%; min-width: 0; }
  .refunds-section[data-refund-mode="admin"] .refund-filter select { max-width: none; }
}

.page-admin .admin-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;min-width:0}
.page-admin .admin-toolbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.page-admin .admin-toolbar .runstate{min-width:0;order:0;width:auto}
.page-admin .admin-toolbar :is(#live-toggle,.btn-ghost){min-height:44px}
.page-admin .admin-hi3d-options select{appearance:none;-webkit-appearance:none;background-image:var(--select-arrow);background-position:right 12px center;background-repeat:no-repeat;background-size:16px 16px;padding-right:36px;cursor:pointer}
.page-index .field select,.page-admin :is(.filters,.pager,.refund-filter) select{appearance:none;-webkit-appearance:none;background-image:var(--select-arrow);background-position:right 12px center;background-repeat:no-repeat;background-size:16px 16px;padding-right:36px;font-weight:400;cursor:pointer}
.page-index .field select:disabled,.page-admin :is(.filters,.pager,.refund-filter) select:disabled{cursor:default}
.page-admin .admin-toolbar .btn-ghost,.page-admin #admin-retry{min-height:36px;justify-content:center}
.page-admin .admin-refresh-error{border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--muted);background:var(--surface-2);margin:0 0 16px}
.page-admin .admin-analytics .tiles{margin:16px 0}
.page-admin .admin-analytics .table-scroll{min-width:0;max-width:100%;overflow-x:auto}
.page-admin .admin-analytics-table{width:100%;border-collapse:collapse;font-size:13px}
.page-admin .admin-analytics-table th,.page-admin .admin-analytics-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.page-admin .admin-analytics-table th{font-weight:600;color:var(--muted)}
.page-admin .spark .plot svg{position:absolute;inset:0}

/* Native selects keep their keyboard behavior and share one dropdown affordance. */

/* Labels and values have separate typography; compact console controls share a baseline. */
.page-admin .record-filters{align-items:flex-end}
.page-admin .record-filter-field{display:grid;gap:6px;flex:1 1 180px;min-width:0;max-width:240px;margin:0;color:var(--muted);font-size:11px;font-weight:600}
.page-admin .record-filter-field :is(input,select){width:100%;max-width:none;min-width:0;margin:0;height:36px;font-size:12.5px;font-weight:400}
.page-admin .record-filters .btn-ghost{height:36px;min-height:36px;justify-content:center}
.page-admin .pager :is(button,select){height:36px;min-height:36px;font-size:12px}
.page-admin .pager button{min-width:36px}
.page-admin .refunds-section[data-refund-mode="admin"] :is(.btn-ghost,[data-refund-page]){height:36px;min-height:36px;justify-content:center}
.page-admin .refunds-section[data-refund-mode="admin"] .refund-filter select{height:36px;min-height:36px;margin:0;font-weight:400}

:root{--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23687082' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root[data-theme="dark"]{--select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23939db2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media(max-width:600px){.page-admin .record-filter-field{flex-basis:100%;max-width:none}.page-admin .record-filter-field :is(input,select){height:40px;font-size:16px}.page-admin .record-filters .btn-ghost{min-height:40px;flex:1}.page-admin .pager :is(button,select),.page-admin .refunds-section[data-refund-mode="admin"] :is(.btn-ghost,[data-refund-page],.refund-filter select){min-height:40px;height:40px}}
@media(forced-colors:active){.page-index .field select,.page-admin select{appearance:auto;-webkit-appearance:auto;background-image:none}}
@media(max-width:600px){.page-admin .pager select,.page-admin .refunds-section[data-refund-mode="admin"] .refund-filter select{font-size:16px}}

/* Constrain populated grid content, not just loading placeholders. */
.page-admin main > *, .page-admin .card > *, .records, .rec-head > * { min-width: 0; }
.rec-head .who { overflow-wrap: anywhere; }
.page-admin .tiles { min-width: 0; }
.tile { min-width: 0; overflow-wrap: anywhere; }
.review-log-entry > summary { min-width: 0; }
.review-log-entry > summary small { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .project-detail-header { flex-wrap: wrap; gap: 10px; }
  .project-detail-header > .status-badge { margin-top: 0; }
  .review-log-dialog { padding: 16px; }
  .review-log-entry > summary { grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; }
  .review-log-entry > summary small { grid-column: 1 / -1; }
}
@media (max-height: 520px) {
  .page-admin > header { position: static; }
  .modal-backdrop { padding: 12px; }
  .auth-modal { max-height: calc(100dvh - 24px); }
}