/* OneLabel · 工作台设计系统基础层（字体见 fonts.css）
   主题与官网统一：黑色为主，蓝绿渐变（#2F7BFF → #1FD1A5）只用在品牌和「推进这首歌」的动作上。
   规则：控件高度只有 28 / 32 / 36 / 40 / 48；圆角只有 6 / 8 / 12 / 16 / 20 / 全圆；
   字号只有 12 / 13 / 14 / 15 / 16 / 18 / 20 / 24 / 32。 */

:root{
  --f-ui:Geist,"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif;
  --f-display:Geist,"TK Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --r-6:6px;--r-8:8px;--r-12:12px;--r-16:16px;--r-20:20px;--r-full:999px;
  --e-out:cubic-bezier(.22,.61,.36,1);--e-io:cubic-bezier(.65,0,.35,1);--e-spring:cubic-bezier(.3,1.35,.6,1);
  --d-1:120ms;--d-2:180ms;--d-3:280ms;
  /* 品牌蓝绿：与官网同一组颜色（官网 --aura / 首页标题动画） */
  --blue:#2F7BFF;--teal:#1FD1A5;
  --grad:linear-gradient(135deg,#2F7BFF,#1FD1A5);
  --aura:radial-gradient(120% 160% at 0% 50%,#2F7BFF 0%,rgba(47,123,255,0) 55%),radial-gradient(120% 160% at 100% 40%,#1FD1A5 0%,rgba(31,209,165,0) 62%),#1BA3C9;
  color-scheme:dark;
}
/* 深色（默认）：与官网同一套偏冷的黑 */
:root,[data-theme=dark]{
  --stage:#08080A;--panel:#121215;--raised:#1A1A1E;--hover:#222227;--active:#2A2A30;--sunken:#0B0B0D;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.12);--line-3:rgba(255,255,255,.2);
  --text:#F5F3F0;--text-2:#A3A3A3;--text-3:#737373;--text-4:#525252;--on-inv:#0A0A0A;--inv:#F5F3F0;
  --brand:#1FD1A5;--brand-h:#4FDDB9;--brand-soft:rgba(31,209,165,.13);--brand-line:rgba(31,209,165,.42);
  --ok:#2FD07A;--ok-soft:rgba(47,208,122,.13);--warn:#FFB224;--warn-soft:rgba(255,178,36,.13);--err:#FF5A5A;--err-soft:rgba(255,90,90,.13);
  /* 五位 AI 员工按工作顺序落在蓝→绿渐变上：制作人最蓝，经纪人最绿 */
  --ag-producer:#2F7BFF;--ag-planner:#2B91E9;--ag-distro:#27A6D2;--ag-promo:#23BCBC;--ag-manager:#1FD1A5;
  --pop:#1C1C20;--pop-shadow:0 0 0 1px rgba(255,255,255,.09),0 16px 40px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
  --scrim:rgba(0,0,0,.66);--focus:rgba(31,209,165,.7);--sel:rgba(47,123,255,.34);
  color-scheme:dark;
}
/* 浅色（工作台可选）：浅灰底 + 白面板，参照 WorkBuddy 的层次 */
[data-theme=light]{
  --stage:#EFEEEC;--panel:#FFF;--raised:#F6F6F5;--hover:#F0F0EF;--active:#E7E7E5;--sunken:#F6F6F5;
  --line:rgba(0,0,0,.07);--line-2:rgba(0,0,0,.11);--line-3:rgba(0,0,0,.2);
  --text:#171717;--text-2:#5C5C5C;--text-3:#8A8A8A;--text-4:#B8B8B8;--on-inv:#FFF;--inv:#171717;
  --brand:#0E9F7E;--brand-h:#0B8A6D;--brand-soft:rgba(14,159,126,.1);--brand-line:rgba(14,159,126,.38);
  --ok:#16A34A;--ok-soft:rgba(22,163,74,.1);--warn:#C77C00;--warn-soft:rgba(217,119,6,.1);--err:#DC2626;--err-soft:rgba(220,38,38,.08);
  --ag-producer:#1F63E0;--ag-planner:#1B72C8;--ag-distro:#1781AF;--ag-promo:#129097;--ag-manager:#0E9F7E;
  --pop:#FFF;--pop-shadow:0 0 0 1px rgba(0,0,0,.08),0 16px 40px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.06);
  --scrim:rgba(20,20,20,.36);--focus:rgba(14,159,126,.6);--sel:rgba(31,99,224,.18);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--stage)}
body{min-height:100vh;background:var(--stage);color:var(--text);font:400 14px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'ss01' 0;text-rendering:optimizeLegibility}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;text-align:inherit}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none}
img,svg,video,canvas{display:block;max-width:100%}
ul,ol{list-style:none}
input,textarea{outline:0;border:0;background:none}
textarea{resize:none}
::selection{background:var(--sel)}
:focus{outline:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-6)}
input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable]:focus-visible{outline:none}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:12px;top:-60px;z-index:2000;background:var(--inv);color:var(--on-inv);padding:8px 14px;border-radius:var(--r-8);font-weight:500;transition:top var(--d-2)}
.skip-link:focus{top:12px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:0}
.dsp{font-family:var(--f-display);letter-spacing:-.02em}
/* 字标：OneLabel 文字 + 钩形符号（挑起于末字右下，工作台/分享页通用，见 js/core/brand.js） */
.tk-logo{position:relative;display:inline-flex;align-items:baseline;font:600 1em/1 var(--f-display);letter-spacing:-.01em;color:var(--text);padding-right:.46em;white-space:nowrap}
.tk-logo-mark{position:absolute;left:100%;top:.08em;width:.42em;height:auto;margin-left:-.46em}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.muted{color:var(--text-2)}.faint{color:var(--text-3)}
.grow{flex:1;min-width:0}

