/* ============================================================================
   SHUANGZ Design System · Material Design 3
   v1.0  ·  https://shuangz.online/assets/m3.css
   ----------------------------------------------------------------------------
   0. 主题变量      1. 重置      2. 排版      3. 表面与高度
   4. 状态层        5. 图标      6. 按钮      7. 输入
   8. 卡片          9. 列表/瓦片 10. 菜单     11. 杂项
   ========================================================================== */

/* ── 0. 主题变量 ─────────────────────────────────────────────────────────── */
:root,[data-theme="light"]{
  --bg:#F3F3F3;
  --surface:#FFFFFF;
  --surface-2:#F7F7F8;
  --surface-3:#ECECEE;
  --ink:#1B1B1B;
  --ink-2:#3B3B3B;
  --muted:#6B6B6B;
  --dim:#9A9A9A;
  --line:rgba(0,0,0,.075);
  --accent:#0067C0;
  --accent-container:rgba(0,103,192,.12);
  --on-accent:#FFFFFF;

  --tone1:#C4692F; --tint1:#FBF1E9;
  --tone2:#2F6F9E; --tint2:#EBF2F8;
  --tone3:#6B5CA5; --tint3:#F0EDF9;
  --tone4:#2F7A6A; --tint4:#EAF4F1;
  --tone5:#9E5A70; --tint5:#F9EDF1;

  --elev-1:0 1px 2px rgba(0,0,0,.055), 0 1px 3px 1px rgba(0,0,0,.04);
  --elev-2:0 1px 2px rgba(0,0,0,.06),  0 2px 6px 2px rgba(0,0,0,.05);
  --elev-3:0 4px 8px 3px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.08);

  --state:rgba(0,0,0,.055);
  --state-2:rgba(0,0,0,.09);
  --state-3:rgba(0,0,0,.13);
  --scrim:rgba(0,0,0,.32);
}
[data-theme="dark"]{
  --bg:#121212; --surface:#1C1C1C; --surface-2:#232323; --surface-3:#2B2B2B;
  --ink:#EDEDED; --ink-2:#C9C9C9; --muted:#9E9E9E; --dim:#6E6E6E;
  --line:rgba(255,255,255,.09);
  --accent:#60CDFF; --accent-container:rgba(96,205,255,.14); --on-accent:#00344F;
  --tone1:#F0A56C; --tint1:#2E2620;
  --tone2:#7FB4DC; --tint2:#1F2930;
  --tone3:#ADA1E0; --tint3:#262331;
  --tone4:#7FC6B4; --tint4:#1E2B28;
  --tone5:#DF9EB0; --tint5:#2E2328;
  --elev-1:0 1px 2px rgba(0,0,0,.34), 0 1px 3px 1px rgba(0,0,0,.22);
  --elev-2:0 1px 2px rgba(0,0,0,.38), 0 2px 6px 2px rgba(0,0,0,.26);
  --elev-3:0 4px 8px 3px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.38);
  --state:rgba(255,255,255,.07); --state-2:rgba(255,255,255,.12); --state-3:rgba(255,255,255,.16);
  --scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}
[data-theme="warm"]{
  --bg:#FAF7F2; --surface:#FFFFFF; --surface-2:#F7F2EA; --surface-3:#EFE8DC;
  --ink:#2B2620; --ink-2:#4C463F; --muted:#857B70; --dim:#B3A99C;
  --line:rgba(120,100,80,.13);
  --accent:#C4692F; --accent-container:rgba(196,105,47,.12); --on-accent:#FFFFFF;
  --tone1:#C4692F; --tint1:#FBF0E5;
  --tone2:#4C7FA3; --tint2:#EDF3F8;
  --tone3:#7A6BAA; --tint3:#F2EFFA;
  --tone4:#40806F; --tint4:#ECF5F1;
  --tone5:#AE6A7E; --tint5:#FAEFF2;
  --elev-1:0 1px 2px rgba(90,70,50,.06), 0 1px 3px 1px rgba(90,70,50,.05);
  --elev-2:0 1px 2px rgba(90,70,50,.07), 0 2px 6px 2px rgba(90,70,50,.06);
  --elev-3:0 4px 8px 3px rgba(90,70,50,.06), 0 1px 3px rgba(90,70,50,.09);
  --state:rgba(90,70,50,.055); --state-2:rgba(90,70,50,.09); --state-3:rgba(90,70,50,.13);
  --scrim:rgba(60,45,30,.34);
}
[data-theme="night"]{
  --bg:#0B111C; --surface:#151E2B; --surface-2:#1B2637; --surface-3:#222E42;
  --ink:#E9EFF8; --ink-2:#C2CEDF; --muted:#8A9AB0; --dim:#5C6B80;
  --line:rgba(140,170,210,.13);
  --accent:#5B9DFF; --accent-container:rgba(91,157,255,.15); --on-accent:#04203F;
  --tone1:#F2A96E; --tint1:#2A2119;
  --tone2:#7FB6E0; --tint2:#17232E;
  --tone3:#AFA3E6; --tint3:#211D30;
  --tone4:#79C9B6; --tint4:#152A26;
  --tone5:#E2A0B4; --tint5:#2A1F26;
  --elev-1:0 1px 2px rgba(0,0,0,.42), 0 1px 3px 1px rgba(0,0,0,.28);
  --elev-2:0 1px 2px rgba(0,0,0,.46), 0 2px 6px 2px rgba(0,0,0,.32);
  --elev-3:0 4px 8px 3px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.46);
  --state:rgba(160,200,255,.08); --state-2:rgba(160,200,255,.13); --state-3:rgba(160,200,255,.18);
  --scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}
