/* ================================================================
   祥升电竞·闲鱼托管 — Design System v3.0
   统一令牌体系 · 企业级组件库 · Linear/Vercel 风格
   ================================================================ */

/* ========== Reset ========== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ========== Design Tokens ========== */
:root,[data-theme="default"]{
    /* Brand */
    --c-accent:#5b5bd6;
    --c-accent-hover:#4a4ac8;
    --c-accent-light:#f0f0ff;
    --c-accent-glow:rgba(91,91,214,.15);
    --c-accent-gradient:linear-gradient(135deg,#5b5bd6 0%,#7c3aed 100%);

    /* Neutral */
    --c-bg:#fafafa;
    --c-surface:#ffffff;
    --c-surface-2:#f7f7f8;
    --c-surface-3:#f0f0f1;
    --c-border:#ececef;
    --c-border-hover:#d1d1d6;
    --c-border-light:#f5f5f6;

    /* Text */
    --c-text:#08080a;
    --c-text-2:#52525b;
    --c-text-3:#a1a1aa;
    --c-text-disabled:#c4c4c8;
    --c-text-inverse:#ffffff;

    /* Status */
    --c-success:#16a34a;
    --c-success-bg:#f0fdf4;
    --c-warning:#d97706;
    --c-warning-bg:#fffbeb;
    --c-danger:#dc2626;
    --c-danger-bg:#fef2f2;
    --c-info:#2563eb;
    --c-info-bg:#eff6ff;
    --c-purple:#7c3aed;
    --c-purple-bg:#f5f3ff;

    /* Typography */
    --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    --font-mono:"SF Mono","Fira Code","Cascadia Code",monospace;
    --fs-xs:.75rem;
    --fs-sm:.8125rem;
    --fs-base:.875rem;
    --fs-md:.9375rem;
    --fs-lg:1rem;
    --fs-xl:1.125rem;
    --fs-2xl:1.25rem;
    --fs-3xl:1.5rem;
    --fs-4xl:1.875rem;
    --fs-5xl:2.25rem;
    --fw-normal:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;
    --fw-extrabold:800;
    --lh-tight:1.2;
    --lh-snug:1.375;
    --lh-normal:1.5;
    --lh-relaxed:1.625;
    --lh-loose:2;
    --tracking-tight:-.02em;
    --tracking-tighter:-.03em;
    --tracking-normal:0;
    --tracking-wide:.04em;
    --tracking-wider:.08em;

    /* Spacing — 4px grid */
    --space-0:0;
    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.25rem;
    --space-6:1.5rem;
    --space-8:2rem;
    --space-10:2.5rem;
    --space-12:3rem;
    --space-16:4rem;
    --space-20:5rem;
    --space-24:6rem;

    /* Radius */
    --r-xs:4px;
    --r-sm:6px;
    --r-md:8px;
    --r-lg:12px;
    --r-xl:16px;
    --r-2xl:20px;
    --r-3xl:24px;
    --r-full:9999px;

    /* Shadow */
    --shadow-xs:0 1px 2px rgba(0,0,0,.04);
    --shadow-sm:0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03);
    --shadow-md:0 4px 12px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.03);
    --shadow-lg:0 8px 28px rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.03);
    --shadow-xl:0 16px 48px rgba(0,0,0,.1),0 8px 16px rgba(0,0,0,.04);
    --shadow-glow:0 0 0 4px var(--c-accent-glow);

    /* Transition */
    --ease:cubic-bezier(.16,1,.3,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
    --dur-fast:.12s;
    --dur-base:.2s;
    --dur-slow:.3s;

    /* Layout */
    --sidebar-w:248px;
    --topbar-h:52px;
    --content-max:1400px;

    /* Z-index */
    --z-dropdown:100;
    --z-sticky:200;
    --z-overlay:1000;
    --z-modal:1100;
    --z-toast:9999;

    /* Legacy aliases (backward compat) */
    --a:var(--c-accent);--ah:var(--c-accent-hover);--al:var(--c-accent-light);--ag:var(--c-accent-glow);
    --g50:var(--c-bg);--g100:var(--c-surface-2);--g200:var(--c-surface-3);--g300:var(--c-border-hover);
    --g400:var(--c-text-3);--g500:var(--c-text-2);--g600:var(--c-text-2);--g700:var(--c-text);--g800:var(--c-text);--g900:var(--c-text);
    --sp:var(--c-surface);--ss:var(--c-bg);--st:var(--c-surface-2);--se:var(--c-surface);
    --bd:var(--c-border);--bdl:var(--c-border-light);--bdf:var(--c-accent);
    --sxs:var(--shadow-xs);--ssm:var(--shadow-sm);--smd:var(--shadow-md);--slg:var(--shadow-lg);--sxl:var(--shadow-xl);
    --rs:var(--r-sm);--r:var(--r-md);--rl:var(--r-lg);--rx:var(--r-xl);--r2:var(--r-2xl);
    --e:var(--ease);--spg:var(--ease-spring);--df:var(--dur-base);--d:var(--dur-slow);
    --sw:var(--sidebar-w);--th:var(--topbar-h);--f:var(--font-sans);
    --tp:var(--c-text);--ts:var(--c-text-2);--tt:var(--c-text-3);--ti:var(--c-text-inverse);--tl:var(--c-accent);
    --suc:var(--c-success);--sul:var(--c-success-bg);--war:var(--c-warning);--wal:var(--c-warning-bg);
    --dan:var(--c-danger);--dal:var(--c-danger-bg);--inf:var(--c-info);--inl:var(--c-info-bg);
    --radius:var(--r-md);--radius-lg:var(--r-lg);--radius-xl:var(--r-xl);
    --header-h:var(--topbar-h);
    --shadow:var(--shadow-sm);
    --dur:var(--dur-base);
    --font:var(--font-sans);
}

/* Dark theme */
[data-theme="dark"]{
    --c-bg:#0f0f10;
    --c-surface:#1a1a1c;
    --c-surface-2:#232326;
    --c-surface-3:#2a2a2e;
    --c-border:#2a2a2e;
    --c-border-hover:#3a3a3e;
    --c-border-light:#232326;
    --c-text:#f4f4f5;
    --c-text-2:#a1a1aa;
    --c-text-3:#71717a;
    --c-text-disabled:#52525b;
    --c-accent:#818cf8;
    --c-accent-hover:#6366f1;
    --c-accent-light:rgba(129,140,248,.12);
    --c-accent-glow:rgba(129,140,248,.2);
    --c-success:#22c55e;
    --c-success-bg:rgba(34,197,94,.12);
    --c-warning:#f59e0b;
    --c-warning-bg:rgba(245,158,11,.12);
    --c-danger:#ef4444;
    --c-danger-bg:rgba(239,68,68,.12);
    --c-info:#3b82f6;
    --c-info-bg:rgba(59,130,246,.12);
    --c-purple:#a855f7;
    --c-purple-bg:rgba(168,85,247,.12);
    --shadow-xs:0 1px 2px rgba(0,0,0,.2);
    --shadow-sm:0 1px 3px rgba(0,0,0,.25);
    --shadow-md:0 4px 12px rgba(0,0,0,.3);
    --shadow-lg:0 8px 28px rgba(0,0,0,.35);
    --shadow-xl:0 16px 48px rgba(0,0,0,.4);
}

/* Violet theme */
[data-theme="violet"]{
    --c-accent:#7c3aed;
    --c-accent-hover:#6d28d9;
    --c-accent-light:#f5f3ff;
    --c-accent-glow:rgba(124,58,237,.15);
}

/* ========== Base ========== */
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-sans);color:var(--c-text);background:var(--c-bg);line-height:var(--lh-normal);min-height:100vh}
a{color:var(--c-accent);text-decoration:none;transition:color var(--dur-base) var(--ease)}
a:hover{color:var(--c-accent-hover)}
::selection{background:var(--c-accent-light);color:var(--c-accent)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-border-hover);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--c-text-3)}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--c-surface-3)}

