:root{
  --primary:#1a1f4e;--primary-dark:#0d1130;--primary-mid:#2a3070;
  --primary-light:#5a6bd8;--primary-glow:#8b9dff;
  --primary-soft:#e8ecff;--primary-ultra-soft:#f2f4ff;
  --secondary:#7c5cbf;--secondary-light:#a48ae0;
  --secondary-soft:#f0eaff;--secondary-mist:#f7f3ff;
  --gold:#b8922e;--gold-light:#d4af37;--gold-soft:#faf4e4;--gold-glow:#ffd966;
  --teal:#1a6b6b;--teal-light:#2d9b9b;--teal-soft:#d9f2f2;
  --rose:#a84a6f;--rose-soft:#fce8f0;
  --neutral-50:#fbfbfd;--neutral-100:#f5f4f9;--neutral-200:#e9e7f2;
  --neutral-300:#d4d0e3;--neutral-400:#9d97b5;--neutral-500:#6e6688;
  --neutral-600:#4d4666;--neutral-700:#322c4a;--neutral-800:#1f1a33;--neutral-900:#0f0c1d;
  --bg-body:#f7f5fc;--bg-surface:#fff;--bg-surface-alt:#f4f1fc;
  --border-subtle:#e9e7f2;--border-default:#d4d0e3;
  --border-strong:#9d97b5;--border-brand:#a48ae0;
  --grad-primary:linear-gradient(135deg,#1a1f4e 0%,#7c5cbf 60%,#b8922e 130%);
  --grad-brand:linear-gradient(135deg,#7c5cbf 0%,#b8922e 100%);
  --grad-sidebar:linear-gradient(160deg,#0d1130 0%,#1a1f4e 40%,#2a1f4e 100%);
  --grad-line:linear-gradient(90deg,#7c5cbf,#b8922e);
  --grad-teal:linear-gradient(135deg,#2d9b9b,#1a6b6b);
  --grad-gold:linear-gradient(135deg,#d4af37,#b8922e);
  --shadow-xs:0 1px 3px rgba(15,12,29,.04);
  --shadow-sm:0 2px 8px rgba(26,31,78,.05),0 1px 3px rgba(15,12,29,.03);
  --shadow-md:0 12px 32px -10px rgba(26,31,78,.12),0 4px 14px -6px rgba(15,12,29,.05);
  --shadow-lg:0 28px 56px -16px rgba(26,31,78,.16),0 12px 24px -10px rgba(15,12,29,.06);
  --shadow-xl:0 36px 72px -18px rgba(26,31,78,.22),0 16px 32px -14px rgba(15,12,29,.08);
  --shadow-glow:0 0 0 5px rgba(124,92,191,.10);
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-2xl:28px;--r-full:999px;
  --t-fast:.15s ease;--t-base:.25s cubic-bezier(.4,0,.2,1);--t-slow:.4s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;line-height:1.6;color:var(--neutral-800);background:var(--bg-body);-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 70% 55% at 75% 5%,rgba(124,92,191,.08) 0%,transparent 65%),
  radial-gradient(ellipse 55% 45% at 15% 15%,rgba(26,31,78,.06) 0%,transparent 60%),
  radial-gradient(ellipse 45% 40% at 85% 25%,rgba(184,146,46,.05) 0%,transparent 55%),
  radial-gradient(ellipse 50% 45% at 50% 90%,rgba(26,107,107,.04) 0%,transparent 60%)}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',Georgia,serif;font-weight:700;color:var(--primary);line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4vw,3.25rem);font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2.25rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}
h4{font-size:1.125rem}
p{color:var(--neutral-600)}
a{color:var(--secondary);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--primary)}
::selection{background:var(--secondary-soft);color:var(--primary-dark)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--neutral-100)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5a6bd8,#7c5cbf,#b8922e);border-radius:var(--r-full);border:2px solid var(--neutral-100)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.01em;border:none;border-radius:var(--r-md);cursor:pointer;transition:all var(--t-base);text-decoration:none;white-space:nowrap;position:relative}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md),var(--shadow-glow);color:#fff}
.btn-outline{background:transparent;color:var(--secondary);border:1.5px solid var(--border-brand)}
.btn-outline:hover:not(:disabled){background:var(--primary-ultra-soft);border-color:var(--secondary);color:var(--secondary)}
.btn-ghost{background:transparent;color:var(--neutral-600)}
.btn-ghost:hover:not(:disabled){background:var(--primary-ultra-soft);color:var(--secondary)}
.btn-danger{background:linear-gradient(135deg,#c7456a,#a84a6f);color:#fff}
.btn-danger:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-sm{padding:8px 16px;font-size:13px;border-radius:var(--r-sm)}
.btn-lg{padding:16px 32px;font-size:16px;border-radius:var(--r-lg)}
.btn-block{width:100%}
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:13px;font-weight:600;color:var(--neutral-700);margin-bottom:8px;letter-spacing:.01em}
.form-label .req{color:var(--rose);margin-left:2px}
.form-control{width:100%;padding:13px 16px;font-family:inherit;font-size:14px;color:var(--neutral-800);background:var(--bg-surface);border:1.5px solid var(--border-subtle);border-radius:var(--r-md);transition:all var(--t-base);outline:none}
.form-control::placeholder{color:var(--neutral-400)}
.form-control:hover{border-color:var(--border-default)}
.form-control:focus{border-color:var(--border-brand);box-shadow:var(--shadow-glow)}
textarea.form-control{resize:vertical;min-height:100px}
select.form-control{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6688' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
.input-icon{position:relative}
.input-icon .form-control{padding-left:44px}
.input-icon>i{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--neutral-400);pointer-events:none;transition:color var(--t-base)}
.input-icon:focus-within>i{color:var(--secondary)}
.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm);transition:all var(--t-base)}
.card:hover{box-shadow:var(--shadow-md)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:11px;font-weight:700;letter-spacing:.03em;border-radius:var(--r-full);text-transform:uppercase}
.badge-active{background:var(--teal-soft);color:var(--teal)}
.badge-disabled{background:var(--neutral-200);color:var(--neutral-500)}
.badge-pending{background:var(--gold-soft);color:var(--gold)}
.badge-banned{background:var(--rose-soft);color:var(--rose)}
.badge-admin{background:var(--secondary-soft);color:var(--secondary)}
.badge-user{background:var(--primary-ultra-soft);color:var(--primary-light)}
.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;padding:14px 18px;min-width:280px;max-width:380px;background:rgba(255,255,255,.92);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--border-subtle);border-radius:var(--r-md);box-shadow:var(--shadow-lg);pointer-events:auto;animation:toastIn .35s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}
.toast.success::before{background:var(--grad-teal)}
.toast.error::before{background:linear-gradient(135deg,#c7456a,#a84a6f)}
.toast.info::before{background:var(--grad-brand)}
.toast.warning::before{background:var(--grad-gold)}
.toast-icon{width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.toast.success .toast-icon{color:var(--teal)}
.toast.error .toast-icon{color:var(--rose)}
.toast.info .toast-icon{color:var(--secondary)}
.toast.warning .toast-icon{color:var(--gold)}
.toast-message{font-size:13.5px;font-weight:500;color:var(--neutral-800);flex:1}
.toast.removing{animation:toastOut .3s forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(100%) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translateX(100%) scale(.9)}}
.modal-overlay{position:fixed;inset:0;background:rgba(15,12,29,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}
.modal-overlay.active{display:flex}
.modal{background:var(--bg-surface);border-radius:var(--r-xl);box-shadow:var(--shadow-xl);width:100%;max-width:520px;max-height:90vh;overflow-y:auto;animation:modalIn .3s cubic-bezier(.4,0,.2,1)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:1px solid var(--border-subtle)}
.modal-title{font-family:'Playfair Display',serif;font-size:1.25rem;font-weight:700;color:var(--primary)}
.modal-close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--r-sm);color:var(--neutral-400);cursor:pointer;transition:all var(--t-fast)}
.modal-close:hover{background:var(--primary-ultra-soft);color:var(--secondary)}
.modal-body{padding:26px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:18px 26px;border-top:1px solid var(--border-subtle)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.table-wrap{overflow-x:auto;border-radius:var(--r-md)}
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table thead th{text-align:left;padding:12px 16px;background:var(--neutral-50);color:var(--neutral-500);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-subtle);white-space:nowrap}
.table tbody td{padding:14px 16px;border-bottom:1px solid var(--border-subtle);color:var(--neutral-700);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr:hover{background:var(--primary-ultra-soft)}
.empty-state{text-align:center;padding:60px 20px;color:var(--neutral-400)}
.empty-state svg,.empty-state i{font-size:56px;margin-bottom:16px;opacity:.4}
.empty-state h4{color:var(--neutral-600);margin-bottom:6px}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.spinner-dark{border-color:rgba(124,92,191,.2);border-top-color:var(--secondary)}
@keyframes spin{to{transform:rotate(360deg)}}
.hidden{display:none!important}
.text-center{text-align:center}
.text-muted{color:var(--neutral-500)}
.text-sm{font-size:13px}
.text-xs{font-size:11.5px}
.font-mono{font-family:'SF Mono',Monaco,'Cascadia Code',monospace}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mb-4{margin-bottom:16px}
@media(max-width:768px){body{font-size:14px}.toast-container{top:12px;right:12px;left:12px}.toast{min-width:auto;max-width:100%}.modal{max-width:100%;border-radius:var(--r-lg)}}