/* 祥升电竞 v2.0 - Stripe风格 | default/violet/dark */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root,[data-theme="default"]{
--a:#635bff;--ah:#4f46e5;--al:#f0efff;--ag:rgba(99,91,255,.15);
--g50:#fafbfc;--g100:#f5f6f8;--g200:#eef0f3;--g300:#dde0e5;--g400:#bcc1ca;--g500:#8f95a3;--g600:#6b7280;--g700:#4b5563;--g800:#2d3748;--g900:#1a202c;
--w:#fff;--b:#0a0c10;
--suc:#0ca473;--sul:#e6f7f1;--war:#f59e0b;--wal:#fffbeb;--dan:#df1b41;--dal:#fef0f3;--inf:#3b82f6;--inl:#eff6ff;
--sp:#fff;--ss:#fafbfc;--st:#f5f6f8;--se:#fff;--so:rgba(10,12,16,.4);
--bd:#e8eaef;--bdl:#f0f1f4;--bdf:#635bff;
--sxs:0 1px 2px rgba(10,12,16,.04);--ssm:0 1px 3px rgba(10,12,16,.06),0 1px 2px rgba(10,12,16,.04);
--smd:0 4px 12px rgba(10,12,16,.06);--slg:0 12px 32px rgba(10,12,16,.08);--sxl:0 24px 48px rgba(10,12,16,.1);
--rs:6px;--r:8px;--rl:12px;--rx:16px;--r2:20px;
--e:cubic-bezier(.16,1,.3,1);--spg:cubic-bezier(.34,1.56,.64,1);
--df:150ms;--d:250ms;--ds:400ms;
--sw:240px;--th:56px;
--f:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
--tp:#1a202c;--ts:#4b5563;--tt:#8f95a3;--ti:#fff;--tl:#635bff;
}
[data-theme="violet"]{--a:#8b5cf6;--ah:#7c3aed;--al:#f5f3ff;--ag:rgba(139,92,246,.15);--bdf:#8b5cf6;--tl:#8b5cf6;--inf:#8b5cf6;--inl:#f5f3ff}
[data-theme="dark"]{
--a:#818cf8;--ah:#6366f1;--al:rgba(129,140,248,.12);--ag:rgba(129,140,248,.2);
--g50:#0f1117;--g100:#161820;--g200:#1e2029;--g300:#2a2d37;--g400:#4a4f5a;--g500:#6b7280;--g600:#9ca3af;--g700:#d1d5db;--g800:#e5e7eb;--g900:#f3f4f6;
--w:#161820;--b:#f3f4f6;
--sp:#161820;--ss:#0f1117;--st:#1e2029;--se:#1e2029;--so:rgba(0,0,0,.6);
--bd:#2a2d37;--bdl:#1e2029;--bdf:#818cf8;
--sxs:0 1px 2px rgba(0,0,0,.2);--ssm:0 1px 3px rgba(0,0,0,.25);--smd:0 4px 12px rgba(0,0,0,.3);--slg:0 12px 32px rgba(0,0,0,.35);--sxl:0 24px 48px rgba(0,0,0,.4);
--tp:#f3f4f6;--ts:#d1d5db;--tt:#9ca3af;--ti:#1a202c;--tl:#818cf8;
--sul:rgba(12,164,115,.15);--wal:rgba(245,158,11,.15);--dal:rgba(223,27,65,.15);--inl:rgba(129,140,248,.15);
}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--f);color:var(--tp);background:var(--ss);line-height:1.6;min-height:100vh}
a{color:var(--tl);text-decoration:none;transition:color var(--df) var(--e)}a:hover{color:var(--ah)}
::selection{background:var(--al);color:var(--a)}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:var(--g300);border-radius:3px}