/* 滚动条：细、只在悬停时显形 */
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
*:hover{scrollbar-color:var(--line-3) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:transparent;border-radius:10px;border:3px solid transparent;background-clip:padding-box}
*:hover::-webkit-scrollbar-thumb{background-color:var(--line-3)}
::-webkit-scrollbar-track{background:transparent}

/* 图标 */
.ic{flex:none;display:block;width:16px;height:16px}
.ic-18{width:18px;height:18px}.ic-20{width:20px;height:20px}.ic-14{width:14px;height:14px}.ic-12{width:12px;height:12px}

/* —— 按钮 —— 高度 28 / 32 / 40 / 48；工作台用 8px 圆角，官网 CTA 用全圆 */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-8);
  font:500 13px/1 var(--f-ui);white-space:nowrap;border:1px solid transparent;color:var(--text);user-select:none;
  transition:background-color var(--d-1),border-color var(--d-1),color var(--d-1),opacity var(--d-1),transform var(--d-1)}
.btn:active:not(:disabled){transform:translateY(.5px)}
.btn:disabled{opacity:.38}
.btn-sm{height:28px;padding:0 10px;font-size:12px;border-radius:7px;gap:5px}
.btn-sm .ic{width:14px;height:14px}
.btn-lg{height:40px;padding:0 16px;font-size:14px;border-radius:10px;gap:8px}
.btn-xl{height:48px;padding:0 22px;font-size:15px;border-radius:var(--r-full);gap:8px}
.btn-pill{border-radius:var(--r-full)}
.btn-primary{background:var(--inv);color:var(--on-inv)}
.btn-primary:hover:not(:disabled){background:color-mix(in srgb,var(--inv) 88%,var(--panel))}
/* 品牌按钮：蓝绿渐变（同官网「免费开始 / 生成」），只给推进这首歌的动作 */
.btn-brand{background:var(--aura);background-size:180% 180%;color:#fff;animation:tkAura 9s ease-in-out infinite}
.btn-brand:hover:not(:disabled){filter:brightness(1.08)}
.btn-brand.loading::after{border-color:#fff #fff #fff transparent;opacity:.7}
@keyframes tkAura{0%,100%{background-position:50% 50%}25%{background-position:30% 70%}50%{background-position:70% 30%}75%{background-position:40% 60%}}
@media (prefers-reduced-motion:reduce){.btn-brand{animation:none}}
.btn-secondary{background:var(--raised);border-color:var(--line-2)}
.btn-secondary:hover:not(:disabled){background:var(--hover);border-color:var(--line-3)}
.btn-ghost{color:var(--text-2)}
.btn-ghost:hover:not(:disabled){background:var(--hover);color:var(--text)}
.btn-outline{border-color:var(--line-3)}
.btn-outline:hover:not(:disabled){background:var(--hover)}
.btn-danger{background:var(--err);color:#fff}
.btn-danger:hover:not(:disabled){filter:brightness(1.08)}
.btn-block{width:100%}
.btn .kbd{margin-left:4px}
.btn.loading{color:transparent!important;pointer-events:none}
.btn.loading::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;border:1.6px solid currentColor;border-color:var(--text-3) var(--text-3) var(--text-3) transparent;animation:spin .7s linear infinite}
.btn-primary.loading::after{border-color:var(--on-inv) var(--on-inv) var(--on-inv) transparent;opacity:.6}

/* 图标按钮：28 / 32 */
.ib{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-8);color:var(--text-2);flex:none;transition:background-color var(--d-1),color var(--d-1)}
.ib:hover:not(:disabled),.ib.on,.ib[aria-expanded=true]{background:var(--hover);color:var(--text)}
.ib:disabled{opacity:.35}
.ib-sm{width:28px;height:28px;border-radius:7px}
.ib-xs{width:24px;height:24px;border-radius:6px}
.ib-xs .ic{width:14px;height:14px}
.ib .badge-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px var(--stage)}