/* ========== Utilities ========== */
.text-xs{font-size:var(--fs-xs)}.text-sm{font-size:var(--fs-sm)}.text-base{font-size:var(--fs-base)}
.text-md{font-size:var(--fs-md)}.text-lg{font-size:var(--fs-lg)}.text-xl{font-size:var(--fs-xl)}
.text-2xl{font-size:var(--fs-2xl)}.text-3xl{font-size:var(--fs-3xl)}
.font-medium{font-weight:var(--fw-medium)}.font-semibold{font-weight:var(--fw-semibold)}
.font-bold{font-weight:var(--fw-bold)}.font-extrabold{font-weight:var(--fw-extrabold)}
.text-text{color:var(--c-text)}.text-text-2{color:var(--c-text-2)}.text-text-3{color:var(--c-text-3)}
.text-accent{color:var(--c-accent)}.text-success{color:var(--c-success)}.text-warning{color:var(--c-warning)}
.text-danger{color:var(--c-danger)}.text-info{color:var(--c-info)}
.text-center{text-align:center}.text-right{text-align:right}
.bg-surface{background:var(--c-surface)}.bg-bg{background:var(--c-bg)}.bg-surface-2{background:var(--c-surface-2)}
.bg-accent-light{background:var(--c-accent-light)}
.rounded-sm{border-radius:var(--r-sm)}.rounded-md{border-radius:var(--r-md)}.rounded-lg{border-radius:var(--r-lg)}
.rounded-xl{border-radius:var(--r-xl)}.rounded-full{border-radius:var(--r-full)}
.shadow-xs{box-shadow:var(--shadow-xs)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}
.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
.mb-2{margin-bottom:var(--space-2)}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}
.p-0{padding:0!important}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}
.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}.py-2{padding-top:var(--space-2);padding-bottom:var(--space-2)}
.py-3{padding-top:var(--space-3);padding-bottom:var(--space-3)}
.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.flex-col{flex-direction:column}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}
.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none!important}
.cursor-pointer{cursor:pointer}
.relative{position:relative}.absolute{position:absolute}.sticky{position:sticky}
.w-full{width:100%}.max-w-sm{max-width:384px}.max-w-md{max-width:448px}.max-w-lg{max-width:512px}

/* Legacy compat */
.text-tp{color:var(--c-text)}.text-ts{color:var(--c-text-2)}.text-tt{color:var(--c-text-3)}.text-a{color:var(--c-accent)}
.text-suc{color:var(--c-success)}.text-war{color:var(--c-warning)}.text-dan{color:var(--c-danger)}
.text-muted{color:var(--c-text-3)}
.bg-sp{background:var(--c-surface)}.bg-ss{background:var(--c-bg)}.bg-st{background:var(--c-surface-2)}.bg-al{background:var(--c-accent-light)}
.rounded-s{border-radius:var(--r-sm)}
.font-m{font-weight:var(--fw-medium)}.font-sb{font-weight:var(--fw-semibold)}.font-b{font-weight:var(--fw-bold)}

/* ========== Skeleton ========== */
.skeleton{background:linear-gradient(90deg,var(--c-surface-2) 25%,var(--c-surface-3) 50%,var(--c-surface-2) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-sm)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ========== Animations ========== */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes contentIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastIn{from{opacity:0;transform:translateX(100%) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(100%) scale(.95)}}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes modalOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 0 var(--c-success)}50%{box-shadow:0 0 0 6px transparent}}
@keyframes progressPulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes numberUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
@keyframes adminFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.animate-fadeIn{animation:fadeIn var(--dur-slow) var(--ease) both}
.animate-slideUp{animation:slideUp var(--dur-slow) var(--ease-spring) both}
.animate-scaleIn{animation:scaleIn var(--dur-base) var(--ease-spring) both}
.animate-contentIn{animation:contentIn .5s var(--ease) both}
.stagger-1{animation-delay:50ms}.stagger-2{animation-delay:100ms}.stagger-3{animation-delay:150ms}.stagger-4{animation-delay:200ms}

/* ========== Buttons ========== */
.btn,.panel-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);
    padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
    font-family:var(--font-sans);line-height:1.4;border:none;border-radius:var(--r-md);
    cursor:pointer;transition:all var(--dur-base) var(--ease);white-space:nowrap;user-select:none;
    position:relative;overflow:hidden;text-decoration:none;
}
.btn:active,.panel-btn:active{transform:scale(.97)}
.btn:disabled,.panel-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-primary,.panel-btn-primary{background:var(--c-accent);color:var(--c-text-inverse);box-shadow:var(--shadow-xs)}
.btn-primary:hover,.panel-btn-primary:hover{background:var(--c-accent-hover);box-shadow:0 2px 8px var(--c-accent-glow);transform:translateY(-1px)}
.btn-outline,.panel-btn-outline{background:var(--c-surface);color:var(--c-text-2);border:1px solid var(--c-border)}
.btn-outline:hover,.panel-btn-outline:hover{border-color:var(--c-border-hover);background:var(--c-surface-2);color:var(--c-text)}
.btn-ghost,.panel-btn-ghost{background:transparent;color:var(--c-text-2)}
.btn-ghost:hover,.panel-btn-ghost:hover{background:var(--c-surface-2);color:var(--c-text)}
.btn-danger,.panel-btn-danger{background:var(--c-danger);color:#fff}
.btn-danger:hover,.panel-btn-danger:hover{background:#b91c1c}
.btn-success{background:var(--c-success);color:#fff}
.btn-success:hover{background:#15803d}
.btn-sm,.panel-btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--fs-xs)}
.btn-lg,.panel-btn-lg{padding:var(--space-3) var(--space-6);font-size:var(--fs-md)}
.btn-block,.panel-btn-block{display:flex;width:100%}
.btn-icon{padding:var(--space-2);min-width:2rem;min-height:2rem}
.btn-loading{pointer-events:none;color:transparent!important}
.btn-loading::after{content:"";position:absolute;width:14px;height:14px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}

/* ========== Forms ========== */
.form-group,.panel-form-group{margin-bottom:var(--space-4)}
.form-label,.panel-form-group label{
    display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);
    color:var(--c-text-2);margin-bottom:var(--space-1);letter-spacing:-.005em;
}
.form-input,.form-select,.form-textarea,.panel-input,.panel-select,.panel-textarea{
    width:100%;padding:var(--space-2) var(--space-3);font-size:var(--fs-base);
    font-family:var(--font-sans);color:var(--c-text);background:var(--c-surface);
    border:1px solid var(--c-border);border-radius:var(--r-md);
    transition:all var(--dur-base) var(--ease);outline:none;line-height:1.4;
}
.form-input:focus,.form-select:focus,.form-textarea:focus,.panel-input:focus,.panel-select:focus,.panel-textarea:focus{
    border-color:var(--c-accent);box-shadow:var(--shadow-glow);
}
.form-input::placeholder,.panel-input::placeholder{color:var(--c-text-3)}
.form-input.error{border-color:var(--c-danger);box-shadow:0 0 0 3px var(--c-danger-bg)}
.form-hint,.panel-form-group .form-hint{font-size:var(--fs-xs);color:var(--c-text-3);margin-top:var(--space-1)}
.form-error{font-size:var(--fs-xs);color:var(--c-danger);margin-top:var(--space-1)}
.form-select,.panel-select{
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right var(--space-3) center;padding-right:2.2rem;
}
.form-textarea,.panel-textarea{resize:vertical;min-height:80px;line-height:1.5}
.form-toggle{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer}
.form-toggle input{display:none}
.form-toggle .track{width:36px;height:20px;background:var(--c-border-hover);border-radius:10px;position:relative;transition:background var(--dur-base) var(--ease)}
.form-toggle .track::after{content:"";position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform var(--dur-base) var(--ease-spring);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.form-toggle input:checked+.track{background:var(--c-accent)}
.form-toggle input:checked+.track::after{transform:translateX(16px)}
.form-inline,.form-row{display:flex;gap:var(--space-2)}
.form-row .form-group{flex:1}

/* Checkbox */
.panel-checkbox{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--fs-base);color:var(--c-text);font-weight:var(--fw-medium)}
.panel-checkbox input{
    appearance:none;-webkit-appearance:none;width:18px;height:18px;
    border:1.5px solid var(--c-border-hover);border-radius:5px;cursor:pointer;
    transition:all var(--dur-base) var(--ease);position:relative;flex-shrink:0;
}
.panel-checkbox input:checked{background:var(--c-accent);border-color:var(--c-accent)}
.panel-checkbox input:checked::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ========== Cards ========== */
.card,.panel-card{
    background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
    box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
    overflow:hidden;margin-bottom:var(--space-4);
}
.card:hover,.panel-card:hover{box-shadow:var(--shadow-sm);border-color:var(--c-border-hover)}
.card-header,.panel-card-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--c-border);min-height:52px;
}
.card-header h3,.panel-card-header h3{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-text);display:flex;align-items:center;gap:var(--space-2);letter-spacing:-.01em}
.card-body,.panel-card-body{padding:var(--space-5)}
.card-body.p-0,.panel-card-body.p-0{padding:0}
.card-footer{padding:var(--space-3) var(--space-5);border-top:1px solid var(--c-border);background:var(--c-surface-2)}
.card-accent{border-top:3px solid var(--c-accent)}
.card-flat{background:var(--c-surface-2);border:none;box-shadow:none}
.card-clickable{cursor:pointer}
.card-clickable:hover{border-color:var(--c-accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-6);margin-bottom:var(--space-6)}

