:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0c111b; color: #edf2ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #26375c 0, #111827 36%, #0c111b 72%); }
.shell { width: min(1100px, calc(100% - 36px)); margin: 0 auto; padding: 52px 0 80px; }
.login-shell { width: min(440px, calc(100% - 36px)); margin: 0 auto; padding: 12vh 0; }
.login-card { border: 1px solid #ffffff12; background: #121a2aee; border-radius: 18px; padding: 30px; box-shadow: 0 14px 45px #00000020; display: grid; gap: 15px; }
.login-card h1 { font-size: 36px; }.login-card .primary { margin-top: 6px; }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.header-actions { display: flex; align-items: center; gap: 9px; }.user-badge { color: #aebbd4; font-size: 13px; }
.eyebrow { color: #80a6ff; letter-spacing: .16em; font-size: 12px; font-weight: 700; margin: 0 0 10px; }
h1 { margin: 0; font-size: clamp(32px, 6vw, 58px); letter-spacing: -.05em; }
h2 { margin: 0; font-size: 20px; }
.subtitle { color: #9ba8c4; margin: 12px 0 0; }
button { border: 0; border-radius: 10px; color: inherit; cursor: pointer; font: inherit; }
.primary { background: #5d7fff; padding: 12px 18px; font-weight: 700; box-shadow: 0 8px 30px #405ecb44; }
.primary:hover { background: #7694ff; }
.ghost { background: #ffffff0d; padding: 9px 14px; color: #aebbd4; }
.statusbar { display: flex; align-items: center; gap: 9px; color: #aab6ce; font-size: 14px; margin-bottom: 18px; }
.status-dot { width: 9px; height: 9px; border-radius: 99px; background: #e6a33b; box-shadow: 0 0 14px currentColor; }
.status-dot.ok { background: #45d39d; }.status-dot.bad { background: #ed687a; }
.count { margin-left: auto; color: #71809c; }
.panel, .card { border: 1px solid #ffffff12; background: #121a2aee; border-radius: 18px; box-shadow: 0 14px 45px #00000020; }
.panel { padding: 22px; margin-bottom: 20px; }.panel-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
label { display: grid; gap: 7px; color: #aebbd4; font-size: 13px; }
input, textarea { border: 1px solid #ffffff17; background: #0a101b; color: #f5f7ff; border-radius: 9px; padding: 10px 11px; font: inherit; outline: none; }
input:focus, textarea:focus { border-color: #6f8eff; box-shadow: 0 0 0 3px #6f8eff22; }
.check { display: flex; align-items: center; align-self: end; grid-template-columns: auto 1fr; padding-bottom: 11px; }.check input { accent-color: #6f8eff; }
.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }.error { color: #ff8797; font-size: 13px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.card { padding: 20px; }.card-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.name { font-size: 21px; font-weight: 750; }.type { color: #83a5ff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }.disabled { opacity: .55; }
.pill { border: 1px solid #45d39d55; color: #6be3b3; padding: 5px 9px; border-radius: 999px; font-size: 11px; }.pill.off { border-color: #ffffff22; color: #8a96ad; }
.details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }.detail { background: #0a101b88; border-radius: 10px; padding: 10px 12px; }.detail small { display: block; color: #75829b; margin-bottom: 5px; }.detail code { color: #e5eaff; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }.actions button { background: #ffffff0d; padding: 9px 12px; color: #c8d2e7; font-size: 13px; }.actions button:hover { background: #ffffff18; }.actions .copy { background: #344b91; color: #fff; }
.users-list { display: grid; gap: 8px; }.user-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: #0a101b88; }.user-row span { display: block; color: #8794ad; font-size: 12px; margin-top: 4px; }.user-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #ffffff12; }.user-form .form-actions { grid-column: 1 / -1; }
.empty { text-align: center; color: #7d8ba7; padding: 70px 0; }.hidden { display: none !important; }
@media (max-width: 760px) { .shell { width: min(100% - 24px, 620px); padding-top: 30px; }.hero { align-items: start; flex-direction: column; }.header-actions { width: 100%; flex-wrap: wrap; }.form-grid, .cards, .user-form { grid-template-columns: 1fr; }.details { grid-template-columns: 1fr; }.primary { width: 100%; } }