/* =====================================================================
   Flow OS · Base Styles — "Quiet System"
   ===================================================================== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text-primary);
  overflow:hidden; height:100vh; height:100dvh; width:100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* 深底为统一画布：无环境渐变、无聚光（遵循 DESIGN.md） */

/* ===== Focus ring（键盘可见焦点 · 朱红信号） ===== */
button:focus-visible, a:focus-visible, .btn:focus-visible, .nav-item:focus-visible,
.lock-btn:focus-visible, .filter-chip:focus-visible,
.task-check:focus-visible, [role="button"]:focus-visible, .color-option:focus-visible,
.mm-color-swatch:focus-visible, .form-input:focus-visible, .form-select:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ===== 品牌标记（内联 SVG 容器） ===== */
.brand-mark { display:block; width:30px; height:30px; flex-shrink:0; }

/* =====================================================================
   Lock Screen — 浅色简洁主体（保留贝塞尔曲线动态 Logo）
   ---------------------------------------------------------------------
   强制浅色：把浅色令牌作用域限定在 #lockScreen 子树，
   无论应用主题为深/浅/护眼，锁屏始终是浅色纸面。
   ===================================================================== */
#lockScreen, #authScreen {
  position:fixed; inset:0; z-index:99999;
  background-color: var(--bg);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition: opacity .45s cubic-bezier(0.32,0.72,0,1), visibility .45s var(--ease-out);
}
#lockScreen.hidden, #authScreen.hidden { opacity:0; visibility:hidden; pointer-events:none; }

.lock-card {
  width:90%; max-width:380px; text-align:center;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-xl);
  padding:48px 34px 34px;
  box-shadow: var(--shadow-lg);
  position:relative; z-index:1;
  animation: lockIn .5s cubic-bezier(0.32,0.72,0,1) both;
}
@keyframes lockIn { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }

/* ---- 贝塞尔曲线 Logo（悬浮呼吸 + 内部描边绘制动画） ---- */
.lock-icon-wrap {
  width:76px; height:76px; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.lock-icon-wrap img,
.lock-icon-wrap svg {
  width:72px; height:auto; border-radius:16px;
  filter: drop-shadow(0 4px 14px rgba(94,106,210,.22));
  animation: logoFloat 3.5s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-7px) scale(1.03); }
}

.lock-title {
  font-family: var(--font-display);
  font-size:2rem; font-weight:600; letter-spacing:-0.035em; margin-bottom:8px;
  color: var(--text-primary); text-wrap:balance; font-optical-sizing:auto;
}
.lock-subtitle { color:var(--text-muted); font-size:.85rem; margin-bottom:28px; }

.lock-input {
  width:100%; padding:14px 18px;
  background:var(--surface-2); border:1.5px solid var(--border);
  border-radius: var(--radius-xs); color:var(--text-primary); font-size:1rem;
  outline:none; transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  text-align:left; font-family: var(--font-sans);
}
.lock-input::placeholder { color:var(--text-muted); }
.lock-input:focus { border-color:var(--accent); box-shadow:var(--shadow-focus); }
.lock-input-wrapper { position:relative; margin-bottom:16px; }
.lock-toggle-pwd {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  opacity:.4; transition: opacity .2s var(--ease-out); padding:4px 8px;
  color:var(--text-muted);
}
.lock-toggle-pwd:hover { opacity:1; }

.lock-btn {
  width:100%; padding:14px;
  background:var(--primary); border:none; border-radius:var(--radius-xs);
  color:var(--on-primary); font-weight:600; font-size:1rem; cursor:pointer;
  transition: background .2s var(--ease-out), transform .12s var(--ease-out);
  letter-spacing:.04em; font-family: var(--font-sans);
}
.lock-btn:hover { background:var(--primary-hover); }
.lock-btn:active { transform:scale(.985); background:var(--primary-press); }

.lock-error { color:var(--danger); font-size:.82rem; margin-top:14px; min-height:1.2em; font-weight:500; }
.lock-foot { margin-top:18px; font-size:.74rem; color:var(--text-muted); text-align:center; letter-spacing:.01em; }

