:root { color-scheme: dark; --bg:#0b1120; --panel:#111a2d; --panel2:#17233d; --text:#edf3ff; --muted:#8ea1c0; --line:#273756; --primary:#5f8cff; --danger:#ff6f7d; --success:#35d49a; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background: radial-gradient(circle at top left,#18284b 0,#0b1120 42%); color:var(--text); font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; border:0; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(430px,100%); background:rgba(17,26,45,.94); border:1px solid var(--line); border-radius:24px; padding:32px; box-shadow:0 24px 80px #0006; }
.logo { display:flex; align-items:center; gap:12px; font-size:22px; font-weight:800; margin-bottom:8px; }
.logo-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg,#6c9bff,#9d73ff); }
.muted { color:var(--muted); }
.field { display:grid; gap:8px; margin:16px 0; }
.field label { color:#bbc9e4; font-size:13px; }
input,select,textarea { width:100%; color:var(--text); background:#0c1527; border:1px solid var(--line); border-radius:10px; padding:11px 12px; outline:none; }
input:focus,select:focus,textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px #5f8cff22; }
textarea { min-height:120px; resize:vertical; }
.primary,.ghost,.danger { padding:10px 14px; border-radius:10px; font-weight:700; }
.primary { background:var(--primary); color:white; }
.ghost { background:#20304f; color:#e7efff; }
.danger { background:#492335; color:#ffb4bd; }
button:disabled { opacity:.5; cursor:not-allowed; }
.shell { display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.sidebar { border-right:1px solid var(--line); background:#0a1222d9; padding:22px 16px; }
.nav { display:grid; gap:8px; margin-top:30px; }
.nav button { padding:12px 14px; text-align:left; background:transparent; color:var(--muted); border-radius:12px; }
.nav button.active,.nav button:hover { background:#18284a; color:white; }
.sidebar-bottom { position:fixed; bottom:20px; width:218px; display:grid; gap:10px; }
.content { padding:28px clamp(18px,4vw,48px); max-width:1500px; width:100%; }
.topbar { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:28px; }
.topbar h1 { margin:0; font-size:28px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.grid { display:grid; gap:16px; }
.stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { background:linear-gradient(180deg,#14213a,#101a2c); border:1px solid var(--line); border-radius:18px; padding:20px; }
.stat-value { font-size:32px; font-weight:800; margin-top:10px; }
.stat-label { color:var(--muted); font-size:13px; }
.two { grid-template-columns:1.3fr .7fr; }
.table-card { margin-top:20px; overflow:hidden; padding:0; }
.table-toolbar { display:flex; justify-content:space-between; gap:12px; padding:16px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.table-toolbar .search { flex:1; min-width:220px; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:14px 16px; border-bottom:1px solid #20304b; font-size:14px; vertical-align:top; }
th { color:#9db0d1; font-weight:600; }
tr:last-child td { border-bottom:0; }
.badge { display:inline-flex; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; background:#273758; color:#c7d7f5; }
.badge.success { color:#9cf1cf; background:#123d36; }.badge.warn {color:#ffe096;background:#4a3c18}.badge.danger {color:#ffb8c0;background:#472131}
.modal { position:fixed; inset:0; background:#0009; display:grid; place-items:center; padding:20px; z-index:10; }
.modal-card { width:min(720px,100%); max-height:90vh; overflow:auto; background:#111a2d; border:1px solid var(--line); border-radius:18px; padding:22px; }
.modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }.modal-head h2 { margin:0; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }.span-2 { grid-column:1/-1; }
.empty { padding:42px; text-align:center; color:var(--muted); }
pre.mail-body { white-space:pre-wrap; font-family:inherit; line-height:1.6; color:#dce6fb; background:#0b1324; border-radius:12px; padding:16px; }
.small { font-size:12px; }.error { color:#ff9ea9; margin:12px 0; }.success-text { color:#83e7bc; }
@media (max-width:950px) { .shell { grid-template-columns:1fr; }.sidebar { position:static; border-right:0; border-bottom:1px solid var(--line); }.nav { grid-template-columns:repeat(4,1fr); margin-top:18px; }.nav button { text-align:center; }.sidebar-bottom { position:static; width:auto; display:flex; justify-content:space-between; margin-top:16px; }.stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.two { grid-template-columns:1fr; } }
@media (max-width:600px) { .nav { grid-template-columns:repeat(2,1fr); }.stats { grid-template-columns:1fr; }.form-grid { grid-template-columns:1fr; }.span-2 { grid-column:auto; }.topbar { align-items:flex-start; flex-direction:column; } table { min-width:780px; }.table-card { overflow:auto; } }
.toast { position:fixed; right:20px; bottom:20px; padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:#182a48; box-shadow:0 10px 30px #0006; z-index:30; }.toast.success{color:#9cf1cf;border-color:#256c58}.toast.error{color:#ffb8c0;border-color:#7a3042}