/* 键位提示 */
.kbd{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:5px;border:1px solid var(--line-2);font:500 11px/1 var(--f-ui);color:var(--text-3);background:transparent}

/* —— 输入 —— */
.field{display:flex;flex-direction:column;gap:6px}
.field+.field{margin-top:16px}
.label{font-size:13px;font-weight:500;color:var(--text)}
.hint{font-size:12px;color:var(--text-3);line-height:1.5}
.input,.select,.textarea{width:100%;height:36px;padding:0 12px;border-radius:var(--r-8);background:var(--sunken);border:1px solid var(--line-2);color:var(--text);font-size:14px;transition:border-color var(--d-1),box-shadow var(--d-1)}
.textarea{height:auto;min-height:96px;padding:9px 12px;line-height:1.6;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-3)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--text-3);box-shadow:0 0 0 3px var(--line)}
.input.err{border-color:var(--err)}
.input-lg{height:44px;font-size:15px;border-radius:10px;padding:0 14px}
.select{appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}
.inputgrp{display:flex;align-items:center;gap:8px}
.inputgrp .input{flex:1}
.affix{position:relative;display:flex;align-items:center}
.affix>.pre{position:absolute;left:12px;color:var(--text-2);font-size:14px;pointer-events:none}
.affix>.input{padding-left:52px}

/* 勾选 */
.check{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-size:13px;color:var(--text-2);line-height:1.5;user-select:none}
.check input{position:absolute;opacity:0;pointer-events:none}
.check .box{flex:none;width:16px;height:16px;margin-top:1.5px;border-radius:5px;border:1px solid var(--line-3);display:grid;place-items:center;transition:background var(--d-1),border-color var(--d-1)}
.check .box svg{width:12px;height:12px;opacity:0;color:var(--on-inv)}
.check input:checked+.box{background:var(--inv);border-color:var(--inv)}
.check input:checked+.box svg{opacity:1}
.check input:focus-visible+.box{outline:2px solid var(--focus);outline-offset:2px}
.check a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}

/* 开关 */
.switch{position:relative;flex:none;width:36px;height:20px;border-radius:20px;background:var(--active);transition:background var(--d-2)}
.switch::after{content:'';position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform var(--d-2) var(--e-out)}
.switch[aria-checked=true]{background:var(--ok)}
.switch[aria-checked=true]::after{transform:translateX(16px)}

/* 分段选择 */
.seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:var(--sunken);border:1px solid var(--line)}
.seg>button{height:28px;padding:0 12px;border-radius:7px;font-size:13px;font-weight:500;color:var(--text-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background var(--d-1),color var(--d-1)}
.seg>button:hover{color:var(--text)}
.seg>button[aria-pressed=true],.seg>button.on{background:var(--active);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.2)}
[data-theme=light] .seg>button[aria-pressed=true],[data-theme=light] .seg>button.on{background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}

/* 标签页（下划线） */
.tabs{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);min-height:44px}
.tabs>a,.tabs>button{position:relative;height:44px;display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text-2);white-space:nowrap;transition:color var(--d-1)}
.tabs>a:hover,.tabs>button:hover{color:var(--text)}
.tabs>.on{color:var(--text);font-weight:500}
.tabs>.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--text)}
.tabs .n{font-size:12px;color:var(--text-3);font-weight:400}