/* ========== Utilities ========== */
.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}
.font-m{font-weight:500}.font-sb{font-weight:600}.font-b{font-weight:700}
.text-tp{color:var(--tp)}.text-ts{color:var(--ts)}.text-tt{color:var(--tt)}.text-a{color:var(--a)}
.text-suc{color:var(--suc)}.text-war{color:var(--war)}.text-dan{color:var(--dan)}
.bg-sp{background:var(--sp)}.bg-ss{background:var(--ss)}.bg-st{background:var(--st)}.bg-al{background:var(--al)}
.rounded-s{border-radius:var(--rs)}.rounded{border-radius:var(--r)}.rounded-l{border-radius:var(--rl)}
.shadow-xs{box-shadow:var(--sxs)}.shadow-sm{box-shadow:var(--ssm)}.shadow-md{box-shadow:var(--smd)}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}
.p-4{padding:1rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none !important}
.skeleton{background:linear-gradient(90deg,var(--g200) 25%,var(--g100) 50%,var(--g200) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--rs)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@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 pulse-ring{0%{box-shadow:0 0 0 0 var(--ag)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@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 progressPulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes contentIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes numberUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
.animate-fadeIn{animation:fadeIn var(--d) var(--e) both}
.animate-slideUp{animation:slideUp var(--d) var(--spg) both}
.animate-scaleIn{animation:scaleIn var(--df) var(--spg) both}
.animate-contentIn{animation:contentIn .5s var(--e) both}
.stagger-1{animation-delay:50ms}.stagger-2{animation-delay:100ms}.stagger-3{animation-delay:150ms}.stagger-4{animation-delay:200ms}

/* ========== Buttons ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;font-family:var(--f);line-height:1.5;border:none;border-radius:var(--rs);cursor:pointer;transition:all var(--df) var(--e);white-space:nowrap;user-select:none;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--a);color:var(--ti);box-shadow:var(--sxs)}.btn-primary:hover{background:var(--ah);box-shadow:var(--ssm);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0) scale(.97)}
.btn-outline{background:transparent;color:var(--a);border:1.5px solid var(--a)}.btn-outline:hover{background:var(--al)}
.btn-ghost{background:transparent;color:var(--ts)}.btn-ghost:hover{background:var(--g100);color:var(--tp)}
.btn-danger{background:var(--dan);color:#fff}.btn-danger:hover{background:#c91833}
.btn-sm{padding:.35rem .75rem;font-size:.8rem}.btn-lg{padding:.65rem 1.5rem;font-size:1rem}
.btn-icon{padding:.4rem;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;color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== Forms ========== */
.form-group{margin-bottom:1rem}
.form-label{display:block;font-size:.8rem;font-weight:500;color:var(--ts);margin-bottom:.35rem}
.form-input,.form-select,.form-textarea{width:100%;padding:.55rem .75rem;font-size:.875rem;font-family:var(--f);color:var(--tp);background:var(--sp);border:1.5px solid var(--bd);border-radius:var(--rs);transition:all var(--df) var(--e);outline:none}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--bdf);box-shadow:0 0 0 3px var(--ag)}
.form-input::placeholder{color:var(--g400)}
.form-input.error{border-color:var(--dan);box-shadow:0 0 0 3px var(--dal)}
.form-hint{font-size:.75rem;color:var(--tt);margin-top:.25rem}
.form-error{font-size:.75rem;color:var(--dan);margin-top:.25rem}
.form-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='%238f95a3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.2rem}
.form-textarea{resize:vertical;min-height:80px}
.form-toggle{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
.form-toggle input{display:none}
.form-toggle .track{width:36px;height:20px;background:var(--g300);border-radius:10px;position:relative;transition:background var(--df) var(--e)}
.form-toggle .track::after{content:"";position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:2px;left:2px;transition:transform var(--df) var(--spg);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.form-toggle input:checked+.track{background:var(--a)}
.form-toggle input:checked+.track::after{transform:translateX(16px)}
.form-inline{display:flex;gap:.5rem;align-items:end}

/* ========== Cards ========== */
.card{background:var(--sp);border:1px solid var(--bd);border-radius:var(--rl);box-shadow:var(--sxs);transition:all var(--d) var(--e);overflow:hidden}
.card:hover{box-shadow:var(--smd)}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--bdl)}
.card-header h3{font-size:.95rem;font-weight:600;color:var(--tp)}
.card-body{padding:1.25rem}
.card-footer{padding:.75rem 1.25rem;border-top:1px solid var(--bdl);background:var(--st)}
.card-accent{border-top:3px solid var(--a)}
.card-flat{background:var(--st);border:none;box-shadow:none}.card-flat:hover{box-shadow:var(--sxs)}
.card-clickable{cursor:pointer}.card-clickable:hover{border-color:var(--a);transform:translateY(-2px);box-shadow:var(--smd)}

/* ========== Stats ========== */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.stat-card{background:var(--sp);border:1px solid var(--bd);border-radius:var(--rl);padding:1.1rem 1.25rem;transition:all var(--d) var(--e);position:relative;overflow:hidden}
.stat-card:hover{border-color:var(--a);box-shadow:var(--smd);transform:translateY(-2px)}
.stat-card .stat-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--rs);font-size:1.1rem;margin-bottom:.6rem}
.stat-card .stat-value{font-size:1.65rem;font-weight:700;color:var(--tp);line-height:1.2}
.stat-card .stat-label{font-size:.78rem;color:var(--tt);margin-top:.15rem}
.stat-card .stat-change{font-size:.75rem;margin-top:.3rem;display:inline-flex;align-items:center;gap:.2rem}
.stat-card .stat-change.up{color:var(--suc)}.stat-card .stat-change.down{color:var(--dan)}

