@charset "UTF-8";
:root {
  color-scheme: dark;
  --night: #070d19;
  --night-soft: #0a1320;
  --surface: #0e1826;
  --surface-raised: #132031;
  --input-bg: #0b1421;
  --nav-bg: #080f1b;
  --nav-text: #8290a0;
  --text: #f3f0e8;
  --muted: #9aa7b5;
  --faint: #8391a1;
  --line: rgba(194, 209, 226, .14);
  --line-strong: rgba(230, 199, 131, .32);
  --gold: #e6c783;
  --gold-bright: #f3d797;
  --gold-ink: #211a0e;
  --gold-ink-soft: #5d4b29;
  --gold-soft: rgba(230, 199, 131, .09);
  --gold-soft-strong: rgba(230, 199, 131, .14);
  --jade: #83b6a5;
  --jade-text: #b9d9cd;
  --jade-soft: rgba(131, 182, 165, .09);
  --jade-line: rgba(131, 182, 165, .22);
  --danger: #e4a58d;
  --danger-text: #edb9a5;
  --danger-soft: rgba(228, 165, 141, .09);
  --danger-line: rgba(228, 165, 141, .3);
  --progress-bg: #263142;
  --avatar-bg: #1a2738;
  --avatar-text: #b5c0cc;
  --hover-bg: rgba(255, 255, 255, .025);
  --backdrop: rgba(2, 6, 13, .82);
  --shadow: 0 12px 30px rgba(0, 0, 0, .3);
  --standard-glow: #122237;
  --login-glow: #1b2d46;
  --code-bg: #050a12;
  --code-text: #e9edf2;
  --code-muted: #dce5ed;
  --code-border: #2a3748;
  --code-inline-bg: #1a2738;
  --scene-bg: #050a18;
  --scene-button: rgba(6, 13, 24, .86);
  --scene-text: #f3f0e8;
  --scene-muted: #a9b4c0;
  --scene-accent: #f3d797;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}
:root[data-theme="ink"] {
  color-scheme: dark;
  --night: #101214; --night-soft: #131619; --surface: #181b1f; --surface-raised: #20242a;
  --input-bg: #14171b; --nav-bg: #0c0e10; --nav-text: #a7adb5;
  --text: #f2f3f5; --muted: #a7adb5; --faint: #929aa3;
  --line: rgba(232, 236, 240, .12); --line-strong: rgba(215, 196, 154, .34);
  --gold: #d7c49a; --gold-bright: #e7d7b5; --gold-ink: #1b1a17; --gold-ink-soft: #5e523b;
  --gold-soft: rgba(215, 196, 154, .09); --gold-soft-strong: rgba(215, 196, 154, .14);
  --jade: #8fb8a6; --jade-text: #b9d9cd; --jade-soft: rgba(143, 184, 166, .09); --jade-line: rgba(143, 184, 166, .22);
  --danger: #e0a393; --danger-text: #edb9a5; --danger-soft: rgba(224, 163, 147, .09); --danger-line: rgba(224, 163, 147, .3);
  --progress-bg: #31363d; --avatar-bg: #252a31; --avatar-text: #d0d5db;
  --standard-glow: #20262d; --login-glow: #282c31;
}
:root[data-theme="paper"] {
  color-scheme: light;
  --night: #f5f1e8; --night-soft: #eee8dc; --surface: #fffcf6; --surface-raised: #f0e9dc;
  --input-bg: #fbf7ef; --nav-bg: #ece5d8; --nav-text: #68675f;
  --text: #24231f; --muted: #68675f; --faint: #716e65;
  --line: rgba(65, 53, 34, .15); --line-strong: rgba(138, 100, 44, .38);
  --gold: #8a642c; --gold-bright: #6f4d1f; --gold-ink: #ffffff; --gold-ink-soft: #f4e8d2;
  --gold-soft: rgba(138, 100, 44, .08); --gold-soft-strong: rgba(138, 100, 44, .13);
  --jade: #347366; --jade-text: #2e6258; --jade-soft: rgba(52, 115, 102, .08); --jade-line: rgba(52, 115, 102, .24);
  --danger: #a34e3c; --danger-text: #923f30; --danger-soft: rgba(163, 78, 60, .08); --danger-line: rgba(163, 78, 60, .28);
  --progress-bg: #ded7ca; --avatar-bg: #e9e1d3; --avatar-text: #514b40;
  --hover-bg: rgba(138, 100, 44, .05); --backdrop: rgba(36, 31, 23, .46); --shadow: 0 12px 30px rgba(70, 54, 30, .13);
  --standard-glow: #e8dfcf; --login-glow: #e4d7c1;
}
:root[data-theme="lake"] {
  color-scheme: light;
  --night: #edf4f3; --night-soft: #e2edeb; --surface: #f9fcfb; --surface-raised: #dfecea;
  --input-bg: #f4f9f8; --nav-bg: #dfeae8; --nav-text: #5b6f6d;
  --text: #18302f; --muted: #5b6f6d; --faint: #5f7471;
  --line: rgba(24, 70, 65, .15); --line-strong: rgba(23, 107, 100, .35);
  --gold: #176b64; --gold-bright: #0f5751; --gold-ink: #ffffff; --gold-ink-soft: #d9efea;
  --gold-soft: rgba(23, 107, 100, .08); --gold-soft-strong: rgba(23, 107, 100, .13);
  --jade: #2f7465; --jade-text: #2b6458; --jade-soft: rgba(47, 116, 101, .08); --jade-line: rgba(47, 116, 101, .24);
  --danger: #a34e3c; --danger-text: #923f30; --danger-soft: rgba(163, 78, 60, .08); --danger-line: rgba(163, 78, 60, .28);
  --progress-bg: #d2e1de; --avatar-bg: #d8e7e4; --avatar-text: #34514d;
  --hover-bg: rgba(23, 107, 100, .05); --backdrop: rgba(18, 43, 40, .44); --shadow: 0 12px 30px rgba(26, 70, 64, .13);
  --standard-glow: #dcebe8; --login-glow: #d4e6e2;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--night); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body { margin: 0; min-width: 320px; min-height: 100vh; min-height: 100dvh; background: var(--night); color: var(--text); }
button, input, textarea, select { font: inherit; }
button, a, [role="button"] { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
input, textarea, select { font-size: 16px; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
[hidden], .hide { display: none !important; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.gold { color: var(--gold); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.primary-button, .secondary-button, .danger-button, .ghost-button { min-height: 46px; padding: 0 16px; border-radius: 13px; font-size: 13px; font-weight: 700; transition: transform 140ms var(--ease-out), background 180ms ease, border-color 180ms ease; }
.primary-button { border: 1px solid var(--gold); background: var(--gold); color: var(--gold-ink); }
.secondary-button, .ghost-button { border: 1px solid var(--line); background: var(--surface-raised); color: var(--text); }
.ghost-button { background: transparent; }
.danger-button { border: 1px solid var(--danger-line); background: var(--danger-soft); color: var(--danger-text); }
.primary-button:active, .secondary-button:active, .danger-button:active, .ghost-button:active { transform: scale(.97); }
.icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); color: var(--text); transition: transform 140ms var(--ease-out), border-color 180ms ease; }
.icon-button:active { transform: scale(.95); }
.icon-button svg { width: 18px; height: 18px; }
.field { display: grid; gap: 7px; }
.field > span, .field-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.field small { color: var(--faint); font-size: 11px; line-height: 1.6; }
.input, .select, .textarea { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--input-bg); color: var(--text); caret-color: var(--gold); }
.textarea { min-height: 110px; resize: vertical; line-height: 1.65; }
.card { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 7px; background: var(--gold-soft); color: var(--gold); font-size: 10px; font-weight: 700; }
.tag.jade { background: var(--jade-soft); color: var(--jade-text); }
.tag.danger { background: var(--danger-soft); color: var(--danger-text); }
.empty { padding: 38px 20px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.8; }
.loading { min-height: 180px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
.error-box, .error-text { padding: 13px 15px; border: 1px solid var(--danger-line); border-radius: 12px; background: var(--danger-soft); color: var(--danger-text); font-size: 12px; line-height: 1.7; }
.toast { position: fixed; z-index: 1000; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 36px); padding: 12px 17px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow); font-size: 12px; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity 180ms ease, transform 200ms var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast[data-kind="error"] { border-color: var(--danger-line); color: var(--danger-text); }
.confirm-dialog { width: min(380px, calc(100% - 32px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--surface); color: var(--text); }
.confirm-dialog::backdrop { background: var(--backdrop); }
.dialog-card { padding: 25px; text-align: center; }
.dialog-icon { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: var(--gold-soft-strong); color: var(--gold); }
.dialog-icon svg { width: 21px; height: 21px; }
.dialog-card h2 { margin: 0; font-size: 20px; }
.dialog-card > p { margin: 11px 0 20px; color: var(--muted); font-size: 12px; line-height: 1.75; white-space: pre-wrap; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.progress-track { height: 5px; overflow: hidden; border-radius: 5px; background: var(--progress-bg); }
.progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--gold); }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.theme-option { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--input-bg); color: var(--text); text-align: left; transition: border-color 160ms ease, background 160ms ease; }
.theme-option[aria-checked="true"] { border-color: var(--gold); background: var(--gold-soft); }
.theme-swatch { width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--swatch); box-shadow: inset 0 0 0 6px var(--swatch-accent); }
.theme-option-copy { min-width: 0; display: grid; gap: 4px; }
.theme-option-copy strong { font-size: 12px; }
.theme-option-copy small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.theme-dialog .dialog-card { text-align: left; }
.theme-dialog .dialog-card > p { margin-bottom: 16px; }
.theme-dialog .dialog-actions { grid-template-columns: 1fr; margin-top: 18px; }
.theme-settings { grid-column: 1 / -1; padding: 20px; }
.theme-settings .card-heading { margin-bottom: 14px; }
.settings-list button > small { color: var(--muted); font-size: 10px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .primary-button:hover { border-color: var(--gold-bright); background: var(--gold-bright); }
  .secondary-button:hover, .ghost-button:hover, .icon-button:hover { border-color: var(--line-strong); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}