/* =========================================================================
   Xe4 Photon - design system
   Globals, keyframes and hover behaviours extracted verbatim from the
   "Xe4 Photon" Claude Design handoff. Layout/visual styling stays inline on
   the elements (faithful to the prototype); only things that cannot live in an
   inline style attribute - keyframes, ::selection, scrollbars and :hover
   states - are expressed here as classes.
   ========================================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0a0b0e; }
::selection { background: #FFB23C; color: #0a0b0e; }

/* ---- keyframes (from the prototype <style> block) ---- */
@keyframes radar-sweep { to { transform: rotate(360deg); } }
@keyframes orbit-cw    { to { transform: rotate(360deg); } }
@keyframes orbit-ccw   { to { transform: rotate(-360deg); } }
@keyframes pulse-risk  { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity:1; } 50% { transform: translate(-50%,-50%) scale(1.6); opacity:.45; } }
@keyframes ring-pulse  { 0% { transform: translate(-50%,-50%) scale(.5); opacity:.9; } 100% { transform: translate(-50%,-50%) scale(2.6); opacity:0; } }
@keyframes blink       { 0%,100% { opacity:1; } 50% { opacity:.2; } }
@keyframes float-y     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes reveal-up   { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform: translateY(0); } }
/* home "loop" dashed line: one 14px dash-period is 14px, so a 140px slide
   wraps seamlessly; transform keeps it compositor-only (the old dash-move
   animated background-position, repainting the strip every frame). 140px/1s
   matches the old 300%/18s speed. */
@keyframes dash-slide  { to { transform: translateX(140px); } }

/* ---- scrollbars ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0b0e; }
::-webkit-scrollbar-thumb { background: #23262e; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #33373f; }

/* =========================================================================
   Hero backdrop performance.
   The backdrop's MOVING parts (spinning meridians, orbiting satellites) are
   drawn by app.js (initHeroBackdrop) on the single
   <canvas id="hero-backdrop-canvas"> at ~30fps. They used to be CSS
   transform animations on huge DOM elements - five 1500px meridian rings
   inside a preserve-3d context plus two 1640/1760px satellite rings - which
   kept ~8 viewport-sized, mostly-transparent compositor layers alive and
   re-blended every one of them across the screen on every frame, forever.
   That GPU blend bandwidth (not main-thread JS) is what made the page lag,
   especially on integrated GPUs at DPR > 1; pausing offscreen, flattening
   the orbit planes to scaleX and removing the nav backdrop-filter had
   already been tried and were not enough. Only static scenery (limb,
   latitude rings, orbit outlines, glow, stars, fades) stays in the DOM,
   painted once and never invalidated.

   The canvas loop pauses via IntersectionObserver when the backdrop scrolls
   out of view. It is deliberately NOT gated on prefers-reduced-motion:
   Windows reports "reduce" whenever OS animation effects are off, and the
   globe is the hero's centrepiece - it is wanted in motion (a previous
   reduced-motion rule froze it and was reverted). `will-change` also remains
   deliberately absent everywhere: pinning multi-MB DPR-scaled textures made
   things worse historically.
   ========================================================================= */

/* =========================================================================
   Hover states (the prototype's style-hover="..." attributes).
   Base styling remains inline on each element; these rules only add the
   :hover delta so the transitions defined inline animate into them.
   ========================================================================= */

/* nav text links */
.hv-nav-link:hover { color: #F3F1EC; background: rgba(255,255,255,0.04); }

/* small gradient CTA in the nav bar */
.hv-cta-sm:hover { box-shadow: 0 8px 30px rgba(255,150,40,0.45); transform: translateY(-2px); }

/* hero gradient CTA */
.hv-cta-hero:hover { box-shadow: 0 10px 38px rgba(255,150,40,0.5); transform: translateY(-2px); }

/* CTA-band gradient CTA */
.hv-cta-band:hover { box-shadow: 0 10px 40px rgba(255,150,40,0.55); transform: translateY(-2px); }

/* ghost (light/translucent) secondary button - hero variant */
.hv-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); transform: translateY(-2px); }

/* ghost secondary button - CTA-band variant (slightly brighter fill) */
.hv-ghost-2:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); transform: translateY(-2px); }