/* ========== Tables ========== */
.table-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--bd)}
table{width:100%;border-collapse:collapse;font-size:.875rem}
thead{background:var(--st)}
th{text-align:left;padding:.7rem 1rem;font-weight:600;font-size:.78rem;color:var(--ts);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;border-bottom:1px solid var(--bd)}
td{padding:.7rem 1rem;color:var(--tp);border-bottom:1px solid var(--bdl)}
tbody tr{transition:background var(--df) var(--e)}
tbody tr:hover{background:var(--g50)}
tbody tr:last-child td{border-bottom:none}
.table-empty{padding:3rem;text-align:center;color:var(--tt)}
.table-empty .empty-icon{font-size:2rem;margin-bottom:.5rem;opacity:.4}

/* ========== Badges ========== */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .55rem;font-size:.72rem;font-weight:500;border-radius:99px;line-height:1.5}
.badge-primary{background:var(--al);color:var(--a)}
.badge-success{background:var(--sul);color:var(--suc)}
.badge-warning{background:var(--wal);color:var(--war)}
.badge-danger{background:var(--dal);color:var(--dan)}
.badge-info{background:var(--inl);color:var(--inf)}
.badge-neutral{background:var(--g200);color:var(--ts)}
.badge-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.badge-dot.online{background:var(--suc)}.badge-dot.offline{background:var(--g400)}.badge-dot.warning{background:var(--war)}

/* ========== Status ========== */
.status{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:500}
.status::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0}
.status-online::before{background:var(--suc);animation:statusPulse 2s infinite}
.status-offline::before{background:var(--g400)}
.status-warning::before{background:var(--war)}
.status-error::before{background:var(--dan)}
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 0 var(--suc)}50%{box-shadow:0 0 0 6px transparent}}

/* ========== Progress ========== */
.progress{height:6px;background:var(--g200);border-radius:3px;overflow:hidden}
.progress-bar{height:100%;border-radius:3px;background:var(--a);transition:width .6s var(--e);position:relative}
.progress-bar.suc{background:var(--suc)}.progress-bar.war{background:var(--war)}.progress-bar.dan{background:var(--dan)}
.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:.75rem;color:var(--ts);margin-bottom:.3rem}
.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(--g200)}
.progress-circle .pc-fill{fill:none;stroke:var(--a);stroke-linecap:round;transition:stroke-dashoffset .8s var(--e)}
.progress-circle .pc-text{position:absolute;font-weight:700;color:var(--tp);font-size:1.1rem}

/* ========== Alerts ========== */
.alert{display:flex;align-items:flex-start;gap:.65rem;padding:.85rem 1rem;border-radius:var(--r);font-size:.85rem;line-height:1.5;animation:slideDown var(--d) var(--spg)}
.alert-info{background:var(--inl);color:#1e40af;border:1px solid #bfdbfe}
.alert-success{background:var(--sul);color:#065f46;border:1px solid #a7f3d0}
.alert-warning{background:var(--wal);color:#92400e;border:1px solid #fde68a}
.alert-danger{background:var(--dal);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:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;background:var(--sp);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--slg);font-size:.85rem;color:var(--tp);pointer-events:auto;animation:toastIn var(--d) var(--spg);max-width:380px}
.toast.removing{animation:toastOut var(--df) var(--e) 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}

/* ========== Modals ========== */
.modal-overlay{position:fixed;inset:0;background:rgba(10,12,16,.5);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;animation:modalOverlayIn var(--df) var(--e)}
.modal{background:var(--sp);border-radius:var(--rx);box-shadow:var(--sxl);width:100%;max-width:500px;max-height:85vh;overflow-y:auto;animation:modalIn var(--d) var(--spg)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.5rem;border-bottom:1px solid var(--bdl)}
.modal-header h2{font-size:1.05rem;font-weight:600;color:var(--tp)}
.modal-body{padding:1.5rem}
.modal-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 1.5rem;border-top:1px solid var(--bdl);background:var(--st)}
.modal-close{background:none;border:none;font-size:1.3rem;color:var(--tt);cursor:pointer;padding:.2rem;border-radius:var(--rs);transition:all var(--df) var(--e)}.modal-close:hover{color:var(--tp);background:var(--g100)}

/* ========== Tabs ========== */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--bd);margin-bottom:1.25rem}
.tab{padding:.55rem 1.1rem;font-size:.85rem;font-weight:500;color:var(--ts);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--df) var(--e);background:none;border-top:none;border-left:none;border-right:none;font-family:var(--f)}
.tab:hover{color:var(--tp)}
.tab.active{color:var(--a);border-bottom-color:var(--a)}
.tab-content{display:none;animation:contentIn .35s var(--e)}.tab-content.active{display:block}