[data-theme="mint"]{
  --bg:#EFF4F1; --surface:#FFFFFF; --surface-2:#F2F7F4; --surface-3:#E4EDE8;
  --ink:#172420; --ink-2:#33443D; --muted:#63786F; --dim:#9CB0A6;
  --line:rgba(40,80,65,.12);
  --accent:#2F7A6A; --accent-container:rgba(47,122,106,.12); --on-accent:#FFFFFF;
  --tone1:#B87347; --tint1:#F7EEE6;
  --tone2:#35809B; --tint2:#E9F3F6;
  --tone3:#6E6BA8; --tint3:#EFEEF9;
  --tone4:#2F7A6A; --tint4:#E8F3EF;
  --tone5:#A15F77; --tint5:#F8EDF1;
  --elev-1:0 1px 2px rgba(30,70,55,.06), 0 1px 3px 1px rgba(30,70,55,.05);
  --elev-2:0 1px 2px rgba(30,70,55,.07), 0 2px 6px 2px rgba(30,70,55,.06);
  --elev-3:0 4px 8px 3px rgba(30,70,55,.06), 0 1px 3px rgba(30,70,55,.09);
  --state:rgba(30,70,55,.055); --state-2:rgba(30,70,55,.09); --state-3:rgba(30,70,55,.13);
  --scrim:rgba(15,45,35,.32);
}
[data-theme="ink"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F5F5; --surface-3:#EBEBEB;
  --ink:#0A0A0A; --ink-2:#303030; --muted:#767676; --dim:#ABABAB;
  --line:rgba(0,0,0,.10);
  --accent:#0A0A0A; --accent-container:rgba(10,10,10,.08); --on-accent:#FFFFFF;
  --tone1:#4A4A4A; --tint1:#F4F4F4;
  --tone2:#3A3A3A; --tint2:#F1F1F1;
  --tone3:#565656; --tint3:#F5F5F5;
  --tone4:#2E2E2E; --tint4:#EFEFEF;
  --tone5:#606060; --tint5:#F6F6F6;
  --elev-1:0 1px 2px rgba(0,0,0,.06), 0 1px 3px 1px rgba(0,0,0,.045);
  --elev-2:0 1px 2px rgba(0,0,0,.07), 0 2px 6px 2px rgba(0,0,0,.055);
  --elev-3:0 4px 8px 3px rgba(0,0,0,.055), 0 1px 3px rgba(0,0,0,.09);
  --state:rgba(0,0,0,.05); --state-2:rgba(0,0,0,.085); --state-3:rgba(0,0,0,.12);
  --scrim:rgba(0,0,0,.3);
}

/* 全局令牌（不随主题变） */
:root{
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  --dur-1:.15s; --dur-2:.2s; --dur-3:.3s; --dur-4:.4s;
  --ease:cubic-bezier(.2,0,0,1);
  --ease-emph:cubic-bezier(.05,.7,.1,1);
  --font-sans:Roboto,"Google Sans","Helvetica Neue",Arial,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-display:"Google Sans",Roboto,"Helvetica Neue",Arial,"PingFang SC",-apple-system,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;
  --sidebar:240px;
}

/* 分组色调映射 */
[data-g="1"]{--tone:var(--tone1);--tint:var(--tint1)}
[data-g="2"]{--tone:var(--tone2);--tint:var(--tint2)}
[data-g="3"]{--tone:var(--tone3);--tint:var(--tint3)}
[data-g="4"]{--tone:var(--tone4);--tint:var(--tint4)}
[data-g="5"]{--tone:var(--tone5);--tint:var(--tint5)}

