/* ══════════════════════════════════════
   U-CIM · 暗色主题 · 侧边栏布局
   样式: ucim.html · 功能: zip v0.2.1
══════════════════════════════════════ */
:root {
  --bg: #0c0c10;
  --surface: #14141a;
  --surface2: #1c1c25;
  --border: rgba(255,255,255,0.07);
  --accent: #c8a97e;
  --accent2: #7e9ec8;
  --accent3: #9e7ec8;
  --text: #e8e4dc;
  --text-muted: #6b6760;
  --text-dim: #9b978f;
  --danger: #c87e7e;
  --money: #7ec8a0;
  --radius: 12px;

  /* zip 兼容 tokens */
  --sa: rgba(20,20,26,0.70);
  --sb: rgba(24,24,33,0.90);
  --sc: rgba(28,28,40,0.96);
  --ba: rgba(200,169,126,0.10);
  --bb: rgba(200,169,126,0.18);
  --bc: rgba(200,169,126,0.32);
  --tx: #e8e4dc;
  --tx2: #b8b2a8;
  --tx3: #6b6760;
  --s1: 0 1px 3px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.38);
  --s2: 0 4px 16px rgba(0,0,0,.60),0 1px 4px rgba(0,0,0,.38);
  --s3: 0 10px 36px rgba(0,0,0,.70),0 3px 10px rgba(0,0,0,.42);
  --s4: 0 20px 60px rgba(0,0,0,.80),0 6px 20px rgba(0,0,0,.48);
  --sd: 0 8px 40px rgba(0,0,0,.65);
  --r1:8px;--r2:12px;--r3:14px;--r4:16px;--r5:20px;--r6:24px;--rp:9999px;
  --p-or:#c8a97e;--p-pk:#9e7ec8;--p-pc:#b87ec8;--p-am:#c8a97e;
  --p-ok:#7ec8a0;--p-ng:#c87e7e;--p-wn:#c8b87e;--p-bl:#7e9ec8;--p-pp:#9e7ec8;--p-tl:#7ec8c8;
  --tl-r:#c87e7e;--tl-y:#c8b87e;--tl-g:#7ec8a0;
  --esp:cubic-bezier(.34,1.56,.64,1);--esm:cubic-bezier(.4,0,.2,1);
  --topbar-h:60px;--th:60px;--dh:0px;
  --primary:#c8a97e;--primary-2:#b8955a;--accent-var:#9e7ec8;--accent-2:#c084fc;
  --money-var:#7ec8a0;--danger-var:#c87e7e;
  --frame-soft:rgba(255,255,255,0.06);--frame-dash:rgba(255,255,255,0.08);
  --shadow:0 4px 16px rgba(0,0,0,0.45);--shadow-strong:0 12px 32px rgba(0,0,0,0.65);
  --primary-soft-14:rgba(200,169,126,0.10);--primary-soft-08:rgba(200,169,126,0.06);
  --primary-soft-28:rgba(200,169,126,0.18);--primary-shadow:rgba(200,169,126,0.15);
  --accent-soft-14:rgba(158,126,200,0.10);--accent-soft-08:rgba(158,126,200,0.06);
  --accent-soft-26:rgba(158,126,200,0.16);--accent-shadow:rgba(158,126,200,0.12);
  --money-soft-14:rgba(126,200,160,0.10);--money-shadow:rgba(126,200,160,0.10);
  --ink-soft-10:rgba(255,255,255,0.05);--ink-soft-18:rgba(255,255,255,0.08);
  --ring:rgba(200,169,126,0.15);--qq-bg:rgba(200,169,126,0.08);
  --card-accent:rgba(200,169,126,0.30);--badge-bg:rgba(200,169,126,0.12);
  --badge-border:rgba(200,169,126,0.22);--badge-text:#c8a97e;
  --glass:rgba(20,20,26,0.85);--stroke:rgba(255,255,255,0.07);
  --ba1:blur(14px) saturate(140%);--ba2:blur(20px) saturate(160%);--ba3:blur(36px) saturate(180%);

  /* 全局放大系数（125%） */
  --ui-scale: 1.25;
}