/* ---- 登录/注册 切换标签 ---- */
.auth-tabs {
  display:flex; gap:8px; margin:0 0 22px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-xs); padding:4px;
}
.auth-tab {
  flex:1; padding:10px; border:none; background:transparent;
  border-radius:calc(var(--radius-xs) - 2px); color:var(--text-muted);
  font-weight:600; font-size:.92rem; cursor:pointer;
  transition:background .2s var(--ease-out), color .2s var(--ease-out);
  font-family:var(--font-sans);
}
.auth-tab.active { background:var(--surface); color:var(--text-primary); box-shadow:var(--shadow-sm); }

/* ---- 分层入场动画（克制错落） ---- */
.lock-card > * { animation: lockItemIn .42s var(--ease-out) both; }
.lock-card > *:nth-child(1) { animation-delay:.06s; }
.lock-card > *:nth-child(2) { animation-delay:.11s; }
.lock-card > *:nth-child(3) { animation-delay:.16s; }
.lock-card > *:nth-child(4) { animation-delay:.21s; }
.lock-card > *:nth-child(5) { animation-delay:.26s; }
.lock-card > *:nth-child(6) { animation-delay:.31s; }
@keyframes lockItemIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ===== 解锁界面固定为浅色（浅色纸面锁屏，独立于应用主题）
   仅把浅色令牌作用域限定在 #lockScreen / #authScreen 子树，不影响解锁后的应用主题。 */
#lockScreen, #authScreen {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f1f2f5;
  --surface-3: #e9ebef;
  --border: #e4e6ea;
  --border-strong: #d3d6dc;
  --text-primary: #1a1b1e;
  --text-secondary: #3c4046;
  --text-muted: #6b7280;
  --accent: #5e6ad2;
  --accent-hover: #6e78e6;
  --accent-glow: rgba(94, 106, 210, 0.22);
  --on-primary: #ffffff;
  --primary: #5e6ad2;
  --primary-hover: #4f5ac6;
  --primary-press: #4a54ba;
  --primary-weak: rgba(94, 106, 210, 0.08);
  --danger: #d23b40;
  --danger-weak: rgba(210, 59, 64, 0.12);
  --shadow-sm: 0 1px 2px rgba(16, 17, 20, 0.06);
  --shadow-md: 0 6px 18px rgba(16, 17, 20, 0.10);
  --shadow-lg: 0 24px 64px rgba(16, 17, 20, 0.18);
  --shadow-focus: 0 0 0 3px rgba(94, 105, 209, 0.35);
}

/* ===== Scrollbar（极细、深底浅灰） ===== */
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(247,248,248,0.12); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(247,248,248,0.22); border:2px solid transparent; background-clip:padding-box; }
* { scrollbar-width: thin; scrollbar-color: rgba(247,248,248,0.14) transparent; }

/* ===== Light theme: 滚动条反色（深底浅灰 thumb → 浅底深灰 thumb） ===== */
.light ::-webkit-scrollbar-thumb { background: rgba(16,17,20,0.18); border:2px solid transparent; background-clip:padding-box; }
.light ::-webkit-scrollbar-thumb:hover { background: rgba(16,17,20,0.30); border:2px solid transparent; background-clip:padding-box; }
.light * { scrollbar-color: rgba(16,17,20,0.20) transparent; scrollbar-width: thin; }

/* ===== 账户管理（仅主人）列表 ===== */
.admin-user-list { padding: 4px 2px 6px; max-height: 60vh; overflow-y: auto; }
.admin-loading { padding: 22px 8px; color: var(--text-muted); text-align: center; font-size: .9rem; }
.admin-user-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 12px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.admin-user-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; flex-wrap: wrap; }
.admin-user-name i { color: var(--text-muted); }
.admin-user-name .admin-badge {
  font-size: .68rem; padding: 1px 7px; border-radius: 999px;
  background: var(--accent-weak); color: var(--accent); font-weight: 600;
}
.admin-user-name .admin-date { font-size: .72rem; color: var(--text-muted); }
.admin-del-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--danger-weak); color: var(--danger); font-weight: 600; cursor: pointer;
  font-family: var(--font-sans); font-size: .84rem; transition: background .15s var(--ease-out);
}
.admin-del-btn:hover:not(:disabled) { background: var(--danger); color: #fff; }
.admin-del-btn:disabled { opacity: .45; cursor: not-allowed; }