/* ========== Topbar ========== */
.topbar{position:sticky;top:0;z-index:100;height:var(--th);background:var(--sp);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(255,255,255,.85)}
[data-theme="dark"] .topbar{background:rgba(22,24,32,.85)}
.topbar-left{display:flex;align-items:center;gap:.75rem}
.topbar-brand{font-size:1.05rem;font-weight:700;color:var(--tp);display:flex;align-items:center;gap:.5rem}
.topbar-brand .logo{width:28px;height:28px;background:var(--a);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem}
.topbar-right{display:flex;align-items:center;gap:.6rem}
.topbar-avatar{width:32px;height:32px;border-radius:50%;background:var(--a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;cursor:pointer;transition:transform var(--df) var(--spg)}.topbar-avatar:hover{transform:scale(1.1)}
.topbar-dropdown{position:relative}.topbar-dropdown-menu{position:absolute;top:100%;right:0;margin-top:.35rem;background:var(--sp);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--slg);min-width:180px;padding:.35rem;animation:scaleIn var(--df) var(--spg);display:none;z-index:200}
.topbar-dropdown.active .topbar-dropdown-menu{display:block}
.topbar-dropdown-menu a,.topbar-dropdown-menu button{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .75rem;font-size:.82rem;color:var(--ts);border:none;background:none;cursor:pointer;border-radius:var(--rs);text-decoration:none;font-family:var(--f);text-align:left}.topbar-dropdown-menu a:hover,.topbar-dropdown-menu button:hover{background:var(--g100);color:var(--tp)}
.menu-toggle{display:none;background:none;border:none;font-size:1.3rem;color:var(--ts);cursor:pointer;padding:.3rem}

/* ========== Sidebar ========== */
.sidebar{position:fixed;top:var(--th);left:0;bottom:0;width:var(--sw);background:var(--sp);border-right:1px solid var(--bd);overflow-y:auto;z-index:90;transition:transform var(--d) var(--e);padding:.75rem}
.sidebar-nav{display:flex;flex-direction:column;gap:2px}
.sidebar-section{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--g400);padding:.65rem .7rem .3rem;margin-top:.3rem}
.sidebar-link{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;font-size:.85rem;font-weight:500;color:var(--ts);border-radius:var(--rs);transition:all var(--df) var(--e);text-decoration:none;position:relative}
.sidebar-link:hover{background:var(--g50);color:var(--tp)}
.sidebar-link.active{background:var(--al);color:var(--a)}
.sidebar-link .link-icon{width:20px;text-align:center;font-size:.95rem;flex-shrink:0}
.sidebar-link .link-badge{margin-left:auto;background:var(--dan);color:#fff;font-size:.65rem;padding:1px 7px;border-radius:99px;font-weight:600}
.sidebar-divider{height:1px;background:var(--bdl);margin:.4rem .7rem}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(10,12,16,.3);z-index:85}
.sidebar-overlay.show{display:block}

/* ========== Layout ========== */
.app-layout{display:flex;min-height:calc(100vh - var(--th))}
.main-content{flex:1;margin-left:var(--sw);padding:1.5rem;min-width:0}
.page-header{margin-bottom:1.5rem}.page-header h1{font-size:1.5rem;font-weight:700;color:var(--tp)}.page-header p{font-size:.85rem;color:var(--tt);margin-top:.2rem}
.content-section{margin-bottom:2rem}
.section-title{font-size:.95rem;font-weight:600;color:var(--tp);margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}