html[data-tm="light"] {
  --bg: #f5f1e8;
  --surface: #fffcf6;
  --surface2: #efe7db;
  --border: rgba(72, 51, 28, 0.10);
  --accent: #9f6d3f;
  --accent2: #5f7fb2;
  --accent3: #8568a6;
  --text: #2b2116;
  --text-muted: #8f7d69;
  --text-dim: #655545;
  --danger: #b35656;
  --money: #4d8d67;

  --sa: rgba(255,252,246,0.78);
  --sb: rgba(247,240,231,0.92);
  --sc: rgba(239,231,219,0.96);
  --ba: rgba(159,109,63,0.10);
  --bb: rgba(159,109,63,0.18);
  --bc: rgba(159,109,63,0.28);
  --tx: #2b2116;
  --tx2: #655545;
  --tx3: #8f7d69;
  --s1: 0 1px 3px rgba(68,45,20,.10),0 2px 8px rgba(68,45,20,.06);
  --s2: 0 8px 24px rgba(68,45,20,.10),0 1px 4px rgba(68,45,20,.06);
  --s3: 0 18px 40px rgba(68,45,20,.14),0 4px 12px rgba(68,45,20,.08);
  --s4: 0 24px 60px rgba(68,45,20,.16),0 8px 22px rgba(68,45,20,.10);
  --sd: 0 10px 36px rgba(68,45,20,.12);
  --p-or:#9f6d3f;--p-pk:#8568a6;--p-pc:#a26b97;--p-am:#b07c48;
  --p-ok:#4d8d67;--p-ng:#b35656;--p-wn:#b18b47;--p-bl:#5f7fb2;--p-pp:#8568a6;--p-tl:#4b9898;
  --tl-r:#cc6767;--tl-y:#c9a24c;--tl-g:#5aa176;
  --primary:#9f6d3f;--primary-2:#885731;--accent-var:#8568a6;--accent-2:#a47fe0;
  --money-var:#4d8d67;--danger-var:#b35656;
  --frame-soft:rgba(84,59,31,0.08);--frame-dash:rgba(84,59,31,0.12);
  --shadow:0 6px 20px rgba(68,45,20,0.12);--shadow-strong:0 16px 40px rgba(68,45,20,0.18);
  --primary-soft-14:rgba(159,109,63,0.12);--primary-soft-08:rgba(159,109,63,0.08);
  --primary-soft-28:rgba(159,109,63,0.20);--primary-shadow:rgba(159,109,63,0.12);
  --accent-soft-14:rgba(133,104,166,0.12);--accent-soft-08:rgba(133,104,166,0.08);
  --accent-soft-26:rgba(133,104,166,0.18);--accent-shadow:rgba(133,104,166,0.10);
  --money-soft-14:rgba(77,141,103,0.12);--money-shadow:rgba(77,141,103,0.10);
  --ink-soft-10:rgba(84,59,31,0.05);--ink-soft-18:rgba(84,59,31,0.10);
  --ring:rgba(159,109,63,0.14);--qq-bg:rgba(159,109,63,0.08);
  --card-accent:rgba(159,109,63,0.24);--badge-bg:rgba(159,109,63,0.12);
  --badge-border:rgba(159,109,63,0.22);--badge-text:#9f6d3f;
  --glass:rgba(255,252,246,0.82);--stroke:rgba(84,59,31,0.08);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Serif SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', serif;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  zoom: var(--ui-scale);
}

/* 浏览器不支持 zoom 时的缩放兜底 */
@supports not (zoom: 1) {
  body {
    transform: scale(var(--ui-scale));
    transform-origin: top left;
    width: calc(100% / var(--ui-scale));
    height: calc(100% / var(--ui-scale));
  }
}

/* ══ Loading Overlay ══ */
#loadingOverlay {
  position:fixed; inset:0; z-index:900;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.26s;
}
#loadingOverlay.fadeout { opacity:0; }
#loadingOverlay.hidden { display:none !important; }
.loading-card {
  background: var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:40px 36px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  min-width:260px; box-shadow:var(--s4);
}
.loading-icon-wrapper { position:relative; width:64px; height:64px; }
.loading-icon {
  width:64px; height:64px; border-radius:16px;
  background:rgba(200,169,126,0.08); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:20px; font-weight:700; color:var(--accent);
}
.loading-icon img { display:none; }
.loading-icon-orbit {
  position:absolute; inset:-4px; border-radius:20px;
  border:2px solid transparent; border-top-color:var(--accent);
  animation:orbitSpin 1.2s linear infinite;
}
@keyframes orbitSpin { to { transform:rotate(360deg); } }
.loading-title { font-size:14px; font-weight:600; color:var(--text); letter-spacing:1px; }
.loading-subtitle { font-size:12px; color:var(--text-muted); }
.loading-bar { width:180px; height:2px; background:var(--surface2); border-radius:2px; overflow:hidden; }
.loading-bar-fill { height:100%; width:60%; background:linear-gradient(90deg,var(--accent),var(--accent3)); animation:loadBar 1.5s ease-in-out infinite; }
@keyframes loadBar { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
.loading-bar-shimmer { display:none; }
.loading-text { font-size:13px; color:var(--text-muted); font-family:'Space Mono',monospace; }
.loading-dot { animation:dotBlink 1.2s ease-in-out infinite; }
.loading-dot:nth-child(2){animation-delay:.2s} .loading-dot:nth-child(3){animation-delay:.4s}
@keyframes dotBlink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.loading-steps { display:flex; gap:8px; }
.loading-step { width:8px; height:8px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); }
.loading-step.active { background:var(--accent); border-color:var(--accent); }
.loading-particles { display:none; }

