/* ============================================================
   三套界面风格
   kids  : 云朵小狗（卡通，给小朋友）
   clean : 清爽简洁（大人向的极简仪表盘）
   warm  : 暖沙纸感（居家温柔配色）
   切换 <html data-theme="..."> 即可，所有组件只吃 CSS 变量
   ============================================================ */

/* ------------------------------------------------------------ 云朵小狗 */
[data-theme="kids"] {
  --bg: #eff7ff;
  --bg-image:
    radial-gradient(520px 260px at 8% 0%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(380px 220px at 92% 6%, rgba(255, 226, 240, .85), transparent 72%),
    radial-gradient(620px 300px at 50% 104%, rgba(206, 239, 255, .9), transparent 70%);
  --surface: #ffffff;
  --surface-2: #f4f9ff;
  --surface-3: #e7f3ff;
  --border: #e1eefb;
  --text: #2a3f58;
  --text-soft: #56708e;
  --muted: #93aac4;
  --primary: #5cb6ea;
  --primary-deep: #3f9ad2;
  --primary-ink: #ffffff;
  --primary-shadow: #3d92c8;
  --accent: #ff9dbb;
  --accent-soft: #ffe6f0;
  --ok: #46b98a;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow: 0 20px 44px -26px rgba(88, 146, 200, .65), 0 2px 6px rgba(120, 165, 205, .07);
  --shadow-soft: 0 8px 20px -14px rgba(88, 146, 200, .7);
  --nav-bg: rgba(255, 255, 255, .76);
  --btn-shadow: 0 4px 0 var(--primary-shadow), 0 12px 24px -16px rgba(61, 146, 200, .9);
}
[data-theme="kids"] .btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--primary-shadow); }
[data-theme="kids"] .card { overflow: hidden; }
[data-theme="kids"] .card::after {
  content: ""; position: absolute; top: -34px; right: -34px; width: 96px; height: 96px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 240, .9), rgba(255, 226, 240, 0) 70%);
  pointer-events: none;
}
[data-theme="kids"] .stamp { transform: rotate(-2deg); }
[data-theme="kids"] .quick:nth-child(1) .quick-icon { background: #e2f3ff; color: #3f9ad2; }
[data-theme="kids"] .quick:nth-child(2) .quick-icon { background: #ffe8f1; color: #d9679a; }
[data-theme="kids"] .quick:nth-child(3) .quick-icon { background: #e8f9f0; color: #3c9e77; }
[data-theme="kids"] .quick:nth-child(4) .quick-icon { background: #fff4e0; color: #c08a3e; }
[data-theme="kids"] .brand h1 { font-weight: 900; letter-spacing: .5px; }
[data-theme="kids"] .state-badge { animation: float 6s ease-in-out infinite; }

/* ------------------------------------------------------------ 清爽简洁 */
[data-theme="clean"] {
  --bg: #f5f6f8;
  --bg-image: linear-gradient(180deg, #f8f9fb 0%, #f2f4f7 100%);
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #f1f3f6;
  --border: #e5e8ee;
  --text: #101828;
  --text-soft: #475467;
  --muted: #98a2b3;
  --primary: #101828;
  --primary-deep: #000000;
  --primary-ink: #ffffff;
  --primary-shadow: #000;
  --accent: #3b82f6;
  --accent-soft: #eef4ff;
  --ok: #12b76a;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, .07);
  --nav-bg: rgba(255, 255, 255, .92);
  --btn-shadow: none;
  --topbar-h: 64px;
}
[data-theme="clean"] .card { padding: clamp(16px, 2vw, 22px); }
[data-theme="clean"] .card-head { margin-bottom: 12px; }
[data-theme="clean"] .card-head h3 { font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
[data-theme="clean"] .brand h1 { font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
[data-theme="clean"] .brand-mark { border-radius: 10px; box-shadow: none; }
[data-theme="clean"] .brand-mark svg { filter: grayscale(1) opacity(.75); }
[data-theme="clean"] .tab { border-radius: 8px; font-size: 13px; font-weight: 600; }
[data-theme="clean"] .tab.active { background: var(--surface-3); color: var(--text); box-shadow: none; }
[data-theme="clean"] .status-chip { border-radius: 8px; }
[data-theme="clean"] .stamp { border-style: solid; background: transparent; }
[data-theme="clean"] .quick { border-radius: var(--radius-md); }
[data-theme="clean"] .quick:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(16, 24, 40, .4); }
[data-theme="clean"] .quick-icon { border-radius: 8px; background: var(--surface-3); color: var(--text); }
[data-theme="clean"] .btn { border-radius: 10px; font-weight: 600; }
[data-theme="clean"] .btn.ghost { background: var(--surface); }
[data-theme="clean"] .eyebrow { letter-spacing: 1.4px; font-size: 10px; color: var(--muted); }

/* 简洁风不用吉祥物，改成圆形仪表 */
[data-theme="clean"] .status-visual { min-height: 150px; }
[data-theme="clean"] .mascot { display: none; }
[data-theme="clean"] .state-badge {
  position: static; transform: none; width: 132px; height: 132px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 700; letter-spacing: .5px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 10px var(--surface-3);
  animation: none;
}
[data-theme="clean"] .state-badge.is-busy { color: #b54708; box-shadow: inset 0 0 0 10px #fff6e8; }
[data-theme="clean"] .state-badge.is-offline { color: #b42318; box-shadow: inset 0 0 0 10px #fef0ef; }

/* ------------------------------------------------------------ 暖沙纸感 */
[data-theme="warm"] {
  --bg: #f8f2e9;
  --bg-image:
    radial-gradient(600px 320px at 100% 0%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(520px 280px at 0% 100%, rgba(233, 216, 196, .55), transparent 72%);
  --surface: #fffdf9;
  --surface-2: #faf5ed;
  --surface-3: #f3ead9;
  --border: #ece1d3;
  --text: #3c322a;
  --text-soft: #6b5b4d;
  --muted: #a3907c;
  --primary: #b6754c;
  --primary-deep: #9a5f3b;
  --primary-ink: #fffaf4;
  --primary-shadow: #8d5735;
  --accent: #9db38a;
  --accent-soft: #eef1e6;
  --ok: #6f9c6d;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow: 0 16px 36px -26px rgba(120, 90, 60, .55), 0 1px 2px rgba(120, 90, 60, .06);
  --shadow-soft: 0 6px 16px -12px rgba(120, 90, 60, .6);
  --nav-bg: rgba(255, 253, 249, .85);
  --font-display: "Songti SC", "Noto Serif CJK SC", Georgia, serif;
}
[data-theme="warm"] .brand h1 { letter-spacing: 1px; }
[data-theme="warm"] .eyebrow { color: var(--accent); letter-spacing: 2.2px; }
[data-theme="warm"] .mascot { filter: sepia(.18) saturate(1.05); }
[data-theme="warm"] .quick-icon { background: var(--accent-soft); color: var(--accent); }
[data-theme="warm"] .state-badge { background: var(--accent-soft); color: #5c6b4c; }
[data-theme="warm"] .stamp { border-style: solid; }
[data-theme="warm"] .btn.primary { box-shadow: 0 5px 0 var(--primary-shadow); }
[data-theme="warm"] .btn.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--primary-shadow); }