/* ========== Stat Grid ========== */
.stat-grid,.stats-grid,.panel-stat-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:var(--space-4);margin-bottom:var(--space-6);
}
.stat-card,.panel-stat{
    background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
    padding:var(--space-5);transition:all var(--dur-base) var(--ease);position:relative;overflow:hidden;
    box-shadow:var(--shadow-xs);
}
.stat-card:hover,.panel-stat:hover{border-color:var(--c-border-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.stat-card .stat-icon,.panel-stat .panel-stat-icon{
    width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--r-md);font-size:1rem;margin-bottom:var(--space-3);
}
.stat-icon.blue{background:var(--c-info-bg);color:var(--c-info)}
.stat-icon.green{background:var(--c-success-bg);color:var(--c-success)}
.stat-icon.indigo{background:var(--c-accent-light);color:var(--c-accent)}
.stat-icon.amber{background:var(--c-warning-bg);color:var(--c-warning)}
.stat-icon.purple{background:var(--c-purple-bg);color:var(--c-purple)}
.stat-icon.orange{background:#fff7ed;color:#ea580c}
.stat-card .stat-value,.panel-stat .panel-stat-value{font-size:1.75rem;font-weight:var(--fw-bold);color:var(--c-text);line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat-card .stat-label,.panel-stat .panel-stat-label{font-size:var(--fs-sm);color:var(--c-text-3);margin-top:var(--space-1);font-weight:var(--fw-medium)}
.stat-card .stat-change,.panel-stat .panel-stat-change{font-size:var(--fs-xs);margin-top:var(--space-1);display:inline-flex;align-items:center;gap:.2rem;font-weight:var(--fw-medium)}
.stat-card .stat-change.up,.panel-stat .panel-stat-change.up{color:var(--c-success)}
.stat-card .stat-change.down,.panel-stat .panel-stat-change.down{color:var(--c-danger)}
.stat-card .stat-desc{font-size:var(--fs-xs);color:var(--c-text-3);margin-top:.2rem}

/* ========== Tables ========== */
.table-wrap,.panel-table-wrap{overflow-x:auto;border-radius:var(--r-md)}
table,.panel-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
thead,.panel-table thead{background:var(--c-surface-2)}
th,.panel-table th{
    text-align:left;padding:var(--space-3) var(--space-4);
    font-weight:var(--fw-semibold);font-size:var(--fs-xs);color:var(--c-text-3);
    text-transform:uppercase;letter-spacing:var(--tracking-wide);
    white-space:nowrap;border-bottom:1px solid var(--c-border);
}
td,.panel-table td{padding:var(--space-3) var(--space-4);color:var(--c-text);border-bottom:1px solid var(--c-border-light);vertical-align:middle}
tbody tr,.panel-table tbody tr{transition:background var(--dur-fast) var(--ease)}
tbody tr:hover,.panel-table tbody tr:hover{background:var(--c-surface-2)}
tbody tr:last-child td,.panel-table tbody tr:last-child td{border-bottom:none}

/* Empty states */
.table-empty,.empty-state,.panel-empty{text-align:center;padding:var(--space-12) var(--space-4);color:var(--c-text-3)}
.table-empty .empty-icon{font-size:2rem;margin-bottom:var(--space-2);opacity:.4}
.empty-state p{font-size:var(--fs-sm)}
.panel-empty{animation:contentIn var(--dur-base) var(--ease) both}
.panel-empty .panel-empty-icon{
    width:56px;height:56px;margin:0 auto var(--space-3);border-radius:var(--r-lg);
    background:var(--c-surface-2);display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;color:var(--c-text-3);
}
.panel-empty .panel-empty-title{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--c-text-2);margin-bottom:var(--space-1)}
.panel-empty .panel-empty-desc{font-size:var(--fs-sm);color:var(--c-text-3)}

/* Info table */
.info-table{width:100%}
.info-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--c-border-light)}
.info-table td.label{width:120px;font-weight:var(--fw-medium);color:var(--c-text-2);background:var(--c-surface-2)}

/* ========== Badges ========== */
.badge,.panel-badge{
    display:inline-flex;align-items:center;gap:.25rem;padding:.15rem var(--space-2);
    font-size:var(--fs-xs);font-weight:var(--fw-semibold);border-radius:var(--r-xs);
    line-height:1.5;white-space:nowrap;letter-spacing:.01em;
}
.badge-primary,.panel-badge-primary{background:var(--c-accent-light);color:var(--c-accent)}
.badge-success,.panel-badge-success{background:var(--c-success-bg);color:var(--c-success)}
.badge-warning,.panel-badge-warning{background:var(--c-warning-bg);color:var(--c-warning)}
.badge-danger,.panel-badge-danger{background:var(--c-danger-bg);color:var(--c-danger)}
.badge-info,.panel-badge-info{background:var(--c-info-bg);color:var(--c-info)}
.badge-neutral,.badge-secondary,.panel-badge-neutral{background:var(--c-surface-2);color:var(--c-text-2)}
.badge-gray{background:var(--c-surface-3);color:var(--c-text-2)}
.badge-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.badge-dot.online{background:var(--c-success)}.badge-dot.offline{background:var(--c-text-3)}

/* ========== Status ========== */
.status{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0}
.status-online::before{background:var(--c-success);animation:statusPulse 2s infinite}
.status-offline::before{background:var(--c-text-3)}
.status-warning::before{background:var(--c-warning)}
.status-error::before{background:var(--c-danger)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.3rem}
.status-dot.online{background:var(--c-success);box-shadow:0 0 0 3px var(--c-success-bg)}
.status-dot.offline{background:var(--c-text-3)}