/* ══ Auth Gate ══ */
#authGate {
  position:fixed; inset:0; z-index:800;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px; overflow-y:auto;
}
#authGate.hidden { display:none !important; }
.auth-gate__bg {
  position:fixed; inset:0; z-index:0;
  background: radial-gradient(ellipse 80vw 80vh at 28% 22%,rgba(200,169,126,0.12) 0%,transparent 55%),
              radial-gradient(ellipse 70vw 70vh at 72% 78%,rgba(158,126,200,0.08) 0%,transparent 55%),
              rgba(8,8,12,0.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.auth-screen { position:relative; z-index:1; width:min(480px,100%); display:none; }
#authGate[data-mode="login"] [data-auth-screen="login"] { display:block; }
#authGate[data-mode="register"] [data-auth-screen="register"] { display:block; }
.auth-card {
  background:rgba(20,20,26,0.94);
  backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  border:1px solid var(--border); border-radius:22px;
  box-shadow:var(--s4),inset 0 1px 0 rgba(255,255,255,0.04);
  padding:32px 28px 28px; width:100%;
}
.auth-brand-row { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.auth-logo {
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  display:flex; align-items:center; justify-content:center;
}
.auth-logo > span { font-size:26px; font-weight:900; color:#0c0c10; font-family:'Space Mono',monospace; }
.auth-logo > svg { display:none; }
.auth-title { font-size:20px; font-weight:700; color:var(--text); }
.auth-subtitle { font-size:13px; color:var(--text-muted); margin-top:3px; }
.auth-field { display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.auth-field label { font-size:10px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:1.2px; font-family:'Space Mono',monospace; }
.auth-field input {
  width:100%; padding:10px 13px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; font-size:14px; font-family:inherit;
  color:var(--text); outline:none; transition:border-color .18s,box-shadow .18s;
}
.auth-field input::placeholder { color:var(--text-muted); }
.auth-field input:focus { border-color:rgba(200,169,126,0.50); box-shadow:0 0 0 3px rgba(200,169,126,0.10); }
.auth-password-row,.auth-code-row { display:flex; gap:10px; align-items:center; }
.auth-password-row input,.auth-code-row input { flex:1; min-width:0; }
.auth-submit {
  width:100%; margin-top:18px; padding:12px;
  border:none; border-radius:12px; font-size:15px; font-weight:600;
  color:#0c0c10; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  box-shadow:0 5px 18px rgba(200,169,126,0.22);
  transition:all .22s var(--esp); display:flex; align-items:center; justify-content:center;
}
.auth-submit:hover { transform:translateY(-2px); filter:brightness(1.08); }
.auth-submit:active { transform:scale(.96); }
.auth-toggle,.auth-code-btn {
  padding:9px 13px; flex-shrink:0;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:9px; font-size:12px; font-weight:500;
  color:var(--text-dim); cursor:pointer; white-space:nowrap; font-family:inherit; transition:all .18s;
}
.auth-toggle:hover,.auth-code-btn:hover { border-color:rgba(200,169,126,0.40); color:var(--accent); }
.auth-link { display:block; width:100%; text-align:center; margin-top:14px; padding:8px; background:none; border:none; font-size:13px; font-weight:500; color:var(--accent); cursor:pointer; font-family:inherit; opacity:.85; }
.auth-link:hover { opacity:1; }
.auth-status { margin-top:12px; padding:10px 13px; border-radius:10px; font-size:13px; font-weight:500; line-height:1.4; }
.auth-status.hidden { display:none; }
.auth-status--error { background:rgba(200,126,126,0.08); border:1px solid rgba(200,126,126,0.20); color:var(--danger); }
.auth-status--success { background:rgba(126,200,160,0.08); border:1px solid rgba(126,200,160,0.20); color:var(--money); }
.auth-dev-section { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.auth-dev-btn { width:100%; padding:10px 16px; background:rgba(200,184,126,0.06); border:1.5px dashed rgba(200,184,126,0.30); border-radius:11px; color:var(--p-wn); font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; font-family:inherit; transition:all .20s; }
.auth-dev-btn:hover { background:rgba(200,184,126,0.12); border-color:rgba(200,184,126,0.55); transform:translateY(-1px); }