*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:         #f97316;      /* FunTech orange */
  --brand-dark:    #ea580c;      /* orange hover / darker */
  --brand-glow:    rgba(249, 115, 22, 0.18);
  --text:          #f5f5f5;      /* near white */
  --muted:         #a3a3a3;      /* light gray */
  --border:        rgba(255, 255, 255, 0.08);
  --border-focus:  rgba(249, 115, 22, 0.55);
  --bg:            #0a0a0a;      /* near black */
  --card:          #141414;      /* dark card */
  --input-bg:      #1a1a1a;      /* input background */
  --white:         #ffffff;
  --error:         #f87171;
  --error-bg:      rgba(248, 113, 113, 0.1);
  --error-border:  rgba(248, 113, 113, 0.3);
  --success:       #34d399;
  --success-bg:    rgba(52, 211, 153, 0.1);
  --success-border:rgba(52, 211, 153, 0.3);
  --radius:        14px;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-image:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(249, 115, 22, 0.08) 0%, transparent 65%);
}

/* ── Top nav bar ────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: #000000;
  border-bottom: 1px solid rgba(249, 115, 22, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  z-index: 100;
}

/* ── Language switcher (index.html topbar / dashboard account menu) ── */
.lang-switcher {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .35rem .6rem;
  font-size: .82rem;
  cursor: pointer;
}
.lang-switcher:hover { border-color: var(--border-focus); }

.topbar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.topbar-icon {
  width: 28px;
  height: 28px;
  background: var(--brand);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.5px;
}

.topbar-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.2px;
}

.topbar-sub {
  font-size: .75rem;
  color: var(--muted);
  margin-left: .3rem;
  font-weight: 400;
}

/* ── Main card ──────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 460px;
  margin-top: 56px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 8px 48px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(249, 115, 22, 0.05);
}

/* ── Card header ────────────────────────────────────────────── */
.card-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

/* The product mark. It is the shipped icon, which already carries its own
   tile, rim and glow — so no background, radius or shadow is added under it. */
.product-icon {
  width: 60px;
  height: 60px;
  display: inline-block;
  margin-bottom: .9rem;
}

.badge-mark { width: 18px; height: 18px; display: block; flex-shrink: 0; }

h1 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .3rem;
  letter-spacing: -.3px;
}

.subtitle {
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.55;
}

/* ── Form elements ──────────────────────────────────────────── */
label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .35rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}

input, select, textarea {
  width: 100%;
  padding: .62rem .85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .95rem;
  outline: none;
  margin-bottom: 1.1rem;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}

input::placeholder, textarea::placeholder { color: rgba(163, 163, 163, 0.4); }
textarea { resize: vertical; line-height: 1.5; }

input:focus, select:focus, textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

/* ── Password show/hide toggle ──────────────────────────────── */
.pw-wrap { position: relative; margin-bottom: 1.1rem; }
.pw-wrap > input { margin-bottom: 0; padding-right: 2.7rem; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  width: auto;
  margin: 0;
  padding: .2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
}
.pw-toggle:hover { background: transparent; box-shadow: none; color: var(--text); }
.pw-toggle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 6px; }

/* ── Plan cards ─────────────────────────────────────────────── */
.plan-section-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: .6rem;
}

.plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  margin-bottom: 1.3rem;
}

.plan-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .9rem .85rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  background: var(--input-bg);
}

.plan-card:hover {
  border-color: rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.05);
}

.plan-card.selected {
  border-color: var(--brand);
  background: rgba(249, 115, 22, 0.08);
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.15);
}

.plan-card input[type=radio] { display: none; }

.plan-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--white);
  margin-bottom: .25rem;
}

.plan-price {
  font-size: .83rem;
  color: var(--brand);
  font-weight: 600;
}

.plan-seats {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .15rem;
}

/* ── Buttons ────────────────────────────────────────────────── */
button[type=submit], .btn {
  width: 100%;
  padding: .72rem;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, opacity .15s;
  margin-top: .15rem;
  letter-spacing: .1px;
  box-shadow: 0 2px 20px rgba(249, 115, 22, 0.35);
}

button[type=submit]:hover, .btn:hover {
  background: var(--brand-dark);
  box-shadow: 0 4px 28px rgba(249, 115, 22, 0.5);
}

button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

.btn-outline {
  background: transparent;
  color: var(--brand);
  border: 1px solid rgba(249, 115, 22, 0.4);
  box-shadow: none;
}

.btn-outline:hover {
  background: rgba(249, 115, 22, 0.07);
  border-color: var(--brand);
  box-shadow: none;
}

