/* ===================== 外观风格系统（古典 / 赛博朋克 / 卡通） ===================== */

/* —— 古典（典雅 · 墨色 · 暖金） —— */
[data-style="classic"]{
  --font:"Noto Serif SC",Georgia,"Songti SC","SimSun",serif;
  --accent:#9C6B3E; --accent-strong:#6F4423; --accent-soft:#F3E9DA;
  --canvas:#F5EFE3; --card:#FBF7EE; --surface:#F1E9D8;
  --text:#2E2620; --text-2:#5C5040; --text-3:#8A7B66;
  --border:#E2D7C2; --border-2:#E2D7C2;
  --glass-bg:rgba(251,247,238,.72); --glass-brd:rgba(156,107,62,.22);
  --glow:0 0 0 1px rgba(156,107,62,.10), 0 10px 30px rgba(80,60,30,.10);
  --halo:
    radial-gradient(700px 560px at 14% 8%, rgba(156,107,62,.16), transparent 60%),
    radial-gradient(560px 520px at 86% 16%, rgba(204,164,102,.12), transparent 60%),
    radial-gradient(760px 640px at 70% 96%, rgba(156,107,62,.12), transparent 60%);
  --grid-c:rgba(156,107,62,.05);
  --bg-tint:rgba(40,30,15,.38);
}
[data-style="classic"][data-theme="dark"]{
  --accent:#C99A5B; --accent-strong:#E0B97A; --accent-soft:#2E2618;
  --canvas:#1E1A14; --card:#272218; --surface:#211C14;
  --text:#EDE3D2; --text-2:#B9A98C; --text-3:#7E7058;
  --border:#3A3120; --border-2:#3A3120;
  --glass-bg:rgba(39,34,24,.62); --glass-brd:rgba(201,154,91,.26);
  --glow:0 0 0 1px rgba(201,154,91,.16), 0 14px 40px rgba(0,0,0,.5);
  --halo:
    radial-gradient(720px 560px at 10% 6%, rgba(201,154,91,.22), transparent 60%),
    radial-gradient(640px 580px at 90% 14%, rgba(156,107,62,.14), transparent 60%);
  --grid-c:rgba(201,154,91,.05);
  --bg-tint:rgba(20,15,8,.55);
}

/* —— 赛博朋克（霓虹 · 深紫黑 · 发光） —— */
[data-style="cyber"]{
  --accent:#FF2E97; --accent-strong:#FF6AC1; --accent-soft:#2A0F2E;
  --canvas:#0E0A1A; --card:#1A0F2E; --surface:#160C28;
  --text:#F3E9FF; --text-2:#B98BD9; --text-3:#7A5C9C;
  --border:#3A1F5C; --border-2:#3A1F5C;
  --glass-bg:rgba(26,15,46,.55); --glass-brd:rgba(255,46,151,.30);
  --glow:0 0 0 1px rgba(255,46,151,.32), 0 0 30px rgba(255,46,151,.22);
  --halo:
    radial-gradient(700px 560px at 12% 8%, rgba(255,46,151,.28), transparent 60%),
    radial-gradient(620px 540px at 88% 16%, rgba(0,240,255,.16), transparent 60%),
    radial-gradient(760px 660px at 70% 96%, rgba(124,77,255,.22), transparent 60%);
  --grid-c:rgba(255,46,151,.10);
  --bg-tint:rgba(8,4,16,.55);
}
[data-style="cyber"][data-theme="dark"]{
  --accent:#00F0FF; --accent-strong:#7DF9FF; --accent-soft:#06222B;
  --canvas:#070410; --card:#100822; --surface:#0C0618;
  --text:#E8FBFF; --text-2:#7FD9E8; --text-3:#4E86A0;
  --border:#143A46; --border-2:#143A46;
  --glass-bg:rgba(16,8,34,.60); --glass-brd:rgba(0,240,255,.32);
  --glow:0 0 0 1px rgba(0,240,255,.34), 0 0 34px rgba(0,240,255,.26);
  --halo:
    radial-gradient(720px 560px at 10% 6%, rgba(0,240,255,.26), transparent 60%),
    radial-gradient(640px 580px at 90% 14%, rgba(255,46,151,.18), transparent 60%),
    radial-gradient(880px 720px at 76% 96%, rgba(124,77,255,.24), transparent 60%);
  --grid-c:rgba(0,240,255,.10);
  --bg-tint:rgba(4,2,10,.60);
}
[data-style="cyber"] h1,[data-style="cyber"] h2,[data-style="cyber"] h3,
[data-style="cyber"] .hero__title{
  text-shadow:0 0 14px rgba(255,46,151,.30);
}
[data-style="cyber"][data-theme="dark"] h1,[data-style="cyber"][data-theme="dark"] h2,
[data-style="cyber"][data-theme="dark"] h3,[data-style="cyber"][data-theme="dark"] .hero__title{
  text-shadow:0 0 14px rgba(0,240,255,.32);
}