/* ========== Progress ========== */
.progress{height:6px;background:var(--c-surface-3);border-radius:3px;overflow:hidden}
.progress-bar{height:100%;border-radius:3px;background:var(--c-accent);transition:width .6s var(--ease);position:relative}
.progress-bar.suc{background:var(--c-success)}.progress-bar.war{background:var(--c-warning)}.progress-bar.dan{background:var(--c-danger)}
.progress-bar.indeterminate{animation:progressPulse 1.5s infinite;width:100%!important}
.progress-sm{height:4px}.progress-lg{height:10px;border-radius:5px}
.progress-label{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--c-text-2);margin-bottom:var(--space-1)}
.progress-circle{position:relative;display:inline-flex;align-items:center;justify-content:center}
.progress-circle svg{transform:rotate(-90deg)}
.progress-circle .pc-bg{fill:none;stroke:var(--c-surface-3)}
.progress-circle .pc-fill{fill:none;stroke:var(--c-accent);stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.progress-circle .pc-text{position:absolute;font-weight:var(--fw-bold);color:var(--c-text);font-size:1.1rem}

/* ========== Alerts ========== */
.alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.5;animation:slideDown var(--dur-slow) var(--ease-spring)}
.alert-info{background:var(--c-info-bg);color:#1e40af;border:1px solid #bfdbfe}
.alert-success{background:var(--c-success-bg);color:#065f46;border:1px solid #a7f3d0}
.alert-warning{background:var(--c-warning-bg);color:#92400e;border:1px solid #fde68a}
.alert-danger{background:var(--c-danger-bg);color:#991b1b;border:1px solid #fecaca}
.alert .alert-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.alert .alert-close{margin-left:auto;cursor:pointer;opacity:.5;background:none;border:none;color:inherit;font-size:1.1rem;padding:0;line-height:1}
.alert .alert-close:hover{opacity:1}

/* ========== Toasts ========== */
.toast-container{position:fixed;top:var(--space-4);right:var(--space-4);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);color:var(--c-text);pointer-events:auto;animation:toastIn var(--dur-slow) var(--ease-spring);max-width:380px}
.toast.removing{animation:toastOut var(--dur-base) var(--ease) forwards}
.toast-icon{font-size:1.1rem;flex-shrink:0}
.toast-close{margin-left:auto;cursor:pointer;opacity:.4;background:none;border:none;color:inherit;font-size:1rem}
.toast-close:hover{opacity:1}
.toast-error{border-left:3px solid var(--c-danger)}
.toast-success{border-left:3px solid var(--c-success)}
.toast-warning{border-left:3px solid var(--c-warning)}
.toast-info{border-left:3px solid var(--c-accent)}

/* ========== Modals ========== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:modalOverlayIn var(--dur-base) var(--ease)}
.modal{background:var(--c-surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:100%;max-width:500px;max-height:85vh;overflow-y:auto;animation:modalIn var(--dur-slow) var(--ease-spring)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--c-border)}
.modal-header h2{font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--c-text)}
.modal-body{padding:var(--space-6)}
.modal-footer{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-6);border-top:1px solid var(--c-border);background:var(--c-surface-2)}
.modal-close{background:none;border:none;font-size:1.3rem;color:var(--c-text-3);cursor:pointer;padding:.2rem;border-radius:var(--r-sm);transition:all var(--dur-base) var(--ease)}
.modal-close:hover{color:var(--c-text);background:var(--c-surface-2)}

/* ========== Tabs ========== */
.tabs,.panel-tabs{display:flex;gap:0;border-bottom:1px solid var(--c-border);margin-bottom:var(--space-6)}
.tab,.panel-tab{
    padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);font-weight:var(--fw-medium);
    color:var(--c-text-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
    transition:all var(--dur-base) var(--ease);background:none;border-top:none;border-left:none;border-right:none;
    font-family:var(--font-sans);text-decoration:none;
}
.tab:hover,.panel-tab:hover{color:var(--c-text)}
.tab.active,.panel-tab.active{color:var(--c-text);border-bottom-color:var(--c-accent);font-weight:var(--fw-semibold)}
.tab-content{display:none;animation:contentIn var(--dur-base) var(--ease)}
.tab-content.active{display:block}

/* ========== Layout — User Panel ========== */
.topbar{
    position:sticky;top:0;z-index:var(--z-sticky);height:var(--topbar-h);
    background:rgba(255,255,255,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between;
    padding:0 var(--space-5);
}
[data-theme="dark"] .topbar{background:rgba(26,26,28,.8)}
.topbar-left{display:flex;align-items:center;gap:var(--space-3)}
.topbar-brand{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--c-text);display:flex;align-items:center;gap:var(--space-2);text-decoration:none;letter-spacing:-.01em}
.topbar-brand .logo{width:28px;height:28px;background:var(--c-accent-gradient);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-bold);box-shadow:0 2px 8px var(--c-accent-glow)}
.topbar-right{display:flex;align-items:center;gap:var(--space-2)}
.topbar-avatar{width:30px;height:30px;border-radius:50%;background:var(--c-accent-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;transition:transform var(--dur-base) var(--ease-spring)}
.topbar-avatar:hover{transform:scale(1.1)}
.topbar-dropdown{position:relative}
.topbar-dropdown-menu{position:absolute;top:100%;right:0;margin-top:var(--space-1);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);min-width:180px;padding:var(--space-1);animation:scaleIn var(--dur-base) var(--ease-spring);display:none;z-index:var(--z-dropdown)}
.topbar-dropdown.active .topbar-dropdown-menu{display:block}
.topbar-dropdown-menu a,.topbar-dropdown-menu button{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);font-size:var(--fs-sm);color:var(--c-text-2);border:none;background:none;cursor:pointer;border-radius:var(--r-sm);text-decoration:none;font-family:var(--font-sans);text-align:left}
.topbar-dropdown-menu a:hover,.topbar-dropdown-menu button:hover{background:var(--c-surface-2);color:var(--c-text)}
.menu-toggle,.admin-menu-toggle{display:none;background:none;border:none;color:var(--c-text-2);cursor:pointer;padding:var(--space-1);border-radius:var(--r-sm)}

/* Sidebar */
.sidebar{
    position:fixed;top:var(--topbar-h);left:0;bottom:0;width:var(--sidebar-w);
    background:var(--c-surface);border-right:1px solid var(--c-border);
    overflow-y:auto;z-index:var(--z-dropdown);transition:transform var(--dur-slow) var(--ease);
    padding:var(--space-3) var(--space-2) var(--space-4);
    scrollbar-width:thin;scrollbar-color:var(--c-border-hover) transparent;
}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:var(--c-border-hover);border-radius:2px}
.sidebar-nav{display:flex;flex-direction:column;gap:1px}
.sidebar-section{
    font-size:.68rem;font-weight:var(--fw-bold);
    text-transform:uppercase;letter-spacing:.07em;
    color:var(--c-text-3);opacity:.7;
    padding:var(--space-4) var(--space-3) var(--space-1);
    margin-top:var(--space-1);
}
.sidebar-section:first-child{margin-top:0}
.sidebar-link{
    display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);
    font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-2);
    border-radius:var(--r-md);transition:all var(--dur-fast) var(--ease);
    text-decoration:none;position:relative;line-height:1.4;
    min-height:34px;
}
.sidebar-link:hover{
    background:var(--c-surface-2);color:var(--c-text);
}
.sidebar-link.active{
    background:var(--c-accent-light);color:var(--c-accent);
    font-weight:var(--fw-semibold);
    box-shadow:inset 0 0 0 1px var(--c-accent-glow);
}
.sidebar-link.active::before{
    content:"";position:absolute;left:-.5rem;top:50%;
    transform:translateY(-50%);width:3px;height:18px;
    background:var(--c-accent);border-radius:0 3px 3px 0;
    box-shadow:0 0 8px var(--c-accent-glow);
}
.sidebar-link .link-icon{
    width:18px;height:18px;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;opacity:.55;transition:all var(--dur-fast) var(--ease);
}
.sidebar-link .link-icon svg{width:18px;height:18px}
.sidebar-link:hover .link-icon{opacity:.85}
.sidebar-link.active .link-icon{opacity:1;color:var(--c-accent)}
.sidebar-link .link-badge{
    margin-left:auto;background:var(--c-danger);color:#fff;
    font-size:.6rem;padding:1px 6px;border-radius:var(--r-full);
    font-weight:var(--fw-bold);line-height:1.5;letter-spacing:.02em;
}
.sidebar-divider{height:1px;background:var(--c-border-light);margin:var(--space-2) var(--space-3)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:90}
.sidebar-overlay.show{display:block}

/* Main content */
.app-layout{display:flex;min-height:calc(100vh - var(--topbar-h))}
.main-content{flex:1;margin-left:var(--sidebar-w);padding:var(--space-8);min-width:0;background:var(--c-bg)}

/* Page header */
.page-header,.panel-page-header{margin-bottom:var(--space-6);animation:contentIn var(--dur-base) var(--ease) both}
.page-header h1,.panel-page-header h1{font-size:var(--fs-3xl);font-weight:var(--fw-bold);color:var(--c-text);letter-spacing:-.03em;line-height:1.2}
.page-header p,.panel-page-header p{font-size:var(--fs-sm);color:var(--c-text-3);margin-top:var(--space-1);font-weight:var(--fw-normal)}
.content-section,.section-title{margin-bottom:var(--space-6)}
.section-title{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--c-text);margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-2)}

/* Grids */
.grid-2,.panel-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.grid-3,.panel-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}

/* Config cards */
.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.config-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--space-5)}
.config-card h4{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-text);margin-bottom:var(--space-2)}
.config-card p{font-size:var(--fs-sm);color:var(--c-text-3);margin-bottom:var(--space-3)}
.config-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) 0;border-bottom:1px solid var(--c-border-light)}
.config-row:last-child{border-bottom:none}

/* ========== Hero Stat (Dashboard) ========== */
.hero-stat,.panel-hero-stat{
    display:flex;align-items:center;gap:var(--space-8);padding:var(--space-6);
    background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);
    box-shadow:var(--shadow-sm);position:relative;overflow:hidden;animation:slideUp var(--dur-base) var(--ease) both;
}
.hero-stat .ring-wrap,.panel-hero-stat .panel-ring{position:relative;flex-shrink:0}
.hero-stat .ring-label,.panel-hero-stat .panel-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--c-text);letter-spacing:-.03em}
.hero-stat .ring-label .sub,.panel-hero-stat .panel-ring-text .sub{font-size:var(--fs-xs);color:var(--c-text-3)}
.hero-stat .hero-info,.panel-hero-stat .panel-hero-info{flex:1;position:relative;z-index:1}
.hero-stat .hero-info h2,.panel-hero-stat .panel-hero-info h2{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--c-text);letter-spacing:-.02em;margin-bottom:var(--space-1)}
.hero-stat .hero-info p,.panel-hero-stat .panel-hero-info p{font-size:var(--fs-sm);color:var(--c-text-2);line-height:1.5}
.hero-stat .hero-info strong,.panel-hero-stat .panel-hero-info strong{color:var(--c-accent);font-weight:var(--fw-bold)}
.hero-stat .hero-actions,.panel-hero-stat .panel-hero-badges{margin-top:var(--space-3);display:flex;gap:var(--space-2);flex-wrap:wrap}

