:root { color-scheme: dark; --acid: #d8ff3e; --ink: #eef3eb; --muted: #8f9994; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #080b0d; font-family: "Avenir Next", "PingFang SC", sans-serif; }
button, input, select { font: inherit; }
.auth-gate { position: fixed; z-index: 1000; inset: 0; padding: 24px; display: grid; place-items: center; background: radial-gradient(circle at 60% 20%, #1b2619, #070a0b 62%); }
.auth-card { width: min(440px, 100%); padding: 32px; border: 1px solid #30383b; border-radius: 6px; background: #101517; }
.auth-card h1 { margin: 13px 0 9px; }
.auth-card p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.auth-kicker { color: var(--acid); font: 700 10px "SFMono-Regular", monospace; letter-spacing: .18em; }
.auth-card form { margin-top: 20px; grid-template-columns: 1fr; }
.auth-card form button { color: #111607; border-color: var(--acid); background: var(--acid); }
.auth-tabs { margin-top: 20px; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #080b0c; }
.auth-tabs button, .auth-link { min-height: 40px; color: #aab3ad; border: 0; background: transparent; }
.auth-tabs button.active { color: #111607; background: var(--acid); }
.auth-link { width: 100%; margin-top: 12px; }
.auth-message { min-height: 20px; color: #ff8d84 !important; }
.campaign-list { display: grid; gap: 7px; }
.campaign-list div { padding: 10px; display: grid; gap: 3px; border: 1px solid #334033; }
.campaign-list b { color: var(--acid); }
.campaign-list span, .campaign-list small { color: #adb6b0; font-size: 11px; }
.portal-shell { width: min(1440px, calc(100% - 40px)); margin: auto; padding: 30px 0 60px; }
.portal-header { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; }
.kicker { color: var(--acid); font: 700 10px "SFMono-Regular", monospace; letter-spacing: .2em; }
h1 { margin: 7px 0 0; font-size: 36px; }
h2 { margin: 0 0 18px; font-size: 18px; }
nav { display: flex; gap: 8px; }
nav a, nav button, .panel button { padding: 10px 14px; color: #d9e0db; border: 1px solid #344044; border-radius: 3px; background: #121719; text-decoration: none; cursor: pointer; }
.deyes-account-status { min-width: 140px; padding: 6px 11px; display: grid; align-content: center; gap: 2px; border: 1px solid #344044; border-radius: 3px; background: #121719; }
.deyes-account-status span { max-width: 190px; overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.deyes-account-status small { color: var(--acid); font: 700 9px "SFMono-Regular", monospace; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.panel { margin-bottom: 14px; padding: 20px; border: 1px solid #293236; border-radius: 5px; background: #101517; }
form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; }
input, select { width: 100%; height: 44px; padding: 0 11px; color: white; border: 1px solid #344044; background: #090d0e; }
form button { min-height: 44px; align-self: end; color: #111607 !important; border-color: var(--acid) !important; background: var(--acid) !important; font-weight: 800; }
.section-title { display: flex; align-items: center; justify-content: space-between; }
.section-title span { color: var(--muted); font-size: 12px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 11px 10px; border-top: 1px solid #273033; text-align: left; white-space: nowrap; }
th { color: #7f8a84; font-size: 10px; }
code { color: var(--acid); }
.badge { padding: 4px 8px; color: #c9a39f; border-radius: 12px; background: #3a201e; }
.badge.good { color: #d8ff3e; background: #273314; }
.badge.danger { color: #ffd0cb; background: #5b211d; }
.message { min-height: 20px; color: var(--acid); font-size: 12px; }
.message.error { color: #ff887f; }
.history-search form { grid-template-columns: minmax(220px, 420px) 140px; }
.session-list { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.session-list button { display: grid; gap: 3px; text-align: left; }
.session-list b { color: var(--acid); font-family: "SFMono-Regular", monospace; }
.session-list span, .session-list small { color: var(--muted); font-size: 10px; }
.archive-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 14px; }
.archive-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 8px; }
.archive-grid a { overflow: hidden; color: #c5cdc8; border: 1px solid #2b3437; text-decoration: none; }
.archive-grid img { width: 100%; aspect-ratio: 3 / 4; display: block; object-fit: cover; }
.archive-grid span { padding: 8px; display: block; font-size: 10px; }
.recording-list { display: grid; gap: 10px; }
.recording-list article { overflow: hidden; border: 1px solid #2b3437; }
.recording-list video { width: 100%; display: block; background: #000; }
.recording-list div { padding: 9px; display: flex; justify-content: space-between; font-size: 11px; }
.recording-list span { color: var(--muted); }
.storage-command { display: grid; grid-template-columns: minmax(340px, .8fr) minmax(440px, 1.2fr); gap: 14px; }
.storage-gauge { position: relative; overflow: hidden; }
.storage-gauge::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; bottom: -95px; border: 1px solid #d8ff3e22; border-radius: 50%; box-shadow: 0 0 70px #d8ff3e12; }
.storage-meter { height: 9px; margin: 28px 0 14px; overflow: hidden; border: 1px solid #333d40; background: #070a0b; }
.storage-meter i { width: 0; height: 100%; display: block; background: var(--acid); transition: width .5s ease; }
.storage-meter i.warning { background: #ffb84d; }
.storage-meter i.blocked { background: #ff6259; }
.storage-gauge > strong { font: 800 44px "SFMono-Regular", monospace; }
.storage-gauge > p { max-width: 620px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.storage-gauge > button { position: relative; z-index: 1; padding: 10px 14px; color: #d9e0db; border: 1px solid #344044; background: #121719; }
.device-shell { max-width: 1180px; }
.device-summary { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 30px; }
.device-summary > div { display: grid; gap: 7px; }
.device-summary strong { color: var(--acid); font: 800 42px "SFMono-Regular", monospace; }
.device-summary small, .device-summary p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.device-card { position: relative; min-height: 300px; padding: 22px; display: flex; flex-direction: column; border: 1px solid #293236; background: linear-gradient(145deg, #111719, #0a0e0f); }
.device-card.current { border-color: #779124; box-shadow: inset 0 0 35px #d8ff3e08; }
.device-icon { width: 48px; height: 48px; display: grid; place-items: center; color: #0b1006; border-radius: 50%; background: var(--acid); font: 900 18px "SFMono-Regular", monospace; }
.device-heading { margin: 22px 0; }
.device-heading span { color: var(--acid); font: 700 9px "SFMono-Regular", monospace; letter-spacing: .12em; }
.device-heading h2 { margin: 6px 0 0; font-size: 22px; }
.device-card dl { margin: 0; display: grid; gap: 9px; }
.device-card dl div { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 8px; border-bottom: 1px solid #222b2e; }
.device-card dt { color: #77827c; font-size: 10px; }
.device-card dd { margin: 0; color: #c9d0cc; font-size: 10px; text-align: right; }
.device-actions { margin-top: auto; padding-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.device-actions button { min-height: 40px; color: #dce2de; border: 1px solid #344044; background: #13191b; }
.device-actions .danger-button { color: #ffaaa3; border-color: #5e302c; }
.expiry-reminder { position: fixed; z-index: 1200; top: 18px; left: 50%; width: min(560px, calc(100% - 32px)); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; transform: translateX(-50%); color: #101406; border: 1px solid #ebff94; background: var(--acid); box-shadow: 0 18px 70px #000b; }
.expiry-reminder div { display: grid; gap: 3px; }
.expiry-reminder b { font-size: 13px; }
.expiry-reminder span { font-size: 11px; }
.expiry-reminder button { color: #101406; border: 0; background: transparent; font-size: 24px; }
@media (max-width: 820px) {
  .portal-grid, .archive-layout, .storage-command, .device-grid { grid-template-columns: 1fr; }
  .portal-header { align-items: flex-start; gap: 18px; flex-direction: column; }
  nav { flex-wrap: wrap; }
  form { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .device-summary { grid-template-columns: 1fr; }
}