/* 三套界面风格。<html data-theme="note|light|wood">，由 base.html 在首屏前写入，顶栏可切换。 */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* 数学笔记本 note 在 note.css */

/* ═════════════════ 浅色经典 light ═════════════════
   最初那版：白色半透明面板 + 柔和光斑背景 + 靛紫渐变强调，宋体标题，卡牌带渐变描边 */
html[data-theme="light"] {
  --bg: #f4f5fb;
  --bg-img: radial-gradient(1000px 560px at 6% -12%, rgba(99,102,241,.16), transparent 60%), radial-gradient(800px 520px at 102% -4%, rgba(236,72,153,.11), transparent 60%), radial-gradient(1000px 640px at 50% 112%, rgba(14,165,233,.12), transparent 60%);
  --paper: rgba(255,255,255,.82); --paper2: #f6f7fc; --paper3: #eceef8;
  --line: rgba(120,125,170,.16); --bw: 1px; --rule: #eceef6; --rule2: #dfe2ee;
  --cover-bg: rgba(255,255,255,.72);
}
html[data-theme="light"] .bgfx::before, html[data-theme="light"] .bgfx::after { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(70px); opacity: .45; animation: drift 26s ease-in-out infinite alternate; }
html[data-theme="light"] .bgfx::before { left: -120px; top: 30%; background: #c7d2fe; }
html[data-theme="light"] .bgfx::after { right: -140px; top: 8%; background: #fbcfe8; animation-duration: 32s; }
@keyframes drift { to { transform: translate(140px, 90px) scale(1.15); } }
html[data-theme="light"] .sheet, html[data-theme="light"] .panel, html[data-theme="light"] .chbox, html[data-theme="light"] .cover, html[data-theme="light"] .box-head, html[data-theme="light"] .qcard, html[data-theme="light"] .auth-card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(255,255,255,.8); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(20,24,60,.04), 0 14px 34px rgba(20,24,60,.07); }
html[data-theme="light"] .btn.gold, html[data-theme="light"] .btn.primary, html[data-theme="light"] .cv-menu .go { box-shadow: 0 8px 20px -6px rgba(91,91,240,.55); }
html[data-theme="light"] .cv-title em, html[data-theme="light"] .logo-big h1 em { font-style: normal; background: linear-gradient(120deg, #5b5bf0, #a855f7 55%, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .cv-mark { box-shadow: 0 10px 24px -8px rgba(91,91,240,.6); }
html[data-theme="light"] .cover::after { content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(168,85,247,.16), transparent 65%); pointer-events: none; }
html[data-theme="light"] .cb-glyph, html[data-theme="light"] .box-lid { background: linear-gradient(145deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); box-shadow: 0 8px 18px -8px var(--c); }
html[data-theme="light"] .chbox::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(300px 120px at 0% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 70%); }
html[data-theme="light"] .meter i { background: linear-gradient(90deg, #5b5bf0, #a855f7); }
html[data-theme="light"] .cb-prog .meter i { background: var(--c); }
/* 卡牌：渐变描边 + 柔光卡图，大招流光 */
html[data-theme="light"] .card { border: 1.6px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(160deg, color-mix(in srgb, var(--tc) 35%, #fff), var(--tc)) border-box; }
html[data-theme="light"] .card .pc-art { background: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px) 0 0 / 100% .9em, linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px) 0 0 / .9em 100%, radial-gradient(circle at 50% 38%, #fff, var(--tbg) 72%); }
html[data-theme="light"] .card .pc-band { color: var(--tc); }
html[data-theme="light"] .card .cost.mana { background: linear-gradient(145deg, #60a5fa, #2563eb); }
html[data-theme="light"] .card .cost.hp { background: linear-gradient(145deg, #fb7185, #e11d48); }
html[data-theme="light"] .card.t-da { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ang), #f59e0b, #f43f5e, #a855f7, #3b82f6, #10b981, #f59e0b) border-box; border-width: 2px; animation: holo 6s linear infinite; box-shadow: 0 .3em 1.2em -.2em rgba(244,63,94,.35); }
@keyframes holo { to { --ang: 360deg; } }
html[data-theme="light"] .card.t-temp { background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(45deg, #c7cbe0 0 4px, transparent 4px 8px) border-box; }

/* ═════════════════ 极简木桌 wood ═════════════════
   参考视频《卡牌冒险者》：浅木纹桌面、白色扁平面板、小卡片、扁平血条，安静干净 */
html[data-theme="wood"] {
  --bg: #e8d9bc;
  --bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='240'%3E%3Cg fill='none' stroke='%23dccaa6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M0 40 C160 18 280 72 420 46 S590 30 640 42'/%3E%3Cpath d='M0 120 C130 98 250 150 400 122 S560 104 640 118'/%3E%3Cpath d='M0 200 C170 178 310 222 450 196 S580 186 640 194'/%3E%3C/g%3E%3C/svg%3E");
  --paper: #ffffff; --paper2: #faf6ee; --paper3: #f0e8d8;
  --line: #d8c9a8; --bw: 1px; --rule: #efe6d5; --rule2: #e0d3b8;
  --ink: #2e2923; --ink2: #5d5247; --muted: #94866f; --faint: #cbbfa8;
  --accent: #6b4f3a; --accent2: #8a6a4f; --accent-ink: #fff; --accent-grad: #6b4f3a; --accent-soft: #f3ebe0;
  --link: #7a5636; --hl: #fbefc6;
  --green: #5e9a6e; --red: #c4655d; --blue: #5a83b5; --violet: #8a73b0; --gold: #d29a2e;
  --hp: #e58a94; --mana: #5fb3ae;
  --ji: #5e9a6e; --jin: #5a83b5; --da: #c4655d; --bei: #9a9184; --tong: #a8834a;
  --ji-bg: #e7f1e4; --jin-bg: #e4ecf6; --da-bg: #f7e5e1; --bei-bg: #efece6; --tong-bg: #f3ead8;
  --r: 6px; --r-sm: 5px; --r-xs: 4px; --pill: 5px;
  --sh1: 0 1px 0 rgba(90,65,40,.12), 0 2px 8px rgba(90,65,40,.05); --sh2: 0 1px 0 rgba(90,65,40,.12), 0 10px 24px rgba(90,65,40,.1); --sh3: 0 24px 50px -16px rgba(60,40,20,.45);
  --f-ui: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif; --f-title: "Noto Serif SC", "Songti SC", serif; --title-w: 900;
  --nav-bg: #5a4535; --nav-ink: #eadfca; --nav-line: #47362a; --nav-on-bg: #f6efe2; --nav-on-ink: #4a382b; --nav-hover: rgba(255,255,255,.1); --nav-brand: #fff;
  --btn-bg: #fff; --btn-ink: #2e2923; --btn-line: #d3c3a2; --btn-r: 5px; --btn-bw: 1px; --btn-sh: 0 1px 0 rgba(90,65,40,.14); --btn-sh-h: 0 3px 8px rgba(90,65,40,.14);
  --btn-pri-bg: #5a4535; --btn-pri-ink: #fff; --btn-pri-line: #5a4535;
  --tab-on-bg: #5a4535; --tab-on-ink: #fff; --seg-on-bg: #5a4535; --seg-on-ink: #fff;
  --card-bg: #fff; --card-line: #cdbb94; --card-bw: 1px; --card-r: .3em; --card-sh: 0 .1em 0 rgba(90,65,40,.2), 0 .35em .8em rgba(90,65,40,.1); --card-sh-h: 0 .15em 0 rgba(90,65,40,.2), 0 .8em 1.4em rgba(90,65,40,.18);
  --card-name-f: "Noto Sans SC", sans-serif; --card-name-w: 700; --card-art-r: .15em;
  --back-bg: #3e4b66 repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 8px); --back-line: rgba(241,230,207,.6); --back-ink: #f1e6cf;
  --cover-bg: transparent;
}
html[data-theme="wood"] body { background-size: 640px 240px; }
html[data-theme="wood"] .topnav { backdrop-filter: none; box-shadow: 3px 0 0 rgba(60,40,25,.18); }
html[data-theme="wood"] .brand-mark i { border-color: #fff; }
html[data-theme="wood"] .brand-mark i:nth-child(1) { background: #e8d9bc; }
html[data-theme="wood"] .brand-mark i:nth-child(2) { background: #fff; }
html[data-theme="wood"] .brand-mark b { color: #5a4535; }
html[data-theme="wood"] .themepick { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
html[data-theme="wood"] .themepick button { color: #eadfca; }
html[data-theme="wood"] .themepick button:hover { background: rgba(255,255,255,.12); }
html[data-theme="wood"] .themepick button.on { background: #f6efe2; color: #4a382b; }
html[data-theme="wood"] .me .stat { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #eadfca; }
html[data-theme="wood"] .me .stat b { color: #fff; }
html[data-theme="wood"] .me .btn { box-shadow: none; }
html[data-theme="wood"] .me .avatar { background: #f6efe2; color: #5a4535; }
html[data-theme="wood"] .ribbon { background: #5a4535; color: #fff; }
/* 封面：直接摆在木桌上 */
html[data-theme="wood"] .cover { border: none; box-shadow: none; padding-left: 8px; padding-right: 8px; }
html[data-theme="wood"] .cv-mark { display: none; }
html[data-theme="wood"] .cv-title { background: #5a4535; color: #fff; padding: 8px 28px 12px; border-radius: 8px; letter-spacing: 6px; box-shadow: 0 4px 0 rgba(60,40,25,.25); font-size: 50px; }
html[data-theme="wood"] .cv-title em { font-style: normal; }
html[data-theme="wood"] .cv-sub { color: #6b5a48; }
html[data-theme="wood"] .cv-pitch { color: #4f4439; }
html[data-theme="wood"] .logo-big h1 { background: #5a4535; color: #fff; padding: 6px 26px 10px; border-radius: 8px; box-shadow: 0 4px 0 rgba(60,40,25,.25); }
html[data-theme="wood"] .logo-big h1 em { color: #f3d9a6; font-style: normal; }
html[data-theme="wood"] .vol-head { border-bottom-color: rgba(90,69,53,.25); }
html[data-theme="wood"] .vol-head h2 { color: #3e3127; }
html[data-theme="wood"] .vol-head small, html[data-theme="wood"] .vol-head .vp { color: #6b5a48; }
html[data-theme="wood"] .cb-glyph, html[data-theme="wood"] .box-lid { border-radius: 4px; }
html[data-theme="wood"] .box-head::before { width: 4px; }
html[data-theme="wood"] .card .glyph { color: var(--ink); }
html[data-theme="wood"] .card .pc-name { font-size: .95em; }
html[data-theme="wood"] .card .cost { box-shadow: 0 0 0 .12em #fff; }
html[data-theme="wood"] .card.t-da { box-shadow: inset 0 0 0 .1em #fff, inset 0 0 0 .18em #d9b46a, var(--card-sh); --card-line: #c9a35c; }
html[data-theme="wood"] .card-back::before { border-width: 1px; }
html[data-theme="wood"] .toast { background: #5a4535; }
html[data-theme="wood"] .me .btn.primary { background: #f3d9a6; color: #4a382b; border-color: #f3d9a6; }
html[data-theme="wood"] .me .btn:not(.primary) { background: #fff; }
html[data-theme="wood"] .cover { padding-right: 44px; }
html[data-theme="wood"] .cb-glyph, html[data-theme="wood"] .box-lid { background: color-mix(in srgb, var(--c) 62%, #8a7358); }
html[data-theme="wood"] .cb-prog .meter i { background: color-mix(in srgb, var(--c) 62%, #8a7358); }

/* 木桌：学习页的例题 / 同族卡选中态用棕色实心，和未选中拉开差距 */
html[data-theme="wood"] .ex-tabs button.on,
html[data-theme="wood"] .sib a.on { background: #5a4535; color: #fff; }
html[data-theme="wood"] .ex-tabs button.on .role { background: rgba(255,255,255,.18); color: #fff; }