/* ── Messages (toasts) ──────────────────────────────────────────
   FUN-128: these used to be in-flow blocks toggling display none/block, so
   every message shoved the page down and every dismissal yanked it back up.
   flash.js now renders into #flash-toasts (below) and the .msg elements left in
   the markup are inert anchors — kept because callers pass the element as the
   identity key for their own timer, not because anything is drawn there. */
.msg { display: none; }

/* In-flow notice at the top of a form (e.g. "You've been invited to join …").
   Unlike .msg it stays put and pushes the form down, because it describes the
   form itself rather than the result of an action. */
.notice-banner {
  margin: 0 0 1.1rem;
  padding: .75rem .9rem;
  border-radius: 10px;
  background: var(--brand-glow);
  border: 1px solid var(--border-focus);
  color: var(--text);
  font-size: .85rem;
  line-height: 1.55;
}

#flash-toasts {
  position: fixed; top: 1rem; right: 1rem; z-index: 1000;
  display: flex; flex-direction: column; gap: .55rem;
  width: min(24rem, calc(100vw - 2rem));
  /* The column spans a fixed width but its empty area must not swallow clicks
     on the page underneath; individual toasts opt back in so their text can be
     selected and copied — which is the whole point of a 12-second error. */
  pointer-events: none;
}
#flash-toasts:empty { display: none; }

.toast {
  pointer-events: auto;
  padding: .7rem .9rem; border-radius: 10px;
  font-size: .875rem; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  /* Opaque base under the translucent tint: these float over page content, and
     --error-bg / --success-bg alone would let text show through. */
  background: #1a1a1a; color: var(--text); border: 1px solid var(--border);
  opacity: 1; transition: opacity .35s ease;
  animation: toast-in .18s ease-out;
  overflow-wrap: anywhere;
}
/* A message with no recognised type keeps the neutral base look above: flash.js
   leaves those up until the caller clears them (activation-admin's
   "Signing in…"), so they must not read as a success or a failure. */