/* ========== AI Level ========== */
.ai-levels,.panel-level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}
.ai-level-card,.panel-level-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--space-4);text-align:center;transition:all var(--dur-base) var(--ease);position:relative;overflow:hidden}
.ai-level-card:hover,.panel-level-card:hover{border-color:var(--c-border-hover);box-shadow:var(--shadow-sm)}
.ai-level-card.current,.panel-level-card.current{border-color:var(--c-accent);box-shadow:var(--shadow-glow)}
.ai-level-card.current::before,.panel-level-card.current::after{content:"当前";position:absolute;top:5px;right:5px;font-size:.58rem;font-weight:var(--fw-bold);color:#fff;background:var(--c-accent);padding:2px 6px;border-radius:var(--r-xs)}
.ai-level-card.current::before{display:none}
.ai-level-card.locked,.panel-level-card.locked{opacity:.45}
.ai-level-card .level-icon,.panel-level-card .panel-level-icon{font-size:1.5rem;margin-bottom:var(--space-1)}
.ai-level-card .level-name,.panel-level-card .panel-level-name{font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--c-text)}
.ai-level-card .level-desc,.panel-level-card .panel-level-desc{font-size:var(--fs-xs);color:var(--c-text-3);margin-top:.1rem}
.ai-level-card .level-bar,.panel-level-card .panel-level-bar{height:3px;background:var(--c-surface-2);border-radius:2px;margin-top:var(--space-2);overflow:hidden}
.ai-level-card .level-bar-fill,.panel-level-card .panel-level-bar-fill{height:100%;background:var(--c-accent);border-radius:2px;transition:width .6s var(--ease)}

/* ========== Chat / Messages ========== */
.chat-list{display:flex;flex-direction:column;gap:1px;background:var(--c-border);border-radius:var(--r-md);overflow:hidden}
.chat-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--c-surface);cursor:pointer;transition:background var(--dur-base) var(--ease);text-decoration:none;color:inherit}
.chat-item:hover{background:var(--c-surface-2)}
.chat-item.active{background:var(--c-accent-light)}
.chat-item .chat-avatar{width:40px;height:40px;border-radius:50%;background:var(--c-surface-3);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;overflow:hidden}
.chat-item .chat-info{flex:1;min-width:0}
.chat-item .chat-name{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-text)}
.chat-item .chat-preview{font-size:var(--fs-sm);color:var(--c-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item .chat-time{font-size:var(--fs-xs);color:var(--c-text-3)}
.chat-item .chat-unread{display:inline-block;background:var(--c-accent);color:#fff;font-size:.65rem;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:9px;padding:0 5px;margin-top:3px}
.message-area{display:flex;flex-direction:column;height:100%;border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);overflow:hidden}
.message-bubble{max-width:75%;padding:var(--space-2) var(--space-3);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.55;animation:fadeIn var(--dur-base) var(--ease)}
.message-bubble.buyer,.message-bubble.incoming{background:var(--c-surface-2);color:var(--c-text);align-self:flex-start;border-bottom-left-radius:2px}
.message-bubble.ai{background:var(--c-accent-light);color:var(--c-text);align-self:flex-end;border-bottom-right-radius:2px}
.message-bubble.human,.message-bubble.outgoing{background:var(--c-accent);color:#fff;align-self:flex-end;border-bottom-right-radius:2px}
.message-bubble .msg-meta{font-size:var(--fs-xs);opacity:.6;margin-top:.2rem;display:flex;align-items:center;gap:var(--space-1)}
.message-input-area{display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--c-border);background:var(--c-surface-2)}

/* Chat preview */
.panel-chat-preview{background:var(--c-surface-2);border-radius:var(--r-lg);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.panel-chat-bubble{display:flex;gap:var(--space-2);align-items:flex-end;max-width:80%}
.panel-chat-bubble.out{align-self:flex-end;flex-direction:row-reverse}
.panel-chat-bubble.in{align-self:flex-start}
.panel-chat-bubble .bubble-avatar{width:30px;height:30px;border-radius:50%;background:var(--c-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:var(--fw-semibold);flex-shrink:0}
.panel-chat-bubble.in .bubble-avatar{background:var(--c-text-3)}
.panel-chat-bubble .bubble-content{display:flex;flex-direction:column;max-width:calc(100% - 40px)}
.panel-chat-bubble .bubble-text{padding:var(--space-2) var(--space-3);border-radius:var(--r-lg);font-size:var(--fs-sm);line-height:1.45;word-break:break-word}
.panel-chat-bubble.out .bubble-text{background:var(--c-accent);color:#fff;border-bottom-right-radius:3px}
.panel-chat-bubble.in .bubble-text{background:var(--c-surface);border:1px solid var(--c-border);border-bottom-left-radius:3px}
.panel-chat-bubble .bubble-meta{font-size:var(--fs-xs);color:var(--c-text-3);margin-top:.2rem}
.panel-chat-bubble.out .bubble-meta{text-align:right}

/* ========== Upload ========== */
.upload-zone,.panel-upload-zone{border:1.5px dashed var(--c-border-hover);border-radius:var(--r-lg);padding:var(--space-8) var(--space-6);text-align:center;cursor:pointer;transition:all var(--dur-base) var(--ease);background:var(--c-surface-2)}
.upload-zone:hover,.panel-upload-zone:hover{border-color:var(--c-accent);background:var(--c-accent-light)}
.upload-zone .upload-icon,.panel-upload-zone .panel-upload-icon{width:48px;height:48px;margin:0 auto var(--space-3);border-radius:var(--r-lg);background:var(--c-accent-light);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--c-accent)}
.upload-zone p,.panel-upload-zone .panel-upload-title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-text)}
.upload-zone span,.panel-upload-zone .panel-upload-desc{color:var(--c-accent);font-weight:var(--fw-medium)}
.panel-upload-zone .panel-upload-desc{font-size:var(--fs-sm);color:var(--c-text-3);margin-top:var(--space-1);font-weight:var(--fw-normal)}
.upload-preview{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.upload-preview .preview-item{width:80px;height:80px;border-radius:var(--r-sm);overflow:hidden;position:relative;border:1px solid var(--c-border)}
.upload-preview .preview-item img{width:100%;height:100%;object-fit:cover}
.upload-preview .preview-remove{position:absolute;top:2px;right:2px;width:18px;height:18px;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;cursor:pointer;border:none}

/* ========== Training ========== */
.training-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--c-border);border-radius:var(--r-md);margin-bottom:var(--space-2);background:var(--c-surface);transition:all var(--dur-base) var(--ease)}
.training-item:hover{border-color:var(--c-accent);box-shadow:var(--shadow-xs)}

/* ========== Gradient Banner ========== */
.panel-gradient-banner{
    background:var(--c-accent-gradient);color:#fff;border-radius:var(--r-lg);
    padding:var(--space-5) var(--space-6);display:flex;align-items:flex-start;gap:var(--space-3);
    position:relative;overflow:hidden;margin-bottom:var(--space-4);
}
.panel-gradient-banner::before{content:"";position:absolute;top:-60%;right:-10%;width:240px;height:240px;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%);pointer-events:none}
.panel-gradient-banner .banner-icon{font-size:1.3rem;flex-shrink:0}
.panel-gradient-banner .banner-content{flex:1;position:relative;z-index:1}
.panel-gradient-banner h3{font-size:var(--fs-md);font-weight:var(--fw-bold);margin-bottom:var(--space-1);letter-spacing:-.01em}
.panel-gradient-banner p{font-size:var(--fs-sm);opacity:.88;line-height:1.5}
.panel-gradient-banner strong{font-weight:var(--fw-bold)}

/* ========== Auth ========== */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--c-bg) 0%,var(--c-surface-2) 100%);padding:var(--space-4)}
.auth-card{width:100%;max-width:400px;background:var(--c-surface);border-radius:var(--r-2xl);box-shadow:var(--shadow-lg);padding:var(--space-10) var(--space-8);animation:slideUp var(--dur-slow) var(--ease-spring)}
.auth-card .auth-logo{text-align:center;margin-bottom:var(--space-6)}
.auth-card .auth-logo .logo-icon{width:48px;height:48px;background:var(--c-accent-gradient);border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem}
.auth-card h1{font-size:var(--fs-xl);font-weight:var(--fw-bold);text-align:center;color:var(--c-text);margin-bottom:var(--space-1)}
.auth-card .auth-sub{text-align:center;font-size:var(--fs-sm);color:var(--c-text-3);margin-bottom:var(--space-6)}