/* ========== Hero Stat (Dashboard takeover ring) ========== */
.hero-stat{display:flex;align-items:center;gap:2rem;padding:1.5rem;background:var(--sp);border:1px solid var(--bd);border-radius:var(--rx);box-shadow:var(--sxs)}
.hero-stat .ring-wrap{position:relative;flex-shrink:0}
.hero-stat .ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-stat .ring-label .pct{font-size:1.5rem;font-weight:700;color:var(--tp)}
.hero-stat .ring-label .sub{font-size:.7rem;color:var(--tt)}
.hero-stat .hero-info h2{font-size:1.2rem;font-weight:700;color:var(--tp)}
.hero-stat .hero-info p{font-size:.82rem;color:var(--ts);margin-top:.3rem}
.hero-stat .hero-actions{margin-top:.75rem;display:flex;gap:.5rem}

/* ========== AI Level ========== */
.ai-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.ai-level-card{background:var(--sp);border:2px solid var(--bd);border-radius:var(--rl);padding:1.25rem;text-align:center;transition:all var(--d) var(--e);position:relative;overflow:hidden}
.ai-level-card.current{border-color:var(--a);box-shadow:0 0 0 4px var(--ag)}
.ai-level-card.current::before{content:"当前";position:absolute;top:8px;right:8px;font-size:.65rem;font-weight:600;color:#fff;background:var(--a);padding:2px 8px;border-radius:99px}
.ai-level-card.locked{opacity:.6;pointer-events:none}
.ai-level-card .level-icon{font-size:2rem;margin-bottom:.5rem}
.ai-level-card .level-name{font-weight:600;color:var(--tp);font-size:.9rem}
.ai-level-card .level-desc{font-size:.75rem;color:var(--tt);margin:.3rem 0}
.ai-level-card .level-bar{height:4px;background:var(--g200);border-radius:2px;margin-top:.5rem;overflow:hidden}
.ai-level-card .level-bar-fill{height:100%;background:var(--a);border-radius:2px}

/* ========== Chat / Messages ========== */
.chat-list{display:flex;flex-direction:column;gap:1px;background:var(--bd);border-radius:var(--r);overflow:hidden}
.chat-item{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;background:var(--sp);cursor:pointer;transition:background var(--df) var(--e);text-decoration:none;color:inherit}
.chat-item:hover{background:var(--g50)}
.chat-item.active{background:var(--al)}
.chat-item .chat-avatar{width:40px;height:40px;border-radius:50%;background:var(--g200);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;overflow:hidden}
.chat-item .chat-avatar img{width:100%;height:100%;object-fit:cover}
.chat-item .chat-info{flex:1;min-width:0}
.chat-item .chat-name{font-size:.85rem;font-weight:600;color:var(--tp)}
.chat-item .chat-preview{font-size:.78rem;color:var(--tt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item .chat-meta{text-align:right;flex-shrink:0}
.chat-item .chat-time{font-size:.7rem;color:var(--tt)}
.chat-item .chat-unread{display:inline-block;background:var(--a);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(--bd);border-radius:var(--r);background:var(--sp);overflow:hidden}
.message-header{padding:.85rem 1rem;border-bottom:1px solid var(--bdl);display:flex;align-items:center;gap:.75rem}
.message-header .buyer-name{font-weight:600;font-size:.9rem}
.message-header .product-tag{font-size:.75rem;color:var(--a);background:var(--al);padding:1px 8px;border-radius:99px}
.message-body{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}
.message-bubble{max-width:75%;padding:.6rem .85rem;border-radius:var(--r);font-size:.85rem;line-height:1.55;animation:fadeIn var(--df) var(--e)}
.message-bubble.buyer{background:var(--g100);color:var(--tp);align-self:flex-start;border-bottom-left-radius:2px}
.message-bubble.ai{background:var(--al);color:var(--tp);align-self:flex-end;border-bottom-right-radius:2px}
.message-bubble.human{background:var(--a);color:#fff;align-self:flex-end;border-bottom-right-radius:2px}
.message-bubble .msg-meta{font-size:.7rem;opacity:.6;margin-top:.2rem;display:flex;align-items:center;gap:.4rem}
.message-input-area{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--bdl);background:var(--st)}
.message-input-area input{flex:1;padding:.5rem .75rem;border:1.5px solid var(--bd);border-radius:var(--r);font-size:.85rem;font-family:var(--f);outline:none;transition:border var(--df) var(--e)}.message-input-area input:focus{border-color:var(--a)}

/* ========== Upload ========== */
.upload-zone{border:2px dashed var(--bd);border-radius:var(--rl);padding:2rem;text-align:center;cursor:pointer;transition:all var(--d) var(--e);background:var(--st)}
.upload-zone:hover{border-color:var(--a);background:var(--al)}
.upload-zone .upload-icon{font-size:2.5rem;color:var(--g400);margin-bottom:.5rem}
.upload-zone p{font-size:.85rem;color:var(--ts)}.upload-zone span{color:var(--a);font-weight:500}
.upload-preview{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.upload-preview .preview-item{width:80px;height:80px;border-radius:var(--rs);overflow:hidden;position:relative;border:1px solid var(--bd)}
.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:.75rem;padding:.75rem;border:1px solid var(--bd);border-radius:var(--r);margin-bottom:.5rem;background:var(--sp);transition:all var(--df) var(--e)}
.training-item:hover{border-color:var(--a);box-shadow:var(--sxs)}
.training-item .q-text{flex:1;font-size:.85rem;color:var(--tp);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.training-item .q-count{font-size:.75rem;color:var(--tt);white-space:nowrap}
.training-item .q-actions{display:flex;gap:.3rem}

/* ========== Auth ========== */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--st) 0%,var(--g50) 100%);padding:1rem}
.auth-card{width:100%;max-width:400px;background:var(--sp);border-radius:var(--rx);box-shadow:var(--slg);padding:2.5rem 2rem;animation:slideUp .5s var(--spg)}
.auth-card .auth-logo{text-align:center;margin-bottom:1.5rem}
.auth-card .auth-logo .logo-icon{width:48px;height:48px;background:var(--a);border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem}
.auth-card h1{font-size:1.3rem;font-weight:700;text-align:center;color:var(--tp);margin-bottom:.3rem}
.auth-card .auth-sub{text-align:center;font-size:.82rem;color:var(--tt);margin-bottom:1.5rem}
.auth-card .auth-alt{text-align:center;font-size:.82rem;color:var(--ts);margin-top:1.25rem}.auth-card .auth-alt a{font-weight:600}
.auth-card .sms-row{display:flex;gap:.5rem}.auth-card .sms-row .btn{flex-shrink:0}

/* ========== Landing ========== */
.landing-hero{text-align:center;padding:4rem 1.5rem 3rem;background:linear-gradient(180deg,var(--sp) 0%,var(--st) 100%)}
.landing-hero .hero-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--al);color:var(--a);font-size:.78rem;font-weight:600;padding:.3rem .8rem;border-radius:99px;margin-bottom:1rem}
.landing-hero h1{font-size:2.2rem;font-weight:800;color:var(--tp);letter-spacing:-.02em;line-height:1.2}
.landing-hero h1 span{color:var(--a)}
.landing-hero p{font-size:1.05rem;color:var(--ts);max-width:500px;margin:.75rem auto 1.5rem;line-height:1.6}
.landing-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;padding:2rem 1.5rem;max-width:1100px;margin:0 auto}
.landing-feature{text-align:center;padding:2rem 1.5rem;background:var(--sp);border-radius:var(--rl);border:1px solid var(--bd);transition:all var(--d) var(--e)}.landing-feature:hover{transform:translateY(-3px);box-shadow:var(--smd)}
.landing-feature .feature-icon{width:48px;height:48px;margin:0 auto .75rem;background:var(--al);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.landing-feature h3{font-size:1rem;font-weight:600;color:var(--tp);margin-bottom:.35rem}
.landing-feature p{font-size:.82rem;color:var(--ts);line-height:1.5}
.landing-cta{text-align:center;padding:2rem 1.5rem 4rem}

/* ========== Shop Card ========== */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.shop-card{background:var(--sp);border:1px solid var(--bd);border-radius:var(--rl);padding:1.1rem;transition:all var(--d) var(--e);display:flex;flex-direction:column;gap:.6rem}
.shop-card:hover{border-color:var(--a);box-shadow:var(--smd);transform:translateY(-2px)}
.shop-card .shop-name{font-weight:600;font-size:.9rem;color:var(--tp)}
.shop-card .shop-status{display:flex;align-items:center;gap:.4rem;font-size:.78rem}
.shop-card .shop-meta{font-size:.75rem;color:var(--tt)}
.shop-card .shop-actions{display:flex;gap:.4rem;margin-top:auto;padding-top:.5rem;border-top:1px solid var(--bdl)}

/* ========== Admin ========== */
.admin-layout{display:flex;min-height:100vh}
.admin-sidebar{width:220px;background:var(--sp);border-right:1px solid var(--bd);padding:1.5rem .75rem;position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:90}
.admin-main{flex:1;margin-left:220px;padding:1.5rem;min-width:0}
.admin-topbar{height:var(--th);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;background:var(--sp);border-bottom:1px solid var(--bd);margin:-1.5rem -1.5rem 1.5rem;position:sticky;top:0;z-index:50}
.admin-topbar h2{font-size:1.1rem;font-weight:700;color:var(--tp)}
.admin-section{margin-bottom:2rem}
.admin-section h3{font-size:.95rem;font-weight:600;color:var(--tp);margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--bdl)}