/* amber outlined ghost button ("Explore the product →") */
.hv-amber-ghost:hover { background: rgba(255,178,60,0.08); border-color: rgba(255,178,60,0.55); transform: translateY(-2px); }

/* feature cards */
.hv-feature-card:hover { border-color: rgba(255,178,60,0.45); background: #16181e; transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0,0,0,0.4); }

/* "how it works" numbered step badge */
.hv-step-num:hover { transform: scale(1.12); box-shadow: 0 0 26px rgba(255,178,60,0.45); background: #16181c; }

/* pricing - standard plan card */
.hv-price-card:hover { transform: translateY(-8px); border-color: rgba(255,178,60,0.4); box-shadow: 0 28px 60px rgba(0,0,0,0.45); }

/* pricing - featured (popular) plan card */
.hv-price-card-featured:hover { transform: translateY(-8px); box-shadow: 0 34px 78px rgba(255,150,40,0.24); }

/* pricing - light/translucent plan button ("Start free trial", "Talk to us") */
.hv-btn-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,178,60,0.4); transform: translateY(-2px); }

/* FAQ accordion header */
.hv-faq:hover { background: rgba(255,255,255,0.03); }

/* footer text links */
.hv-footer-link:hover { color: #F3F1EC; }

/* =========================================================================
   Forms (request-access / contact). Inline base styling sits on the elements;
   :focus and ::placeholder can't be inline, so they live here.
   ========================================================================= */
.field {
  width: 100%;
  background: #0e1014;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 14px;
  color: #F3F1EC;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field::placeholder { color: #62666E; }
.field:focus {
  outline: none;
  border-color: rgba(255,178,60,0.6);
  box-shadow: 0 0 0 3px rgba(255,178,60,0.12);
  background-color: #101216;
}
select.field {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239CA0A8' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
textarea.field { resize: vertical; min-height: 120px; line-height: 1.55; }

/* submit buttons reuse the gradient-CTA hover feel */
.hv-submit:hover { box-shadow: 0 10px 38px rgba(255,150,40,0.5); transform: translateY(-2px); }

/* admin / operations console table rows */
.hv-admin-row:hover { background: rgba(255,255,255,0.025); }
/* admin sidebar items */
.hv-admin-nav:hover { background: rgba(255,255,255,0.04); color: #F3F1EC; }

/* =========================================================================
   Account pages (/account/*). Unlike the marketing pages these are partly
   rendered by JS (account.js), so the shared look lives in classes rather
   than inline styles - and they must be mobile-responsive (public site).
   ========================================================================= */
.acct-wrap { max-width: 1100px; margin: 0 auto; padding: 64px 32px 100px; }
.acct-auth-card, .acct-card {
  background: #121419;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 30px;
  min-width: 0;
}
.acct-auth-card { max-width: 440px; margin: 0 auto; }
.acct-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: start; }
.acct-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.acct-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1.5px; color: #FFB23C; margin-bottom: 18px;
}
.acct-label {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 1px; color: #9CA0A8; margin-bottom: 8px;
}
.acct-muted { color: #9CA0A8; }
.acct-link { color: #FFB23C; text-decoration: none; }
.acct-link:hover { text-decoration: underline; }

/* inline form feedback (hidden until JS fills them) */
.acct-error, .acct-ok, .acct-note {
  display: none; font-size: 13px; line-height: 1.55;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 18px;
}
.acct-error { color: #ff9d8a; background: rgba(255,110,80,0.08); border: 1px solid rgba(255,110,80,0.28); }
.acct-ok    { color: #57d9a3; background: rgba(87,217,163,0.08); border: 1px solid rgba(87,217,163,0.28); }
.acct-note  { color: #C7C9CE; background: rgba(255,178,60,0.07); border: 1px solid rgba(255,178,60,0.25); }

/* license status pill */
.acct-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15);
  color: #C7C9CE;
}
.acct-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.acct-pill.ok   { color: #57d9a3; border-color: rgba(87,217,163,0.35); background: rgba(87,217,163,0.07); }
.acct-pill.warn { color: #FFB23C; border-color: rgba(255,178,60,0.35);  background: rgba(255,178,60,0.07); }
.acct-pill.bad  { color: #ff9d8a; border-color: rgba(255,110,80,0.35);  background: rgba(255,110,80,0.07); }

/* secondary + danger buttons (the primary gradient button reuses .hv-submit) */
.acct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 500;
  color: #F3F1EC; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  padding: 11px 18px; cursor: pointer; text-decoration: none;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.acct-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.acct-btn:disabled, .hv-submit:disabled { opacity: .55; cursor: default; transform: none; }
.acct-danger-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
  color: #ff9d8a; background: rgba(255,110,80,0.06);
  border: 1px solid rgba(255,110,80,0.32); border-radius: 10px;
  padding: 11px 18px; cursor: pointer;
  transition: background .22s ease, border-color .22s ease;
}
.acct-danger-btn:hover { background: rgba(255,110,80,0.13); border-color: rgba(255,110,80,0.5); }
.acct-danger-btn:disabled { opacity: .55; cursor: default; }

/* device rows (built by account.js with textContent - no markup injection) */
.acct-device {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 2px; border-top: 1px solid rgba(255,255,255,0.06);
}
.acct-device:first-child { border-top: none; }
.acct-device-name { font-size: 14px; font-weight: 600; color: #F3F1EC; overflow-wrap: anywhere; }
.acct-device-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .5px; color: #62666E; margin-top: 3px; }
.acct-revoke {
  flex-shrink: 0; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500;
  color: #ff9d8a; background: transparent; border: 1px solid rgba(255,110,80,0.3);
  border-radius: 8px; padding: 7px 13px; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.acct-revoke:hover { background: rgba(255,110,80,0.1); border-color: rgba(255,110,80,0.5); }
.acct-revoke:disabled { opacity: .5; cursor: default; }

/* =========================================================================
   Admin Panel (/admin/*). Staff-only, JS-rendered like the account pages -
   reuses the .acct-* kit above and adds only what the panel needs.
   ========================================================================= */
.adm-nav {
  display: block; width: 100%; text-align: left;
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; color: #9CA0A8;
  background: transparent; border: none; border-radius: 8px;
  padding: 9px 12px; margin-bottom: 3px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.adm-nav.active { background: rgba(255,178,60,0.1); color: #F3F1EC; }

/* label/value rows on the account-detail license card */
.adm-kv {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
}
.adm-kv > span { color: #62666E; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; flex-shrink: 0; }
.adm-kv > b { font-weight: 600; color: #F3F1EC; text-align: right; overflow-wrap: anywhere; min-width: 0; }

/* data tables built by admin.js (textContent only) */
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th {
  text-align: left; font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 10px; letter-spacing: 1px; color: #62666E;
  padding: 0 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
}
.adm-table td {
  padding: 11px 8px; border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #C7C9CE; vertical-align: top; overflow-wrap: anywhere;
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tbody tr.adm-row-click { cursor: pointer; }
.adm-table tbody tr.adm-row-click:hover { background: rgba(255,255,255,0.025); }
.adm-mono { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #9CA0A8; }

/* =========================================================================
   Photon app facsimile (.pv-*) - the home page's "console" preview is a
   faithful static mock of the REAL desktop app (photon/python: theme.py DARK
   palette, ui_main.py shell, constellation_viewer.py Viewer tab), not an
   invented web console. Colour tokens are copied 1:1 from theme.py; fonts
   mirror the app's stacks (Segoe UI body, Cascadia/Consolas mono for data).
   Everything is static - no animations - so it paints once and costs nothing.
   ========================================================================= */
.pv-window {
  --pv-deep: #0B0D10; --pv-base: #0D0F13; --pv-panel: #15181E;
  --pv-hi: #1B1F27; --pv-ink: #0B0D11;
  --pv-accent: #F5C518; --pv-on-accent: #231C00;
  --pv-text: #E9ECF1; --pv-mute: #AAB1BD; --pv-dim: #6D7480;
  --pv-border: rgba(255,255,255,0.09); --pv-border-str: rgba(255,255,255,0.17);
  --pv-good: #46C47A; --pv-amber: #F0912C; --pv-rust: #F2554D;
  --pv-grey: #7A828C; --pv-cyan: #49C3E6; --pv-fleet: #34C77B;
  font-family: 'Segoe UI', 'IBM Plex Sans', sans-serif;
  font-size: 13px; color: var(--pv-text);
  background: var(--pv-base);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.55);
  text-align: left;
}
.pv-mono { font-family: 'Cascadia Code', 'Consolas', 'JetBrains Mono', monospace; }

/* OS title bar + app header + primary tab strip (ui_main._build_header) */
.pv-titlebar { display: flex; align-items: center; gap: 10px; height: 34px;
  padding: 0 4px 0 14px; background: var(--pv-deep);
  border-bottom: 1px solid rgba(255,255,255,0.05); }
.pv-titlebar-title { font-size: 12px; color: var(--pv-dim); }
.pv-winbtn { width: 40px; height: 34px; display: flex; align-items: center;
  justify-content: center; color: var(--pv-dim); font-size: 12px; }
.pv-header { display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: var(--pv-deep); }
.pv-menu { display: flex; gap: 2px; }
.pv-menu span { color: var(--pv-mute); font-size: 13px; padding: 4px 11px;
  border-radius: 5px; }
.pv-search { flex: 1; max-width: 250px; margin-left: auto; display: flex;
  align-items: center; gap: 8px; background: var(--pv-ink);
  border: 1px solid var(--pv-border); border-radius: 4px; padding: 6px 10px;
  color: var(--pv-dim); font-size: 12px; white-space: nowrap; overflow: hidden; }
.pv-seg { display: flex; gap: 2px; background: #12151B;
  border: 1px solid var(--pv-border); border-radius: 5px; padding: 3px; }
.pv-seg span { padding: 4px 13px; border-radius: 3px; font-size: 12px;
  font-weight: 600; color: var(--pv-mute); }
.pv-seg .on { background: var(--pv-accent); color: var(--pv-on-accent);
  font-weight: 700; }
.pv-iconbtn { width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; background: var(--pv-hi);
  border: 1px solid var(--pv-border); color: var(--pv-mute); }
.pv-tabs { display: flex; padding: 0 8px; background: var(--pv-deep);
  border-bottom: 1px solid var(--pv-border); }
.pv-tab { padding: 9px 18px; font-weight: 600; font-size: 13px;
  color: var(--pv-mute); border-bottom: 2px solid transparent; white-space: nowrap; }
.pv-tab.on { color: var(--pv-text); border-bottom-color: var(--pv-accent); }

/* body: left rail · viewport column · right rail (constellation_viewer) */
.pv-body { display: grid; grid-template-columns: 224px 1fr 282px; gap: 13px;
  padding: 10px 8px 4px; }
.pv-panel { background: var(--pv-panel); border: 1px solid var(--pv-border);
  border-radius: 8px; padding: 12px 13px; min-width: 0; }
.pv-cap { font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--pv-mute); }
.pv-hint { font-size: 11px; line-height: 1.45; color: var(--pv-dim); }
.pv-chip { display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 1px; padding: 2px 7px; border-radius: 3px; }
.pv-chip.warn { background: rgba(240,145,44,0.16); color: var(--pv-amber); }
.pv-chip.ok   { background: rgba(70,196,122,0.16); color: var(--pv-good); }

/* alert rows: 3px severity edge-bar + glyph + name/detail + mono metric */
.pv-alert { position: relative; display: flex; align-items: center; gap: 9px;
  padding: 8px 8px 8px 13px; border-radius: 6px; }
.pv-alert::before { content: ''; position: absolute; left: 1px; top: 7px;
  bottom: 7px; width: 3px; background: var(--sev); }
.pv-alert .pv-a-name { font-size: 13px; font-weight: 700; color: var(--pv-text); }
.pv-alert .pv-a-sub { font-size: 11px; color: var(--pv-mute); }
.pv-alert .pv-a-metric { margin-left: auto; font-size: 13px; font-weight: 700;
  color: var(--sev); white-space: nowrap; }

/* donut KPIs (dashboard_widgets.DonutKPI): conic ring + mono hero number */
.pv-donut { position: relative; width: 88px; height: 88px; border-radius: 50%;
  background: conic-gradient(var(--col) var(--frac), rgba(170,177,189,0.16) 0);
  display: grid; place-items: center; margin: 0 auto; }
.pv-donut::after { content: ''; position: absolute; inset: 10px;
  background: var(--pv-panel); border-radius: 50%; }
.pv-donut span { position: relative; z-index: 1; font-weight: 700;
  font-size: 15px; }

/* nested value cells (#RowCard): velocity axes + the ORBIT grid */
.pv-cell { background: var(--pv-hi); border: 1px solid var(--pv-border);
  border-radius: 6px; padding: 5px 8px 6px; min-width: 0; }
.pv-cell b { display: block; font-size: 9px; font-weight: 700;
  letter-spacing: 1px; color: var(--pv-mute); margin-bottom: 1px; }
.pv-cell span { font-size: 12px; font-weight: 600; color: var(--pv-text); }
.pv-cell small { font-size: 10px; color: var(--pv-dim); margin-left: 3px; }

/* buttons (QSS: PANEL_HI fill, 4px radius; #Accent gold; #Ghost quiet) */
.pv-btn { display: inline-flex; align-items: center; justify-content: center;
  background: var(--pv-hi); border: 1px solid var(--pv-border);
  border-radius: 4px; padding: 5px 11px; font-size: 12px; font-weight: 600;
  color: var(--pv-text); white-space: nowrap; }
.pv-btn.accent { background: var(--pv-accent); border-color: var(--pv-accent);
  color: var(--pv-on-accent); font-weight: 700; }
.pv-btn.ghost { background: transparent; color: var(--pv-mute); }
.pv-btn.live { background: rgba(70,196,122,0.18); border-color: var(--pv-good);
  color: var(--pv-good); font-weight: 700; }

/* 3D viewport + opaque overlay chrome (#ViewportOverlay: square corners) */
.pv-viewport { position: relative; height: 330px; border-radius: 4px;
  background: linear-gradient(180deg, #10141B, #0A0D12); overflow: hidden; }
.pv-overlay { position: absolute; top: 12px; background: var(--pv-panel);
  border: 1px solid var(--pv-border-str); padding: 7px 8px 8px; z-index: 2; }
.pv-show-btn { display: flex; align-items: center; gap: 7px; margin-top: 3px;
  background: var(--pv-hi); border: 1px solid var(--pv-border);
  border-radius: 4px; padding: 4px 9px; font-size: 11px; font-weight: 600;
  color: var(--pv-text); white-space: nowrap; }
.pv-show-btn.on { background: var(--pv-accent); border-color: var(--pv-accent);
  color: var(--pv-on-accent); }
.pv-show-btn i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pv-rail-btn { display: block; width: 44px; text-align: center; margin-top: 3px;
  background: var(--pv-hi); border: 1px solid var(--pv-border);
  border-radius: 4px; padding: 4px 0; font-size: 11px; color: var(--pv-text); }
.pv-sat { position: absolute; border-radius: 50%; width: 4px; height: 4px; }

/* legend dots + Time Machine (QGroupBox) + timeline bar */
.pv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 5px; vertical-align: -1px; }
.pv-groupbox { position: relative; background: var(--pv-panel);
  border: 1px solid var(--pv-border); border-radius: 8px;
  padding: 18px 13px 12px; }
.pv-groupbox > b { position: absolute; top: 5px; left: 13px; font-size: 10px;
  font-weight: 700; letter-spacing: 1px; color: var(--pv-mute); }
.pv-tl { position: relative; height: 40px; background: var(--pv-ink);
  border: 1px solid var(--pv-border); border-radius: 6px; overflow: hidden;
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.055) 0 1px, transparent 1px 46px); }
.pv-tl-now { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--pv-accent); }
.pv-tl-mark { position: absolute; top: 50%; width: 7px; height: 7px;
  border-radius: 50%; transform: translateY(-50%); }

/* bottom status bar (QStatusBar: mono 11px readouts) */
.pv-statusbar { display: flex; align-items: center; gap: 4px; padding: 5px 10px;
  background: var(--pv-deep); border-top: 1px solid var(--pv-border);
  font-family: 'Cascadia Code', 'Consolas', 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--pv-mute); flex-wrap: wrap; }
.pv-statusbar span { padding: 0 9px; }
.pv-statusbar .crit { color: var(--pv-rust); font-weight: 700; }

@media (max-width: 1020px) {
  .pv-body { grid-template-columns: 1fr; }
  .pv-search, .pv-menu { display: none; }
}

@media (max-width: 900px) {
  .acct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .acct-wrap { padding: 40px 20px 64px; }
  .acct-auth-card, .acct-card { padding: 22px; }
  .acct-device { flex-wrap: wrap; }
}