:root { --ink:#172238; --ink-2:#304866; --coral:#ef7a54; --paper:#f7f2e9; --panel:#fffaf2; --line:#d8d1c7; --muted:#6f7580; --danger:#a33d31; --success:#285d50; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:#172238; background:#eee9e0; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; background:linear-gradient(rgba(23,34,56,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(23,34,56,.045) 1px,transparent 1px),var(--paper); background-size:32px 32px; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
.topbar { min-height:72px; padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; color:#fff7ed; background:var(--ink); border-bottom:5px solid var(--coral); }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand > span { width:38px; height:38px; display:grid; place-items:center; color:var(--ink); border-radius:7px 7px 2px 7px; background:var(--coral); font-weight:900; }
.brand strong { font-size:15px; }
.admin-shell { width:min(1180px,calc(100% - 40px)); margin:28px auto 60px; display:grid; gap:18px; }
.hero { min-height:210px; padding:34px; display:flex; align-items:center; justify-content:space-between; gap:30px; overflow:hidden; color:#fff8ef; border:1px solid #3e526d; border-radius:8px 8px 3px 8px; background:linear-gradient(110deg,#172238 0 70%,#263a58 70%); box-shadow:8px 8px 0 rgba(23,34,56,.13); }
.hero.compact { min-height:150px; }
.hero h1 { max-width:700px; margin:9px 0 9px; font-size:clamp(28px,4vw,50px); line-height:1.02; letter-spacing:-1.5px; }
.hero.compact h1 { font-size:30px; }
.hero p { max-width:660px; margin:0; color:#bdc8d6; line-height:1.6; }
.hero-number { min-width:150px; padding:20px; text-align:center; color:var(--ink); border-radius:6px 6px 2px 6px; background:var(--coral); box-shadow:6px 6px 0 #0d1727; }
.hero-number strong,.hero-number span { display:block; }
.hero-number strong { font:900 48px/1 ui-monospace,monospace; }
.hero-number span { margin-top:7px; font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:1px; }
.kicker { color:#bd5437; font-size:10px; font-weight:900; letter-spacing:1.5px; }
.hero .kicker { color:#ff9b78; }
.panel { padding:25px; border:1px solid var(--line); border-radius:7px 7px 2px 7px; background:var(--panel); box-shadow:6px 6px 0 rgba(56,43,35,.08); }
.panel h2 { margin:6px 0 7px; font-size:22px; }
.panel > p { margin:0 0 16px; color:var(--muted); line-height:1.5; }
.create-panel { display:grid; grid-template-columns:250px 1fr; gap:26px; align-items:end; }
.create-panel p { color:var(--muted); line-height:1.5; }
.create-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:end; }
.create-grid .note-field { grid-column:span 2; }
label { display:grid; gap:7px; }
label > span { color:#5c6470; font-size:10px; font-weight:850; text-transform:uppercase; letter-spacing:.8px; }
input,select { width:100%; min-height:46px; padding:0 12px; color:var(--ink); border:1px solid #b9c2ce; border-radius:5px 5px 2px 5px; background:#fff; outline:none; }
input:focus,select:focus { border-color:var(--ink-2); box-shadow:0 0 0 3px rgba(48,72,102,.16); }
button,.link-button { min-height:44px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:5px 5px 2px 5px; cursor:pointer; font-size:11px; font-weight:850; text-decoration:none; }
.primary { color:#fff8ef; border-color:#172238; background:#223550; box-shadow:inset 0 -4px #101a2a; }
.primary:hover { background:#304866; }
.ghost { color:#dbe3ec; border-color:#53667f; background:transparent; }
.ghost:hover { color:var(--ink); background:#fff8ef; }
.danger-button { color:#963f2e; border-color:#dfb8ac; background:#fff4ef; }
.danger-button:hover { color:#fff; background:#963f2e; }
.panel-heading { margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.panel-heading h2 { margin:5px 0 0; }
.panel-heading > strong { min-width:42px; padding:9px; text-align:center; color:#fff8ef; border-radius:4px; background:var(--ink-2); }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:14px 12px; text-align:left; border-bottom:1px solid #e2dbd1; font-size:12px; }
th { color:#69707a; font-size:9px; text-transform:uppercase; letter-spacing:1px; }
code { font-family:"SFMono-Regular",Consolas,monospace; }
.row-link { color:#b74c31; font-weight:850; text-decoration:none; }
.status { display:inline-flex; padding:6px 8px; border-radius:4px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.7px; }
.status.active { color:#1f5e4f; background:#dff0e9; }
.status.expired,.status.suspended { color:#8b5b19; background:#fff0ce; }
.status.revoked { color:#923d32; background:#fde5df; }
.status.large { padding:12px 15px; font-size:11px; }
.notice { padding:17px 19px; display:flex; align-items:center; gap:13px; border:1px solid; border-radius:6px 6px 2px 6px; }
.notice.success { color:#174c40; border-color:#a7cebf; background:#e7f4ef; }
.notice.danger { color:#8f382c; border-color:#e5b9ae; background:#fff0eb; }
.notice code { padding:8px 11px; color:#fff; border-radius:4px; background:var(--ink); font-size:14px; }
.notice span { color:#65716d; font-size:11px; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.inline-form { display:flex; align-items:stretch; gap:9px; }
.inline-form select { min-width:130px; }
.device-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.device-card { padding:17px; border:1px solid #d7d0c7; border-radius:6px 6px 2px 6px; background:#f8f3ea; }
.device-card > div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.device-card > div span { font-size:12px; font-weight:850; }
.device-card > div strong { color:#6e7580; font:700 10px ui-monospace,monospace; }
.device-card dl { margin:14px 0; display:grid; grid-template-columns:110px 1fr; gap:7px; font-size:10px; }
.device-card dt { color:#7b8088; }
.device-card dd { margin:0; font-weight:700; }
.revoked-device { opacity:.62; }
.event-list { display:grid; }
.event-list > div { min-height:58px; display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:10px; border-top:1px solid #e3dcd2; }
.event-dot { width:7px; height:7px; border-radius:50%; background:var(--coral); }
.event-list p,.event-list strong,.event-list small { display:block; margin:0; }
.event-list strong { font-size:11px; text-transform:capitalize; }
.event-list small { margin-top:3px; color:var(--muted); font-size:10px; }
.event-list time { color:#7b8088; font-size:9px; }
.empty { padding:28px; text-align:center; color:var(--muted); }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--ink); }
.login-card { width:min(440px,100%); padding:34px; border:1px solid #536a88; border-radius:9px 9px 3px 9px; background:var(--panel); box-shadow:10px 10px 0 rgba(0,0,0,.24); }
.login-card h1 { margin:8px 0; font-size:34px; line-height:1.05; }
.login-card > p { color:var(--muted); line-height:1.6; }
.stack { display:grid; gap:14px; margin-top:22px; }
@media (max-width:850px) { .create-panel,.settings-grid { grid-template-columns:1fr; } .create-grid { grid-template-columns:1fr 1fr; } .device-grid { grid-template-columns:1fr; } .hero-number { display:none; } }
@media (max-width:560px) { .admin-shell { width:min(100% - 24px,1180px); } .topbar { padding:0 12px; } .create-grid { grid-template-columns:1fr; } .create-grid .note-field { grid-column:auto; } .hero,.panel { padding:20px; } .inline-form { flex-direction:column; } .notice { align-items:flex-start; flex-direction:column; } }