/* ========== Shop Card ========== */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4)}
.shop-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--space-5);transition:all var(--dur-base) var(--ease);display:flex;flex-direction:column;gap:var(--space-2)}
.shop-card:hover{border-color:var(--c-accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}

/* ========== Theme Picker ========== */
.theme-picker{display:flex;gap:var(--space-2);margin-top:var(--space-2)}
.theme-option{width:40px;height:40px;border-radius:50%;border:3px solid var(--c-border);cursor:pointer;transition:all var(--dur-base) var(--ease);position:relative}
.theme-option.active{border-color:var(--c-accent);box-shadow:var(--shadow-glow)}
.theme-option::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-bold);opacity:0;transition:opacity var(--dur-base) var(--ease)}
.theme-option.active::after{opacity:1}
.theme-default{background:linear-gradient(135deg,#5b5bd6,#f0f0ff)}
.theme-violet{background:linear-gradient(135deg,#7c3aed,#f5f3ff)}
.theme-dark{background:linear-gradient(135deg,#1a1a1c,#818cf8)}

/* ========== Landing Page (in landing.css) ========== */

/* Footer */
.footer,.landing-footer{border-top:1px solid var(--c-border);padding:2.5rem var(--space-8);text-align:center}
.footer p,.landing-footer p{font-size:var(--fs-sm);color:var(--c-text-3);line-height:1.8}

/* Auth page */
.auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--c-bg);padding:2rem var(--space-4);position:relative;overflow:hidden}
.auth-body::before{content:"";position:absolute;top:-10%;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,var(--c-accent-glow) 0%,transparent 60%);filter:blur(40px);pointer-events:none}
.auth-wrap{width:100%;max-width:420px;position:relative;z-index:1;animation:slideUp var(--dur-slow) var(--ease) both}
.auth-back{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--fs-sm);color:var(--c-text-2);text-decoration:none;font-weight:var(--fw-medium);margin-bottom:var(--space-6);transition:color var(--dur-base) var(--ease)}
.auth-back:hover{color:var(--c-accent)}
.auth-card-new{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-2xl);padding:2.5rem var(--space-8);box-shadow:var(--shadow-lg)}
.auth-logo{text-align:center;margin-bottom:1.75rem}
.auth-logo .logo-mark{width:52px;height:52px;border-radius:var(--r-xl);background:var(--c-accent-gradient);display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-bottom:var(--space-4);box-shadow:0 4px 14px var(--c-accent-glow);transition:transform var(--dur-slow) var(--ease)}
.auth-logo .logo-mark:hover{transform:scale(1.08) rotate(-5deg)}
.auth-logo h1{font-size:1.375rem;font-weight:var(--fw-extrabold);color:var(--c-text);letter-spacing:-.02em}
.auth-logo .subtitle{font-size:var(--fs-sm);color:var(--c-text-3);margin-top:var(--space-1)}
.auth-field{margin-bottom:1.125rem}
.auth-field label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--c-text);margin-bottom:var(--space-2)}
.auth-input{width:100%;padding:.625rem .875rem;font-size:var(--fs-md);font-family:var(--font-sans);color:var(--c-text);background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:var(--r-lg);outline:none;transition:all var(--dur-base) var(--ease);box-sizing:border-box}
.auth-input::placeholder{color:var(--c-text-3)}
.auth-input:focus{border-color:var(--c-accent);box-shadow:var(--shadow-glow)}
.auth-input.error{border-color:var(--c-danger);box-shadow:0 0 0 3px var(--c-danger-bg)}
.auth-code-row{display:flex;gap:var(--space-2)}
.auth-code-btn{flex-shrink:0;padding:.625rem var(--space-4);font-size:var(--fs-sm);font-weight:var(--fw-semibold);font-family:var(--font-sans);background:var(--c-accent-light);color:var(--c-accent);border:1.5px solid transparent;border-radius:var(--r-lg);cursor:pointer;transition:all var(--dur-base) var(--ease);white-space:nowrap}
.auth-code-btn:hover:not(:disabled){background:var(--c-accent-glow)}
.auth-code-btn:disabled{opacity:.5;cursor:not-allowed}
.auth-submit{width:100%;padding:var(--space-3);font-size:var(--fs-md);font-weight:var(--fw-semibold);font-family:var(--font-sans);background:var(--c-accent-gradient);color:#fff;border:none;border-radius:var(--r-lg);cursor:pointer;transition:all var(--dur-slow) var(--ease);margin-top:var(--space-2);box-shadow:0 1px 3px var(--c-accent-glow)}
.auth-submit:hover:not(:disabled){box-shadow:0 4px 16px var(--c-accent-glow);transform:translateY(-1px)}
.auth-submit:active:not(:disabled){transform:translateY(0) scale(.98)}
.auth-submit:disabled{opacity:.6;cursor:not-allowed}
.auth-footer{text-align:center;margin-top:var(--space-6);font-size:var(--fs-sm);color:var(--c-text-2)}
.auth-footer a{color:var(--c-accent);font-weight:var(--fw-semibold)}
.auth-footer a:hover{color:var(--c-accent-hover)}
.auth-divider{display:flex;align-items:center;gap:var(--space-3);margin:1.5rem 0;color:var(--c-border-hover);font-size:var(--fs-xs)}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--c-border)}

/* ========== Admin Layout ========== */
.admin-wrapper{display:flex;min-height:100vh}
.admin-sidebar{
    width:var(--sidebar-w);background:var(--c-surface);border-right:1px solid var(--c-border);
    display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;
    z-index:var(--z-dropdown);transition:transform var(--dur-slow) var(--ease);
}
.admin-brand{display:flex;align-items:center;gap:var(--space-2);padding:0 var(--space-5);height:var(--topbar-h);border-bottom:1px solid var(--c-border);flex-shrink:0}
.admin-logo{width:30px;height:30px;background:var(--c-accent-gradient);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:0 2px 8px var(--c-accent-glow)}
.admin-brand-text{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--c-text);letter-spacing:-.01em}
.admin-nav{flex:1;overflow-y:auto;padding:var(--space-2) var(--space-3)}
.nav-group{margin-bottom:var(--space-2)}
.nav-group-title{font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--c-text-3);padding:var(--space-3) var(--space-3) var(--space-1)}
.admin-nav-link{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text-2);border-radius:var(--r-md);transition:all var(--dur-fast) var(--ease);margin-bottom:1px;text-decoration:none;position:relative}
.admin-nav-link:hover{background:var(--c-surface-2);color:var(--c-text)}
.admin-nav-link.active{background:var(--c-accent-light);color:var(--c-accent);font-weight:var(--fw-semibold)}
.admin-nav-link.active::before{content:"";position:absolute;left:-.6rem;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--c-accent);border-radius:0 2px 2px 0}
.admin-nav-link svg{flex-shrink:0;opacity:.65}
.admin-nav-link.active svg{opacity:1}
.admin-nav-link.danger:hover{background:var(--c-danger-bg);color:var(--c-danger)}
.admin-sidebar-footer{padding:var(--space-2) var(--space-3);border-top:1px solid var(--c-border);flex-shrink:0}
.admin-sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:90;backdrop-filter:blur(2px)}
.admin-sidebar-overlay.show{display:block}
.admin-body{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}
.admin-header{height:var(--topbar-h);background:rgba(255,255,255,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);position:sticky;top:0;z-index:var(--z-sticky)}
[data-theme="dark"] .admin-header{background:rgba(26,26,28,.8)}
.admin-page-title{font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--c-text);letter-spacing:-.01em}
.admin-header-right{display:flex;align-items:center;gap:var(--space-4)}
.admin-user-info{display:flex;align-items:center;gap:var(--space-2)}
.admin-user-avatar{width:30px;height:30px;border-radius:50%;background:var(--c-accent-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.admin-user-name{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--c-text)}
.admin-content{padding:var(--space-8);flex:1;max-width:var(--content-max);width:100%;animation:adminFadeIn var(--dur-base) var(--ease);background:var(--c-bg)}
.admin-section{margin-bottom:var(--space-8)}
.admin-section h3{font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--c-text);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--c-border-light)}
/* Legacy admin compat */
.admin-topbar{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-6);background:var(--c-surface);border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:50}
.admin-topbar h2{font-size:1.1rem;font-weight:var(--fw-bold);color:var(--c-text)}
.admin-main{flex:1;margin-left:var(--sidebar-w);padding:var(--space-6);min-width:0}

/* ========== Mobile Tabbar (App-like bottom navigation) ========== */
.mobile-tabbar{
    display:none;
    position:fixed;bottom:0;left:0;right:0;z-index:var(--z-sticky);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--c-border);
    padding:0 env(safe-area-inset-bottom,0);
    box-shadow:0 -1px 12px rgba(0,0,0,.04);
}
[data-theme="dark"] .mobile-tabbar{background:rgba(26,26,28,.92)}
.tabbar-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:8px 0 6px;position:relative;
    color:var(--c-text-3);text-decoration:none;font-size:.65rem;font-weight:var(--fw-medium);
    transition:color var(--dur-base) var(--ease);
    -webkit-tap-highlight-color:transparent;
}
.tabbar-item svg{transition:transform var(--dur-base) var(--ease-spring)}
.tabbar-item.active{color:var(--c-accent)}
.tabbar-item.active svg{transform:scale(1.08)}
.tabbar-item.active span:not(.tabbar-badge){font-weight:var(--fw-semibold)}
.tabbar-badge{
    position:absolute;top:4px;right:50%;transform:translateX(14px);
    background:var(--c-danger);color:#fff;font-size:.58rem;
    min-width:16px;height:16px;line-height:16px;text-align:center;
    border-radius:8px;padding:0 4px;font-weight:var(--fw-bold);
    border:1.5px solid var(--c-surface);
}