/* ========== Config Cards ========== */
.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.config-card{background:var(--sp);border:1px solid var(--bd);border-radius:var(--r);padding:1.1rem 1.25rem}
.config-card h4{font-size:.85rem;font-weight:600;color:var(--tp);margin-bottom:.5rem}
.config-card p{font-size:.78rem;color:var(--tt);margin-bottom:.75rem}
.config-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--bdl)}.config-row:last-child{border-bottom:none}
.config-row .config-label{font-size:.82rem;color:var(--ts)}
.config-row .config-value{font-size:.82rem;font-weight:500;color:var(--tp)}

/* ========== Theme Picker ========== */
.theme-picker{display:flex;gap:.6rem;margin-top:.5rem}
.theme-option{width:40px;height:40px;border-radius:50%;border:3px solid var(--bd);cursor:pointer;transition:all var(--df) var(--e);position:relative}
.theme-option.active{border-color:var(--a);box-shadow:0 0 0 4px var(--ag)}
.theme-option::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem;font-weight:700;opacity:0;transition:opacity var(--df) var(--e)}
.theme-option.active::after{opacity:1}
.theme-default{background:linear-gradient(135deg,#635bff,#fafbfc)}.theme-violet{background:linear-gradient(135deg,#8b5cf6,#f5f3ff)}.theme-dark{background:linear-gradient(135deg,#1e2029,#818cf8)}

/* ========== Mobile ========== */
@media(max-width:768px){
.grid-2,.grid-3,.grid-4,.config-grid{grid-template-columns:1fr}
.stat-grid{grid-template-columns:repeat(2,1fr)}
.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}
.main-content{margin-left:0}
.menu-toggle{display:block}
.hero-stat{flex-direction:column;text-align:center}
.shop-grid{grid-template-columns:1fr}
.admin-sidebar{transform:translateX(-100%);width:260px}.admin-sidebar.open{transform:translateX(0)}
.admin-main{margin-left:0}
.landing-hero h1{font-size:1.6rem}
.auth-card{padding:2rem 1.5rem}
}

/* ========== Landing Page (home/index.php) ========== */
.landing-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd);transition:all var(--d) var(--e)}
[data-theme="dark"] .landing-nav{background:rgba(22,24,32,.85)}
.landing-nav .nav-inner{max-width:1100px;margin:0 auto;padding:0 1.5rem;height:var(--th);display:flex;align-items:center;justify-content:space-between}
.nav-brand{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.05rem;color:var(--tp);text-decoration:none}
.nav-brand .brand-icon{width:32px;height:32px;background:var(--a);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;color:#fff}
.nav-brand .brand-text{color:var(--tp)}
.nav-links{display:flex;gap:1.5rem}
.nav-links a{font-size:.85rem;color:var(--ts);text-decoration:none;transition:color var(--df) var(--e)}.nav-links a:hover{color:var(--a)}

/* ========== Hero Section ========== */
.hero{text-align:center;padding:5rem 1.5rem 4rem;background:linear-gradient(180deg,var(--sp) 0%,var(--st) 100%);animation:contentIn .6s var(--e) both}
.hero h1{font-size:2.5rem;font-weight:800;color:var(--tp);letter-spacing:-.02em;line-height:1.2;margin-bottom:1rem}
.hero h1 .highlight{color:var(--a);position:relative;display:inline-block}
.hero h1 .highlight::after{content:"";position:absolute;bottom:2px;left:0;right:0;height:8px;background:var(--ag);border-radius:4px;z-index:-1}
.hero p{font-size:1.05rem;color:var(--ts);max-width:560px;margin:0 auto 2rem;line-height:1.7}
.hero-buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ========== Features Section ========== */
.features-section{padding:4rem 1.5rem;max-width:1100px;margin:0 auto}
.features-section h2{text-align:center;font-size:2rem;font-weight:700;color:var(--tp);margin-bottom:2.5rem}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.feature-card{background:var(--sp);border:1px solid var(--bd);border-radius:var(--rl);padding:2rem 1.5rem;text-align:center;transition:all var(--d) var(--e);animation:slideUp .5s var(--spg) both}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--smd);border-color:var(--a)}
.feature-card .feature-icon{width:56px;height:56px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.5rem}
.feature-card .feature-icon.blue{background:var(--inl);color:var(--inf)}
.feature-card .feature-icon.green{background:var(--sul);color:var(--suc)}
.feature-card .feature-icon.amber{background:var(--wal);color:var(--war)}
.feature-card .feature-icon.indigo{background:var(--al);color:var(--a)}
.feature-card h3{font-size:1.05rem;font-weight:600;color:var(--tp);margin-bottom:.5rem}
.feature-card p{font-size:.85rem;color:var(--ts);line-height:1.6}