/* —— 卡通（明亮 · 圆润 · 活泼） —— */
[data-style="cartoon"]{
  --accent:#FF7A00; --accent-strong:#FF9E3D; --accent-soft:#FFEAD6;
  --canvas:#FDF6E9; --card:#FFFFFF; --surface:#FFF1DC;
  --text:#3A2E1F; --text-2:#6B5A45; --text-3:#9A8670;
  --border:#FFD9A8; --border-2:#FFD9A8;
  --radius:26px; --radius-sm:18px;
  --glass-bg:rgba(255,255,255,.74); --glass-brd:rgba(255,122,0,.30);
  --glow:0 8px 24px rgba(255,122,0,.22);
  --font:"Yuanti SC","PingFang SC","Comic Sans MS","Noto Sans SC",sans-serif;
  --halo:
    radial-gradient(680px 560px at 14% 10%, rgba(255,122,0,.18), transparent 60%),
    radial-gradient(560px 520px at 86% 18%, rgba(0,200,255,.14), transparent 60%),
    radial-gradient(760px 640px at 70% 96%, rgba(255,214,10,.16), transparent 60%);
  --grid-c:transparent;
  --bg-tint:rgba(40,30,15,.22);
}
[data-style="cartoon"][data-theme="dark"]{
  --accent:#FFB13D; --accent-strong:#FFC974; --accent-soft:#3A2E1A;
  --canvas:#2A2238; --card:#352B47; --surface:#2F2540;
  --text:#FFF6E9; --text-2:#C9B8E0; --text-3:#9A86B8;
  --border:#4A3D63; --border-2:#4A3D63;
  --glass-bg:rgba(53,43,71,.68); --glass-brd:rgba(255,177,61,.32);
  --glow:0 8px 26px rgba(255,177,61,.26);
  --grid-c:rgba(255,177,61,.06);
  --bg-tint:rgba(20,16,30,.50);
}

/* ===================== 外观面板 ===================== */
.appearance{position:relative}
.appearance__btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--glass-brd);
  background:var(--glass-bg);color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(var(--glass-blur));transition:color .2s,border-color .2s;
}
.appearance__btn:hover{color:var(--accent);border-color:var(--accent)}
.appearance__btn.is-active{color:var(--accent);border-color:var(--accent)}
.appearance__panel{
  position:absolute;top:48px;right:0;width:284px;padding:16px;border-radius:16px;z-index:60;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  backdrop-filter:blur(calc(var(--glass-blur) + 6px));-webkit-backdrop-filter:blur(calc(var(--glass-blur) + 6px));
  box-shadow:var(--shadow);text-align:left;animation:pop .18s ease;
}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.appearance__title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px}
.appearance__sub{font-size:12px;font-weight:600;color:var(--text-3);margin:14px 0 8px}
.style-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.style-chip{
  height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;
}
.style-chip:hover{border-color:var(--accent);color:var(--accent)}
.style-chip.is-active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--glow)}
.seg{display:flex;gap:8px}
.seg button{
  flex:1;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-2);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;
}
.seg button.is-active{background:var(--accent);border-color:var(--accent);color:#fff}
.bg-row{display:flex;gap:8px}
.bg-row .btn{flex:1;justify-content:center}
.appearance__hint{font-size:11px;color:var(--text-3);margin-top:10px;line-height:1.5}