/* ========== Mobile — Full App-like Experience ========== */
@media(max-width:768px){
    .mobile-tabbar{display:flex}

    /* 主内容区域：去掉左侧margin + 留出底部Tab栏空间 */
    .main-content{margin-left:0!important;padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))!important}

    /* 顶部导航栏 — 毛玻璃 + 紧凑 */
    .topbar{
        height:48px;padding:0 .75rem;
        background:rgba(255,255,255,.88);
        backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    }
    [data-theme="dark"] .topbar{background:rgba(26,26,28,.88)}
    .topbar-brand span{font-size:.95rem;letter-spacing:-.01em}
    .topbar-brand .logo{width:24px;height:24px;font-size:.75rem;border-radius:7px}
    .topbar-right .status{display:none}
    .topbar-avatar{width:28px;height:28px;font-size:.75rem}

    /* 侧边栏改为从右侧滑出（跟抽屉一样，左侧留给手势返回） */
    .sidebar{
        width:78%;max-width:300px;
        top:0;bottom:0;z-index:var(--z-overlay);
        border-right:none;border-left:1px solid var(--c-border);
        transform:translateX(-100%);
        box-shadow:var(--shadow-xl);
    }
    .sidebar.open{transform:translateX(0)}

    /* 页面标题 — 大气紧凑 */
    .panel-page-header{margin-bottom:1rem}
    .panel-page-header h1{font-size:1.35rem;letter-spacing:-.03em}
    .panel-page-header p{font-size:.78rem}

    /* 工作台移动端精简：隐藏非核心区块 */
    .panel-todo-bar{flex-direction:column;gap:.5rem}
    .mobile-hide{display:none!important}

    /* 内容区padding */
    .main-content{margin-left:0!important;padding:.875rem .875rem 70px}

    /* 卡片 — 圆润大气 */
    .panel-card{
        margin-bottom:.75rem;border-radius:14px;
        box-shadow:var(--shadow-xs);
    }
    .panel-card-header{padding:.875rem 1rem;min-height:auto}
    .panel-card-header h3{font-size:.85rem}
    .panel-card-body{padding:1rem}

    /* 统计卡片 — 紧凑但呼吸感 */
    .panel-stat{padding:.875rem;border-radius:12px;gap:.25rem}
    .panel-stat .panel-stat-icon{width:30px;height:30px;border-radius:8px;margin-bottom:.35rem}
    .panel-stat .panel-stat-value{font-size:1.35rem;letter-spacing:-.03em}
    .panel-stat .panel-stat-label{font-size:.7rem;margin-top:.1rem}
    .panel-stat .panel-stat-change{font-size:.62rem}
    .panel-stat-grid{gap:.6rem}

    /* Hero区域 */
    .panel-hero-stat{
        flex-direction:column;text-align:center;
        gap:1rem;padding:1.25rem 1rem;border-radius:14px;
    }
    .panel-hero-stat .panel-ring-text{font-size:1.5rem}
    .panel-hero-stat .panel-hero-info h2{font-size:1rem}
    .panel-hero-stat .panel-hero-info p{font-size:.78rem}

    /* 待办条 */
    .panel-todo-bar{flex-direction:column;gap:.5rem}
    .panel-todo-item{
        padding:.65rem .85rem;border-radius:10px;
        min-width:0;
    }
    .panel-todo-icon{width:28px;height:28px;border-radius:8px}
    .panel-todo-text{font-size:.78rem}
    .panel-todo-action{font-size:.75rem}

    /* 表格优化 */
    .panel-table-wrap{
        overflow-x:auto;-webkit-overflow-scrolling:touch;
        border-radius:10px;
    }
    .panel-table{font-size:.76rem;min-width:400px}
    .panel-table th,.panel-table td{padding:.5rem .65rem;white-space:nowrap}

    /* 表单触摸优化 — iOS防缩放 */
    .panel-input,.panel-select,.panel-textarea{
        font-size:16px;padding:.6rem .8rem;border-radius:10px;
    }
    .panel-form-group label{font-size:.8rem;margin-bottom:.3rem}
    .panel-btn{padding:.55rem 1rem;font-size:.84rem;min-height:40px;border-radius:10px}
    .panel-btn-sm{padding:.4rem .7rem;min-height:auto;font-size:.76rem}

    /* Modal底部弹出 — 全屏感 */
    .modal-overlay{
        align-items:flex-end;padding:0;
        background:rgba(0,0,0,.45);
    }
    .modal{
        max-width:100%;max-height:92vh;
        border-radius:16px 16px 0 0;
        animation:slideUp .35s var(--ease) both;
    }
    .modal-header{padding:.9rem 1.2rem;position:sticky;top:0;background:var(--c-surface);z-index:1}
    .modal-header h2{font-size:1.02rem}
    .modal-body{padding:1.2rem}
    .modal-footer{
        padding:.8rem 1.2rem;position:sticky;bottom:0;
        background:var(--c-surface-2);
    }
    .modal-footer .panel-btn{flex:1}
    .modal-footer .panel-btn-ghost{flex:0 0 auto}

    /* Toast */
    .toast-container{
        top:auto;bottom:calc(72px + env(safe-area-inset-bottom,0px));
        left:.75rem;right:.75rem;
    }
    .toast{max-width:none;border-radius:12px;font-size:.82rem;padding:.7rem .9rem}

    /* 消息中心筛选Tab */
    .im-filter-tabs{
        padding:.3rem .5rem;gap:.2rem;
        overflow-x:auto;-webkit-overflow-scrolling:touch;
    }
    .im-filter-tab{padding:.28rem .55rem;font-size:.73rem;flex-shrink:0}

    /* 聊天页面 */
    .im-wrap{height:calc(100vh - 48px - 56px)!important;border-radius:0;border:none}
    .im-sidebar{height:42%;border-bottom:1px solid var(--c-border)}
    .im-chat-header{padding:.6rem .8rem;min-height:48px}
    .im-conv-avatar{width:32px;height:32px;font-size:.78rem}
    .im-chat-header-name{font-size:.88rem}
    .im-chat-body{padding:.6rem .5rem}
    .im-msg-bubble{font-size:.82rem;padding:.5rem .7rem;max-width:78%}
    .im-msg-avatar{width:28px;height:28px;font-size:.65rem}
    .im-chat-footer{padding:.5rem .6rem}
    .im-quick-row{gap:.3rem;max-height:50px;margin-bottom:.35rem}
    .im-quick-row button{font-size:.7rem;padding:.2rem .5rem}
    .im-input-row textarea{font-size:16px;padding:.5rem .7rem;min-height:36px}
    .im-send-btn{padding:.5rem 1rem;font-size:.82rem}

    /* 搜索框 — 圆角大气 */
    .im-search input{padding:.45rem .75rem .45rem 2rem;border-radius:99px;font-size:.8rem}

    /* 对话列表项 — 紧凑 */
    .im-conv-item{padding:.6rem .8rem;gap:.55rem}
    .im-conv-avatar{width:38px;height:38px;font-size:.92rem}
    .im-conv-name{font-size:.82rem}
    .im-conv-preview{font-size:.73rem}
    .im-conv-time{font-size:.66rem}

    /* 反馈按钮 — 不挡Tab栏 */
    .feedback-fab{
        bottom:calc(64px + env(safe-area-inset-bottom,0px))!important;
        right:12px;
        width:44px;height:44px;border-radius:50%;padding:0;
    }
    .feedback-fab span{display:none}

    /* 页面切换动画 */
    .main-content.pjax-enter{animation:pjaxSlideIn .3s var(--ease) both}

    /* 渐变Banner */
    .panel-gradient-banner{padding:1rem 1.1rem;border-radius:12px;gap:.6rem}
    .panel-gradient-banner h3{font-size:.9rem}
    .panel-gradient-banner p{font-size:.76rem}

    /* Grid布局 */
    .grid-2,.grid-3,.grid-4,.config-grid,.panel-grid-2,.panel-grid-3{grid-template-columns:1fr}
    .stat-grid,.stats-grid,.panel-stat-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
    .shop-grid{grid-template-columns:1fr}

    /* 表单单列 */
    .form-row{flex-direction:column}

    /* AI训练页Hero */
    .training-hero-content{flex-direction:column;text-align:center;gap:.75rem;padding:1.25rem 1rem}
    .training-hero-icon{width:44px;height:44px;font-size:1.4rem;border-radius:12px}
    .training-hero-content h1{font-size:1.2rem}
    .training-hero-content p{font-size:.78rem}
    .training-hero-stats{margin-left:0;justify-content:center;gap:1.5rem}
    .training-hero-stat-item .num{font-size:.95rem}
    .training-hero-stat-item .lbl{font-size:.62rem}

    /* Admin移动端 */
    .admin-sidebar{transform:translateX(-100%);width:260px}
    .admin-sidebar.open{transform:translateX(0)}
    .admin-body,.admin-main{margin-left:0}
    .admin-content{padding:var(--space-4)}
    .admin-user-name{display:none}

    /* Landing页 */
    .hero-section{padding:3rem 1rem 2rem}
    .hero-stats{gap:1.5rem}
    .steps-grid{grid-template-columns:1fr}
    .step-connector{display:none}
    .section{padding:3rem 1rem}
    .cta-card{padding:2rem 1.25rem}
    .card-grid{grid-template-columns:1fr}
    .landing-nav .nav-inner{padding:0 1rem}
}
@media(max-width:480px){
    .stat-grid,.stats-grid,.panel-stat-grid{grid-template-columns:1fr 1fr;gap:.5rem}
    .panel-stat{padding:.7rem;border-radius:10px}
    .panel-stat .panel-stat-value{font-size:1.15rem}
    .panel-stat .panel-stat-icon{width:26px;height:26px;font-size:.8rem}
    .main-content{margin-left:0!important;padding:.75rem .75rem 70px}
    .panel-card-body{padding:.875rem}
    .panel-page-header{margin-bottom:.75rem}
    .panel-page-header h1{font-size:1.2rem}
}