/* 筛选小标签（chip） */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-full);border:1px solid var(--line-2);font-size:13px;color:var(--text-2);white-space:nowrap;transition:background var(--d-1),border-color var(--d-1),color var(--d-1)}
.chip:hover{color:var(--text);border-color:var(--line-3)}
.chip[aria-pressed=true],.chip.on{color:var(--text);background:var(--active);border-color:transparent}
.chip .ic{width:14px;height:14px}
.chip .x{margin-right:-4px;color:var(--text-3)}

/* 徽标 */
.badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:6px;font:500 11px/1 var(--f-ui);color:var(--text-2);background:var(--hover);white-space:nowrap;flex:none}
.badge .dot{width:6px;height:6px}
.badge-brand{color:var(--brand);background:var(--brand-soft)}
.badge-ok{color:var(--ok);background:var(--ok-soft)}
.badge-warn{color:var(--warn);background:var(--warn-soft)}
.badge-err{color:var(--err);background:var(--err-soft)}
.badge-line{background:transparent;border:1px solid var(--line-2)}
.badge-inv{background:var(--inv);color:var(--on-inv)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-3);flex:none}
.dot-brand{background:var(--brand)}.dot-ok{background:var(--ok)}.dot-warn{background:var(--warn)}

/* 头像 */
.av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;font:600 12px/1 var(--f-ui);color:#fff;background:var(--active);overflow:hidden;user-select:none}
.av img{width:100%;height:100%;object-fit:cover}
.av-sm{width:22px;height:22px;font-size:10px}.av-lg{width:40px;height:40px;font-size:15px}.av-xl{width:64px;height:64px;font-size:22px}

/* AI 员工头像：员工的「灯」——方圆形色块 + 职能图形；工作中时灯会转 */
.ag{--c:var(--ag-producer);position:relative;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;flex:none;color:var(--c);
  background:color-mix(in srgb,var(--c) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent)}
.ag .ic{width:14px;height:14px}
.ag-sm{width:20px;height:20px;border-radius:6px}.ag-sm .ic{width:12px;height:12px}
.ag-md{width:32px;height:32px;border-radius:9px}.ag-md .ic{width:18px;height:18px}
.ag-lg{width:40px;height:40px;border-radius:11px}.ag-lg .ic{width:20px;height:20px}
.ag-xl{width:56px;height:56px;border-radius:15px}.ag-xl .ic{width:26px;height:26px}
.ag.producer{--c:var(--ag-producer)}.ag.planner{--c:var(--ag-planner)}.ag.distro{--c:var(--ag-distro)}.ag.promo{--c:var(--ag-promo)}.ag.manager{--c:var(--ag-manager)}
.ag.auto{--c:var(--text-2)}
.ag.live::after{content:'';position:absolute;inset:-3px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--a,0deg),transparent 0 62%,var(--c) 88%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:agspin 1.4s linear infinite}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes agspin{to{--a:360deg}}

/* 加载 */
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;border:1.6px solid var(--line-3);border-top-color:var(--text);animation:spin .75s linear infinite;flex:none}
.spin-sm{width:12px;height:12px}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--hover) 0%,var(--active) 50%,var(--hover) 100%);background-size:200% 100%;animation:skel 1.4s ease-in-out infinite;border-radius:var(--r-6)}
@keyframes skel{from{background-position:120% 0}to{background-position:-80% 0}}
.bar{height:4px;border-radius:4px;background:var(--active);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--teal));transition:width .4s var(--e-out)}

/* —— 浮层菜单 —— */
.menu{position:fixed;z-index:900;min-width:200px;max-width:340px;max-height:min(520px,calc(100vh - 24px));overflow:auto;padding:5px;border-radius:12px;background:var(--pop);box-shadow:var(--pop-shadow);
  transform-origin:var(--ox,50%) var(--oy,0);animation:menuIn var(--d-2) var(--e-out)}
