:root {
  color-scheme: dark;
  --background: #0a0e17;
  --background-2: #0f1420;
  --panel: #141a28;
  --panel-2: #1a2130;
  --border: #293344;
  --border-soft: #202938;
  --text: #f4f8fb;
  --muted: #9aa9bc;
  --subtle: #6f7e93;
  --mint: #90f2ce;
  --mint-dark: #102d2a;
  --mint-border: #326c5e;
  --aqua: #7bc6e6;
  --red: #ff858d;
  --red-bg: #37222b;
  --highlight: #b9c8ff;
  --highlight-bg: #242a51;
  --shadow: 0 24px 70px rgba(0,0,0,.20);
  --radius: 20px;
  --radius-sm: 13px;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--background); color: var(--text); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; text-decoration: none; }
::selection { background: #5cd8ad; color: #071610; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
svg { flex: none; }
.icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 17px; height: 17px; }
.icon-lg { width: 25px; height: 25px; }
.sr-only { position: absolute; overflow: hidden; clip: rect(0,0,0,0); width: 1px; height: 1px; white-space: nowrap; }

/* Layout */
.shell { display: grid; grid-template-columns: 254px minmax(0,1fr); min-height: 100dvh; }
.sidebar { display: flex; flex-direction: column; position: sticky; top:0; height:100dvh; padding: 35px 20px 22px; border-right: 1px solid var(--border-soft); background: #0e1420; }
.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; letter-spacing: .095em; font-size: 20px; font-weight: 760; }
.brand span.thin { font-weight: 430; color: #a4b5c9; letter-spacing: .02em; font-size: 11px; margin-left: -5px; align-self: flex-end; margin-bottom: 3px; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #4b8b78; background: linear-gradient(145deg, #1d4f46, #142b35); border-radius: 12px; color: var(--mint); box-shadow: inset 0 1px rgba(255,255,255,.13); }
.brand-mark svg { width: 25px; height: 25px; }
.sidebar-label { margin: 57px 13px 16px; font-size: 10px; letter-spacing: .17em; font-weight: 800; color: #66788e; text-transform: uppercase; }
.sidebar-nav { display: grid; gap: 6px; }
.nav-item { border: 1px solid transparent; background: transparent; color: #9caec2; display: flex; align-items:center; gap: 14px; padding: 13px 14px; font-weight: 550; font-size: 13px; border-radius: 12px; text-align: left; width: 100%; transition: background .16s ease, color .16s ease, border .16s ease; }
.nav-item:hover { color: #fff; background: #1a2632; }
.nav-item.active { background: #18312f; color: #a7f6d8; border-color: #244b45; }
.nav-item.active .icon { color: #93f0ca; }
.sidebar-bottom { margin-top: auto; }
.sidebar-status { padding: 17px 15px; border: 1px solid var(--border); border-radius: 15px; background: rgba(32,41,58,.43); }
.status-title { display: flex; align-items: center; gap: 8px; color: #dbece7; font-weight: 620; font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(144,242,206,.1); }
.sidebar-status p { font-size: 11px; color: var(--subtle); margin: 7px 0 0; line-height: 1.55; }
.sidebar-footer { color: #56697d; font-size: 11px; margin: 25px 13px 0; }
.main { min-width: 0; padding: 29px clamp(22px,4.3vw,66px) 60px; }
.main-inner { max-width: 1290px; margin: auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap: 20px; min-height: 50px; margin-bottom: 39px; }
.breadcrumb { display:flex; gap: 10px; align-items:center; color: var(--subtle); font-size: 12px; }
.breadcrumb strong { color: #d7e7ed; font-weight: 550; }
.breadcrumb .slash { color: #415368; }
.top-right { display:flex; gap: 12px; align-items:center; }
.top-separator { height: 23px; width:1px; background: var(--border); }
.avatar { height: 37px; width: 37px; display: grid; place-items:center; color:#aaf7d6; border:1px solid #315a52; border-radius:11px; background:#1c3734; font-weight:700; }
.account-name { font-size: 12px; font-weight: 650; }
.account-email { color: var(--subtle); font-size: 11px; }
.account-text { text-align:right; }
.log-out { background: none; border: 1px solid var(--border); color: var(--muted); width: 37px; height:37px; border-radius: 11px; display:grid; place-items:center; }
.log-out:hover { border-color: #537566; color:#fff; }
.mobile-header, .bottom-nav { display: none; }

/* Type and sections */
.eyebrow { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .17em; color: var(--mint); }
.page-intro { display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; margin-bottom: 28px; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(29px,3vw,40px); letter-spacing: -.055em; line-height: 1.2; font-weight: 720; margin-bottom: 12px; }
.page-intro p { font-size: 14px; color: var(--muted); margin: 0; }
h2 { font-size: 19px; line-height: 1.25; letter-spacing: -.03em; font-weight: 710; margin-bottom: 5px; }
h3 { font-size: 15px; font-weight: 680; margin-bottom: 6px; }
.panel-title-row { display:flex; justify-content:space-between; gap: 15px; align-items:center; margin-bottom: 22px; }
.panel-sub { color: var(--muted); font-size: 12px; margin: 0; }
.muted { color: var(--muted); }
.dim { color: var(--subtle); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.small { font-size: 12px; }
.count-tag { font-size:11px; font-weight:750; padding: 5px 10px; border:1px solid #34473f; color: var(--mint); background:#152d28; border-radius: 99px; }

/* Buttons and forms */
.btn { min-height: 43px; display:inline-flex; align-items:center; justify-content:center; gap: 9px; padding: 10px 17px; border-radius: 11px; border:1px solid transparent; font-size: 12px; font-weight: 750; transition:transform .15s,background .15s,border .15s; white-space: nowrap; }
.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn-primary { background: #95f2cf; color: #092a23; box-shadow:0 5px 20px rgba(65,174,134,.13); }
.btn-primary:hover:not(:disabled) { background:#b4ffe1; }
.btn-secondary { color: #dceae8; background: #252f3f; border-color:#38485b; }
.btn-secondary:hover { background:#334155; }
.btn-outline { color:#cce2dd; background:transparent; border-color:#35574c; }
.btn-outline:hover { background:#1b332d; }
.btn-ghost { border-color:var(--border); background:#1b2330; color:#b9cbda; }
.btn-ghost:hover { border-color:#527262; }
.btn-danger { background:#4b2a32; border-color:#74414d; color:#ffb1b5; }
.btn-danger:hover { background:#61323c; }
.btn-sm { min-height:34px; padding: 7px 11px; font-size:11px; border-radius:9px; }
.btn-wide { width:100%; }
.text-action { background:none; border:0; padding:5px 0; color:var(--mint); font-weight:650; font-size:12px; }
.text-action:hover { color:#c9ffe9; }
.form-label { display:block; font-size:12px; font-weight:650; margin-bottom:8px; color:#dce6f2; }
.form-field { min-width: 0; }
.input { display:block; width:100%; min-width:0; height:47px; border-radius:11px; border:1px solid #364355; color:#edf4fb; background:#101722; padding:0 15px; font-size:13px; outline:none; transition: border .16s,box-shadow .16s; }
.input::placeholder { color:#73839a; }
.input:focus { border-color:#75b9a1; box-shadow:0 0 0 3px rgba(111,234,188,.09); }
.input[readonly] { opacity:.7; }
.field-note { margin-top:7px; font-size:11px; color:var(--subtle); }
.input-row { display:flex; gap:10px; }
.input-row .input { flex:1; }
.help-link { color:var(--mint); }

/* Hero */
.hero { position:relative; min-height:267px; display:grid; grid-template-columns: 1fr 270px; overflow:hidden; border-radius:22px; border:1px solid #2f6358; background: radial-gradient(circle at 80% 25%,#285e57 0%,transparent 37%), linear-gradient(111deg,#16372f 0%,#123834 50%,#142634 100%); padding:33px 35px; margin-bottom:20px; isolation:isolate; }
.hero:before { content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(0,0,0,.04),transparent 70%); z-index:-1; }
.hero .eyebrow { color:#a3f6d4; }
.hero h2 { font-size: clamp(25px,2.5vw,34px); max-width:460px; margin:18px 0 14px; letter-spacing:-.05em; }
.hero-copy { font-size:13px; color:#b7d2c9; max-width:380px; margin-bottom:24px; line-height:1.65; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.hero-footer { display:flex; gap: 9px; align-items:center; color:#b4cfc8; font-size:11px; margin-top: 20px; }
.hero-visual { position:relative; display:grid; place-items:center; min-width:0; }
.radar { position:absolute; width:275px; height:275px; border:1px solid rgba(153,246,214,.19); border-radius:50%; transform:rotate(-18deg); }
.radar:before,.radar:after { content:""; position:absolute; border:1px solid rgba(153,246,214,.21); border-radius:50%; inset:32px; }
.radar:after { inset:66px; border-color:rgba(153,246,214,.33); }
.radar-glow { position:absolute; inset:57px; background:rgba(106,242,192,.09); border-radius:50%; filter:blur(8px); }
.radar-core { position:relative; display:grid; place-items:center; width:90px; height:90px; border:1px solid #529987; border-radius:30px; background:linear-gradient(135deg,#265d53,#163937); box-shadow:0 0 42px #64dbb32a,inset 0 1px 8px #a0ffda1a; color:#afffdf; }
.radar-core .icon { width:45px; height:45px; stroke-width:1.5; }
.radar-chip { position:absolute; right:-6px; bottom:15px; color:#c8f7e4; background:rgba(15,46,44,.9); border:1px solid #4c8176; border-radius:9px; padding:7px 9px; font-size:10px; letter-spacing:.04em; }
.orbit-dot { position:absolute; width:8px; height:8px; background:#92f2cb; border-radius:50%; box-shadow:0 0 15px #8df3cc; right:9px; top:64px; }

/* Dashboard cards */
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin-bottom:29px; }
.stat-card { border:1px solid var(--border-soft); background:#141c29; border-radius:17px; padding:22px 23px 20px; min-height:140px; }
.stat-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:15px; color:var(--muted); font-size:12px; }
.stat-icon { color:#9edec7; padding:9px; display:grid; place-items:center; background:#1c3534; border-radius:11px; }
.stat-icon .icon { width:20px; height:20px; }
.stat-number { font-size:30px; font-weight:730; line-height:1; letter-spacing:-.06em; }
.stat-number span { font-size:13px; color:var(--subtle); font-weight:500; margin-left:4px; letter-spacing:0; }
.stat-foot { color:var(--subtle); font-size:11px; margin-top:11px; }
.content-grid { display:grid; grid-template-columns:minmax(0,1.56fr) minmax(280px,1fr); gap:20px; align-items:start; }
.panel { border:1px solid var(--border-soft); background:#141b28; border-radius:19px; padding:25px; min-width:0; }
.profile-list { display:grid; gap:11px; }
.profile-row { display:flex; align-items:center; gap:13px; background:#192230; border:1px solid #293646; border-radius:13px; padding:14px; min-width:0; }
.device-icon { width:43px; height:43px; border:1px solid #355048; border-radius:12px; background:#1e3633; display:grid; place-items:center; color:#99e6c9; flex:none; }
.device-icon .icon { width:21px; height:21px; }
.profile-meta { min-width:0; flex:1; }
.profile-name { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-description { color:var(--subtle); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.profile-status { border:1px solid #396f5e; color:#a3eccc; background:#1b3b33; border-radius:99px; padding:4px 8px; font-size:10px; font-weight:700; white-space:nowrap; }
.profile-status.revoked { color:#a5adbc; background:#2a2c37; border-color:#3e4655; }
.profile-buttons { display:flex; gap:7px; }
.icon-button { display:grid;place-items:center; background:#263243; border:1px solid #334557; border-radius:9px; width:35px; height:35px; color:#d2ebe3; }
.icon-button:hover { background:#365065; }
.icon-button.danger { color:#f2aaaf; }
.icon-button.danger:hover { border-color:#86535a; background:#4b3037; }
.icon-button:disabled { opacity:.35; }
.empty-state { border:1px dashed #37515d; padding:35px 20px; background:#152330; border-radius:14px; text-align:center; }
.empty-icon { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 16px; border:1px solid #446354; border-radius:17px; color:var(--mint); background:#1f3836; }
.empty-state h3 { margin-bottom:7px; }
.empty-state p { color:var(--muted); font-size:12px; max-width:315px; margin:0 auto 16px; }
.promo-panel { background:linear-gradient(145deg,#1b2534,#161e2b); }
.promo-illustration { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.promo-symbol { display:grid; place-items:center; width:51px; height:51px; border-radius:16px; border:1px solid #53656a; background:linear-gradient(150deg,#2b4d50,#24334a); color:#adf4d7; }
.promo-symbol svg { width:27px; height:27px; }
.promo-panel h2 { font-size:18px; }
.promo-panel p { font-size:12px; color:var(--muted); line-height:1.65; margin-bottom:19px; }
.promo-panel .form-label { color:#bccdd8; }
.promo-panel .input { font-size:12px; letter-spacing:.07em; }
.promo-tip { margin-top:19px; padding-top:15px; border-top:1px solid #2d3a47; color:var(--subtle); font-size:11px; display:flex; align-items:center; gap:8px; }
.notice { display:flex; gap:11px; align-items:flex-start; border:1px solid #505a96; background:linear-gradient(90deg,#262951,#1b2442); border-radius:12px; padding:13px 16px; margin-bottom:19px; font-size:12px; color:#d0d8ff; }
.notice .icon { flex:none; color:#a6c9ff; }
.notice strong { color:#dce8ff; }
.promo-history { margin-top:23px; }
.history-row { padding:13px 0; display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid var(--border-soft); }
.history-row:last-child { border-bottom:0; }
.history-name { font-weight:650; font-size:12px; }
.history-date { font-size:11px; color:var(--subtle); }
.green { color:var(--mint); }

/* full pages */
.full-width-panel { max-width: 1130px; }
.section-top { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.inline-note { color:var(--muted); line-height:1.6; font-size:12px; }
.guide-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:25px; }
.step { padding:22px; border:1px solid var(--border-soft); border-radius:15px; background:#171f2e; }
.step-number { color:var(--mint); font-weight:800; font-size:11px; letter-spacing:.13em; }
.step h3 { margin:11px 0 8px; }
.step p { margin:0; color:var(--muted); font-size:12px; }
.admin-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,.85fr);gap:19px; }
.admin-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px; }
.admin-stat { border:1px solid var(--border); border-radius:14px; background:#172130;padding:18px; }
.admin-stat strong { display:block; font-size:24px; margin:7px 0 2px; }
.admin-stat span { color:var(--muted);font-size:11px; }
.admin-form { display:grid; gap:14px; }
.admin-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.table-scroll { overflow:auto; max-width:100%; }
table { width:100%;border-collapse:collapse; min-width:480px; font-size:12px; }
th { color:var(--subtle);text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:700; padding:10px 12px; border-bottom:1px solid var(--border); }
td { padding:14px 12px;border-bottom:1px solid var(--border-soft); color:#d6e2ed; }
tr:last-child td { border-bottom:0; }
.tag-on { display:inline-block;color:#aaf0cc;background:#1e3d33;padding:4px 8px;border-radius:99px;font-size:10px; }
.tag-off { display:inline-block;color:#b4b9c8;background:#30333f;padding:4px 8px;border-radius:99px;font-size:10px; }

/* modal */
.modal-backdrop { position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(3,8,14,.80);backdrop-filter:blur(8px); }
.modal { width:min(100%,490px); border:1px solid #405266;border-radius:22px;background:linear-gradient(150deg,#1d2838,#141c28); box-shadow:var(--shadow);padding:30px; }
.modal-top { display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:25px; }
.modal-icon { display:grid;place-items:center;width:51px;height:51px;border-radius:16px;background:#21413b;color:var(--mint);border:1px solid #3b7164;margin-bottom:17px; }
.modal-top h2 { font-size:23px; }
.modal-top p { font-size:12px;color:var(--muted);margin:9px 0 0;line-height:1.65; }
.close-button { color:var(--muted); border:1px solid var(--border);background:transparent;width:32px;height:32px;display:grid;place-items:center;border-radius:9px; }
.modal-actions { display:flex;gap:10px;justify-content:flex-end;margin-top:24px; }
.modal-form { display:grid;gap:17px; }
.modal-hint { font-size:11px;color:var(--subtle);padding:12px;background:#182534;border-radius:10px; }
.generated-code { display:flex;gap:10px;align-items:center;margin-top:19px;min-width:0; }
.generated-code code { flex:1;min-width:0;padding:13px 10px;border-radius:10px;border:1px dashed #5b9980; background:#132922;color:#bbffe2;font-size:17px;font-weight:750;letter-spacing:.07em;overflow:auto; }

/* authentication */
.auth-screen { min-height:100dvh; display:grid;grid-template-columns:1fr 1fr; background: #0b101a; }
.auth-visual { position:relative;overflow:hidden;min-height:100%;padding:47px clamp(35px,6vw,97px); background: radial-gradient(circle at 58% 49%,#1d6554 0%,#153c3d 27%,#10202d 60%,#101a27 100%);border-right:1px solid #294841; }
.auth-visual:before { content:"";position:absolute;width:620px;height:620px;border:1px solid rgba(159,246,210,.11);border-radius:50%;left:50%;top:42%;transform:translate(-50%,-50%);box-shadow:0 0 0 80px #ffffff06,0 0 0 160px #ffffff04; }
.auth-visual .brand { position:relative;z-index:1; }
.auth-world { position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);width:min(25vw,255px);aspect-ratio:1;display:grid;place-items:center; }
.auth-world:before { content:"";position:absolute;inset:-75px;border:1px dashed #86e6c332;border-radius:50%; }
.auth-world .big-shield { position:relative;z-index:1;width:clamp(90px,12vw,140px);height:clamp(90px,12vw,140px);border-radius:37px;display:grid;place-items:center;color:#c1ffe9;background:linear-gradient(140deg,#2b7463,#17433e);border:1px solid #5cb99a;box-shadow:0 40px 100px #5cdbac21,inset 0 2px 4px #a8ffdf26; transform:rotate(-7deg); }
.big-shield .icon { width:70px;height:70px;stroke-width:1.3;transform:rotate(7deg); }
.auth-visual-bottom { position:absolute;left:clamp(35px,6vw,97px);right:45px;bottom:65px;z-index:1;max-width:560px; }
.auth-visual-bottom h2 { font-size:clamp(29px,3.2vw,48px);letter-spacing:-.055em;line-height:1.16;margin-bottom:18px; }
.auth-visual-bottom p { max-width:390px;color:#c2d6d2;font-size:14px;line-height:1.8; }
.auth-badges { display:flex; gap:10px; flex-wrap:wrap;margin-top:26px; }
.auth-badge { border:1px solid #5c92835e;background:#254d4655;border-radius:99px;padding:7px 12px;color:#ccefe3;font-size:11px;display:flex;align-items:center;gap:7px; }
.auth-form-area { display:flex;align-items:center;justify-content:center;padding:50px 30px; }
.auth-card { width:min(100%,440px); }
.auth-overline { color:var(--mint);font-size:11px;letter-spacing:.16em;font-weight:750;text-transform:uppercase;margin-bottom:16px; }
.auth-card h1 { font-size:34px;margin-bottom:10px; }
.auth-card>.muted { font-size:13px;margin-bottom:33px; }
.auth-card form { display:grid;gap:19px; }
.auth-card .auth-bottom { color:var(--muted);border-top:1px solid var(--border-soft);padding-top:24px;margin-top:28px;font-size:12px;text-align:center; }
.auth-card .btn { height:49px;margin-top:8px; }
.auth-mobile-brand { display:none; }

/* feedback */
/* Toasts have an explicit viewport-bounded width: max-width alone can let a
   flex item keep its min-content size and overflow the screen to the right. */
.toast-region {
  position: fixed;
  z-index: 50;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: min(360px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex-shrink: 0;
  padding: 13px 16px;
  border: 1px solid #5d6da9;
  border-radius: 12px;
  background: #222a4c;
  color: #e0e9ff;
  box-shadow: var(--shadow);
  font-size: 12px;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: anywhere;
  animation: pop-in .17s ease-out;
  pointer-events: auto;
}
.toast > .icon { flex-shrink: 0; color: #a4deff; margin-top: 1px; }
.toast > span { display: block; flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.toast.error { border-color:#845572; background:#36263f; color:#ffe0eb; }
.toast.error > .icon { color:#ffb2d2; }
.loading-screen { min-height:100dvh;display:grid;place-content:center;gap:15px;text-align:center;color:var(--muted);font-size:13px; }
.spin-mark { margin:auto; font-size:30px;animation:slow-rotate 3s linear infinite; }
@keyframes pop-in { from{ transform:translateY(6px);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes slow-rotate { to {transform:rotate(360deg)} }

@media (min-width:1450px) { .main { padding-top:39px; } }
@media (max-width:1170px) {
 .shell{ grid-template-columns:215px minmax(0,1fr); }
 .sidebar{ padding-left:13px;padding-right:13px; }
 .content-grid { grid-template-columns:minmax(0,1.4fr) minmax(250px,1fr); gap:14px; }
 .stats{gap:12px;}
 .hero{padding:28px;grid-template-columns:1fr 220px;}
 .radar{width:215px;height:215px;}
 .radar:before{inset:26px;}.radar:after{inset:54px;}
 .radar-chip{right:-2px;bottom:0;}
 .panel{padding:19px;}
 .profile-status { display:none; }
}
@media (max-width:850px) {
 .shell { display:block; }
 .sidebar{display:none;}
 .main{padding:22px 24px 110px;}
 .mobile-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:23px; }
 .mobile-header .brand { font-size:17px; }
 .mobile-header .brand-mark { width:36px;height:36px; }
 .mobile-user { display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#1b3936;border:1px solid #396657;color:var(--mint);font-weight:700; }
 .topbar{display:none;}
 .bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;gap:3px;justify-content:space-around;padding:11px max(13px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom));border-top:1px solid #334050; background:rgba(14,20,32,.97);backdrop-filter:blur(18px);}
 .bottom-link{flex:1;min-width:0;display:grid;justify-items:center;gap:4px;color:#8294a8;border:0;background:transparent;font-size:10px;padding:5px 3px;border-radius:10px;}
 .bottom-link .icon{width:20px;height:20px;}
 .bottom-link.active{color:var(--mint);background:#1b332f;}
 .auth-visual { display:none;}
 .auth-screen{grid-template-columns:1fr;}
 .auth-mobile-brand{display:block;margin-bottom:50px;}
 .auth-form-area{padding:35px 22px;align-items:flex-start;}
 .auth-card{margin:0 auto;}
}
@media (max-width:650px) {
 .main{padding:20px 16px 110px;}
 .page-intro{display:block;margin-bottom:23px;}
 .page-intro .btn{margin-top:20px;}
 .hero{display:block;min-height:235px;padding:24px;}
 .hero h2{font-size:27px;max-width:310px;}
 .hero-copy{max-width:310px;font-size:12px;}
 .hero-visual{position:absolute;right:-35px;top:25px;width:140px;height:170px;opacity:.34;pointer-events:none;}
 .radar{width:200px;height:200px;}
 .radar-chip{display:none;}
 .hero-actions{position:relative;z-index:2;}
 .hero-actions .btn{width:100%;}
 .stats { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
 .stat-card { min-height:133px;padding:16px; }
 .stat-card:last-child { grid-column:span 2;min-height:105px;display:flex;align-items:center;justify-content:space-between;gap:8px; }
 .stat-card:last-child .stat-top { margin:0; }
 .stat-card:last-child .stat-number { margin:0; }
 .stat-card:last-child .stat-foot { display:none; }
 .stat-icon{padding:7px;}
 .content-grid,.admin-grid{grid-template-columns:1fr;}
 .panel{padding:19px 16px;}
 .admin-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
 .admin-stat{padding:12px;}
 .admin-stat strong{font-size:21px;}
 .guide-steps{grid-template-columns:1fr;}
 .profile-status{display:none;}
 .modal{padding:22px;}
 .toast-region{left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom, 0px));width:auto;max-width:none;max-height:calc(100dvh - 108px - env(safe-area-inset-bottom, 0px));}
}
@media (max-width:410px) {
 h1{font-size:29px;}
 .profile-row{gap:9px;padding:11px;}
 .device-icon{width:38px;height:38px;}
 .profile-buttons { gap:5px; }
 .icon-button{width:33px;height:33px;}
 .panel-title-row{align-items:flex-start;}
 .admin-form .form-row{grid-template-columns:1fr;}
 .modal-actions .btn{flex:1;}
}
@media (prefers-reduced-motion:reduce) {
 *,*:before,*:after{ animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important; }
}

/* Utility classes keep the page compatible with a strict style-src CSP. */
.app-footer { display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:#5c6f82;font-size:11px;margin-top:29px; }
.label-space { margin-bottom:12px; }
.label-space-lg { margin-bottom:17px; }
.more-profiles { margin-top:19px; }
.promo-add { font-weight:800; }
.section-note { margin-top:18px; }
.spaced-panel { margin-top:20px; }
.admin-ready { border-color:#365a4e;background:#192531;color:#b6e8d1; }
.admin-warn { border-color:#585e99;background:#222445;color:#d2d6ff; }
.modal-icon.modal-danger { color:#ffacb3;background:#3e2731;border-color:#81404b; }

/* Overdrive VPN — promo-only branding and download controls */
.brand { letter-spacing: .005em; gap: 9px; font-size: 16px; font-weight: 770; white-space: nowrap; }
.brand-name { white-space: nowrap; }
.brand-name strong { color: #c7c9ff; font-weight: 820; }
.brand span.thin { align-self: center; margin: 0; font-size: 11px; color: #b7c5e8; font-weight: 750; }
.brand-mark.overdrive-logo { font-size: 25px; line-height: 1; background:linear-gradient(135deg,#39583b,#233f32); border-color:#5d8657; box-shadow:inset 0 1px rgba(255,255,255,.12); }
.sidebar .brand { font-size: 15px; }
.sidebar .brand-name { letter-spacing: -.02em; }
.overdrive-hero {font-size: 52px; line-height:1; filter:drop-shadow(0 5px 16px rgba(0,0,0,.2)); }
.radar-core { background: linear-gradient(135deg,#294b3c,#173d3a); }
.promo-redeem-form .form-label {margin-bottom:9px;}
.promo-input-row {display:flex; align-items:stretch; gap:8px; width:100%;}
.promo-input-row .input {flex:1 1 0; min-width:0; height:46px;}
.promo-input-row .btn {min-height:46px; padding:10px 13px; flex-shrink:0;}
.promo-success {display:flex; gap:11px; padding:14px; margin-top:16px; border:1px solid #528d61; background:#19372b; border-radius:12px; color:#cbf8d5;}
.promo-success > .icon {color:#bcffb5; flex:none; margin-top:2px;}
.promo-success strong {font-size:13px;}
.promo-panel .promo-success p {color:#bedccc; margin:6px 0 7px; font-size:12px;}
.promo-success .text-action {display:inline-flex; gap:5px; align-items:center;}
.profile-status.pending {border-color:#6473b4; color:#dce8ff; background:#292e54;}
.profile-download {white-space:nowrap; min-height:37px;}
.profile-buttons {align-items:center; flex: none;}
.profile-row {gap:11px;}
@media (max-width: 1170px) {
  .promo-input-row {flex-wrap:wrap;}
  .promo-input-row .input {flex-basis:100%;}
  .promo-input-row .btn {width:100%;}
}
@media (min-width: 1171px) {
  .promo-input-row .btn {font-size:11px;}
}
@media (max-width: 850px) {
  .promo-input-row {flex-wrap:nowrap;}
  .promo-input-row .input {flex-basis:0;}
  .promo-input-row .btn {width:auto;}
  .brand {font-size:15px;}
}
@media (max-width: 410px) {
  .profile-download {font-size:11px; padding:7px 9px; min-height:35px;}
  .profile-download .icon {width:15px;height:15px;}
  .profile-description {max-width: 130px;}
  .promo-input-row {flex-wrap:wrap;}
  .promo-input-row .input {flex-basis:100%;}
  .promo-input-row .btn {width:100%;}
  .brand-name {font-size:14px;}
}
/* Keep the promo input and button side by side on normal phone widths. */
@media (min-width:351px) and (max-width:410px) {
 .promo-input-row { flex-wrap: nowrap; }
 .promo-input-row .input { flex-basis:0; min-width:0; }
 .promo-input-row .btn { width:auto; padding-inline:11px; }
}


/* Overdrive VPN - electric violet / cyan interface, no third-party assets. */
:root {
  --background: #090c1a;
  --background-2: #10162b;
  --panel: #151b30;
  --border: #303855;
  --border-soft: #252d4a;
  --mint: #aeb8ff;
  --mint-dark: #232049;
  --mint-border: #5a5fac;
  --aqua: #78dcf4;
}
body {background: radial-gradient(circle at 75% -10%, #171d3e 0, transparent 36%), var(--background);}
::selection {background:#9ea5fb; color:#070a1d;}
.brand {letter-spacing: .045em; font-size: 18px; gap: 9px;}
.brand-name strong {color:#c7c9ff;}
.brand-mark.overdrive-logo {background:linear-gradient(145deg,#343679,#191d49); border-color:#757afa; box-shadow:0 0 21px #7479ff38, inset 0 1px #ffffff24;}
.brand-mark .brand-symbol {width:29px; height:29px; fill:none; stroke:#c5d9ff; stroke-width:2.7; stroke-linejoin:round; stroke-linecap:round;}
.brand-symbol .symbol-bolt {stroke:none; fill:#9af4ff;}
.sidebar {background:#0d1023;}
.nav-item.active {background:#25264b; color:#ced4ff; border-color:#454a83;}
.nav-item.active .icon {color:#a6c0ff;}
.btn-primary {background:linear-gradient(115deg,#a9b8ff,#a4ebff); color:#111936; box-shadow:0 5px 20px #818aff33;}
.btn-primary:hover:not(:disabled) {background:linear-gradient(115deg,#bec9ff,#cbf6ff);}
.btn-outline {border-color:#4c5283; color:#d2dbff;}
.btn-outline:hover {background:#24294e;}
.text-action {color:#b5bcff;}
.text-action:hover {color:#dce0ff;}
.count-tag {background:#242545; color:#c4c6ff; border-color:#4d4f78;}
.hero {border-color:#5c5599; background:radial-gradient(circle at 79% 30%,#32367d 0%,transparent 45%), linear-gradient(116deg,#222149 0%,#1a2845 52%,#171e38 100%);}
.hero .eyebrow {color:#b2ecff;}
.hero-copy, .hero-footer {color:#ced4f3;}
.radar, .radar:before,.radar:after {border-color:#a5c6fc45;}
.radar-glow {background:#a59fff20;}
.radar-core {border:1px solid #7a90fc; background:linear-gradient(145deg,#343d86,#242858); box-shadow:0 0 54px #848df155; border-radius:24px;}
.radar-core .icon {stroke:#a9edff; width:54px; height:54px;}
.radar-chip {background:#181d42ee; border-color:#5c68ad; color:#d2d7ff;}
.orbit-dot {background:#a4ecff; box-shadow:0 0 15px #a4ecff;}
.avatar {background:#2a284b; color:#d1d1ff; border-color:#4d517e;}
.device-icon, .stat-icon {background:#262849; color:#b5c4ff; border-color:#424d83;}
.profile-status {background:#292e55; color:#c9ceff; border-color:#505fa3;}
.promo-symbol, .modal-icon {background:#2a2b53; color:#c9cdff; border-color:#565d9d;}
.generated-code {color:#c9ceff;}
.promo-success {border-color:#495a91; background:#222848;}
.brand-mark.overdrive-logo .brand-symbol {display:block;}
@media (max-width:410px) {
 .brand {gap:7px;}
 .brand-mark.overdrive-logo {width:34px;height:34px;}
 .brand-mark .brand-symbol {width:26px;height:26px;}
}

.auth-visual {background:radial-gradient(circle at 58% 44%,#35397d 0%,#242850 35%,#151c38 65%,#101628 100%);border-color:#333e72;}
.auth-visual:before {border-color:#c7beff22;}
.auth-world:before {border-color:#8bacff4c;}
.auth-world .big-shield {background:linear-gradient(140deg,#3c4386,#21244b);border-color:#6b7ec6;color:#c4eeff;box-shadow:0 40px 100px #7e8cf72c;}
.auth-visual-bottom p {color:#c5cee9;}
.auth-badge {background:#323b7b50;border-color:#7985c34d;color:#d4dcff;}
.mobile-user {background:#232a52;border-color:#5863a1;color:#d7dcff;}
.bottom-link.active {background:#262c51;}
.promo-success {color:#d9e1ff;}
.promo-success > .icon {color:#b9f5e8;}
.promo-panel .promo-success p {color:#c0c7eb;}
.generated-code code {background:#24284d;border-color:#6873b7;color:#d5e0ff;}

/* v4.2: warnings use cool blue/violet; never imply credits were not redeemed. */
.profile-sync-banner {display:flex; align-items:flex-start; gap:9px; padding:12px 14px; margin-bottom:14px; border-radius:12px; border:1px solid #626fb0; background:#222a4c; color:#d7e3ff; font-size:12px; line-height:1.6;}
.profile-sync-banner .icon {flex:none; color:#a6d8ff;}
.sync-warning {border-color:#556da3; background:#1c2a43;}
.sync-warning .empty-icon {background:#29355c; border:1px solid #5b79ad; color:#b9d9ff;}
.sync-warning p {max-width:450px; margin-left:auto; margin-right:auto;}

/* v4.2.1: cool-tone status labels (including active/ready), no warm yellow. */
.profile-status:not(.pending):not(.revoked) {
  border-color: #547cab;
  background: #243b60;
  color: #d0edff;
}
.profile-status.pending {
  border-color: #7774ba;
  background: #30305c;
  color: #e0ddff;
}
.tag-on { background: #253b5c; color: #c6e8ff; }

/* v4.3: explicit cool-tone statuses; overrides any cached legacy amber theme. */
.profile-status.ready {
  background: #233d67;
  border-color: #598ac4;
  color: #d6efff;
}
.profile-status.pending {
  background: #30305c;
  border-color: #7774ba;
  color: #e0ddff;
}
.profile-status.revoked {
  background: #2d2f46;
  border-color: #565d7c;
  color: #c4c9df;
}
/* Keep success messages consistent with the purple/blue theme. */
.admin-ready, .promo-success {
  border-color: #4d69ae;
  background: #24294f;
  color: #d7e6ff;
}
.admin-ready .icon, .promo-success > .icon { color: #98dfff; }