.toast.fading { opacity: 0; }
.toast.error {
  background: linear-gradient(var(--error-bg), var(--error-bg)) #1a1a1a;
  color: var(--error); border: 1px solid var(--error-border);
}
.toast.success {
  background: linear-gradient(var(--success-bg), var(--success-bg)) #1a1a1a;
  color: var(--success); border: 1px solid var(--success-border);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-.4rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* ── Switch link ────────────────────────────────────────────── */
.switch-link {
  text-align: center;
  margin-top: 1.4rem;
  font-size: .85rem;
  color: var(--muted);
}

.switch-link a {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}

.switch-link a:hover { text-decoration: underline; }

/* ── Divider ────────────────────────────────────────────────── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.35rem 0;
}

/* ── Account page ───────────────────────────────────────────── */
.greeting {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .15rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}

.info-row:last-child { border-bottom: none; }

.info-label {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
}

.badge {
  padding: .22rem .65rem;
  border-radius: 99px;
  font-size: .75rem;
  font-weight: 600;
}

.badge.active    { background: rgba(52,211,153,0.12);  color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.badge.suspended { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.badge.pending   { background: rgba(251,191,36,0.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }

/* ── Usage meter ────────────────────────────────────────────── */
.usage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
}

.usage-used {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
}

.usage-quota {
  font-size: .8rem;
  color: var(--muted);
}

.usage-bar {
  height: 9px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 99px;
  overflow: hidden;
}

.usage-fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--brand);
  transition: width .4s ease;
}

.usage-fill.warn   { background: #fbbf24; }
.usage-fill.danger { background: var(--error); }

.usage-reset {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .55rem;
  line-height: 1.45;
}

/* ── Footer ─────────────────────────────────────────────────── */
.footer-note {
  text-align: center;
  font-size: .75rem;
  color: rgba(163, 163, 163, 0.4);
  margin-top: 1.5rem;
}

/* ════════════════════════════════════════════════════════════════
   Login — split layout (form left, branded hero right)
   Scoped to <body class="auth">, which is index.html's centered card.
   ════════════════════════════════════════════════════════════════ */
body.auth {
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background-image: none;
}

.auth-left {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 1.5rem 2rem;          /* top clears the fixed topbar */
}
.auth-left .card {
  margin-top: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  max-width: 380px;
}

.auth-right {
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 3.5rem 3rem;
  border-left: 1px solid var(--border);
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(249,115,22,0.18) 0%, transparent 60%),
    linear-gradient(155deg, #1b0a02 0%, #0c0c0c 45%, #050505 100%);
}
/* decorative blurred glow blobs */
.auth-right::before,
.auth-right::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.auth-right::before { width: 320px; height: 320px; top: -60px; right: -40px; background: rgba(249,115,22,0.22); }
.auth-right::after  { width: 260px; height: 260px; bottom: -80px; left: -60px; background: rgba(194,65,12,0.18); }

.auth-hero { position: relative; z-index: 1; max-width: 420px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 700; color: var(--brand);
  background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.3);
  padding: .3rem .7rem; border-radius: 99px; margin-bottom: 1.4rem;
}
.hero-title {
  font-size: 2.1rem; font-weight: 700; color: var(--white);
  line-height: 1.15; letter-spacing: -.5px; margin-bottom: .9rem;
}
.hero-sub { font-size: 1rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.6rem; }
.hero-points { list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.hero-points li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .92rem; color: var(--text);
}
.hero-points li::before {
  content: "✓"; color: var(--brand); font-weight: 800; flex-shrink: 0;
}

@media (max-width: 860px) {
  .auth-right { display: none; }
  .auth-left { flex-basis: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   Dashboard — sidebar + main area  (<body class="dash">)
   ════════════════════════════════════════════════════════════════ */
body.dash {
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  background-image: none;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  background: #0d0d0d;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 1.1rem .8rem;
}

.side-brand {
  display: flex; align-items: center; gap: .6rem;
  padding: .35rem .45rem 1.05rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .85rem;
}
/* Same rule as .product-icon: the icon supplies its own tile and glow. */
.brand-logo {
  width: 38px; height: 38px; flex-shrink: 0; display: block;
}
.brand-text { line-height: 1.2; min-width: 0; }
.brand-name { font-weight: 700; color: var(--white); font-size: .92rem; letter-spacing: -.2px; }
.brand-tag  { font-size: .7rem; color: var(--muted); }

.side-nav { display: flex; flex-direction: column; gap: .25rem; flex: 1; }

.nav-item {
  display: flex; align-items: center; gap: .65rem;
  width: 100%; text-align: left;
  padding: .62rem .7rem; border: none; border-radius: 9px;
  background: transparent; color: var(--muted);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  box-shadow: none; margin: 0;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255,255,255,0.07); color: var(--text); box-shadow: none; }
.nav-item.active { background: rgba(249,115,22,0.12); color: var(--brand); }
.nav-ico {
  width: 1.15rem; height: 1.15rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-ico svg { width: 100%; height: 100%; }

/* Account section pinned to the bottom of the sidebar */
.side-account { position: relative; border-top: 1px solid var(--border); padding-top: .7rem; margin-top: .7rem; }
/* Clamp the account name/email so a long value can't spill outside the sidebar. */
#account-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-caret { margin-left: auto; width: .85rem; height: .85rem; opacity: .7; flex-shrink: 0; }
.account-caret svg { width: 100%; height: 100%; }

.account-menu {
  position: absolute; bottom: calc(100% + .4rem); left: 0; right: 0;
  background: #1a1a1a; border: 1px solid var(--border); border-radius: 10px;
  padding: .3rem; box-shadow: 0 10px 34px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; gap: .12rem;
}
.account-menu.hidden { display: none; }
.account-menu button {
  width: 100%; text-align: left; background: transparent; color: var(--text);
  border: none; box-shadow: none; margin: 0; padding: .56rem .65rem; border-radius: 7px;
  font-size: .88rem; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; gap: .55rem;
  transition: background .12s;
}
.account-menu button:hover { background: rgba(255,255,255,0.08); }
.account-menu .menu-logout { color: var(--error); }

/* "Language" row — a submenu trigger with a flyout list of languages */
.menu-item-wrap { position: relative; }
.menu-lang-btn { position: relative; }
.menu-chevron { margin-left: auto; width: .8rem; height: .8rem; opacity: .6; flex-shrink: 0; }
.menu-chevron svg { width: 100%; height: 100%; }
.lang-submenu {
  position: absolute; left: 100%; margin-left: .35rem; min-width: 150px;
  /* Anchored to the row's BOTTOM edge so the list grows upward. The account
     popup lives at the bottom of the sidebar, so a downward list runs off the
     bottom of the window — and because the sidebar doesn't clip it, that
     stretches the document and adds a second page scrollbar next to
     .dash-main's. The max-height is the same guard for very short windows: the
     Language row sits ~14rem above the viewport bottom with every menu item
     visible, so subtracting 15rem keeps the top edge on screen and lets the
     list scroll inside itself instead of escaping. */
  bottom: 0; top: auto;
  max-height: calc(100vh - 15rem); overflow-y: auto;
  background: #1a1a1a; border: 1px solid var(--border); border-radius: 10px;
  padding: .3rem; box-shadow: 0 10px 34px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; gap: .12rem; z-index: 20;
}
.lang-submenu.hidden { display: none; }
/* FUN-127 — the .35rem gap above belongs to no element, so crossing it fired
   mouseleave on the wrap and shut the flyout before the pointer arrived. This
   pseudo-element makes the gap part of the submenu's own hit area (it is a DOM
   descendant of the wrap, so hovering it keeps the menu open). Slightly taller
   than the list on both edges to forgive a diagonal approach; JS adds a close
   delay for the rest. */
.lang-submenu::before {
  content: ""; position: absolute;
  left: -.6rem; width: .6rem; top: -.4rem; bottom: -.4rem;
}
.lang-submenu .lang-opt {
  width: 100%; text-align: left; background: transparent; color: var(--text);
  flex-shrink: 0;  /* don't squash the rows once the list starts scrolling */
  border: none; box-shadow: none; margin: 0; padding: .5rem .65rem; border-radius: 7px;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.lang-submenu .lang-opt:hover { background: rgba(255,255,255,0.08); }
.lang-submenu .lang-opt.active { color: var(--brand); }

.dash-main {
  flex: 1; min-width: 0; height: 100vh; overflow-y: auto;
  padding: 1.6rem 2rem 2.5rem;
}

/* Danger button (delete / cancel) */
.btn-danger {
  background: var(--error); color: #fff;
  box-shadow: 0 2px 20px rgba(248,113,113,0.3);
}
.btn-danger:hover { background: #ef4444; box-shadow: 0 4px 28px rgba(248,113,113,0.45); }

/* Small inline button (e.g. Copy org ID) */
.mini-btn {
  width: auto; margin: 0; padding: .22rem .6rem;
  font-size: .72rem; font-weight: 600;
  background: var(--input-bg); color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px; box-shadow: none;
  cursor: pointer; flex-shrink: 0;
}
.mini-btn:hover { color: var(--text); border-color: var(--border-focus); background: rgba(249,115,22,0.06); box-shadow: none; }
.mini-btn.danger { color: #f87171; border-color: rgba(248,113,113,0.35); }
.mini-btn.danger:hover { color: #fff; background: #ef4444; border-color: #ef4444; }
/* Disabled = "not yet", with a title= explaining why (e.g. Delete on a PC that
   is still online). Pointer events stay ON so that tooltip is reachable, so the
   hover styles have to be neutralised explicitly. */
.mini-btn:disabled,
.mini-btn.danger:disabled { opacity: .45; cursor: not-allowed; }
.mini-btn:disabled:hover { color: var(--muted); background: var(--input-bg); border-color: var(--border); }
.mini-btn.danger:disabled:hover { color: #f87171; background: var(--input-bg); border-color: rgba(248,113,113,0.35); }

/* ── Tabs ───────────────────────────────────────────────────── */
.tabs {
  display: flex; gap: .3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.2rem;
}
.tab-btn {
  width: auto; margin: 0; padding: .55rem .95rem;
  font-size: .9rem; font-weight: 600;
  background: transparent; color: var(--muted);
  border: none; border-bottom: 2px solid transparent; border-radius: 0;
  box-shadow: none; cursor: pointer;
}
.tab-btn:hover { color: var(--text); box-shadow: none; }
.tab-btn.active { color: var(--text); border-bottom-color: var(--brand); }

/* Template list description + details-modal prompt block */
.tpl-desc {
  display: block; margin-top: .15rem;
  font-size: .78rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpl-open:hover > span:first-child { color: var(--brand); }
.tpl-prompt {
  white-space: pre-wrap; word-break: break-word;
  max-height: 50vh; overflow: auto;
  margin: 0 0 1rem;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px;
  padding: .7rem .85rem; font-size: .8rem; line-height: 1.5; color: var(--text);
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.62);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.6rem; width: 100%; max-width: 440px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.modal-box h3 { font-size: 1.1rem; color: var(--white); margin-bottom: .7rem; }
.modal-box p  { color: var(--muted); font-size: .875rem; line-height: 1.55; margin-bottom: .9rem; }
.modal-actions { display: flex; gap: .7rem; margin-top: 1.1rem; }
.modal-actions .btn { margin: 0; }
.dash-main-inner { width: 100%; max-width: 980px; margin: 0 auto; }

.view-head { margin-bottom: 1.2rem; }
.view-head h1 { font-size: 1.4rem; }
.view-head p  { color: var(--muted); font-size: .9rem; margin-top: .2rem; }

[hidden] { display: none !important; }

@media (max-width: 720px) {
  .sidebar { width: 64px; padding: 1.1rem .5rem; }
  .brand-text, .nav-item span:not(.nav-ico), .account-caret { display: none; }
  .nav-item { justify-content: center; padding: .62rem 0; }
  .side-brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .dash-main { padding: 1.2rem 1rem 2rem; }
}

/* One meter per AI-Power pool (Billing + Usage). Spacing only — the head, bar
   and reset line inside each row reuse the single-meter styles above. */
.pool-row + .pool-row { margin-top: 1.1rem; }
.pool-row .usage-reset { margin-bottom: 0; }