/* ── 1. 重置 ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-size:15px;line-height:1.6;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  transition:background-color var(--dur-3) var(--ease),color var(--dur-3) var(--ease);
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
img,svg{display:block}
::selection{background:var(--accent-container);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── 2. 排版（M3 字阶） ──────────────────────────────────────────────────── */
.t-display{font-family:var(--font-display);font-size:clamp(34px,5.4vw,56px);line-height:1.12;font-weight:500;letter-spacing:-.022em}
.t-headline{font-family:var(--font-display);font-size:28px;line-height:1.25;font-weight:500;letter-spacing:-.015em}
.t-title-lg{font-size:22px;line-height:1.3;font-weight:500;letter-spacing:-.01em}
.t-title{font-size:16px;line-height:1.4;font-weight:500;letter-spacing:-.005em}
.t-body{font-size:15px;line-height:1.6;font-weight:400}
.t-body-sm{font-size:13.5px;line-height:1.55;font-weight:400}
.t-label{font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.02em}
.t-caption{font-size:11.5px;line-height:1.45;font-weight:400;color:var(--dim)}
.t-muted{color:var(--muted)}
.t-dim{color:var(--dim)}
.t-mono{font-family:var(--font-mono);font-size:.92em;letter-spacing:-.01em}

/* ── 3. 表面 ─────────────────────────────────────────────────────────────── */
.surface{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line)}
.surface-2{background:var(--surface-2);border-radius:var(--r-md)}
.surface-tonal{background:color-mix(in srgb,var(--tone) 6%,var(--surface));border-radius:var(--r-lg);border:1px solid var(--line)}
.elev-1{box-shadow:var(--elev-1)}
.elev-2{box-shadow:var(--elev-2)}
.elev-3{box-shadow:var(--elev-3)}

/* ── 4. 状态层 ───────────────────────────────────────────────────────────── */
.state{position:relative;overflow:hidden}
.state::after{content:"";position:absolute;inset:0;background:var(--state);opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease);border-radius:inherit}
.state:hover::after{opacity:1}
.state:active::after{background:var(--state-2);opacity:1}

/* ── 5. 图标 ─────────────────────────────────────────────────────────────── */
.ic{width:24px;height:24px;flex:none;display:block}
.ic-18{width:18px;height:18px;flex:none;display:block}
.ic-20{width:20px;height:20px;flex:none;display:block}
.ic-28{width:28px;height:28px;flex:none;display:block}
/* 色调圆底图标（44px 圆 + 24px 线稿） */
.ic-tonal{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--tone) 11%,transparent);
  color:var(--tone);
  transition:background var(--dur-2) var(--ease);
}
.ic-tonal svg{width:24px;height:24px}
.group:hover .ic-tonal{background:color-mix(in srgb,var(--tone) 18%,transparent)}
[data-scheme="dark"] .ic-tonal{background:color-mix(in srgb,var(--tone) 16%,transparent)}
[data-scheme="dark"] .group:hover .ic-tonal{background:color-mix(in srgb,var(--tone) 24%,transparent)}

/* ── 6. 按钮 ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 20px;border-radius:var(--r-full);
  border:1px solid transparent;background:var(--accent);color:var(--on-accent);
  font-size:14px;font-weight:500;letter-spacing:.01em;white-space:nowrap;
  transition:box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
}
.btn:hover{box-shadow:var(--elev-1);background:color-mix(in srgb,var(--accent) 88%,var(--ink))}
.btn:active{box-shadow:none;background:color-mix(in srgb,var(--accent) 80%,var(--ink))}
.btn:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}
.btn svg{width:18px;height:18px;flex:none}

.btn-tonal{background:var(--accent-container);color:var(--accent)}
.btn-tonal:hover{background:color-mix(in srgb,var(--accent) 20%,var(--surface))}

.btn-outlined{background:transparent;color:var(--accent);border-color:var(--line)}
.btn-outlined:hover{background:var(--accent-container);border-color:transparent}

.btn-text{background:transparent;color:var(--accent);padding:0 12px}
.btn-text:hover{background:var(--accent-container);box-shadow:none}

.btn-neutral{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-neutral:hover{background:color-mix(in srgb,var(--ink) 5%,var(--surface));box-shadow:var(--elev-1)}

.btn-sm{height:32px;padding:0 14px;font-size:13px}
.btn-sm svg{width:16px;height:16px}

/* 图标按钮 */
.icon-btn{
  width:40px;height:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;border:1px solid transparent;
  background:transparent;color:var(--ink-2);
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.icon-btn:hover{background:var(--state);color:var(--ink)}
.icon-btn:active{background:var(--state-2)}
.icon-btn svg{width:20px;height:20px}
.icon-btn.elevated{background:var(--surface);border-color:var(--line);box-shadow:var(--elev-1)}
.icon-btn.elevated:hover{box-shadow:var(--elev-2);background:var(--surface)}
.icon-btn:disabled{opacity:.32;cursor:not-allowed}

/* ── 7. 输入 ─────────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.02em}
.field > label .hint{font-weight:400;color:var(--dim);letter-spacing:0}
.input{
  width:100%;height:44px;padding:0 16px;
  background:var(--surface-2);
  border:1px solid transparent;border-radius:var(--r-sm);
  outline:none;
  transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.input::placeholder{color:var(--dim)}
.input:hover{background:color-mix(in srgb,var(--ink) 4%,var(--surface-2))}
.input:focus{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent)}
textarea.input{height:auto;min-height:88px;padding:12px 16px;resize:vertical;line-height:1.55}

/* 搜索条（M3 filled，全圆角） */
.searchbar{
  display:flex;align-items:center;gap:10px;
  height:48px;padding:0 18px;
  background:var(--surface-2);border-radius:var(--r-full);
  border:1px solid transparent;
  transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.searchbar:hover{background:color-mix(in srgb,var(--ink) 5%,var(--surface-2))}
.searchbar:focus-within{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent)}
.searchbar svg{width:20px;height:20px;color:var(--muted);flex:none}
.searchbar input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:15px}
.searchbar input::placeholder{color:var(--dim)}
.searchbar kbd{
  font-family:var(--font-mono);font-size:11px;color:var(--dim);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:2px 7px;flex:none;
}

