@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#2563eb;--primary-light:#eff6ff;--border:#edf0f4;--bg:#f5f7fa;--card:#fff;--text:#1f2937;--dim:#8c919a;--green:#10b981;--red:#ef4444;--orange:#f59e0b;--purple:#8b5cf6;--pink:#ec4899;--cyan:#06b6d4;--radius:8px;--shadow:0 1px 3px rgba(0,0,0,.04)}
body{font-family:'Inter',-apple-system,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}

/* Login */
.login-wrap{display:flex;justify-content:center;align-items:center;min-height:100vh;background:var(--bg)}
.login-box{background:var(--card);padding:2.5rem 2rem;border-radius:12px;width:360px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.login-logo{font-size:1.4rem;text-align:center;margin-bottom:.2rem;font-weight:700;color:var(--primary)}
.login-title{text-align:center;color:var(--dim);margin-bottom:2rem;font-size:.85rem}
.login-box input{width:100%;padding:.65rem .85rem;margin-bottom:.8rem;border:1px solid var(--border);border-radius:var(--radius);outline:none;transition:border .2s;background:#fafbfc}
.login-box input:focus{border-color:var(--primary);background:#fff}
.login-box button{width:100%;padding:.65rem;border:none;border-radius:var(--radius);background:var(--primary);color:#fff;font-weight:600;font-size:.95rem}
.login-box button:hover{background:#1d4ed8}
.login-err{color:var(--red);text-align:center;margin-top:.5rem;font-size:.85rem}

/* Layout */
.layout{display:flex;min-height:100vh}
.sidebar{width:200px;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:10}
.sidebar-logo{padding:1.2rem 1rem;font-size:1rem;font-weight:700;cursor:pointer;border-bottom:1px solid var(--border);color:var(--primary)}
.sidebar nav{flex:1;padding:.3rem 0;overflow-y:auto}
.nav-group{margin-bottom:.2rem}
.nav-group-title{display:flex;justify-content:space-between;align-items:center;padding:.4rem 1rem;font-size:.72rem;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;user-select:none}
.nav-group-title:hover{color:var(--text)}
.nav-arrow{font-size:.65rem;transition:transform .15s;color:var(--dim)}
.nav-arrow.open{transform:rotate(90deg)}
.nav-item{display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;color:var(--dim);font-size:.85rem;cursor:pointer;border-left:3px solid transparent;transition:all .12s;font-weight:500}
.nav-item:hover{background:var(--bg);color:var(--text)}
.nav-item.active{color:var(--primary);background:var(--primary-light);border-left-color:var(--primary);font-weight:600}
.nav-icon{width:1.2rem;text-align:center;font-size:.9rem}
.sidebar-bottom{border-top:1px solid var(--border);padding:.5rem 0}
.content{flex:1;padding:1.5rem 2rem;margin-left:200px;min-height:100vh}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.topbar-actions{display:flex;gap:.4rem}
.topbar-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.topbar-btn:hover{background:var(--bg);border-color:#d1d5db}

/* Page */
.page-title{font-size:1.1rem;font-weight:700;margin-bottom:1.2rem;color:var(--text);display:flex;align-items:center;justify-content:space-between}
.page-desc{color:var(--dim);margin-bottom:1rem;font-size:.85rem}

/* Stat Cards - 彩色图标风格 */
.cards{display:flex;gap:.8rem;margin-bottom:1.5rem;flex-wrap:wrap}
.card{background:var(--card);border-radius:var(--radius);padding:1rem 1.2rem;box-shadow:var(--shadow);flex:1;min-width:160px;display:flex;align-items:center;gap:.8rem;border:1px solid var(--border)}
.card-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;color:#fff;flex-shrink:0}
.card-icon.blue{background:var(--primary)}.card-icon.green{background:var(--green)}.card-icon.orange{background:var(--orange)}
.card-icon.red{background:var(--red)}.card-icon.purple{background:var(--purple)}.card-icon.pink{background:var(--pink)}.card-icon.cyan{background:var(--cyan)}
.card-body{flex:1;min-width:0}
.card-label{font-size:.78rem;color:var(--dim);margin-bottom:.15rem}
.card-value{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.card-sub{font-size:.75rem;color:var(--dim);margin-top:.1rem}

/* Table */
.table-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:1rem}
table{width:100%;border-collapse:collapse}
th{background:#fafbfc;text-align:left;padding:.6rem .9rem;font-size:.8rem;color:var(--dim);font-weight:600;border-bottom:1px solid var(--border)}
td{padding:.6rem .9rem;border-bottom:1px solid #f3f4f6;font-size:.85rem}
tr:last-child td{border-bottom:none}
tr:hover{background:#fafbfc}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .85rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);font-size:.85rem;transition:all .12s;font-weight:500;color:var(--text)}
.btn:hover{border-color:#d1d5db;background:#fafbfc}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover{background:#1d4ed8;color:#fff}
.btn-danger{color:var(--red);border-color:#fecaca}
.btn-danger:hover{background:#fef2f2}
.btn-sm{padding:.25rem .5rem;font-size:.8rem}
.btn-group{display:flex;gap:.5rem;margin-bottom:1.2rem;flex-wrap:wrap}

/* Badge */
.badge{display:inline-block;padding:.15rem .5rem;border-radius:4px;font-size:.75rem;font-weight:600}
.badge-green{background:#ecfdf5;color:#059669}
.badge-red{background:#fef2f2;color:#dc2626}
.badge-orange{background:#fffbeb;color:#b45309}
.badge-blue{background:#eff6ff;color:#2563eb}

/* Form */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.3rem;color:#4b5563}
.form-input{width:100%;padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius);outline:none;transition:border .2s;background:#fafbfc}
.form-input:focus{border-color:var(--primary);background:#fff}
textarea.form-input{min-height:120px;resize:vertical;font-family:'SF Mono',Menlo,monospace;font-size:.83rem;line-height:1.6}

/* Modal */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.2);display:flex;justify-content:center;align-items:center;z-index:100}
.modal{background:var(--card);border-radius:12px;padding:1.5rem;width:520px;max-width:92vw;max-height:85vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.1)}
.modal-title{font-size:1.05rem;font-weight:700;margin-bottom:1.2rem}
.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.2rem}

/* Code */
.code{background:#fafbfc;border:1px solid var(--border);border-radius:var(--radius);padding:.8rem;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.82rem;white-space:pre-wrap;word-break:break-all;max-height:400px;overflow-y:auto;line-height:1.7;color:#374151}

/* Section */
.section-title{font-size:.9rem;font-weight:600;color:var(--text);margin:1.2rem 0 .8rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}

/* Progress bar */
.progress-wrap{margin:.6rem 0}
.progress-bar{height:6px;background:#f0f1f3;border-radius:3px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;transition:width .3s}

/* Empty */
.empty{text-align:center;color:var(--dim);padding:3rem;font-size:.9rem}
details summary{font-size:.85rem;color:var(--dim);cursor:pointer;padding:.3rem 0}

/* Mobile menu toggle */
.menu-toggle{display:none;position:fixed;top:.6rem;left:.6rem;z-index:20;width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--card);font-size:1.2rem;align-items:center;justify-content:center;cursor:pointer;color:var(--text)}

/* Responsive */
@media(max-width:768px){
  .sidebar{width:56px}.sidebar-logo{font-size:.7rem;padding:.8rem .3rem;text-align:center;overflow:hidden}
  .nav-text,.nav-group-title span:first-child{display:none}.nav-arrow{display:none}
  .nav-item{justify-content:center;padding:.5rem}.nav-group-title{justify-content:center;padding:.4rem}
  .content{margin-left:56px;padding:1rem}
  .cards{flex-direction:column}
}
@media(max-width:480px){
  .menu-toggle{display:flex}
  .sidebar{transform:translateX(-100%);transition:transform .2s;z-index:15;width:200px}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:14}
  .sidebar-overlay.open{display:block}
  .content{margin-left:0;padding:.8rem;padding-top:3rem}
  .nav-text,.nav-group-title span:first-child{display:inline}.nav-arrow{display:inline}
}

/* Dark Theme */
[data-theme="dark"]{--bg:#111827;--card:#1f2937;--border:#374151;--text:#f3f4f6;--dim:#9ca3af;--primary-light:#1e3a5f;--shadow:0 1px 3px rgba(0,0,0,.2)}
[data-theme="dark"] th{background:#283548;color:#d1d5db}
[data-theme="dark"] td{border-bottom-color:#374151}
[data-theme="dark"] tr:hover{background:#283548}
[data-theme="dark"] .code{background:#0f172a;border-color:#374151;color:#e2e8f0}
[data-theme="dark"] .form-input{background:#0f172a;border-color:#374151;color:#f3f4f6}
[data-theme="dark"] .form-input:focus{background:#1e293b;border-color:var(--primary)}
[data-theme="dark"] .login-box{background:#1f2937;box-shadow:0 2px 12px rgba(0,0,0,.3)}
[data-theme="dark"] .login-box input{background:#0f172a;border-color:#374151;color:#f3f4f6}
[data-theme="dark"] .login-box input:focus{background:#1e293b}
[data-theme="dark"] .btn{background:#1f2937;border-color:#374151;color:#f3f4f6}
[data-theme="dark"] .btn:hover{background:#283548;border-color:#4b5563}
[data-theme="dark"] .btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
[data-theme="dark"] .btn-danger{color:#f87171;border-color:#7f1d1d}
[data-theme="dark"] .btn-danger:hover{background:#7f1d1d30}
[data-theme="dark"] .badge-green{background:#064e3b;color:#6ee7b7}
[data-theme="dark"] .badge-blue{background:#1e3a5f;color:#93c5fd}
[data-theme="dark"] .badge-orange{background:#78350f;color:#fcd34d}
[data-theme="dark"] .badge-red{background:#7f1d1d;color:#fca5a5}
[data-theme="dark"] .form-group label{color:#d1d5db}
[data-theme="dark"] .modal{background:#1f2937;box-shadow:0 10px 40px rgba(0,0,0,.4)}
[data-theme="dark"] .modal-mask{background:rgba(0,0,0,.5)}

/* Toast */
.toast-container{position:fixed;top:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem}
.toast{padding:.6rem 1.2rem;border-radius:8px;font-size:.88rem;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);animation:toastIn .3s ease}
.toast-success{background:#22c55e}
.toast-error{background:#ef4444}
.toast-info{background:#4f6ef7}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}

/* ===== Gaming Dark Theme (bwin-inspired) ===== */
[data-theme="gaming"] {
  --bg: #0d0d0d;
  --card: #1a1a1a;
  --text: #e8e8e8;
  --dim: #888;
  --border: #2a2a2a;
  --primary: #f5c518;
  --primary-hover: #e0b200;
  --green: #00e676;
  --red: #ff3d3d;
  --orange: #ff9800;
  --sidebar-bg: #111;
  --sidebar-text: #aaa;
  --sidebar-active: #f5c518;
  --sidebar-hover: #1e1e1e;
  --topbar-bg: #141414;
  --input-bg: #1e1e1e;
  --input-border: #333;
  --shadow: 0 2px 8px rgba(0,0,0,.5);
}
[data-theme="gaming"] .sidebar { background: var(--sidebar-bg); border-right: 1px solid #222; }
[data-theme="gaming"] .sidebar-logo { color: #f5c518; text-shadow: 0 0 10px rgba(245,197,24,.3); }
[data-theme="gaming"] .nav-item.active { background: rgba(245,197,24,.12); color: #f5c518; border-left: 3px solid #f5c518; }
[data-theme="gaming"] .nav-item:hover { background: #1e1e1e; }
[data-theme="gaming"] .card { background: #1a1a1a; border: 1px solid #2a2a2a; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
[data-theme="gaming"] .card:hover { border-color: #f5c518; box-shadow: 0 0 12px rgba(245,197,24,.15); }
[data-theme="gaming"] .btn-primary { background: #f5c518; color: #000; font-weight: 600; }
[data-theme="gaming"] .btn-primary:hover { background: #e0b200; }
[data-theme="gaming"] .btn { border-color: #333; color: #ccc; background: #1e1e1e; }
[data-theme="gaming"] .btn:hover { border-color: #f5c518; color: #f5c518; }
[data-theme="gaming"] table th { background: #1a1a1a; color: #f5c518; border-bottom: 2px solid #f5c518; }
[data-theme="gaming"] table td { border-bottom: 1px solid #222; }
[data-theme="gaming"] table tr:hover td { background: #1e1e1e; }
[data-theme="gaming"] .badge-green { background: #00e676; color: #000; }
[data-theme="gaming"] .badge-blue { background: #f5c518; color: #000; }
[data-theme="gaming"] .badge-orange { background: #ff9800; color: #000; }
[data-theme="gaming"] .badge-red { background: #ff3d3d; color: #fff; }
[data-theme="gaming"] .form-input { background: #1e1e1e; border-color: #333; color: #e8e8e8; }
[data-theme="gaming"] .form-input:focus { border-color: #f5c518; box-shadow: 0 0 0 2px rgba(245,197,24,.2); }
[data-theme="gaming"] .modal { background: #1a1a1a; border: 1px solid #333; }
[data-theme="gaming"] .code { background: #111; color: #e8e8e8; border-color: #2a2a2a; }
[data-theme="gaming"] .topbar { background: #141414; border-bottom: 1px solid #222; }
[data-theme="gaming"] .login-box { background: #1a1a1a; border: 1px solid #333; box-shadow: 0 0 30px rgba(245,197,24,.1); }
[data-theme="gaming"] .login-logo { color: #f5c518; text-shadow: 0 0 15px rgba(245,197,24,.4); }
[data-theme="gaming"] .login-box input { background: #111; border-color: #333; color: #e8e8e8; }
[data-theme="gaming"] .login-box button { background: #f5c518; color: #000; font-weight: 700; }
[data-theme="gaming"] .login-box button:hover { background: #e0b200; }
[data-theme="gaming"] .card-icon { box-shadow: 0 0 8px rgba(0,0,0,.3); }
[data-theme="gaming"] .page-title { color: #f5c518; }
[data-theme="gaming"] .section-title { color: #f5c518; }
[data-theme="gaming"] a { color: #f5c518; }
[data-theme="gaming"] .nav-group-title { color: #666; }
[data-theme="gaming"] .nav-group-title:hover { color: #f5c518; }

/* ===== 🧊 Glass Morphism Theme ===== */
[data-theme="glass"] {
  --bg: #e8ecf4;
  --card: rgba(255,255,255,.45);
  --border: rgba(255,255,255,.5);
  --text: #1a1a2e;
  --dim: #5a5a7a;
  --primary: #6366f1;
  --primary-light: rgba(99,102,241,.1);
  --shadow: 0 8px 32px rgba(31,38,135,.12);
  --radius: 14px;
  font-family: 'Outfit', sans-serif;
}
[data-theme="glass"] body,
[data-theme="glass"] #app { background: linear-gradient(135deg, #c3cfe2 0%, #f5f7fa 40%, #e0c3fc 70%, #c3cfe2 100%); background-attachment: fixed; }
[data-theme="glass"] .sidebar { background: rgba(255,255,255,.25); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-right: 1px solid rgba(255,255,255,.4); }
[data-theme="glass"] .sidebar-logo { color: #6366f1; font-family: 'Outfit', sans-serif; font-weight: 700; }
[data-theme="glass"] .nav-item.active { background: rgba(99,102,241,.12); color: #6366f1; border-left: 3px solid #6366f1; }
[data-theme="glass"] .nav-item:hover { background: rgba(99,102,241,.06); color: #4338ca; }
[data-theme="glass"] .nav-item { color: #5a5a7a; }
[data-theme="glass"] .card { background: rgba(255,255,255,.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.6); border-radius: 14px; box-shadow: 0 8px 32px rgba(31,38,135,.1); transition: transform .2s, box-shadow .2s; }
[data-theme="glass"] .card:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(31,38,135,.18); }
[data-theme="glass"] .card-icon { box-shadow: 0 4px 15px rgba(0,0,0,.1); }
[data-theme="glass"] th { background: rgba(99,102,241,.06); color: #5a5a7a; }
[data-theme="glass"] td { border-bottom: 1px solid rgba(99,102,241,.08); }
[data-theme="glass"] tr:hover { background: rgba(99,102,241,.04); }
[data-theme="glass"] .btn { background: rgba(255,255,255,.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.6); color: #1a1a2e; }
[data-theme="glass"] .btn:hover { background: rgba(255,255,255,.7); border-color: #6366f1; color: #6366f1; }
[data-theme="glass"] .btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border: none; box-shadow: 0 4px 15px rgba(99,102,241,.3); }
[data-theme="glass"] .btn-primary:hover { box-shadow: 0 6px 20px rgba(99,102,241,.45); }
[data-theme="glass"] .btn-danger { color: #ef4444; border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.06); }
[data-theme="glass"] .badge-green { background: rgba(16,185,129,.12); color: #059669; }
[data-theme="glass"] .badge-blue { background: rgba(99,102,241,.12); color: #6366f1; }
[data-theme="glass"] .badge-orange { background: rgba(245,158,11,.12); color: #d97706; }
[data-theme="glass"] .badge-red { background: rgba(239,68,68,.12); color: #dc2626; }
[data-theme="glass"] .form-input { background: rgba(255,255,255,.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.6); color: #1a1a2e; }
[data-theme="glass"] .form-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); background: rgba(255,255,255,.7); }
[data-theme="glass"] .modal { background: rgba(255,255,255,.6); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.5); border-radius: 16px; box-shadow: 0 16px 48px rgba(31,38,135,.15); }
[data-theme="glass"] .modal-overlay { background: rgba(100,100,140,.3); backdrop-filter: blur(4px); }
[data-theme="glass"] .code { background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.4); color: #1a1a2e; }
[data-theme="glass"] .login-box { background: rgba(255,255,255,.35); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 16px 48px rgba(31,38,135,.15); border-radius: 16px; }
[data-theme="glass"] .login-logo { color: #6366f1; }
[data-theme="glass"] .login-box input { background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.6); color: #1a1a2e; }
[data-theme="glass"] .page-title { color: #1a1a2e; }
[data-theme="glass"] .nav-group-title { color: #8888aa; }
[data-theme="glass"] .toast { backdrop-filter: blur(12px); }
[data-theme="glass"] .table-wrap { background: rgba(255,255,255,.3); backdrop-filter: blur(12px); border-radius: 12px; border: 1px solid rgba(255,255,255,.4); overflow: hidden; }

/* ===== ⚡ Cyberpunk Theme ===== */
[data-theme="cyber"] {
  --bg: #0a0a0f;
  --card: #12121a;
  --border: #1a1a2e;
  --text: #e0e0ff;
  --dim: #6a6a8a;
  --primary: #00f0ff;
  --primary-light: rgba(0,240,255,.08);
  --shadow: 0 0 20px rgba(0,240,255,.05);
  --radius: 4px;
  font-family: 'Space Mono', monospace;
}
[data-theme="cyber"] body,
[data-theme="cyber"] #app { background: #0a0a0f; background-image: linear-gradient(rgba(0,240,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,.03) 1px, transparent 1px); background-size: 40px 40px; }
[data-theme="cyber"] .sidebar { background: #0d0d14; border-right: 1px solid #1a1a2e; box-shadow: 2px 0 20px rgba(0,240,255,.03); }
[data-theme="cyber"] .sidebar-logo { color: #00f0ff; text-shadow: 0 0 10px rgba(0,240,255,.5), 0 0 30px rgba(0,240,255,.2); font-family: 'Space Mono', monospace; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
[data-theme="cyber"] .nav-item { color: #6a6a8a; font-family: 'Space Mono', monospace; font-size: .78rem; letter-spacing: .5px; border-left: 2px solid transparent; }
[data-theme="cyber"] .nav-item.active { background: rgba(0,240,255,.06); color: #00f0ff; border-left: 2px solid #00f0ff; text-shadow: 0 0 8px rgba(0,240,255,.4); }
[data-theme="cyber"] .nav-item:hover { background: rgba(0,240,255,.04); color: #00f0ff; }
[data-theme="cyber"] .card { background: #12121a; border: 1px solid #1a1a2e; border-radius: 4px; box-shadow: 0 0 1px rgba(0,240,255,.2), inset 0 0 30px rgba(0,0,0,.3); transition: border-color .2s, box-shadow .2s; }
[data-theme="cyber"] .card:hover { border-color: #00f0ff; box-shadow: 0 0 15px rgba(0,240,255,.1), 0 0 1px rgba(0,240,255,.4); }
[data-theme="cyber"] .card-icon { box-shadow: 0 0 10px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.05); }
[data-theme="cyber"] .card-label { text-transform: uppercase; letter-spacing: 1px; font-size: .68rem; }
[data-theme="cyber"] th { background: rgba(0,240,255,.04); color: #00f0ff; text-transform: uppercase; letter-spacing: 1px; font-size: .7rem; font-family: 'Space Mono', monospace; }
[data-theme="cyber"] td { border-bottom: 1px solid #1a1a2e; font-size: .82rem; }
[data-theme="cyber"] tr:hover { background: rgba(0,240,255,.03); }
[data-theme="cyber"] .btn { background: #12121a; border: 1px solid #2a2a3e; color: #e0e0ff; font-family: 'Space Mono', monospace; font-size: .78rem; letter-spacing: .5px; }
[data-theme="cyber"] .btn:hover { border-color: #00f0ff; color: #00f0ff; box-shadow: 0 0 10px rgba(0,240,255,.15); }
[data-theme="cyber"] .btn-primary { background: transparent; border: 1px solid #00f0ff; color: #00f0ff; box-shadow: 0 0 10px rgba(0,240,255,.2), inset 0 0 10px rgba(0,240,255,.05); text-shadow: 0 0 5px rgba(0,240,255,.3); }
[data-theme="cyber"] .btn-primary:hover { background: rgba(0,240,255,.1); box-shadow: 0 0 20px rgba(0,240,255,.3), inset 0 0 15px rgba(0,240,255,.1); }
[data-theme="cyber"] .btn-danger { color: #ff2a6d; border-color: rgba(255,42,109,.3); }
[data-theme="cyber"] .btn-danger:hover { background: rgba(255,42,109,.1); box-shadow: 0 0 10px rgba(255,42,109,.2); }
[data-theme="cyber"] .badge-green { background: rgba(5,255,161,.1); color: #05ffa1; text-shadow: 0 0 5px rgba(5,255,161,.3); }
[data-theme="cyber"] .badge-blue { background: rgba(0,240,255,.1); color: #00f0ff; text-shadow: 0 0 5px rgba(0,240,255,.3); }
[data-theme="cyber"] .badge-orange { background: rgba(255,170,0,.1); color: #ffaa00; text-shadow: 0 0 5px rgba(255,170,0,.3); }
[data-theme="cyber"] .badge-red { background: rgba(255,42,109,.1); color: #ff2a6d; text-shadow: 0 0 5px rgba(255,42,109,.3); }
[data-theme="cyber"] .form-input { background: #0a0a0f; border: 1px solid #2a2a3e; color: #e0e0ff; font-family: 'Space Mono', monospace; }
[data-theme="cyber"] .form-input:focus { border-color: #00f0ff; box-shadow: 0 0 10px rgba(0,240,255,.15); }
[data-theme="cyber"] .modal { background: #12121a; border: 1px solid #00f0ff; border-radius: 4px; box-shadow: 0 0 30px rgba(0,240,255,.1); }
[data-theme="cyber"] .modal-overlay { background: rgba(0,0,0,.7); }
[data-theme="cyber"] .code { background: #0a0a0f; border: 1px solid #1a1a2e; color: #05ffa1; font-family: 'Space Mono', monospace; }
[data-theme="cyber"] .login-box { background: #12121a; border: 1px solid #00f0ff; box-shadow: 0 0 40px rgba(0,240,255,.08), 0 0 1px rgba(0,240,255,.4); border-radius: 4px; }
[data-theme="cyber"] .login-logo { color: #00f0ff; text-shadow: 0 0 15px rgba(0,240,255,.5); font-family: 'Space Mono', monospace; }
[data-theme="cyber"] .login-box input { background: #0a0a0f; border: 1px solid #2a2a3e; color: #e0e0ff; font-family: 'Space Mono', monospace; }
[data-theme="cyber"] .login-box input:focus { border-color: #00f0ff; box-shadow: 0 0 8px rgba(0,240,255,.2); }
[data-theme="cyber"] .login-box button { background: transparent; border: 1px solid #00f0ff; color: #00f0ff; font-family: 'Space Mono', monospace; text-transform: uppercase; letter-spacing: 2px; }
[data-theme="cyber"] .login-box button:hover { background: rgba(0,240,255,.1); box-shadow: 0 0 20px rgba(0,240,255,.2); }
[data-theme="cyber"] .page-title { color: #e0e0ff; font-family: 'Space Mono', monospace; letter-spacing: .5px; }
[data-theme="cyber"] .nav-group-title { color: #3a3a5a; text-transform: uppercase; letter-spacing: 2px; font-size: .65rem; }
[data-theme="cyber"] .toast { font-family: 'Space Mono', monospace; }
[data-theme="cyber"] .table-wrap { border: 1px solid #1a1a2e; border-radius: 4px; overflow: hidden; }
[data-theme="cyber"] ::selection { background: rgba(0,240,255,.3); color: #fff; }

/* ===== 🌸 Sakura Zen Theme ===== */
[data-theme="sakura"] {
  --bg: #faf6f0;
  --card: #fffcf7;
  --border: #e8ddd0;
  --text: #2c2420;
  --dim: #8a7e74;
  --primary: #c45c7c;
  --primary-light: rgba(196,92,124,.08);
  --shadow: 0 2px 8px rgba(44,36,32,.06);
  --radius: 6px;
  font-family: 'Noto Serif SC', 'Georgia', serif;
}
[data-theme="sakura"] body,
[data-theme="sakura"] #app { background: #faf6f0; background-image: radial-gradient(ellipse at 20% 50%, rgba(196,92,124,.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(196,92,124,.03) 0%, transparent 40%); }
[data-theme="sakura"] .sidebar { background: #f5efe6; border-right: 1px solid #e8ddd0; }
[data-theme="sakura"] .sidebar-logo { color: #c45c7c; font-family: 'Noto Serif SC', serif; font-weight: 700; letter-spacing: 2px; }
[data-theme="sakura"] .nav-item { color: #8a7e74; font-size: .83rem; }
[data-theme="sakura"] .nav-item.active { background: rgba(196,92,124,.08); color: #c45c7c; border-left: 3px solid #c45c7c; }
[data-theme="sakura"] .nav-item:hover { background: rgba(196,92,124,.05); color: #a04060; }
[data-theme="sakura"] .card { background: #fffcf7; border: 1px solid #e8ddd0; border-radius: 6px; box-shadow: 0 2px 8px rgba(44,36,32,.04); transition: box-shadow .2s; }
[data-theme="sakura"] .card:hover { box-shadow: 0 4px 16px rgba(196,92,124,.1); }
[data-theme="sakura"] .card-icon.blue { background: #6b8fa3; }
[data-theme="sakura"] .card-icon.green { background: #7a9e7e; }
[data-theme="sakura"] .card-icon.orange { background: #c49a6c; }
[data-theme="sakura"] .card-icon.purple { background: #9b7ea4; }
[data-theme="sakura"] .card-icon.red { background: #c45c7c; }
[data-theme="sakura"] th { background: #f5efe6; color: #8a7e74; font-weight: 600; }
[data-theme="sakura"] td { border-bottom: 1px solid #ede5da; }
[data-theme="sakura"] tr:hover { background: rgba(196,92,124,.03); }
[data-theme="sakura"] .btn { background: #fffcf7; border: 1px solid #ddd2c4; color: #2c2420; }
[data-theme="sakura"] .btn:hover { border-color: #c45c7c; color: #c45c7c; }
[data-theme="sakura"] .btn-primary { background: #c45c7c; color: #fff; border: none; box-shadow: 0 2px 8px rgba(196,92,124,.25); }
[data-theme="sakura"] .btn-primary:hover { background: #a84868; box-shadow: 0 4px 12px rgba(196,92,124,.35); }
[data-theme="sakura"] .btn-danger { color: #c0392b; border-color: rgba(192,57,43,.2); }
[data-theme="sakura"] .badge-green { background: rgba(122,158,126,.12); color: #5a7e5e; }
[data-theme="sakura"] .badge-blue { background: rgba(107,143,163,.12); color: #5a7e8e; }
[data-theme="sakura"] .badge-orange { background: rgba(196,154,108,.15); color: #8a6a3e; }
[data-theme="sakura"] .badge-red { background: rgba(196,92,124,.1); color: #c45c7c; }
[data-theme="sakura"] .form-input { background: #faf6f0; border: 1px solid #ddd2c4; color: #2c2420; }
[data-theme="sakura"] .form-input:focus { border-color: #c45c7c; box-shadow: 0 0 0 3px rgba(196,92,124,.1); }
[data-theme="sakura"] .modal { background: #fffcf7; border: 1px solid #e8ddd0; border-radius: 8px; box-shadow: 0 8px 32px rgba(44,36,32,.1); }
[data-theme="sakura"] .modal-overlay { background: rgba(44,36,32,.3); }
[data-theme="sakura"] .code { background: #f5efe6; border: 1px solid #e8ddd0; color: #2c2420; }
[data-theme="sakura"] .login-box { background: #fffcf7; border: 1px solid #e8ddd0; box-shadow: 0 8px 32px rgba(44,36,32,.08); }
[data-theme="sakura"] .login-logo { color: #c45c7c; }
[data-theme="sakura"] .login-box input { background: #faf6f0; border: 1px solid #ddd2c4; color: #2c2420; }
[data-theme="sakura"] .page-title { color: #2c2420; }
[data-theme="sakura"] .nav-group-title { color: #b0a498; }
[data-theme="sakura"] .table-wrap { border-radius: 6px; overflow: hidden; }

/* ===== 🔮 Aurora Theme ===== */
[data-theme="aurora"] {
  --bg: #0c0e1a;
  --card: #131628;
  --border: #1e2240;
  --text: #d4d8f0;
  --dim: #6b70a0;
  --primary: #7c5bf5;
  --primary-light: rgba(124,91,245,.1);
  --shadow: 0 4px 20px rgba(0,0,0,.2);
  --radius: 12px;
  font-family: 'Outfit', sans-serif;
}
[data-theme="aurora"] body,
[data-theme="aurora"] #app { background: #0c0e1a; background-image: radial-gradient(ellipse at 15% 10%, rgba(124,91,245,.15) 0%, transparent 40%), radial-gradient(ellipse at 85% 30%, rgba(6,182,212,.12) 0%, transparent 35%), radial-gradient(ellipse at 50% 80%, rgba(236,72,153,.08) 0%, transparent 40%); background-attachment: fixed; }
[data-theme="aurora"] .sidebar { background: rgba(19,22,40,.85); backdrop-filter: blur(12px); border-right: 1px solid #1e2240; }
[data-theme="aurora"] .sidebar-logo { background: linear-gradient(135deg, #7c5bf5, #06b6d4, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-family: 'Outfit', sans-serif; font-weight: 700; }
[data-theme="aurora"] .nav-item { color: #6b70a0; }
[data-theme="aurora"] .nav-item.active { background: linear-gradient(90deg, rgba(124,91,245,.12), transparent); color: #a78bfa; border-left: 3px solid #7c5bf5; }
[data-theme="aurora"] .nav-item:hover { background: rgba(124,91,245,.06); color: #a78bfa; }
[data-theme="aurora"] .card { background: rgba(19,22,40,.7); backdrop-filter: blur(8px); border: 1px solid #1e2240; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.15); transition: transform .2s, border-color .3s; }
[data-theme="aurora"] .card:hover { transform: translateY(-2px); border-color: rgba(124,91,245,.4); }
[data-theme="aurora"] .card-icon.blue { background: linear-gradient(135deg, #6366f1, #818cf8); }
[data-theme="aurora"] .card-icon.green { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
[data-theme="aurora"] .card-icon.orange { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
[data-theme="aurora"] .card-icon.purple { background: linear-gradient(135deg, #7c5bf5, #a78bfa); }
[data-theme="aurora"] .card-icon.red { background: linear-gradient(135deg, #ec4899, #f472b6); }
[data-theme="aurora"] th { background: rgba(124,91,245,.06); color: #8b8fc0; }
[data-theme="aurora"] td { border-bottom: 1px solid #1e2240; }
[data-theme="aurora"] tr:hover { background: rgba(124,91,245,.04); }
[data-theme="aurora"] .btn { background: rgba(19,22,40,.6); border: 1px solid #2a2e50; color: #d4d8f0; }
[data-theme="aurora"] .btn:hover { border-color: #7c5bf5; color: #a78bfa; }
[data-theme="aurora"] .btn-primary { background: linear-gradient(135deg, #7c5bf5, #6366f1); color: #fff; border: none; box-shadow: 0 4px 15px rgba(124,91,245,.3); }
[data-theme="aurora"] .btn-primary:hover { box-shadow: 0 6px 25px rgba(124,91,245,.45); }
[data-theme="aurora"] .btn-danger { color: #f472b6; border-color: rgba(236,72,153,.25); }
[data-theme="aurora"] .btn-danger:hover { background: rgba(236,72,153,.1); }
[data-theme="aurora"] .badge-green { background: rgba(6,182,212,.12); color: #22d3ee; }
[data-theme="aurora"] .badge-blue { background: rgba(124,91,245,.12); color: #a78bfa; }
[data-theme="aurora"] .badge-orange { background: rgba(245,158,11,.12); color: #fbbf24; }
[data-theme="aurora"] .badge-red { background: rgba(236,72,153,.12); color: #f472b6; }
[data-theme="aurora"] .form-input { background: rgba(12,14,26,.8); border: 1px solid #2a2e50; color: #d4d8f0; }
[data-theme="aurora"] .form-input:focus { border-color: #7c5bf5; box-shadow: 0 0 12px rgba(124,91,245,.2); }
[data-theme="aurora"] .modal { background: #131628; border: 1px solid #2a2e50; border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.3); }
[data-theme="aurora"] .modal-overlay { background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
[data-theme="aurora"] .code { background: #0c0e1a; border: 1px solid #1e2240; color: #22d3ee; }
[data-theme="aurora"] .login-box { background: rgba(19,22,40,.85); backdrop-filter: blur(16px); border: 1px solid #2a2e50; box-shadow: 0 16px 48px rgba(0,0,0,.3), 0 0 80px rgba(124,91,245,.08); border-radius: 14px; }
[data-theme="aurora"] .login-logo { background: linear-gradient(135deg, #7c5bf5, #06b6d4, #ec4899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="aurora"] .login-box input { background: rgba(12,14,26,.8); border: 1px solid #2a2e50; color: #d4d8f0; }
[data-theme="aurora"] .login-box input:focus { border-color: #7c5bf5; box-shadow: 0 0 10px rgba(124,91,245,.2); }
[data-theme="aurora"] .login-box button { background: linear-gradient(135deg, #7c5bf5, #6366f1); color: #fff; border: none; }
[data-theme="aurora"] .login-box button:hover { box-shadow: 0 4px 20px rgba(124,91,245,.4); }
[data-theme="aurora"] .page-title { color: #d4d8f0; }
[data-theme="aurora"] .nav-group-title { color: #4a4e7a; }
[data-theme="aurora"] .table-wrap { border: 1px solid #1e2240; border-radius: 12px; overflow: hidden; }
[data-theme="aurora"] ::selection { background: rgba(124,91,245,.3); color: #fff; }

/* ===== 🌊 Deep Ocean Theme ===== */
[data-theme="ocean"] {
  --bg: #060d17;
  --card: #0b1929;
  --border: #122640;
  --text: #c8dce8;
  --dim: #5a7a90;
  --primary: #00bcd4;
  --primary-light: rgba(0,188,212,.08);
  --shadow: 0 4px 20px rgba(0,0,0,.3);
  --radius: 10px;
  font-family: 'Outfit', sans-serif;
}
[data-theme="ocean"] body,
[data-theme="ocean"] #app { background: #060d17; background-image: radial-gradient(ellipse at 30% 80%, rgba(0,188,212,.08) 0%, transparent 50%), radial-gradient(ellipse at 70% 20%, rgba(0,150,136,.06) 0%, transparent 40%), radial-gradient(circle at 50% 50%, rgba(0,77,128,.05) 0%, transparent 60%); background-attachment: fixed; }
[data-theme="ocean"] .sidebar { background: rgba(11,25,41,.9); border-right: 1px solid #122640; }
[data-theme="ocean"] .sidebar-logo { color: #00bcd4; text-shadow: 0 0 12px rgba(0,188,212,.4); font-weight: 700; }
[data-theme="ocean"] .nav-item { color: #5a7a90; }
[data-theme="ocean"] .nav-item.active { background: rgba(0,188,212,.08); color: #00e5ff; border-left: 3px solid #00bcd4; text-shadow: 0 0 6px rgba(0,188,212,.3); }
[data-theme="ocean"] .nav-item:hover { background: rgba(0,188,212,.05); color: #00e5ff; }
[data-theme="ocean"] .card { background: rgba(11,25,41,.8); border: 1px solid #122640; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.2); transition: border-color .3s, box-shadow .3s; }
[data-theme="ocean"] .card:hover { border-color: rgba(0,188,212,.3); box-shadow: 0 4px 25px rgba(0,188,212,.08); }
[data-theme="ocean"] .card-icon.blue { background: linear-gradient(135deg, #0288d1, #03a9f4); }
[data-theme="ocean"] .card-icon.green { background: linear-gradient(135deg, #00897b, #26a69a); }
[data-theme="ocean"] .card-icon.orange { background: linear-gradient(135deg, #f57c00, #ffb74d); }
[data-theme="ocean"] .card-icon.purple { background: linear-gradient(135deg, #5c6bc0, #7986cb); }
[data-theme="ocean"] .card-icon.red { background: linear-gradient(135deg, #e53935, #ef5350); }
[data-theme="ocean"] th { background: rgba(0,188,212,.05); color: #5a7a90; }
[data-theme="ocean"] td { border-bottom: 1px solid #122640; }
[data-theme="ocean"] tr:hover { background: rgba(0,188,212,.03); }
[data-theme="ocean"] .btn { background: #0b1929; border: 1px solid #1a3450; color: #c8dce8; }
[data-theme="ocean"] .btn:hover { border-color: #00bcd4; color: #00e5ff; }
[data-theme="ocean"] .btn-primary { background: linear-gradient(135deg, #00838f, #00bcd4); color: #fff; border: none; box-shadow: 0 4px 15px rgba(0,188,212,.25); }
[data-theme="ocean"] .btn-primary:hover { box-shadow: 0 6px 25px rgba(0,188,212,.4); }
[data-theme="ocean"] .btn-danger { color: #ef5350; border-color: rgba(239,83,80,.25); }
[data-theme="ocean"] .badge-green { background: rgba(0,150,136,.15); color: #4db6ac; }
[data-theme="ocean"] .badge-blue { background: rgba(0,188,212,.12); color: #00e5ff; }
[data-theme="ocean"] .badge-orange { background: rgba(255,152,0,.12); color: #ffb74d; }
[data-theme="ocean"] .badge-red { background: rgba(239,83,80,.12); color: #ef5350; }
[data-theme="ocean"] .form-input { background: #060d17; border: 1px solid #1a3450; color: #c8dce8; }
[data-theme="ocean"] .form-input:focus { border-color: #00bcd4; box-shadow: 0 0 10px rgba(0,188,212,.15); }
[data-theme="ocean"] .modal { background: #0b1929; border: 1px solid #1a3450; border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.4); }
[data-theme="ocean"] .modal-overlay { background: rgba(0,0,0,.6); }
[data-theme="ocean"] .code { background: #060d17; border: 1px solid #122640; color: #4db6ac; }
[data-theme="ocean"] .login-box { background: rgba(11,25,41,.9); border: 1px solid #1a3450; box-shadow: 0 0 60px rgba(0,188,212,.06); border-radius: 12px; }
[data-theme="ocean"] .login-logo { color: #00bcd4; text-shadow: 0 0 15px rgba(0,188,212,.4); }
[data-theme="ocean"] .login-box input { background: #060d17; border: 1px solid #1a3450; color: #c8dce8; }
[data-theme="ocean"] .page-title { color: #c8dce8; }
[data-theme="ocean"] .nav-group-title { color: #2a4a5a; }
[data-theme="ocean"] .table-wrap { border: 1px solid #122640; border-radius: 10px; overflow: hidden; }
[data-theme="ocean"] ::selection { background: rgba(0,188,212,.3); color: #fff; }

/* ===== 🔥 Lava Theme ===== */
[data-theme="lava"] {
  --bg: #0f0a08;
  --card: #1a1210;
  --border: #2a1a14;
  --text: #e8d0c0;
  --dim: #8a6a5a;
  --primary: #ff6b35;
  --primary-light: rgba(255,107,53,.08);
  --shadow: 0 4px 20px rgba(0,0,0,.3);
  --radius: 6px;
  font-family: 'Outfit', sans-serif;
}
[data-theme="lava"] body,
[data-theme="lava"] #app { background: #0f0a08; background-image: radial-gradient(ellipse at 20% 80%, rgba(255,107,53,.08) 0%, transparent 40%), radial-gradient(ellipse at 80% 60%, rgba(255,50,20,.06) 0%, transparent 35%), radial-gradient(ellipse at 50% 20%, rgba(255,160,0,.04) 0%, transparent 40%); background-attachment: fixed; }
[data-theme="lava"] .sidebar { background: #140e0b; border-right: 1px solid #2a1a14; }
[data-theme="lava"] .sidebar-logo { color: #ff6b35; text-shadow: 0 0 12px rgba(255,107,53,.5), 0 0 30px rgba(255,50,20,.2); font-weight: 700; }
[data-theme="lava"] .nav-item { color: #8a6a5a; }
[data-theme="lava"] .nav-item.active { background: rgba(255,107,53,.1); color: #ff8c5a; border-left: 3px solid #ff6b35; text-shadow: 0 0 6px rgba(255,107,53,.3); }
[data-theme="lava"] .nav-item:hover { background: rgba(255,107,53,.06); color: #ff8c5a; }
[data-theme="lava"] .card { background: #1a1210; border: 1px solid #2a1a14; border-radius: 6px; box-shadow: 0 4px 20px rgba(0,0,0,.2); transition: border-color .3s; }
[data-theme="lava"] .card:hover { border-color: rgba(255,107,53,.35); box-shadow: 0 4px 20px rgba(255,107,53,.06); }
[data-theme="lava"] .card-icon.blue { background: #c05020; }
[data-theme="lava"] .card-icon.green { background: #d4820a; }
[data-theme="lava"] .card-icon.orange { background: #ff6b35; }
[data-theme="lava"] .card-icon.purple { background: #a03020; }
[data-theme="lava"] .card-icon.red { background: #e02020; }
[data-theme="lava"] th { background: rgba(255,107,53,.05); color: #8a6a5a; }
[data-theme="lava"] td { border-bottom: 1px solid #2a1a14; }
[data-theme="lava"] tr:hover { background: rgba(255,107,53,.03); }
[data-theme="lava"] .btn { background: #1a1210; border: 1px solid #3a2a20; color: #e8d0c0; }
[data-theme="lava"] .btn:hover { border-color: #ff6b35; color: #ff8c5a; }
[data-theme="lava"] .btn-primary { background: linear-gradient(135deg, #e04020, #ff6b35); color: #fff; border: none; box-shadow: 0 4px 15px rgba(255,107,53,.3); }
[data-theme="lava"] .btn-primary:hover { box-shadow: 0 6px 25px rgba(255,107,53,.45); }
[data-theme="lava"] .btn-danger { color: #ff4040; border-color: rgba(255,64,64,.25); }
[data-theme="lava"] .badge-green { background: rgba(212,130,10,.15); color: #d4a20a; }
[data-theme="lava"] .badge-blue { background: rgba(192,80,32,.15); color: #e08040; }
[data-theme="lava"] .badge-orange { background: rgba(255,107,53,.15); color: #ff8c5a; }
[data-theme="lava"] .badge-red { background: rgba(224,32,32,.15); color: #ff4040; }
[data-theme="lava"] .form-input { background: #0f0a08; border: 1px solid #3a2a20; color: #e8d0c0; }
[data-theme="lava"] .form-input:focus { border-color: #ff6b35; box-shadow: 0 0 10px rgba(255,107,53,.2); }
[data-theme="lava"] .modal { background: #1a1210; border: 1px solid #3a2a20; border-radius: 8px; box-shadow: 0 16px 48px rgba(0,0,0,.4); }
[data-theme="lava"] .modal-overlay { background: rgba(0,0,0,.6); }
[data-theme="lava"] .code { background: #0f0a08; border: 1px solid #2a1a14; color: #d4820a; }
[data-theme="lava"] .login-box { background: #1a1210; border: 1px solid #3a2a20; box-shadow: 0 0 60px rgba(255,107,53,.06); border-radius: 8px; }
[data-theme="lava"] .login-logo { color: #ff6b35; text-shadow: 0 0 15px rgba(255,107,53,.5); }
[data-theme="lava"] .login-box input { background: #0f0a08; border: 1px solid #3a2a20; color: #e8d0c0; }
[data-theme="lava"] .page-title { color: #e8d0c0; }
[data-theme="lava"] .nav-group-title { color: #4a3a30; }
[data-theme="lava"] .table-wrap { border: 1px solid #2a1a14; border-radius: 6px; overflow: hidden; }
[data-theme="lava"] ::selection { background: rgba(255,107,53,.3); color: #fff; }

/* ===== 📰 Retro Editorial Theme ===== */
[data-theme="editorial"] {
  --bg: #f4efe4;
  --card: #faf7f0;
  --border: #d8d0c0;
  --text: #1a1a18;
  --dim: #6a6a60;
  --primary: #1a1a18;
  --primary-light: rgba(26,26,24,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.06);
  --radius: 2px;
  font-family: 'Noto Serif SC', 'Georgia', serif;
}
[data-theme="editorial"] body,
[data-theme="editorial"] #app { background: #f4efe4; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"); }
[data-theme="editorial"] .sidebar { background: #eee8dc; border-right: 2px solid #1a1a18; }
[data-theme="editorial"] .sidebar-logo { color: #1a1a18; font-family: 'Noto Serif SC', serif; font-weight: 700; font-size: 1rem; letter-spacing: 3px; text-transform: uppercase; border-bottom: 2px solid #1a1a18; padding-bottom: .6rem; margin: 0 1rem; }
[data-theme="editorial"] .nav-item { color: #4a4a40; font-family: 'Noto Serif SC', serif; font-size: .82rem; border-left: 2px solid transparent; }
[data-theme="editorial"] .nav-item.active { background: transparent; color: #1a1a18; border-left: 2px solid #1a1a18; font-weight: 700; }
[data-theme="editorial"] .nav-item:hover { background: rgba(26,26,24,.04); color: #1a1a18; }
[data-theme="editorial"] .card { background: #faf7f0; border: 1px solid #d8d0c0; border-radius: 2px; box-shadow: none; border-bottom: 2px solid #c8c0b0; }
[data-theme="editorial"] .card:hover { border-bottom-color: #1a1a18; }
[data-theme="editorial"] .card-icon { border-radius: 2px; }
[data-theme="editorial"] .card-icon.blue { background: #1a1a18; }
[data-theme="editorial"] .card-icon.green { background: #3a5a3a; }
[data-theme="editorial"] .card-icon.orange { background: #8a6a30; }
[data-theme="editorial"] .card-icon.purple { background: #4a3a5a; }
[data-theme="editorial"] .card-icon.red { background: #8a2020; }
[data-theme="editorial"] .card-label { text-transform: uppercase; letter-spacing: 1.5px; font-size: .68rem; }
[data-theme="editorial"] th { background: #eee8dc; color: #4a4a40; text-transform: uppercase; letter-spacing: 1px; font-size: .72rem; font-family: 'Noto Serif SC', serif; border-bottom: 2px solid #1a1a18; }
[data-theme="editorial"] td { border-bottom: 1px solid #d8d0c0; }
[data-theme="editorial"] tr:hover { background: rgba(26,26,24,.03); }
[data-theme="editorial"] .btn { background: #faf7f0; border: 1px solid #b8b0a0; color: #1a1a18; font-family: 'Noto Serif SC', serif; border-radius: 2px; }
[data-theme="editorial"] .btn:hover { background: #1a1a18; color: #faf7f0; }
[data-theme="editorial"] .btn-primary { background: #1a1a18; color: #faf7f0; border: none; border-radius: 2px; font-family: 'Noto Serif SC', serif; letter-spacing: 1px; }
[data-theme="editorial"] .btn-primary:hover { background: #3a3a38; }
[data-theme="editorial"] .btn-danger { color: #8a2020; border-color: #8a2020; }
[data-theme="editorial"] .btn-danger:hover { background: #8a2020; color: #faf7f0; }
[data-theme="editorial"] .badge { border-radius: 2px; font-family: 'Noto Serif SC', serif; }
[data-theme="editorial"] .badge-green { background: rgba(58,90,58,.1); color: #3a5a3a; }
[data-theme="editorial"] .badge-blue { background: rgba(26,26,24,.08); color: #1a1a18; }
[data-theme="editorial"] .badge-orange { background: rgba(138,106,48,.1); color: #8a6a30; }
[data-theme="editorial"] .badge-red { background: rgba(138,32,32,.1); color: #8a2020; }
[data-theme="editorial"] .form-input { background: #faf7f0; border: 1px solid #c8c0b0; color: #1a1a18; font-family: 'Noto Serif SC', serif; border-radius: 2px; }
[data-theme="editorial"] .form-input:focus { border-color: #1a1a18; box-shadow: none; }
[data-theme="editorial"] .modal { background: #faf7f0; border: 2px solid #1a1a18; border-radius: 2px; box-shadow: 8px 8px 0 rgba(26,26,24,.1); }
[data-theme="editorial"] .modal-overlay { background: rgba(26,26,24,.3); }
[data-theme="editorial"] .code { background: #eee8dc; border: 1px solid #d8d0c0; color: #1a1a18; font-family: 'Space Mono', monospace; border-radius: 2px; }
[data-theme="editorial"] .login-box { background: #faf7f0; border: 2px solid #1a1a18; box-shadow: 6px 6px 0 rgba(26,26,24,.1); border-radius: 2px; }
[data-theme="editorial"] .login-logo { color: #1a1a18; font-family: 'Noto Serif SC', serif; letter-spacing: 3px; }
[data-theme="editorial"] .login-box input { background: #f4efe4; border: 1px solid #c8c0b0; color: #1a1a18; font-family: 'Noto Serif SC', serif; border-radius: 2px; }
[data-theme="editorial"] .login-box button { background: #1a1a18; color: #faf7f0; font-family: 'Noto Serif SC', serif; border-radius: 2px; letter-spacing: 2px; }
[data-theme="editorial"] .login-box button:hover { background: #3a3a38; }
[data-theme="editorial"] .page-title { color: #1a1a18; font-family: 'Noto Serif SC', serif; border-bottom: 2px solid #1a1a18; padding-bottom: .4rem; }
[data-theme="editorial"] .nav-group-title { color: #8a8a80; text-transform: uppercase; letter-spacing: 2px; font-size: .65rem; }
[data-theme="editorial"] .table-wrap { border: 1px solid #d8d0c0; border-radius: 2px; overflow: hidden; }
[data-theme="editorial"] ::selection { background: #1a1a18; color: #faf7f0; }