/* ============================================================
   SVOIC 统一设计体系 —— 源自诗韵牌局 app_theme.dart 的六主题令牌
   用法:body 挂 theme-night-sky / theme-sky-blue / theme-bamboo-green /
        theme-twilight-purple / theme-ink-black / theme-sunset-orange,
        页面用 .card / .btn / .input / .badge 等组件类。
   立体感配方:按钮 = 上亮下暗渐变 + 外阴影 + 主色光晕 + 内高光,
              hover 上浮、active 下沉;卡片 = 毛玻璃 + 边框 + 层阴影。
   ============================================================ */

/* ---------- 夜空蓝(默认/品牌主主题) ---------- */
body, body.theme-night-sky {
  --bg-gradient: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 30%, #0f2847 60%, #1a3a5c 100%);
  --primary: #D4AF37; --primary-light: #FFD700; --primary-dark: #B8860B;
  --accent: #FFD700;
  --text-1: #ffffff; --text-2: rgba(255,255,255,.70); --text-3: rgba(255,255,255,.50);
  --card-bg: rgba(255,255,255,.10); --card-border: rgba(255,255,255,.15);
  --surface: rgba(255,255,255,.05); --divider: rgba(255,255,255,.12);
  --dialog-bg: #1a2a3a;
  --btn-hi: #FFD700; --btn-lo: #D4AF37; --btn-text: #1a1a2e;
  --glow: rgba(212,175,55,.35);
  --input-bg: rgba(0,0,0,.30);
}
/* ---------- 宣纸韵(诗韵中心缺省;网页端新增,古色古香) */
body.theme-xuan-paper {
  --bg-gradient: linear-gradient(160deg, #f7f1e3 0%, #f1e8d2 30%, #e9dcc0 65%, #ddcda8 100%);
  --primary: #9c3f2f; --primary-light: #c3564a; --primary-dark: #7d2f22;   /* 朱砂 */
  --accent: #8a6d1f;                                                       /* 暗金 */
  --text-1: #2b2416; --text-2: #55492f; --text-3: #8a7c5d;                 /* 墨色三阶 */
  --card-bg: rgba(255,252,242,.72); --card-border: rgba(90,70,40,.28);
  --surface: rgba(255,252,245,.85); --divider: rgba(90,70,40,.15);
  --dialog-bg: #f6efdd;
  --btn-hi: #b0503f; --btn-lo: #8f3628; --btn-text: #f7f1e3;               /* 朱砂印钮 */
  --glow: rgba(154,98,42,.25);
  --input-bg: rgba(255,252,242,.8);
}

/* ---------- 晴空蓝 ---------- */
body.theme-sky-blue {
  --bg-gradient: linear-gradient(180deg, #F8FBFF 0%, #E8F4FD 30%, #D0E8F8 60%, #B8DCF5 100%);
  --primary: #2E7D9A; --primary-light: #4A9BB8; --primary-dark: #1A5F7A;
  --accent: #0288D1;
  --text-1: #1A3A4A; --text-2: #4A6A7A; --text-3: #7A9AAA;
  --card-bg: rgba(255,255,255,.80); --card-border: rgba(0,0,0,.20);
  --surface: rgba(255,255,255,.90); --divider: rgba(0,0,0,.10);
  --dialog-bg: #F5FAFD;
  --btn-hi: #4A9BB8; --btn-lo: #2E7D9A; --btn-text: #ffffff;
  --glow: rgba(46,125,154,.30);
  --input-bg: rgba(255,255,255,.85);
}
/* ---------- 翠竹绿 ---------- */
body.theme-bamboo-green {
  --bg-gradient: linear-gradient(135deg, #F5FBF5 0%, #E8F5E9 30%, #D5ECD6 60%, #C8E6C9 100%);
  --primary: #2E7D32; --primary-light: #4CAF50; --primary-dark: #1B5E20;
  --accent: #43A047;
  --text-1: #1A3A1A; --text-2: #4A6A4A; --text-3: #7A9A7A;
  --card-bg: rgba(255,255,255,.80); --card-border: rgba(0,0,0,.20);
  --surface: rgba(255,255,255,.90); --divider: rgba(0,0,0,.10);
  --dialog-bg: #F1F8F2;
  --btn-hi: #66BB6A; --btn-lo: #43A047; --btn-text: #ffffff;
  --glow: rgba(67,160,71,.30);
  --input-bg: rgba(255,255,255,.85);
}
/* ---------- 暮霞紫 ---------- */
body.theme-twilight-purple {
  --bg-gradient: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 30%, #3d2b5e 60%, #4a3a6e 100%);
  --primary: #CE93D8; --primary-light: #E1BEE7; --primary-dark: #AB47BC;
  --accent: #BA68C8;
  --text-1: #ffffff; --text-2: rgba(255,255,255,.70); --text-3: rgba(255,255,255,.50);
  --card-bg: rgba(255,255,255,.10); --card-border: rgba(255,255,255,.15);
  --surface: rgba(255,255,255,.05); --divider: rgba(255,255,255,.12);
  --dialog-bg: #2d1b4e;
  --btn-hi: #CE93D8; --btn-lo: #AB47BC; --btn-text: #2d1b4e;
  --glow: rgba(186,104,200,.35);
  --input-bg: rgba(0,0,0,.30);
}
/* ---------- 墨韵黑 ---------- */
body.theme-ink-black {
  --bg-gradient: linear-gradient(180deg, #0D0D0D 0%, #1A1A1A 30%, #262626 60%, #333333 100%);
  --primary: #E0E0E0; --primary-light: #FFFFFF; --primary-dark: #BDBDBD;
  --accent: #D4AF37;
  --text-1: #ffffff; --text-2: rgba(255,255,255,.70); --text-3: rgba(255,255,255,.50);
  --card-bg: rgba(255,255,255,.10); --card-border: rgba(255,255,255,.20);
  --surface: rgba(255,255,255,.05); --divider: rgba(255,255,255,.15);
  --dialog-bg: #1F1F1F;
  --btn-hi: #E0E0E0; --btn-lo: #BDBDBD; --btn-text: #1a1a1a;
  --glow: rgba(212,175,55,.30);
  --input-bg: rgba(0,0,0,.35);
}
/* ---------- 暖阳橙 ---------- */
body.theme-sunset-orange {
  --bg-gradient: linear-gradient(135deg, #FFFBF5 0%, #FFF3E0 30%, #FFE8CC 60%, #FFDDB8 100%);
  --primary: #E65100; --primary-light: #FF8A50; --primary-dark: #BF360C;
  --accent: #FF6D00;
  --text-1: #3E2723; --text-2: #5D4037; --text-3: #8D6E63;
  --card-bg: rgba(255,255,255,.80); --card-border: rgba(0,0,0,.20);
  --surface: rgba(255,255,255,.90); --divider: rgba(0,0,0,.10);
  --dialog-bg: #FFF8F0;
  --btn-hi: #FF8A50; --btn-lo: #E65100; --btn-text: #ffffff;
  --glow: rgba(230,81,0,.30);
  --input-bg: rgba(255,255,255,.85);
}

/* ============ 基础 ============ */
body {
  margin: 0; min-height: 100vh;
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text-1);
  transition: background .3s, color .3s;
}

/* ============ 组件:卡片 ============ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: 0 14px 36px rgba(0,0,0,.3), 0 0 22px var(--glow); }

/* ============ 组件:立体按钮 ============ */
.btn {
  background: linear-gradient(180deg, var(--btn-hi) 0%, var(--btn-lo) 100%);
  color: var(--btn-text);
  border: none; border-radius: 9px;
  padding: 9px 26px; font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.30), 0 0 14px var(--glow),
              inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 7px 20px rgba(0,0,0,.35), 0 0 22px var(--glow),
              inset 0 1px 0 rgba(255,255,255,.45);
  filter: brightness(1.05);
}
.btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.30), inset 0 1px 2px rgba(0,0,0,.15);
}
.btn:disabled { opacity: .5; cursor: default; }

/* ============ 组件:输入 ============ */
.input, textarea.input {
  width: 100%; box-sizing: border-box;
  background: var(--input-bg); color: var(--text-1);
  border: 1px solid var(--card-border); border-radius: 10px;
  padding: 12px; font: inherit;
}
.input:focus { outline: 1.5px solid var(--primary); }
.input::placeholder { color: var(--text-3); }

/* ============ 组件:徽章/分隔 ============ */
.badge {
  display: inline-block; font-size: 12px; color: var(--text-3);
  border: 1px solid var(--card-border); border-radius: 999px; padding: 2px 12px;
}
.hr { border: none; border-top: 1px solid var(--divider); }

/* ============ 组件:主题切换菜单 ============ */
.theme-switch { position: relative; }
.theme-switch > button {
  background: var(--card-bg); color: var(--text-2);
  border: 1px solid var(--card-border); border-radius: 9px;
  padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15);
  transition: box-shadow .15s, transform .15s;
}
.theme-switch > button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25), 0 0 12px var(--glow); }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  min-width: 150px; padding: 6px;
  background: var(--dialog-bg);
  border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.3);
}
.theme-menu[hidden] { display: none; }
.theme-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: var(--text-2);
}
.theme-item:hover { background: var(--card-bg); color: var(--text-1); }
.theme-item.active { color: var(--primary); font-weight: 700; }
.theme-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); flex-shrink: 0; }