/* ── 8. 卡片 ─────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden}
.card-elevated{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--elev-1);border:1px solid transparent;overflow:hidden}
.card-filled{background:var(--surface-2);border-radius:var(--r-lg);border:1px solid transparent;overflow:hidden}
.card-tonal{background:color-mix(in srgb,var(--tone) 6%,var(--surface));border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.card-tonal:hover{background:color-mix(in srgb,var(--tone) 9%,var(--surface));box-shadow:var(--elev-1);border-color:transparent}
[data-scheme="dark"] .card-tonal{background:color-mix(in srgb,var(--tone) 9%,var(--surface))}
[data-scheme="dark"] .card-tonal:hover{background:color-mix(in srgb,var(--tone) 13%,var(--surface))}

/* ── 9. 列表 / 瓦片 ──────────────────────────────────────────────────────── */
/* 导航瓦片：图标 + 标题 + 描述 */
.tile{
  display:flex;align-items:center;gap:14px;
  padding:10px 12px;border-radius:var(--r-md);
  transition:background var(--dur-2) var(--ease);
}
.tile:hover{background:var(--state)}
.tile-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.tile-title{font-size:14.5px;line-height:1.4;font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tile-desc{font-size:12.5px;line-height:1.45;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-meta{font-family:var(--font-mono);font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 纯图标启动格 */
.app-tile{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px 6px 12px;border-radius:var(--r-md);text-align:center;
  transition:background var(--dur-2) var(--ease);
}
.app-tile:hover{background:var(--state)}
.app-tile .ic-tonal{width:52px;height:52px}
.app-tile .ic-tonal svg{width:26px;height:26px}
.app-tile-name{font-size:12px;line-height:1.35;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 徽标 */
.badge{
  font-size:10px;line-height:1.5;font-weight:500;letter-spacing:.02em;
  padding:1px 7px;border-radius:var(--r-xs);
  background:color-mix(in srgb,var(--tone) 14%,transparent);color:var(--tone);
  white-space:nowrap;flex:none;
}

/* ── 10. 菜单 ────────────────────────────────────────────────────────────── */
.menu{
  min-width:180px;padding:6px;
  background:var(--surface);border-radius:var(--r-md);
  border:1px solid var(--line);box-shadow:var(--elev-3);
}
.menu-item{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:10px 12px;border:0;border-radius:var(--r-sm);
  background:none;text-align:left;font-size:14px;color:var(--ink-2);
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
.menu-item:hover{background:var(--state);color:var(--ink)}
.menu-item.on{background:var(--accent-container);color:var(--accent);font-weight:500}
.menu-label{padding:8px 12px 6px;font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--dim)}

/* ── 11. 杂项 ────────────────────────────────────────────────────────────── */
.divider{height:1px;background:var(--line);border:0}
.switch{
  position:relative;width:44px;height:24px;border-radius:var(--r-full);flex:none;
  background:var(--surface-3);border:2px solid var(--line);cursor:pointer;
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.switch::after{
  content:"";position:absolute;top:50%;left:4px;width:14px;height:14px;border-radius:50%;
  background:var(--dim);transform:translateY(-50%);
  transition:transform var(--dur-2) var(--ease),background var(--dur-2) var(--ease),width var(--dur-2),height var(--dur-2);
}
.switch.on{background:var(--accent);border-color:var(--accent)}
.switch.on::after{transform:translate(18px,-50%);background:var(--on-accent);width:18px;height:18px}

.toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);
  padding:14px 20px;border-radius:var(--r-sm);
  background:var(--ink);color:var(--bg);
  font-size:14px;box-shadow:var(--elev-3);
  opacity:0;pointer-events:none;z-index:200;max-width:90vw;text-align:center;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* 无障碍 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}