/* ========== Print ========== */
@media print{
    .sidebar,.topbar,.admin-sidebar,.admin-header,.admin-topbar,.toast-container,.menu-toggle{display:none!important}
    .main-content,.admin-content,.admin-main{margin-left:0!important;padding:0!important}
}

/* ========== Training Hero ========== */
.training-hero{
    position:relative;border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--space-5);
    animation:slideUp var(--dur-base) var(--ease) both;
}
.training-hero-bg{
    position:absolute;inset:0;
    background:linear-gradient(135deg,#5b5bd6 0%,#7c3aed 50%,#9333ea 100%);
}
.training-hero-bg::before{
    content:"";position:absolute;top:-40%;right:-10%;width:300px;height:300px;
    background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);
    pointer-events:none;
}
.training-hero-bg::after{
    content:"";position:absolute;bottom:-50%;left:-5%;width:250px;height:250px;
    background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%);
    pointer-events:none;
}
.training-hero-content{
    position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-4);
    padding:var(--space-6) var(--space-7);color:#fff;
}
.training-hero-icon{
    width:56px;height:56px;border-radius:var(--r-lg);background:rgba(255,255,255,.18);
    backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;
    font-size:1.75rem;flex-shrink:0;box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.training-hero-content h1{
    font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:-.02em;margin-bottom:2px;
}
.training-hero-content p{
    font-size:var(--fs-sm);opacity:.88;line-height:1.5;
}
.training-hero-stats{
    margin-left:auto;display:flex;gap:var(--space-6);flex-shrink:0;
}
.training-hero-stat-item{
    display:flex;flex-direction:column;align-items:center;text-align:center;
}
.training-hero-stat-item .num{
    font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:1.2;
}
.training-hero-stat-item .lbl{
    font-size:.6875rem;opacity:.7;text-transform:uppercase;letter-spacing:.05em;margin-top:2px;
}
@media(max-width:768px){
    .training-hero-content{flex-direction:column;text-align:center;gap:var(--space-3)}
    .training-hero-stats{margin-left:0;justify-content:center}
}

/* ================================================================
   v4.0 Polish — 丝滑交互增强
   ================================================================ */

/* ---- 1. Pjax 页面切换动画 ---- */
.main-content{transition:opacity .15s var(--ease)}
.main-content.pjax-enter{animation:pjaxSlideIn .35s var(--ease) both}
@keyframes pjaxSlideIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}

/* ---- 2. Modal 弹窗开闭动画 ---- */
.modal-overlay{animation:none;opacity:0;visibility:hidden;transition:opacity var(--dur-slow) var(--ease),visibility var(--dur-slow) var(--ease)}
.modal-overlay.modal-show{opacity:1;visibility:visible}
.modal{animation:none;transform:scale(.94) translateY(10px);opacity:0;transition:transform var(--dur-slow) var(--ease-spring),opacity var(--dur-base) var(--ease)}
.modal-overlay.modal-show .modal{transform:scale(1) translateY(0);opacity:1}

/* ---- 3. 按钮增强 ---- */
.btn,.panel-btn{transition:all var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease-spring)}
.btn:active,.panel-btn:active{transform:scale(.95)}
.btn-primary:hover,.panel-btn-primary:hover{box-shadow:0 4px 12px var(--c-accent-glow),0 2px 4px rgba(0,0,0,.08)}

/* 按钮 loading spinner */
.btn-loading,.panel-btn-loading{position:relative;color:transparent!important;pointer-events:none}
.btn-loading::after,.panel-btn-loading::after{
    content:"";position:absolute;width:14px;height:14px;
    border:2px solid transparent;border-top-color:currentColor;border-right-color:currentColor;
    border-radius:50%;animation:spin .5s linear infinite;
    left:50%;top:50%;margin:-7px 0 0 -7px;opacity:.6;
}

/* ---- 4. Toast 增强 ---- */
.toast{animation:toastIn .35s var(--ease-spring) both}
.toast.removing{animation:toastOut .3s var(--ease) forwards}

/* ---- 5. Tab 滑动指示器 ---- */
.tabs,.panel-tabs{position:relative}
.tabs::after,.panel-tabs::after{content:none}
.tab-indicator{
    position:absolute;bottom:-1px;height:2px;background:var(--c-accent);
    border-radius:1px;transition:all var(--dur-slow) var(--ease-spring);
    pointer-events:none;z-index:1;
}

/* ---- 6. 列表行交错入场 ---- */
.stagger-list>*,.panel-table tbody tr{animation:staggerRow .35s var(--ease) both}
.stagger-list>*:nth-child(1),.panel-table tbody tr:nth-child(1){animation-delay:20ms}
.stagger-list>*:nth-child(2),.panel-table tbody tr:nth-child(2){animation-delay:40ms}
.stagger-list>*:nth-child(3),.panel-table tbody tr:nth-child(3){animation-delay:60ms}
.stagger-list>*:nth-child(4),.panel-table tbody tr:nth-child(4){animation-delay:80ms}
.stagger-list>*:nth-child(5),.panel-table tbody tr:nth-child(5){animation-delay:100ms}
.stagger-list>*:nth-child(6),.panel-table tbody tr:nth-child(6){animation-delay:120ms}
.stagger-list>*:nth-child(7),.panel-table tbody tr:nth-child(7){animation-delay:140ms}
.stagger-list>*:nth-child(8),.panel-table tbody tr:nth-child(8){animation-delay:160ms}
.stagger-list>*:nth-child(9),.panel-table tbody tr:nth-child(9){animation-delay:180ms}
.stagger-list>*:nth-child(10),.panel-table tbody tr:nth-child(10){animation-delay:200ms}
.stagger-list>*:nth-child(n+11),.panel-table tbody tr:nth-child(n+11){animation-delay:220ms}
@keyframes staggerRow{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Pjax 切换时重置动画 */
.pjax-enter .stagger-list>*,.pjax-enter .panel-table tbody tr{animation:none}

/* ---- 7. 卡片 hover 增强 ---- */
.card-clickable,.panel-card{transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}

/* ---- 8. 输入框聚焦动画 ---- */
.panel-input,.form-input,textarea,select{transition:border-color var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease),background var(--dur-base) var(--ease)}

/* ---- 9. 侧边栏链接过渡 ---- */
.sidebar-link{transition:background var(--dur-base) var(--ease),color var(--dur-base) var(--ease),padding-left var(--dur-base) var(--ease-spring)}
.sidebar-link:hover{padding-left:calc(var(--space-4) + 2px)}

/* ---- 10. 数字滚动动画 ---- */
.num-anim{animation:numberUp .4s var(--ease-spring) both}

/* ---- 11. 遮罩层淡入 ---- */
.sidebar-overlay{transition:opacity var(--dur-base) var(--ease),visibility var(--dur-base) var(--ease);opacity:0;visibility:hidden}
.sidebar-overlay.show{opacity:1;visibility:visible}