/* SunnyUI 2.1 original tokens, scoped to .sunny-sample. Source SHA256: 40f48d684322f8f3c81d4099394de50aa6fcf0da7c55a8ac3712ca8eee8ca96d */

/* ============================================================
   MediaIndex 0.8.6 · 发现页重绘预览
   独立静态样例：不接入现有工程，不读取后端数据
   外观模型：明暗 × 质感（16） × 配色（10 单色 / 16 多色）
   ============================================================ */

.sunny-sample{
  --font:"PingFang SC","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --bg:#eceff4;
  --surface:#ffffff;
  --surface-2:#f7f8fb;
  --soft-base:#f3f5f9;
  --text:#18212e;
  --text-2:#465468;
  --muted:#6c7a8d;
  --line:#e1e6ee;
  --line-strong:#ccd4e0;
  --accent:#376bd8;
  --accent-2:#18a0a6;
  --accent-3:#8a5cc7;
  --accent-ink:#ffffff;
  --success:#2f8465;
  --warning:#9a6a1d;
  --danger:#bf4a56;
  --r-panel:22px;
  --raised:10px 10px 24px rgba(26,42,68,.10),-8px -8px 20px rgba(255,255,255,.92);
  --raised-sm:5px 5px 12px rgba(26,42,68,.10),-4px -4px 10px rgba(255,255,255,.9);
  --recessed:inset 3px 3px 7px rgba(26,42,68,.10),inset -3px -3px 7px rgba(255,255,255,.92);
  --ease:cubic-bezier(.22,.61,.36,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.sunny-sample[data-theme="dark"]{
  --bg:#12171f;
  --surface:#1a212b;
  --surface-2:#202834;
  --soft-base:#1b222c;
  --text:#e9eef6;
  --text-2:#bcc7d6;
  --muted:#93a1b4;
  --line:#2b3542;
  --line-strong:#3a4757;
  --accent-ink:#0f1620;
  --success:#7fcbaa;
  --warning:#dfb87c;
  --danger:#ef9ba6;
  --raised:10px 10px 26px rgba(0,0,0,.45),-8px -8px 20px rgba(124,146,178,.07);
  --raised-sm:5px 5px 14px rgba(0,0,0,.42),-4px -4px 10px rgba(124,146,178,.06);
  --recessed:inset 3px 3px 7px rgba(0,0,0,.5),inset -3px -3px 7px rgba(124,146,178,.06);
}

/* ---------- 圆角：与明暗、质感、配色并列 ---------- */
.sunny-sample[data-corner="tight"]{--corner-scale:.42}
.sunny-sample[data-corner="default"]{--corner-scale:1}
.sunny-sample[data-corner="round"]{--corner-scale:1.9}

/* ---------- 配色：单色 ---------- */
.sunny-sample[data-color="blue"]{--accent:#376bd8;--accent-2:#18a0a6;--accent-3:#8a5cc7}
.sunny-sample[data-color="celadon"]{--accent:#2f7f76;--accent-2:#8fa06a;--accent-3:#3f6f9e}
.sunny-sample[data-color="green"]{--accent:#188466;--accent-2:#2f6fb5;--accent-3:#c08a2e}
.sunny-sample[data-color="violet"]{--accent:#8855cc;--accent-2:#2a89a0;--accent-3:#c05a86}
.sunny-sample[data-color="rose"]{--accent:#c34278;--accent-2:#d0872f;--accent-3:#4d6cae}
.sunny-sample[data-color="brick"]{--accent:#a8433a;--accent-2:#b98a3e;--accent-3:#4e6b7c}
.sunny-sample[data-color="amber"]{--accent:#b27a16;--accent-2:#2f7f76;--accent-3:#8f4d6e}
.sunny-sample[data-color="mustard"]{--accent:#8f7a12;--accent-2:#3f7a5e;--accent-3:#9c5a3c}
.sunny-sample[data-color="indigo"]{--accent:#3b4fa8;--accent-2:#2a8a9a;--accent-3:#8f4f86}
.sunny-sample[data-color="slate"]{--accent:#61758f;--accent-2:#8a7a5e;--accent-3:#5b7f86}

/* ---------- 配色：多色 ---------- */
.sunny-sample[data-color="catppuccin"]{--accent:#c14f7c;--accent-2:#179299;--accent-3:#d20f39}
.sunny-sample[data-color="nord"]{--accent:#427fa4;--accent-2:#5e678d;--accent-3:#42776c}
.sunny-sample[data-color="iris"]{--accent:#7958c8;--accent-2:#b34379;--accent-3:#22778a}
.sunny-sample[data-color="deepsea"]{--accent:#1d6f8b;--accent-2:#b4892f;--accent-3:#4c5d8a}
.sunny-sample[data-color="coast"]{--accent:#14869a;--accent-2:#b64d38;--accent-3:#866519}
.sunny-sample[data-color="lava"]{--accent:#b4465e;--accent-2:#7a4c93;--accent-3:#d97a3d}
.sunny-sample[data-color="macaron"]{--accent:#329383;--accent-2:#9461ac;--accent-3:#b35a70}
.sunny-sample[data-color="cedar"]{--accent:#2e8b74;--accent-2:#8fa06a;--accent-3:#c9a227}
.sunny-sample[data-color="peach"]{--accent:#c16648;--accent-2:#7e6541;--accent-3:#6b7d49}
.sunny-sample[data-color="lavender"]{--accent:#467fb2;--accent-2:#7758a6;--accent-3:#9b586e}
.sunny-sample[data-color="mist"]{--accent:#4f7fa8;--accent-2:#8fb9c9;--accent-3:#d9a98a}
.sunny-sample[data-color="forest"]{--accent:#3d895f;--accent-2:#8a6532;--accent-3:#625eaa}
.sunny-sample[data-color="honey"]{--accent:#a17a24;--accent-2:#397976;--accent-3:#ad6556}
.sunny-sample[data-color="oasis"]{--accent:#b07a2e;--accent-2:#4e8a6b;--accent-3:#8a5a3c}
.sunny-sample[data-color="ruby"]{--accent:#c04757;--accent-2:#567647;--accent-3:#9b742e}
.sunny-sample[data-color="nightviolet"]{--accent:#6c4ab6;--accent-2:#c05a8e;--accent-3:#2f8fa8}

.sunny-sample[data-theme="dark"][data-color="blue"]{--accent:#9dbbff}
.sunny-sample[data-theme="dark"][data-color="celadon"]{--accent:#8fd6c9}
.sunny-sample[data-theme="dark"][data-color="green"]{--accent:#7fd3b0}
.sunny-sample[data-theme="dark"][data-color="violet"]{--accent:#c0a4f5}
.sunny-sample[data-theme="dark"][data-color="rose"]{--accent:#f0a3bf}
.sunny-sample[data-theme="dark"][data-color="brick"]{--accent:#eda79e}
.sunny-sample[data-theme="dark"][data-color="amber"]{--accent:#e8c07c}
.sunny-sample[data-theme="dark"][data-color="mustard"]{--accent:#ddc66a}
.sunny-sample[data-theme="dark"][data-color="indigo"]{--accent:#a9b6f0}
.sunny-sample[data-theme="dark"][data-color="slate"]{--accent:#b2c1d4}
.sunny-sample[data-theme="dark"][data-color="catppuccin"]{--accent:#f0acc7;--accent-2:#94e2d5;--accent-3:#f5c2e7}
.sunny-sample[data-theme="dark"][data-color="nord"]{--accent:#88c0d0;--accent-2:#b48ead;--accent-3:#a3be8c}
.sunny-sample[data-theme="dark"][data-color="iris"]{--accent:#b7a5ff;--accent-2:#f3a6ce;--accent-3:#79d1de}
.sunny-sample[data-theme="dark"][data-color="deepsea"]{--accent:#7fd2e8;--accent-2:#ecd08a;--accent-3:#a9b6e0}
.sunny-sample[data-theme="dark"][data-color="coast"]{--accent:#79d5e5;--accent-2:#ffaf98;--accent-3:#edcf86}
.sunny-sample[data-theme="dark"][data-color="lava"]{--accent:#f2a5b2;--accent-2:#c3a6ea;--accent-3:#f6c39a}
.sunny-sample[data-theme="dark"][data-color="macaron"]{--accent:#a7dfd0;--accent-2:#dab6ef;--accent-3:#f4bacb}
.sunny-sample[data-theme="dark"][data-color="cedar"]{--accent:#9fe0c9;--accent-2:#cfd9a8;--accent-3:#ecd08a}
.sunny-sample[data-theme="dark"][data-color="peach"]{--accent:#f5b79d;--accent-2:#e2cb9d;--accent-3:#c8d7a7}
.sunny-sample[data-theme="dark"][data-color="lavender"]{--accent:#a5c7e8;--accent-2:#c9b4ef;--accent-3:#e8b4c7}
.sunny-sample[data-theme="dark"][data-color="mist"]{--accent:#a9cbe8;--accent-2:#cfe6ec;--accent-3:#f0cfb4}
.sunny-sample[data-theme="dark"][data-color="forest"]{--accent:#9bd0af;--accent-2:#dfc392;--accent-3:#bdb8ef}
.sunny-sample[data-theme="dark"][data-color="honey"]{--accent:#e4c278;--accent-2:#9dcfcb;--accent-3:#e5b0a3}
.sunny-sample[data-theme="dark"][data-color="oasis"]{--accent:#eccd94;--accent-2:#a8d4b6;--accent-3:#d5ad8c}
.sunny-sample[data-theme="dark"][data-color="ruby"]{--accent:#ee9aa5;--accent-2:#b5cda4;--accent-3:#dfc48a}
.sunny-sample[data-theme="dark"][data-color="nightviolet"]{--accent:#bfa6f5;--accent-2:#f0a8c2;--accent-3:#8fd8e6}
.sunny-sample[data-theme="dark"][data-color]{--accent-ink:#0f1620}

/* ============================================================
   质感 token：16 种质感共用一套变量，组件只消费变量
   ============================================================ */
.sunny-sample{
  --mat-page:var(--bg);
  --mat-sidebar:color-mix(in srgb,var(--surface) 55%,var(--bg));
  --mat-sidebar-shadow:none;
  --mat-chrome:var(--surface);
  --mat-fill:var(--surface);
  --mat-edge:var(--line);
  --mat-shadow:0 1px 2px rgba(16,26,42,.05);
  --mat-radius:22px;
  --corner-scale:1;
  --mat-blur:none;
  --mat-control:var(--surface);
  --mat-control-edge:var(--line);
  --mat-control-shadow:none;
  --mat-input-shadow:none;
  --mat-active-bg:color-mix(in srgb,var(--accent) 11%,transparent);
  --mat-active-shadow:none;
}

/* 01 柔软浮雕 —— 连续基底上轻轻凸起，控件按下去会凹 */
.sunny-sample[data-material="soft"]{
  --bg:color-mix(in srgb,var(--accent) 3%,#eef0f4);
  --surface:color-mix(in srgb,var(--accent) 2%,#eef0f5);
  --soft-base:color-mix(in srgb,var(--bg) 72%,var(--surface));
  --mat-sidebar:var(--soft-base);
  --mat-sidebar-shadow:inset -1px 0 var(--line);
  --mat-chrome:color-mix(in srgb,var(--soft-base) 94%,transparent);
  --mat-fill:linear-gradient(158deg,color-mix(in srgb,var(--accent) 7%,var(--soft-base)),var(--soft-base) 54%);
  --mat-edge:color-mix(in srgb,var(--accent) 9%,transparent);
  --mat-shadow:var(--raised),inset 0 1px 0 rgba(255,255,255,.65);
  --mat-control:var(--soft-base);
  --mat-control-edge:color-mix(in srgb,var(--accent) 18%,transparent);
  --mat-control-shadow:var(--raised-sm);
  --mat-input-shadow:var(--recessed);
  --mat-active-bg:var(--soft-base);
  --mat-active-shadow:var(--raised-sm);
  --mat-page:
    radial-gradient(1100px 620px at 12% -12%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 62%),
    radial-gradient(900px 560px at 102% 4%,color-mix(in srgb,var(--accent-2) 9%,transparent),transparent 58%),
    var(--bg);
}
.sunny-sample[data-theme="dark"][data-material="soft"]{
  --bg:color-mix(in srgb,var(--accent) 3%,#24232c);
  --surface:color-mix(in srgb,var(--accent) 3%,#302e3a);
  --mat-shadow:var(--raised),inset 0 1px 0 rgba(255,255,255,.05);
}
/* 02 清晰默认 —— 中性实色，靠留白和字重分层 */
.sunny-sample[data-material="clear"]{
  --bg:#eff1f5;
  --mat-fill:#fff;--mat-edge:#dfe4ec;--mat-shadow:none;
  --mat-radius:18px;--mat-control:#fff;--mat-control-edge:#e2e7ef;--mat-control-shadow:none;
  --mat-chrome:#fbfcfe;
  --mat-sidebar:#f7f8fb;--mat-sidebar-shadow:inset -1px 0 #e2e7ef;
  --mat-active-bg:color-mix(in srgb,var(--accent) 10%,transparent);
}
.sunny-sample[data-theme="dark"][data-material="clear"]{--mat-fill:#1a212b;--mat-control:#202834;--bg:#12171f;--mat-sidebar:#171d26}
/* 03 纸页档案 —— 暖纸、纤维、内嵌压痕 */
.sunny-sample[data-material="paper"]{
  --bg:#e6dbc4;--surface:#fffdf6;--surface-2:#efe6d5;--line:#dccfb9;
  --text:#2a2520;--text-2:#544b3f;--muted:#7a6f5f;--line-strong:#cdbfa9;
  --mat-page:repeating-linear-gradient(0deg,transparent 0 3px,rgba(139,116,82,.03) 3px 4px),
    repeating-linear-gradient(90deg,transparent 0 5px,rgba(139,116,82,.024) 5px 6px),var(--bg);
  --mat-sidebar:#f3ead8;--mat-sidebar-shadow:inset -1px 0 var(--line);--mat-chrome:#fffdf6;
  --mat-fill:linear-gradient(110deg,rgba(139,116,82,.035),transparent 42%),#fffdf6;
  --mat-edge:#ddd0ba;
  --mat-shadow:inset 0 0 0 5px rgba(255,254,247,.75),0 3px 0 rgba(139,116,82,.16),0 10px 20px rgba(139,116,82,.07);
  --mat-radius:10px;
  --mat-control:#fffef8;--mat-control-edge:#ddd0ba;
  --mat-control-shadow:0 3px 0 rgba(139,116,82,.14);
  --mat-input-shadow:inset 0 2px 4px rgba(139,116,82,.13);
  --mat-active-bg:#f2e9d6;--mat-active-shadow:inset 0 2px 3px rgba(139,116,82,.16);
}
.sunny-sample[data-theme="dark"][data-material="paper"]{
  --bg:#201e1a;--surface:#2c2923;--surface-2:#393328;--line:#4f4738;
  --text:#f3ead9;--text-2:#d6c9b4;--muted:#a99b85;--line-strong:#5d5442;
  --mat-page:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,240,210,.012) 3px 4px),#201e1a;
  --mat-sidebar:#26241f;--mat-chrome:#2c2923;
  --mat-fill:linear-gradient(110deg,rgba(255,255,255,.02),transparent 40%),#2c2923;
  --mat-edge:#4a4335;--mat-shadow:inset 0 0 0 4px rgba(255,255,255,.02),0 2px 0 rgba(0,0,0,.3),0 10px 22px rgba(0,0,0,.2);
  --mat-control:#343028;--mat-control-edge:#4a4335;--mat-active-bg:#393328;
}
/* 04 亚麻织纹 —— 真正的斜向织纹，哑光、无光泽 */
.sunny-sample[data-material="linen"]{
  --bg:#dcd9cf;--surface:#eeeae0;--surface-2:#eae6db;--line:#d3cdbe;
  --text:#22211a;--text-2:#4e4b40;--muted:#736e60;--line-strong:#c1b9a6;
  --mat-page:repeating-linear-gradient(45deg,rgba(104,94,74,.05) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(104,94,74,.045) 0 1px,transparent 1px 3px),var(--bg);
  --mat-sidebar:#eae6db;--mat-sidebar-shadow:inset -1px 0 var(--line-strong);--mat-chrome:#efebe1;
  --mat-fill:repeating-linear-gradient(45deg,rgba(96,86,66,.11) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(96,86,66,.095) 0 1px,transparent 1px 3px),#eeeae0;
  --mat-edge:#d0c9b9;
  --mat-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 7px 16px rgba(84,74,54,.09);
  --mat-radius:8px;
  --mat-control:#e9e5d9;--mat-control-edge:#d0c9b9;
  --mat-control-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 2px 3px rgba(84,74,54,.10);
  --mat-input-shadow:inset 0 2px 4px rgba(84,74,54,.16);
  --mat-active-bg:#ddd7c7;--mat-active-shadow:inset 0 2px 3px rgba(84,74,54,.16);
}
.sunny-sample[data-theme="dark"][data-material="linen"]{
  --bg:#1c1b17;--surface:#272521;--surface-2:#302d27;--line:#413d34;
  --text:#f0ece1;--text-2:#cfc8b8;--muted:#9d9585;--line-strong:#524c40;
  --mat-page:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),#1c1b17;
  --mat-sidebar:#232119;--mat-chrome:#272521;
  --mat-fill:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),#272521;
  --mat-edge:#3d3931;--mat-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 18px rgba(0,0,0,.22);
  --mat-control:#2e2b25;--mat-control-edge:#3d3931;--mat-active-bg:#332f28;
}
/* 05 iOS 玻璃 —— 清透中心、亮边、悬浮投影 */
.sunny-sample[data-material="glass"]{
  --mat-page:
    radial-gradient(900px 620px at 6% -8%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 60%),
    radial-gradient(760px 520px at 98% 10%,color-mix(in srgb,var(--accent-2) 20%,transparent),transparent 56%),
    radial-gradient(700px 480px at 55% 108%,color-mix(in srgb,var(--accent-3) 14%,transparent),transparent 60%),var(--bg);
  --mat-sidebar:color-mix(in srgb,var(--surface) 36%,transparent);
  --mat-sidebar-shadow:inset -1px 0 rgba(255,255,255,.25);
  --mat-chrome:color-mix(in srgb,var(--surface) 74%,transparent);
  --mat-fill:color-mix(in srgb,var(--surface) 44%,transparent);
  --mat-edge:color-mix(in srgb,#fff 55%,transparent);
  --mat-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 20px 44px rgba(16,26,42,.14);
  --mat-blur:blur(24px) saturate(150%);
  --mat-control:color-mix(in srgb,var(--surface) 48%,transparent);
  --mat-control-edge:color-mix(in srgb,#fff 48%,transparent);
  --mat-control-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(16,26,42,.10);
  --mat-input-shadow:inset 0 2px 4px rgba(16,26,42,.12);
  --mat-active-bg:color-mix(in srgb,var(--surface) 54%,transparent);
  --mat-active-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 16px color-mix(in srgb,var(--accent) 12%,transparent);
}
.sunny-sample[data-theme="dark"][data-material="glass"]{
  --mat-edge:rgba(255,255,255,.14);
  --mat-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px rgba(0,0,0,.32);
  --mat-control-edge:rgba(255,255,255,.14);
  --mat-control-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.24);
  --mat-chrome:color-mix(in srgb,var(--surface) 72%,transparent);
}
/* 06 雾面玻璃 —— 更厚更雾，整块没有浮起来 */
.sunny-sample[data-material="frosted"]{
  --mat-page:
    radial-gradient(1200px 700px at 20% -10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 65%),
    radial-gradient(900px 600px at 96% 90%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 60%),var(--bg);
  --mat-sidebar:color-mix(in srgb,var(--surface) 70%,transparent);
  --mat-sidebar-shadow:inset -1px 0 rgba(255,255,255,.4);
  --mat-chrome:color-mix(in srgb,var(--surface) 80%,transparent);
  --mat-fill:color-mix(in srgb,var(--surface) 96%,transparent);
  --mat-edge:rgba(255,255,255,.85);
  --mat-shadow:inset 0 3px 0 rgba(255,255,255,.85),inset 0 -5px 12px rgba(20,30,45,.10),0 2px 4px rgba(20,30,45,.05);
  --mat-radius:14px;--mat-blur:blur(40px) saturate(185%);
  --mat-control:color-mix(in srgb,var(--surface) 78%,transparent);
  --mat-control-edge:rgba(255,255,255,.8);
  --mat-control-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 3px rgba(20,30,45,.06);
  --mat-input-shadow:inset 0 2px 4px rgba(20,30,45,.10);
  --mat-active-bg:color-mix(in srgb,var(--surface) 76%,transparent);
  --mat-active-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.sunny-sample[data-theme="dark"][data-material="frosted"]{
  --mat-edge:rgba(255,255,255,.16);--mat-sidebar-shadow:inset -1px 0 rgba(255,255,255,.1);
  --mat-shadow:inset 0 2px 0 rgba(255,255,255,.16),inset 0 -4px 10px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.3);
  --mat-control-edge:rgba(255,255,255,.14);
  --mat-control-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 3px rgba(0,0,0,.3);
}
/* 07 极光玻璃 —— 三种颜色在玻璃后面流动 */
.sunny-sample[data-material="aurora"]{
  --mat-page:
    radial-gradient(ellipse at 8% 8%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 48%),
    radial-gradient(ellipse at 95% 35%,color-mix(in srgb,var(--accent-2) 32%,transparent),transparent 48%),
    radial-gradient(ellipse at 42% 95%,color-mix(in srgb,var(--accent-3) 27%,transparent),transparent 53%),var(--bg);
  --mat-sidebar:linear-gradient(165deg,color-mix(in srgb,var(--surface) 46%,transparent),color-mix(in srgb,var(--accent-2) 10%,transparent));
  --mat-sidebar-shadow:inset -1px 0 rgba(255,255,255,.2);
  --mat-chrome:color-mix(in srgb,var(--surface) 70%,transparent);
  --mat-fill:linear-gradient(125deg,color-mix(in srgb,var(--surface) 46%,transparent),color-mix(in srgb,var(--accent-2) 20%,transparent) 62%,color-mix(in srgb,var(--accent-3) 16%,transparent));
  --mat-edge:color-mix(in srgb,#fff 40%,transparent);
  --mat-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 16px 40px color-mix(in srgb,var(--accent) 18%,transparent);
  --mat-radius:20px;--mat-blur:blur(18px) saturate(135%);
  --mat-control:color-mix(in srgb,var(--surface) 60%,transparent);
  --mat-control-edge:color-mix(in srgb,#fff 32%,transparent);
  --mat-control-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 14px color-mix(in srgb,var(--accent) 12%,transparent);
  --mat-input-shadow:inset 0 1px 3px rgba(16,26,42,.10);
  --mat-active-bg:color-mix(in srgb,var(--surface) 58%,transparent);
  --mat-active-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 18px color-mix(in srgb,var(--accent) 18%,transparent);
}
.sunny-sample[data-theme="dark"][data-material="aurora"]{
  --mat-edge:rgba(255,255,255,.13);
  --mat-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 14px 36px rgba(0,0,0,.35);
  --mat-control-edge:rgba(255,255,255,.12);
  --mat-control-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 14px rgba(0,0,0,.28);
}
/* 08 双色渐层 —— 实色方向渐变，和玻璃刻意拉开 */
.sunny-sample[data-material="duotone"]{
  --mat-page:linear-gradient(120deg,color-mix(in srgb,var(--bg) 90%,var(--accent)),color-mix(in srgb,var(--bg) 84%,var(--accent-2)));
  --mat-sidebar:linear-gradient(170deg,color-mix(in srgb,var(--surface) 88%,var(--accent)),color-mix(in srgb,var(--surface) 82%,var(--accent-2)));
  --mat-chrome:color-mix(in srgb,var(--surface) 86%,var(--accent));
  --mat-fill:linear-gradient(125deg,color-mix(in srgb,var(--surface) 70%,var(--accent)),color-mix(in srgb,var(--surface) 58%,var(--accent-2)));
  --mat-edge:color-mix(in srgb,var(--accent) 18%,var(--surface));
  --mat-shadow:0 10px 30px color-mix(in srgb,var(--accent-2) 16%,transparent);
  --mat-radius:18px;
  --mat-control:linear-gradient(125deg,var(--surface),color-mix(in srgb,var(--surface) 88%,var(--accent-2)));
  --mat-control-edge:color-mix(in srgb,var(--accent) 16%,var(--surface));
  --mat-control-shadow:0 3px 10px color-mix(in srgb,var(--accent) 10%,transparent);
  --mat-input-shadow:inset 0 1px 3px color-mix(in srgb,var(--accent) 14%,transparent);
  --mat-active-bg:linear-gradient(125deg,color-mix(in srgb,var(--surface) 82%,var(--accent)),color-mix(in srgb,var(--surface) 84%,var(--accent-2)));
  --mat-active-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.sunny-sample[data-theme="dark"][data-material="duotone"]{
  --mat-fill:linear-gradient(125deg,color-mix(in srgb,var(--surface) 84%,var(--accent)),color-mix(in srgb,var(--surface) 78%,var(--accent-2)));
  --mat-shadow:0 10px 30px rgba(0,0,0,.3);
}
/* 09 缎光瓷面 —— 斜向釉光，细腻高光 */
.sunny-sample[data-material="satin"]{
  --mat-fill:linear-gradient(155deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 84%,var(--accent)) 36%,#fff 50%,color-mix(in srgb,var(--surface) 90%,var(--accent-2)) 68%,var(--surface));
  --mat-edge:color-mix(in srgb,var(--accent) 14%,var(--line));
  --mat-shadow:inset 0 3px 3px rgba(255,255,255,.85),inset 0 -2px 2px rgba(24,38,61,.08),0 10px 26px rgba(24,38,61,.09);
  --mat-radius:19px;
  --mat-control:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 95%,var(--accent-2)));
  --mat-control-edge:color-mix(in srgb,var(--accent) 12%,var(--line));
  --mat-control-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 8px rgba(24,38,61,.07);
  --mat-input-shadow:inset 0 1px 3px rgba(24,38,61,.09);
  --mat-active-bg:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,var(--accent)),var(--surface));
  --mat-active-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.sunny-sample[data-theme="dark"][data-material="satin"]{
  --mat-shadow:inset 0 1px 1px rgba(255,255,255,.18),inset 0 -1px 1px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.22);
  --mat-control-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 8px rgba(0,0,0,.2);
}
/* 10 精致描边 —— 只有线，没有面 */
.sunny-sample[data-material="outline"]{
  --mat-fill:var(--surface);
  --mat-edge:color-mix(in srgb,var(--accent) 62%,var(--surface-2));
  --mat-shadow:0 4px 0 color-mix(in srgb,var(--accent) 15%,transparent);
  --mat-radius:12px;
  --mat-control:var(--surface);
  --mat-control-edge:color-mix(in srgb,var(--accent) 38%,var(--line));
  --mat-control-shadow:0 3px 0 color-mix(in srgb,var(--accent) 16%,transparent);
  --mat-input-shadow:inset 0 1px 2px color-mix(in srgb,var(--accent) 12%,transparent);
  --mat-active-bg:color-mix(in srgb,var(--accent) 8%,var(--surface));
  --mat-active-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent);
}
/* 11 拉丝金属 —— 横向拉丝、硬边、冷色 */
.sunny-sample[data-material="metal"]{
  --bg:#dfe4ea;--surface:#e9edf2;--surface-2:#dde3ea;--line:#c2cad5;
  --text:#1a202a;--text-2:#3f4956;--muted:#697585;--line-strong:#aeb9c7;
  --mat-page:linear-gradient(180deg,#e8edf2,#d5dce4 70%,#e2e7ed);
  --mat-sidebar:linear-gradient(180deg,#eef2f6,#dfe5ec);--mat-sidebar-shadow:inset -1px 0 #b8c1cd;
  --mat-chrome:linear-gradient(180deg,#f2f5f8,#e4e9ef);
  --mat-fill:
    linear-gradient(105deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.62) 43%,rgba(255,255,255,.1) 55%,rgba(255,255,255,0) 62%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 1px,rgba(110,126,146,.035) 1px 2px,transparent 2px 4px),
    linear-gradient(180deg,#eef3f8 0%,#ccd5df 52%,#b2becd 100%);
  --mat-edge:#a4b0bf;
  --mat-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9ca8b8,0 10px 20px rgba(30,40,55,.16);
  --mat-radius:6px;
  --mat-control:linear-gradient(180deg,#f9fbfd,#dbe2ea);
  --mat-control-edge:#aeb9c7;
  --mat-control-shadow:inset 0 1px 0 #fff,0 2px 0 #9ca8b8;
  --mat-input-shadow:inset 0 2px 5px rgba(30,40,55,.18),inset 0 -1px 0 #fff;
  --mat-active-bg:linear-gradient(180deg,#e7edf4,#d3dbe5);
  --mat-active-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #a3aebc,0 2px 6px rgba(30,40,55,.14);
}
.sunny-sample[data-theme="dark"][data-material="metal"]{
  --bg:#15181d;--surface:#1d2128;--surface-2:#252a32;--line:#343b45;
  --text:#eef2f7;--text-2:#c3cbd6;--muted:#8d99a8;--line-strong:#48515e;
  --mat-page:linear-gradient(180deg,#1a1e24,#12151a 70%,#171b21);
  --mat-sidebar:linear-gradient(180deg,#22262d,#181c21);--mat-chrome:linear-gradient(180deg,#23282f,#1a1e24);
  --mat-fill:
    linear-gradient(105deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.08) 43%,rgba(255,255,255,.02) 55%,transparent 62%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,rgba(0,0,0,.13) 1px 2px,transparent 2px 4px),
    linear-gradient(180deg,#2d343e 0%,#1a1f26 55%,#12161b 100%);
  --mat-edge:#3a424d;
  --mat-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.55),0 10px 22px rgba(0,0,0,.38);
  --mat-control:linear-gradient(180deg,#2b313a,#1e232a);--mat-control-edge:#3a424d;
  --mat-control-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 0 rgba(0,0,0,.55);
  --mat-active-bg:linear-gradient(180deg,#333a45,#252b33);
}
/* 12 陶土哑光 —— 暖、哑、颗粒，影子里没有一点高光 */
.sunny-sample[data-material="clay"]{
  --bg:#e9dfd5;--surface:#f4ebe1;--surface-2:#efe4d8;--line:#ddcdbd;
  --text:#2c231c;--text-2:#54463a;--muted:#7d6b5a;--line-strong:#cbb7a3;
  --mat-page:radial-gradient(900px 600px at 10% -10%,#f6ece0,transparent 60%),var(--bg);
  --mat-sidebar:#eee2d6;--mat-sidebar-shadow:inset -1px 0 #ddcdbd;--mat-chrome:#f1e6da;
  --mat-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
    radial-gradient(120% 100% at 18% 0%,#f9eee0,transparent 62%),#ecdfd1;
  --mat-edge:rgba(150,115,80,.20);
  --mat-shadow:0 24px 48px rgba(105,72,46,.22),inset 0 3px 4px rgba(255,255,255,.8),inset 0 -6px 14px rgba(105,72,46,.14);
  --mat-radius:28px;
  --mat-control:#e8d8c6;--mat-control-edge:rgba(150,115,80,.20);
  --mat-control-shadow:inset 0 2px 4px rgba(255,255,255,.8),0 6px 14px rgba(105,72,46,.16);
  --mat-input-shadow:inset 0 4px 8px rgba(105,72,46,.2),inset 0 -2px 3px rgba(255,255,255,.7);
  --mat-active-bg:#e2d0bc;--mat-active-shadow:inset 0 3px 5px rgba(105,72,46,.22),inset 0 -1px 2px rgba(255,255,255,.7);
}
.sunny-sample[data-theme="dark"][data-material="clay"]{
  --bg:#241d18;--surface:#2f2620;--surface-2:#392e26;--line:#4a3b30;
  --text:#f4e8dc;--text-2:#d6c4b2;--muted:#a8937f;--line-strong:#5b4839;
  --mat-page:radial-gradient(900px 600px at 10% -10%,#3a2e25,transparent 60%),#241d18;
  --mat-sidebar:#2a221c;--mat-chrome:#2f2620;
  --mat-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"),
    radial-gradient(120% 100% at 18% 0%,#3a2e25,transparent 62%),#2f2620;
  --mat-edge:rgba(255,220,190,.10);
  --mat-shadow:0 22px 44px rgba(0,0,0,.45),inset 0 2px 3px rgba(255,220,190,.10),inset 0 -4px 12px rgba(0,0,0,.35);
  --mat-control:#382d25;--mat-control-edge:rgba(255,220,190,.10);
  --mat-control-shadow:inset 0 2px 3px rgba(255,220,190,.10),0 5px 12px rgba(0,0,0,.35);
  --mat-active-bg:#42352b;
}
/* 13 大理石 —— 石纹 + 釉面高光 */
.sunny-sample[data-material="marble"]{
  --bg:#e7eaee;--surface:#f9fafb;--surface-2:#eff1f4;--line:#dbe0e6;
  --mat-page:radial-gradient(900px 600px at 15% -10%,#ffffff,transparent 65%),var(--bg);
  --mat-sidebar:#f2f4f6;--mat-sidebar-shadow:inset -1px 0 #dfe3e9;--mat-chrome:#f8f9fb;
  --mat-fill:conic-gradient(from 118deg at 26% 38%,rgba(120,134,158,.34),transparent 9%,rgba(186,194,208,.18) 21%,transparent 34%,rgba(110,126,152,.3) 51%,transparent 66%,rgba(160,170,188,.16) 80%,transparent 92%),
    linear-gradient(160deg,#ffffff,#eef1f4 62%,#f8f9fb);
  --mat-edge:rgba(140,150,168,.28);
  --mat-shadow:inset 0 1px 0 #fff,0 14px 34px rgba(30,45,70,.11);
  --mat-radius:18px;
  --mat-control:linear-gradient(180deg,#ffffff,#f2f4f7);--mat-control-edge:rgba(150,160,175,.22);
  --mat-control-shadow:inset 0 1px 0 #fff,0 2px 8px rgba(30,45,70,.07);
  --mat-input-shadow:inset 0 1px 3px rgba(30,45,70,.10);
  --mat-active-bg:linear-gradient(180deg,#fff,#eef1f5);--mat-active-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(30,45,70,.06);
}
.sunny-sample[data-theme="dark"][data-material="marble"]{
  --bg:#15181d;--surface:#1e222a;--surface-2:#252a33;--line:#333a45;
  --mat-page:radial-gradient(900px 600px at 15% -10%,#232830,transparent 65%),#15181d;
  --mat-sidebar:#1b1f26;--mat-chrome:#1e222a;
  --mat-fill:conic-gradient(from 118deg at 26% 38%,rgba(180,195,220,.08),transparent 9%,rgba(140,155,180,.06) 21%,transparent 34%,rgba(190,205,230,.07) 51%,transparent 66%,rgba(150,165,190,.06) 80%,transparent 92%),
    linear-gradient(160deg,#232831,#1a1e25 62%,#1f242c);
  --mat-edge:rgba(180,195,220,.12);
  --mat-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 32px rgba(0,0,0,.4);
  --mat-control:linear-gradient(180deg,#252a33,#1e222a);--mat-control-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 8px rgba(0,0,0,.3);
  --mat-active-bg:linear-gradient(180deg,#2b313b,#232830);
}
/* 14 霓虹暗夜 —— 自带深色，边缘发光 */
.sunny-sample[data-material="neon"]{
  --bg:#090b12;--surface:#101420;--surface-2:#161b29;--line:#232a3d;
  --text:#e9eeff;--text-2:#b7c1dc;--muted:#828cab;--line-strong:#2f3850;
  --accent-ink:#0a0e17;
  --mat-page:
    radial-gradient(800px 520px at 12% -6%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%),
    radial-gradient(700px 520px at 92% 8%,color-mix(in srgb,var(--accent-2) 16%,transparent),transparent 60%),
    radial-gradient(700px 600px at 50% 108%,color-mix(in srgb,var(--accent-3) 16%,transparent),transparent 62%),#080a10;
  --mat-sidebar:color-mix(in srgb,#0c101a 88%,var(--accent));
  --mat-sidebar-shadow:inset -1px 0 color-mix(in srgb,var(--accent) 18%,transparent);
  --mat-chrome:color-mix(in srgb,#0d1119 92%,var(--accent));
  --mat-fill:linear-gradient(160deg,#151a27,#0e121c);
  --mat-edge:color-mix(in srgb,var(--accent) 42%,transparent);
  --mat-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent),0 0 26px color-mix(in srgb,var(--accent) 20%,transparent),inset 0 0 24px color-mix(in srgb,var(--accent) 8%,transparent);
  --mat-radius:16px;
  --mat-control:#161c2a;--mat-control-edge:color-mix(in srgb,var(--accent) 34%,transparent);
  --mat-control-shadow:inset 0 0 12px color-mix(in srgb,var(--accent) 10%,transparent),0 0 12px color-mix(in srgb,var(--accent) 12%,transparent);
  --mat-input-shadow:inset 0 0 14px color-mix(in srgb,var(--accent) 14%,transparent);
  --mat-active-bg:color-mix(in srgb,#141a28 80%,var(--accent));
  --mat-active-shadow:0 0 18px color-mix(in srgb,var(--accent) 30%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--accent) 46%,transparent);
}
/* 15 纸片拼贴 —— 硬投影、实边线，像贴上去的 */
.sunny-sample[data-material="cutout"]{
  --mat-fill:var(--surface);
  --mat-edge:color-mix(in srgb,var(--accent) 40%,var(--line-strong));
  --mat-shadow:9px 9px 0 color-mix(in srgb,var(--accent) 26%,transparent);
  --mat-radius:12px;
  --mat-control:var(--surface);
  --mat-control-edge:color-mix(in srgb,var(--accent) 40%,var(--line-strong));
  --mat-control-shadow:4px 4px 0 color-mix(in srgb,var(--accent) 20%,transparent);
  --mat-input-shadow:inset 2px 2px 0 color-mix(in srgb,var(--accent) 10%,transparent);
  --mat-active-bg:color-mix(in srgb,var(--accent) 10%,var(--surface));
  --mat-active-shadow:4px 4px 0 color-mix(in srgb,var(--accent) 30%,transparent);
}
.sunny-sample[data-theme="dark"][data-material="cutout"]{
  --mat-shadow:6px 6px 0 color-mix(in srgb,var(--accent) 26%,transparent);
  --mat-control-shadow:3px 3px 0 color-mix(in srgb,var(--accent) 22%,transparent);
}
/* 16 雾面色场 —— 页面是彩色的，卡片退成安静的哑光面 */
.sunny-sample[data-material="mesh"]{
  --mat-page:
    radial-gradient(900px 700px at 8% 6%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 58%),
    radial-gradient(800px 600px at 96% 24%,color-mix(in srgb,var(--accent-2) 26%,transparent),transparent 56%),
    radial-gradient(700px 700px at 70% 100%,color-mix(in srgb,var(--accent-3) 24%,transparent),transparent 58%),
    color-mix(in srgb,var(--bg) 88%,#fff);
  --mat-sidebar:color-mix(in srgb,var(--surface) 80%,transparent);
  --mat-chrome:color-mix(in srgb,var(--surface) 82%,transparent);
  --mat-fill:color-mix(in srgb,var(--surface) 93%,transparent);
  --mat-edge:transparent;
  --mat-shadow:0 10px 30px rgba(20,30,50,.07);
  --mat-radius:20px;
  --mat-control:color-mix(in srgb,var(--surface) 88%,transparent);
  --mat-control-edge:color-mix(in srgb,var(--text) 8%,transparent);
  --mat-control-shadow:0 3px 10px rgba(20,30,50,.06);
  --mat-input-shadow:inset 0 1px 3px rgba(20,30,50,.08);
  --mat-active-bg:color-mix(in srgb,var(--accent) 12%,var(--surface));
  --mat-active-shadow:0 4px 12px color-mix(in srgb,var(--accent) 14%,transparent);
}
.sunny-sample[data-theme="dark"][data-material="mesh"]{
  --mat-page:
    radial-gradient(900px 700px at 8% 6%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 58%),
    radial-gradient(800px 600px at 96% 24%,color-mix(in srgb,var(--accent-2) 20%,transparent),transparent 56%),
    radial-gradient(700px 700px at 70% 100%,color-mix(in srgb,var(--accent-3) 18%,transparent),transparent 58%),var(--bg);
  --mat-sidebar:color-mix(in srgb,var(--surface) 72%,transparent);
  --mat-chrome:color-mix(in srgb,var(--surface) 76%,transparent);
  --mat-fill:color-mix(in srgb,var(--surface) 90%,transparent);
  --mat-shadow:0 12px 32px rgba(0,0,0,.3);
}

@media (prefers-reduced-transparency: reduce){
  .sunny-sample[data-material]{--mat-fill:var(--surface);--mat-control:var(--surface-2);--mat-blur:none;--mat-chrome:var(--surface)}
  .sunny-sample[data-material]{background:var(--bg)}
}
@media (forced-colors: active){
  .sunny-sample[data-material]{--mat-fill:Canvas;--mat-control:Canvas;--mat-edge:CanvasText;--mat-shadow:none;--mat-control-shadow:none}
}