@keyframes menuIn{from{opacity:0;transform:scale(.97) translateY(-2px)}}
.menu.out{animation:menuOut var(--d-1) var(--e-out) forwards}
@keyframes menuOut{to{opacity:0;transform:scale(.98)}}
.mi{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:6px 10px;border-radius:8px;font-size:13px;line-height:1.35;color:var(--text);text-align:left;cursor:pointer;user-select:none}
.mi .ic{color:var(--text-2)}
.mi:hover,.mi.focus{background:var(--hover)}
.mi[aria-checked=true] .chk{opacity:1}
.mi .chk{margin-left:auto;opacity:0;color:var(--text)}
.mi .r{margin-left:auto;color:var(--text-3);font-size:12px;display:flex;align-items:center;gap:4px}
.mi .sub{display:block;font-size:12px;color:var(--text-3);margin-top:1px}
.mi.danger,.mi.danger .ic{color:var(--err)}
.mi:disabled,.mi.dis{opacity:.4;pointer-events:none}
.mi .tx{flex:1;min-width:0}
.msep{height:1px;margin:5px 6px;background:var(--line)}
.mlabel{padding:8px 10px 4px;font-size:12px;color:var(--text-3)}
.menu-wide{width:300px}

/* 提示气泡 */
.tip{position:fixed;z-index:1200;pointer-events:none;padding:5px 8px;border-radius:7px;background:var(--inv);color:var(--on-inv);font:500 12px/1.3 var(--f-ui);white-space:nowrap;animation:tipIn var(--d-1) var(--e-out)}
.tip .kbd{border-color:color-mix(in srgb,var(--on-inv) 25%,transparent);color:color-mix(in srgb,var(--on-inv) 65%,transparent);margin-left:6px;height:16px}
@keyframes tipIn{from{opacity:0;transform:translateY(2px)}}

/* —— 弹窗 —— */
.dlg-root{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px}
.dlg-scrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn var(--d-2) var(--e-out)}
.dlg{position:relative;width:min(440px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:var(--r-16);background:var(--pop);box-shadow:var(--pop-shadow);padding:24px;animation:dlgIn var(--d-3) var(--e-out)}
.dlg-md{width:min(560px,100%)}.dlg-lg{width:min(760px,100%)}.dlg-xl{width:min(960px,100%)}
.dlg.flush{padding:0}
.dlg-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.dlg-h h2{font:600 16px/1.4 var(--f-ui);flex:1}
.dlg-x{margin:-6px -8px 0 0}
.dlg-p{font-size:14px;color:var(--text-2);line-height:1.6}
.dlg-b{margin-top:20px}
.dlg-f{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:24px}
.dlg-f .grow{font-size:12px;color:var(--text-3)}
.dlg-root.out .dlg{animation:dlgOut var(--d-2) var(--e-out) forwards}
.dlg-root.out .dlg-scrim{animation:fadeOut var(--d-2) forwards}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes dlgIn{from{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes dlgOut{to{opacity:0;transform:translateY(4px) scale(.99)}}

/* 键值行（确认卡） */
.kv{display:flex;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.kv:last-child{border-bottom:0}
.kv>span{color:var(--text-3);width:84px;flex:none}
.kv>b{font-weight:500;flex:1;min-width:0}

/* 轻提示 */
.toasts{position:fixed;left:50%;bottom:24px;z-index:1300;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;min-height:40px;padding:9px 10px 9px 14px;border-radius:12px;background:var(--inv);color:var(--on-inv);font:500 13px/1.4 var(--f-ui);box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:auto;animation:toastIn var(--d-3) var(--e-out);max-width:min(520px,calc(100vw - 32px))}
.toast .ic{color:inherit;opacity:.8}
.toast button{height:26px;padding:0 10px;border-radius:7px;font-weight:600;font-size:12px;background:color-mix(in srgb,var(--on-inv) 10%,transparent)}
.toast button:hover{background:color-mix(in srgb,var(--on-inv) 18%,transparent)}
.toast.out{animation:toastOut var(--d-2) var(--e-out) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes toastOut{to{opacity:0;transform:translateY(6px)}}

/* 空状态 */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:56px 24px;color:var(--text-2)}
.empty .ic{width:22px;height:22px;color:var(--text-3);margin-bottom:6px}
.empty h3{font:500 15px/1.4 var(--f-ui);color:var(--text)}
.empty p{font-size:13px;max-width:340px;line-height:1.6}
.empty .btn{margin-top:10px}

/* 平台图标 */
.plat{width:20px;height:20px;border-radius:5px;flex:none;object-fit:cover;background:var(--hover)}
.plat-sm{width:16px;height:16px;border-radius:4px}.plat-lg{width:28px;height:28px;border-radius:7px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}