/* ========== Page Hero (features/pricing/about) ========== */
.page-hero{background:linear-gradient(135deg,var(--al) 0%,var(--st) 100%);padding:4rem 1.5rem;text-align:center;animation:contentIn .5s var(--e) both}
.page-hero h1{font-size:2.2rem;font-weight:800;color:var(--tp);margin-bottom:.5rem;letter-spacing:-.02em}
.page-hero .hero-sub{font-size:1.05rem;color:var(--ts)}
.container{max-width:1100px;margin:0 auto;padding:0 1.5rem}

/* ========== Pricing ========== */
.pricing-section{padding:4rem 1.5rem}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:1000px;margin:0 auto}
.pricing-card{background:var(--sp);border:1.5px solid var(--bd);border-radius:var(--rx);padding:2rem 1.5rem;display:flex;flex-direction:column;transition:all var(--d) var(--e);position:relative;animation:slideUp .5s var(--spg) both}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--slg)}
.pricing-card.featured{border-color:var(--a);box-shadow:var(--smd)}
.pricing-card .pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--a);color:#fff;font-size:.72rem;font-weight:600;padding:.2rem .8rem;border-radius:99px}
.pricing-card .pricing-header{text-align:center;margin-bottom:1.5rem}
.pricing-card .pricing-header h3{font-size:1.1rem;font-weight:600;color:var(--tp);margin-bottom:.5rem}
.pricing-card .price{font-size:2.5rem;font-weight:800;color:var(--tp)}
.pricing-card .price .currency{font-size:1rem;font-weight:600;vertical-align:top}
.pricing-card .price .period{font-size:.85rem;font-weight:400;color:var(--tt)}
.pricing-card .pricing-desc{font-size:.82rem;color:var(--tt);margin-top:.3rem}
.pricing-card .pricing-features{list-style:none;padding:0;margin:0 0 1.5rem;flex:1}
.pricing-card .pricing-features li{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;font-size:.85rem;color:var(--ts);border-bottom:1px solid var(--bdl)}
.pricing-card .pricing-features li:last-child{border-bottom:none}
.pricing-card .pricing-features svg{flex-shrink:0}

/* ========== About ========== */
.about-section{padding:4rem 1.5rem}
.about-section h2{font-size:1.3rem;font-weight:700;color:var(--tp);margin-top:2rem;margin-bottom:.75rem}
.about-section h2:first-child{margin-top:0}
.about-section p{font-size:.9rem;color:var(--ts);line-height:1.8;margin-bottom:1rem}

/* ========== Footer ========== */
.footer{text-align:center;padding:3rem 1.5rem;border-top:1px solid var(--bd);background:var(--sp)}
.footer p{font-size:.82rem;color:var(--tt)}

/* ========== Scrollbar in dark ========== */
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--g400)}
[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--g200)}

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