/* ============================================================
   kiwi-mem Admin · Design System  （獼猴桃清新版 / Kiwi Fresh）
   自包含、零依賴。明暗雙色。
   —— 改動僅限「CSS 變數 + 卡片/總開關/橫幅/導航」少數規則，
      類名與結構完全保持原樣，所有頁面 JS 無需改動即可套用新主題。
   主題原則：白底，綠色為主、金黃為輔，只做點綴；去掉重陰影與色塊填充。
   ============================================================ */

/* 配色改參照 LUX's HOME 自己的 ../../styles/variables.css（index.html 已 link 進來），
   不再用 kiwi 綠/金這組品牌色——之後 LUX's HOME 主色調改了，這裡會自動跟著變，
   不用兩邊維護。語義色（danger/warn/info/purple/heat）維持原本的功能性配色不動。 */

:root {
  /* Semantic — 主品牌色改用 LUX's HOME 的銅色 */
  --c-accent:var(--color-primary);
  --c-accent-hover:var(--color-primary-hover);
  --c-accent-soft:var(--color-primary-light);
  --c-accent2:#c69a13;
  --c-accent2-soft:rgba(198,154,19,0.14);
  --c-danger:#c0492f; --c-danger-hover:#a73e29; --c-danger-soft:rgba(192,73,47,0.12);
  --c-warn:#bd7a10; --c-warn-soft:rgba(189,122,16,0.13);
  --c-info:#37719a; --c-info-soft:rgba(55,113,154,0.12);
  --c-purple:#6f6cb0; --c-purple-soft:rgba(111,108,176,0.14);   /* 夜/Dream，已去飽和 */

  /* Surfaces / Text / Border — 直接接 LUX's HOME 的 token */
  --bg:var(--surface-1);
  --surface:var(--surface-0);
  --surface-2:var(--surface-2);
  --surface-hover:var(--surface-2);
  --border:var(--border-subtle);
  --border-strong:var(--border-strong);
  --input-bg:var(--surface-0);
  --input-border:var(--border-default);

  --text:var(--text-primary);
  --text-soft:var(--text-secondary);
  --text-muted:var(--text-muted);
  --text-faint:var(--text-muted);

  /* Heat / status dots */
  --heat-hot:#c0492f; --heat-warm:#c69a13; --heat-cold:#37719a;

  /* Geometry */
  --radius:var(--radius-md); --radius-sm:var(--radius-sm); --radius-lg:var(--radius-lg);
  --shadow:none;
  --shadow-lift:0 1px 2px rgba(45,60,30,0.05);
  --shadow-lg:0 10px 34px rgba(30,40,20,0.16);
  --sidebar-w:248px;
  --topbar-h:62px;
  --font:var(--font-ui);
  --mono:'JetBrains Mono','SFMono-Regular',ui-monospace,'Menlo',Consolas,monospace;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { margin:0; font-weight:700; }

/* ---------- Layout ---------- */
.app { display:flex; min-height:100vh; }

.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border);
  height:100vh; position:sticky; top:0;
  display:flex; flex-direction:column;
}
.sidebar-head {
  padding:18px 20px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.sidebar-head .logo { font-size:22px; }
.sidebar-head h1 { font-size:17px; letter-spacing:-0.01em; }
.sidebar-head h1 a { color:inherit; text-decoration:none; transition:opacity .15s; }
.sidebar-head h1 a:hover { opacity:.75; }
.sidebar-head .sub { font-size:11px; color:var(--text-muted); margin-top:1px; }
.sidebar-nav { flex:1; overflow-y:auto; padding:10px 10px 20px; }
.sidebar-foot {
  padding:10px 14px; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:var(--text-muted);
}

.nav-group { margin-top:14px; }
.nav-group:first-child { margin-top:2px; }
.nav-group-title {
  font-size:10.5px; font-weight:700; letter-spacing:0.09em;
  color:var(--text-faint); text-transform:uppercase;
  padding:6px 12px 4px; user-select:none;
}
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; margin:1px 0; border-radius:var(--radius-sm);
  font-size:13.5px; color:var(--text-soft); cursor:pointer;
  transition:background .12s,color .12s,box-shadow .12s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.nav-item:hover { background:var(--surface-hover); color:var(--text); }
/* 選中態：綠底綠字 + 左側金色點綴條 */
.nav-item.active {
  background:var(--c-accent-soft); color:var(--c-accent); font-weight:700;
  box-shadow:inset 3px 0 0 var(--c-accent2);
}
.nav-item .ico { font-size:15px; width:18px; text-align:center; flex-shrink:0; }

/* ---------- Topbar + main ---------- */
.main { flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; }
.topbar {
  height:var(--topbar-h); flex-shrink:0;
  border-bottom:1px solid var(--border); background:var(--bg);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; gap:16px;
}
.topbar .crumb { font-size:12px; color:var(--text-muted); }
.topbar .title { font-size:18px; font-weight:800; letter-spacing:-0.01em; margin-top:1px; }
.topbar .actions { display:flex; align-items:center; gap:10px; }
.content { flex:1; overflow-y:auto; padding:24px 28px 64px; }
.content-narrow { max-width:1000px; }

/* 2026-09-12：使用者提供的 Renaissance 插畫素材，純裝飾用的頂部小 banner，
   不影響下面任何 dashboard 資料/表單邏輯。 */
.admin-banner {
  height:88px; flex-shrink:0;
  background:url('../../../assets/admin-banner.webp') center 65%/cover;
  border-bottom:1px solid var(--border);
}

.page-intro { color:var(--text-muted); font-size:13px; margin:-4px 0 20px; line-height:1.6; max-width:780px; }

/* ---------- Cards（扁平：僅描邊，無陰影） ---------- */
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; margin-bottom:16px;
  box-shadow:var(--shadow);
}
.card.flush { padding:0; overflow:hidden; }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card-title { font-size:15px; font-weight:700; }
.card-desc { font-size:12px; color:var(--text-muted); margin-top:3px; line-height:1.6; max-width:700px; }
.section-title {
  font-size:13px; font-weight:700; color:var(--text);
  letter-spacing:0.01em; margin:26px 0 12px;
}

/* ---------- Grid ---------- */
.grid { display:grid; gap:14px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

/* ---------- Stat cards ---------- */
.stat {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:15px 18px; box-shadow:var(--shadow);
  transition:transform .14s, box-shadow .14s;
}
.stat:hover { transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.stat .label { font-size:12px; color:var(--text-muted); margin-bottom:8px; display:flex; align-items:center; gap:6px; font-weight:600; }
.stat .value { font-size:25px; font-weight:800; line-height:1.1; letter-spacing:-0.02em; }
.stat .value.accent { color:var(--c-accent); }
.stat .value.gold   { color:var(--c-accent2); }   /* 金黃數值，用於關鍵指標點綴 */
.stat .value.purple { color:var(--c-purple); }
.stat .value.info   { color:var(--c-info); }
.stat .value.warn   { color:var(--c-warn); }
.stat .sub { font-size:11.5px; color:var(--text-faint); margin-top:6px; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:all .12s; white-space:nowrap;
  font-family:inherit; line-height:1.3;
}
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn:active:not(:disabled) { transform:translateY(1px); }
.btn-primary { background:var(--c-accent); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--c-accent-hover); }
.btn-secondary { background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background:var(--surface-hover); }
.btn-soft { background:var(--c-accent-soft); color:var(--c-accent); }
.btn-soft:hover:not(:disabled) { background:var(--c-accent); color:#fff; }
.btn-ghost { background:transparent; color:var(--text-soft); }
.btn-ghost:hover:not(:disabled) { background:var(--surface-hover); }
.btn-danger { background:var(--c-danger); color:#fff; }
.btn-danger:hover:not(:disabled) { background:var(--c-danger-hover); }
.btn-danger-soft { background:var(--c-danger-soft); color:var(--c-danger); }
.btn-danger-soft:hover:not(:disabled) { background:var(--c-danger); color:#fff; }
.btn-sm { padding:5px 11px; font-size:12.5px; }
.btn-xs { padding:3px 9px; font-size:11.5px; }
.btn-icon { padding:7px; width:34px; height:34px; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------- Forms ---------- */
label { font-size:12px; color:var(--text-soft); }
.field { margin-bottom:14px; }
.field > label { display:block; margin-bottom:5px; font-weight:600; }
.field-hint { font-size:11.5px; color:var(--text-muted); margin-top:5px; line-height:1.5; }
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], input[type=search], input[type=url], textarea, select {
  width:100%; background:var(--input-bg); border:1px solid var(--input-border);
  color:var(--text); border-radius:var(--radius-sm); padding:8px 11px;
  font-size:13.5px; font-family:inherit; outline:none;
  transition:border-color .12s, box-shadow .12s;
}
textarea { resize:vertical; line-height:1.6; }
textarea.mono, input.mono { font-family:var(--mono); font-size:12.5px; }
input::placeholder, textarea::placeholder { color:var(--text-faint); }
input:focus, textarea:focus, select:focus {
  border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft);
}
select {
  appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23828b72' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px;
}
/* 分組下拉（供應商 → 模型）：optgroup 自帶分隔，無需額外樣式 */
optgroup { font-weight:700; color:var(--text-muted); }
option { font-weight:400; color:var(--text); }
input[type=color] { width:42px; height:36px; padding:2px; cursor:pointer; }
input[type=range] { accent-color:var(--c-accent); padding:0; }

/* Toggle switch */
.switch { position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider {
  position:absolute; inset:0; background:var(--border-strong); border-radius:24px;
  transition:.18s; cursor:pointer;
}
.switch .slider:before {
  content:""; position:absolute; height:18px; width:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.18s; box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + .slider { background:var(--c-accent); }
.switch input:checked + .slider:before { transform:translateX(18px); }

/* Master switch — 每個功能頁頂部的模組總開關（已扁平：無漸變色塊） */
.master {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 20px; border-radius:var(--radius-lg); margin-bottom:18px;
  border:1px solid var(--border); background:var(--surface); box-shadow:none;
  transition:border-color .15s;
}
.master.on { border-color:rgba(90,158,43,.35); }
.master-title { font-size:14.5px; font-weight:700; display:flex; align-items:center; gap:10px; }
.master-state { font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px; background:var(--surface-hover); color:var(--text-muted); }
.master.on .master-state { background:var(--c-accent-soft); color:var(--c-accent); }
.master-desc { font-size:12.5px; color:var(--text-muted); margin-top:4px; line-height:1.55; max-width:700px; }
.switch-lg { width:52px; height:30px; }
.switch-lg .slider:before { height:24px; width:24px; }
.switch-lg input:checked + .slider:before { transform:translateX(22px); }
.knobs.dimmed { opacity:.5; pointer-events:none; transition:opacity .2s; }
.cfg-saved { font-size:11px; color:var(--c-accent); opacity:0; transition:opacity .2s; margin-top:6px; display:inline-block; }
.cfg-saved.show { opacity:1; }
.cfg-saved.fail { color:var(--c-danger); font-weight:600; }
input.invalid, textarea.invalid, select.invalid { border-color:var(--c-danger) !important; box-shadow:0 0 0 3px var(--c-danger-soft) !important; }

/* 首頁健康自檢面板 */
.health-item { display:flex; align-items:flex-start; gap:12px; padding:12px 2px; border-bottom:1px solid var(--border); }
.health-item:last-child { border-bottom:none; }
.health-ic { font-size:17px; line-height:1.5; flex-shrink:0; }
.health-body { flex:1; min-width:0; }
.health-title { font-weight:700; font-size:13.5px; }
.health-detail { font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.55; }
.health-item .btn { align-self:center; }
.health-error .health-title { color:var(--c-danger); }
.health-warn .health-title { color:var(--c-warn); }

.prompt-ctl { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.prompt-preview { color:var(--text-faint); }
/* 配置分組「拍平」：放在 .knobs 容器內的 .card 去掉盒子，改為小標題 + 分隔線列表 */
.knobs > .card { box-shadow:none; border:none; padding:0; margin-bottom:0; background:transparent; }
.knobs > .card + .card { margin-top:26px; }
.knobs > .card > .card-head { margin-bottom:2px; }

/* Config row — label + control + description inline */
.cfg-row {
  display:grid; grid-template-columns:minmax(180px,240px) 1fr; gap:18px;
  padding:13px 0; border-top:1px solid var(--border); border-bottom:none; align-items:start;
}
.cfg-row .cfg-label { font-size:13.5px; color:var(--text); font-weight:600; padding-top:7px; }
.cfg-row .cfg-key { font-size:11px; color:var(--text-faint); font-family:var(--mono); margin-top:2px; }
.cfg-row .cfg-control { display:flex; flex-direction:column; gap:0; }
.cfg-row .cfg-input-line { display:flex; gap:8px; align-items:center; }
.cfg-row .cfg-desc { font-size:11.5px; color:var(--text-muted); margin-top:7px; line-height:1.55; }
.cfg-row .cfg-default { color:var(--text-faint); }
@media (max-width:720px){ .cfg-row{grid-template-columns:1fr; gap:6px} .cfg-row .cfg-label{padding-top:0} }

/* ---------- Badges ---------- */
.badge {
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
  border-radius:20px; font-size:11.5px; font-weight:600; line-height:1.4;
  background:var(--surface-hover); color:var(--text-soft);
}
.badge-accent { background:var(--c-accent-soft); color:var(--c-accent); }
.badge-gold   { background:var(--c-accent2-soft); color:var(--c-accent2); }
.badge-purple { background:var(--c-purple-soft); color:var(--c-purple); }
.badge-info { background:var(--c-info-soft); color:var(--c-info); }
.badge-warn { background:var(--c-warn-soft); color:var(--c-warn); }
.badge-danger { background:var(--c-danger-soft); color:var(--c-danger); }
.badge-muted { background:var(--surface-hover); color:var(--text-muted); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.dot-hot{background:var(--heat-hot)} .dot-warm{background:var(--heat-warm)} .dot-cold{background:var(--heat-cold)}

/* ---------- Tables ---------- */
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th {
  text-align:left; font-size:11px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.04em; padding:11px 14px;
  border-bottom:1px solid var(--border); background:var(--surface-2);
}
.table td { padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:var(--surface-hover); }
.table .num { text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- List item card ---------- */
.item {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:8px; transition:border-color .12s;
}
.item:hover { border-color:var(--border-strong); }
.item-row { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.item-title { font-weight:700; font-size:14px; }
.item-sub { font-size:12px; color:var(--text-muted); margin-top:3px; }
.item-actions { display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }

/* ---------- Accordion ---------- */
.acc { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; background:var(--surface); overflow:hidden; }
.acc-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px; cursor:pointer; user-select:none;
}
.acc-head:hover { background:var(--surface-hover); }
.acc-arrow { transition:transform .2s; color:var(--text-faint); font-size:11px; }
.acc.open .acc-arrow { transform:rotate(90deg); }
.acc-body { display:none; padding:0 18px 8px; }
.acc.open .acc-body { display:block; }
.acc-body-pad { padding:4px 18px 18px; }

/* ---------- Modal ---------- */
.modal-mask {
  position:fixed; inset:0; background:rgba(15,20,10,0.5); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px;
  animation:fade .15s ease;
}
.modal {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); width:100%; max-width:640px; max-height:86vh;
  display:flex; flex-direction:column; animation:pop .16s ease;
}
.modal.wide { max-width:860px; }
.modal-head { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.modal-head h3 { font-size:15px; }
.modal-body { padding:20px 22px; overflow-y:auto; }
.modal-foot { padding:14px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }
.modal-close { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:20px; line-height:1; padding:2px 6px; border-radius:6px; }
.modal-close:hover { background:var(--surface-hover); color:var(--text); }

/* ---------- Toast ---------- */
.toast-wrap { position:fixed; top:18px; right:18px; z-index:2000; display:flex; flex-direction:column; gap:8px; }
.toast {
  padding:11px 18px; border-radius:var(--radius-sm); color:#fff; font-size:13.5px;
  box-shadow:var(--shadow-lg); animation:slidein .25s ease; max-width:380px;
}
.toast-ok { background:var(--c-accent); }
.toast-err { background:var(--c-danger); }
.toast-info { background:var(--c-info); }

/* ---------- Misc ---------- */
.spinner {
  display:inline-block; width:16px; height:16px; border:2px solid var(--border);
  border-top-color:var(--c-accent); border-radius:50%; animation:spin .6s linear infinite;
  vertical-align:middle;
}
.spinner.lg { width:26px; height:26px; border-width:3px; }
.loading-block { display:flex; align-items:center; gap:10px; color:var(--text-muted); padding:18px 0; font-size:13px; }
.empty {
  text-align:center; padding:48px 20px; color:var(--text-muted);
}
.empty .icon { font-size:34px; opacity:.6; margin-bottom:10px; }
.empty .msg { font-size:13.5px; }
.empty .hint { font-size:12px; color:var(--text-faint); margin-top:6px; }

/* Banner / 橫幅（已扁平：白底 + 左側彩色點綴條，不再整塊填色） */
.banner {
  border-radius:var(--radius); padding:13px 16px; font-size:12.8px; line-height:1.65; margin-bottom:16px;
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--border-strong);
  color:var(--text-soft); display:flex; gap:11px; align-items:flex-start;
}
.banner-warn   { border-left-color:var(--c-warn); }
.banner-info   { border-left-color:var(--c-info); }
.banner-accent { border-left-color:var(--c-accent); }
.banner-danger { border-left-color:var(--c-danger); }
.banner b { font-weight:700; color:var(--text); }

.kv { display:flex; justify-content:space-between; gap:12px; padding:9px 0; font-size:13px; border-top:1px solid var(--border); }
.kv:first-child { border-top:none; }
.kv .k { color:var(--text-soft); }
.kv .v { color:var(--text); font-weight:600; text-align:right; }

.pill-tabs { display:inline-flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:11px; margin-bottom:18px; }
.pill-tab {
  padding:7px 16px; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer;
  background:transparent; border:none; color:var(--text-soft);
}
.pill-tab:hover { color:var(--text); }
.pill-tab.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-lift); }

.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.toolbar .grow { flex:1; min-width:140px; }
.spacer { flex:1; }
.muted { color:var(--text-muted); }
.faint { color:var(--text-faint); }
.mono { font-family:var(--mono); }
.text-sm { font-size:12.5px; }
.text-xs { font-size:11.5px; }
.nowrap { white-space:nowrap; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.clamp2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.mt0{margin-top:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.flex{display:flex}.between{justify-content:space-between}.center{align-items:center}.gap8{gap:8px}.gap12{gap:12px}.wrap{flex-wrap:wrap}.col{flex-direction:column}

.pagination { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:18px; }
.pagination .info { font-size:12.5px; color:var(--text-muted); }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--text-faint); background-clip:content-box; }

@keyframes spin { to{transform:rotate(360deg)} }
@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes pop { from{opacity:0;transform:scale(.97) translateY(6px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes slidein { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
.fade-in { animation:fade .22s ease; }

/* Mobile sidebar toggle */
.menu-btn { display:none; }
@media (max-width:860px){
  .sidebar { position:fixed; left:0; top:0; z-index:900; transform:translateX(-100%); transition:transform .2s; }
  .sidebar.open { transform:translateX(0); }
  .menu-btn { display:inline-flex; }
  .sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:899; }
  .sidebar-backdrop.show { display:block; }
}

/* Cottage paper treatment for the separate admin shell. */
.sidebar { border-right:2px solid var(--border-default); }
.sidebar-head .logo img { display:block; width:36px; height:36px; object-fit:contain; }
.sidebar-head h1 { font-family:var(--font-display); letter-spacing:.03em; }
.topbar { background:var(--surface-0); border-bottom-color:var(--border-default); }
.topbar .title { font-family:var(--font-display); font-size:21px; letter-spacing:0; }
.content {
  background-color:var(--surface-1);
  background-image:
    radial-gradient(ellipse 72% 420px at 50% 0%, rgba(255,253,247,.75), transparent 100%),
    radial-gradient(circle at 12% 28%, rgba(155,117,69,.1) 0 1px, transparent 1.7px),
    radial-gradient(circle at 77% 62%, rgba(155,117,69,.07) 0 1px, transparent 1.7px);
  background-size:auto, 23px 27px, 31px 35px;
}
.content > :is(.card,.stat),
.content .card,
.content .stat { border-color:var(--border-default); border-radius:16px; box-shadow:0 8px 24px rgba(70,52,32,.055); }
[data-theme="dark"] .content {
  background-image:
    radial-gradient(ellipse 72% 420px at 50% 0%, rgba(161,108,62,.21), transparent 100%),
    radial-gradient(circle at 12% 28%, rgba(216,173,103,.1) 0 1px, transparent 1.7px),
    linear-gradient(145deg,#302920,#24211e);
}
[data-theme="dark"] .content .card,
[data-theme="dark"] .content .stat { box-shadow:0 8px 24px rgba(0,0,0,.18); }