/* ============================================================
   PremBonkerCS2 - customer area and account menu.

   Built on the design template's tokens and components (shell.css supplies
   --bg, --surface, .btn, .card, .container, .pill, .mono; contact.css supplies
   .form and .field). Everything here is what the template did not already
   have: the account menu, flash messages and the signed-in pages.
   ============================================================ */

/* ---- account menu in the nav ------------------------------ */
.acct { position: relative; }
.acct > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 13px 5px 5px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text); font-weight: 600; font-size: var(--fs-sm);
  transition: border-color .2s, background .2s;
}
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary::after {
  content: ""; width: 6px; height: 6px; margin-left: 1px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-1px, -1px);
}
.acct > summary:hover { border-color: var(--violet); background: var(--surface-3); }
.acct__avatar {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem; color: #fff;
  background: var(--grad-brand);
}
.acct__panel {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 194px; z-index: 60;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: #170e2bf2; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); backdrop-filter: blur(18px);
}
.acct__panel a, .acct__panel button {
  text-align: left; padding: 9px 12px; border-radius: var(--r-sm); border: 0; width: 100%;
  background: none; color: var(--text-2); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.acct__panel a:hover, .acct__panel button:hover { background: #a78bfa1f; color: #fff; }
.acct__admin { color: var(--lilac) !important; }
/* Usernames run to 32 characters with no spaces; one must not stretch the nav. */
.acct__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__panel form { margin: 0; }

/* ---- flash messages --------------------------------------- */
.flash-stack {
  position: fixed; top: 86px; right: 22px; z-index: 300;
  display: flex; flex-direction: column; gap: 10px; max-width: min(92vw, 390px);
}
.flash {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px;
  border-radius: var(--r-md); background: #1a1030f2; border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-1); backdrop-filter: blur(14px); font-size: var(--fs-sm);
  animation: flashIn .3s ease;
}
.flash span { flex: 1; }
.flash-success { border-left: 3px solid var(--ok); }
.flash-error { border-left: 3px solid var(--danger); }
.flash-info { border-left: 3px solid var(--violet); }
.flash-x { background: none; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
@keyframes flashIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ---- customer-area scaffolding ---------------------------- */
.page-app { background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; }
/* The template's nav is position:fixed, so our own pages have to clear it. */
.page-app main { flex: 1 0 auto; padding-top: var(--nav-h); overflow-wrap: break-word; }
.app-head { padding: clamp(28px, 4vw, 52px) 0 22px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.app-head h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 0 0 .25em; }
.app-head p { margin: 0; color: var(--muted); }
.app-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 22px; align-items: start; padding-bottom: 64px; }
.app-full { padding-bottom: 64px; }

.tile {
  padding: 24px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); background-image: var(--grad-surface);
}
.tile h3 {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em; margin: 0 0 14px;
}
/* Cards stacked in a column. The licence card is not a .tile, and with only
   ".tile + .tile" here the tile under it sat flush against it. */
.tile + .tile, .licence + .tile { margin-top: 22px; }
/* The "see more" link at the foot of a tile, sized like the rows above it. */
.tile-link {
  display: inline-block; margin-top: 16px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--lilac);
}
.tile-link:hover { color: #fff; }
/* Heading above a table or tile in a single-column page; the first one sits
   under a block, the rest under tables, so the top margin does the spacing. */
.section-title { font-family: var(--font-display); font-size: 1.15rem; margin: 34px 0 14px; }
.app-full > .section-title:first-child { margin-top: 0; }
.keycard + .fine { display: block; margin: 6px 0 14px; }
.keycard + .fine:last-child { margin-bottom: 0; }

.mini-row {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.mini-row:last-child { border-bottom: 0; }
/* Let a long email or username wrap instead of pushing the row wider. */
.mini-row > * { min-width: 0; }

/* ---- licence card ----------------------------------------- */
.licence {
  padding: 28px; border-radius: var(--r-lg); position: relative; overflow: hidden;
  border: 1px solid var(--line-strong);
  background: linear-gradient(135deg, #a78bfa1f, #f472b614), var(--surface);
}
.licence__key {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: .12em; color: var(--text);
  background: #07040fa6; border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 13px 15px;
}
.licence__key button {
  background: none; border: 0; color: var(--lilac); font: inherit; font-size: var(--fs-sm);
  cursor: pointer; text-decoration: underline;
}

.state {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px;
  border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; font-family: var(--font-display);
}
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.state--active { background: var(--ok-dim); color: var(--ok); }
.state--expired { background: #f8717126; color: var(--danger); }
.state--none { background: #9a8bb826; color: var(--muted); }
.state--revoked { background: #fbbf2426; color: var(--warn); }

/* ---- downloads -------------------------------------------- */
.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dl {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
}
.dl__icon {
  width: 50px; height: 50px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center;
  background: #a78bfa1a; border: 1px solid var(--line-strong); color: var(--lilac);
}
.dl__meta { flex: 1; min-width: 0; }
.dl__meta b { display: block; font-family: var(--font-display); color: var(--text); }
.dl__meta span { display: block; color: var(--muted); font-size: var(--fs-xs); }
.dl.is-locked { opacity: .6; }

/* ---- tables ----------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 640px; }
table.data th, table.data td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: #a78bfa0d; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.inline-form input[type="number"] { width: 78px; }

/* ---- stat strip --------------------------------------------
   shell.css carries .stats/.stat rules, but only colours and
   borders - the template's own pages never use them, so the
   layout half was never written. This is that half. */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat { padding: 22px 24px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .num {
  font-family: var(--font-numeral); font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 700; letter-spacing: -.02em; color: var(--text); display: block;
}
.stat span {
  display: block; margin-top: 8px; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  /* The bottom row needs no rule of its own - .stats already draws one. */
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
  /* Five cells in two columns leaves the last one alone: let it run wide so
     its edge lines up with the strip instead of stopping halfway. */
  .stats--5 .stat:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stats--5 .stat:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
}

/* ---- selects ------------------------------------------------
   The template hides the native arrow (appearance: none) and
   draws its own next to the field; ours are plain <select>s, so
   they need the chevron drawn on the control itself. */
.field select {
  --chev: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
          linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  padding-right: 40px;
}
/* :focus repeats it because the template's focus rule uses the
   background shorthand, which would wipe the arrow out. */
.field select, .field select:focus {
  background-image: var(--chev);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* ---- tabs / toolbar --------------------------------------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tabs a {
  padding: 8px 15px; border-radius: var(--r-pill); border: 1px solid var(--line);
  color: var(--text-2); font-size: var(--fs-sm); font-weight: 600;
}
.tabs a:hover { border-color: var(--line-strong); color: #fff; }
.tabs a.is-active { background: var(--grad-brand); color: #fff; border-color: transparent; }
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 20px; }

/* ---- auth pages ------------------------------------------- */
.auth-shell { min-height: calc(100vh - var(--nav-h) - 220px); display: grid; place-items: center; padding: clamp(40px, 7vw, 90px) 0; }
.auth-card {
  width: 100%; max-width: 440px; padding: 38px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2);
  background-image: var(--grad-surface);
}
.auth-card h1 { font-family: var(--font-display); font-size: 1.85rem; margin: 0 0 .2em; }
.auth-sub { color: var(--muted); margin-bottom: 26px; font-size: var(--fs-sm); }
.auth-alt { margin-top: 22px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.auth-divider {
  display: flex; align-items: center; gap: 14px; margin: 24px 0;
  color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-social { display: flex; flex-direction: column; gap: 10px; }
.btn--social {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; transition: border-color .2s, background .2s; text-decoration: none;
}
.btn--social:hover { border-color: var(--lilac); background: #ffffff08; }
.btn--social svg { width: 18px; height: 18px; flex-shrink: 0; }
.form-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 20px; font-size: var(--fs-sm); }
.pw-meter { height: 5px; border-radius: 4px; background: #ffffff14; overflow: hidden; margin-top: 8px; }
.pw-meter i { display: block; height: 100%; width: 0; background: var(--grad-brand); transition: width .3s; }

/* single-column variant of the template's two-column .form grid */
.form--stack { grid-template-columns: 1fr; }

/* the status widget must not be squeezed by the account buttons next to it */
.nav__right .status-wrap { flex: none; }

/* ---- nav wordmark ------------------------------------------
   The wordmark never gives up width. When it did, the text spilled out
   of its shrunken box: into "Home" at 1024px, under the menu button on
   phones. Measured, not guessed - see scripts/render_audit.py. */
.nav__brand { flex: none; }
/* 901–1180px shows the full nav, and the template's status pill plus our
   account buttons do not fit beside the wordmark. The pill is decoration
   (the status bar and the footer carry it too), so it steps aside. */
@media (min-width: 901px) and (max-width: 1180px) {
  .nav__right .status-wrap { display: none; }
}
/* Signed in, just above the burger breakpoint, there is still ~30px too
   little. "Dashboard" is also the first item in the account menu. */
@media (min-width: 901px) and (max-width: 1000px) {
  .nav__links .nav__dash { display: none; }
}
/* The menu button is a circle; squeezed, it became a 32x44 oval. */
.nav__burger { flex: none; }
/* Phones: at full size the wordmark runs under the menu button. */
@media (max-width: 440px) {
  .nav__inner { gap: 12px; }
  .nav__brand { font-size: .95rem; gap: 10px; }
}
@media (max-width: 380px) {
  .nav__brand { font-size: .85rem; }
  .nav__brand img { width: 30px; height: 30px; }
}
@media (max-width: 340px) {
  .nav__brand { font-size: .72rem; gap: 8px; }
}

/* ---- small helpers ---------------------------------------- */
.stack-lg { display: flex; flex-direction: column; gap: 22px; }
.between { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.danger-zone { border-color: #f8717152; }
.danger-zone h3 { color: var(--danger); }
.fine { font-size: var(--fs-xs); color: var(--muted-2); }

@media (max-width: 900px) {
  /* minmax(0,…), not 1fr: a wide table inside would otherwise set the column's
     min-content width and push the whole page sideways. */
  .app-grid { grid-template-columns: minmax(0, 1fr); }
  .dl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .flash-stack { left: 16px; right: 16px; max-width: none; }
}

/* ============================================================
   Chat - the customer's direct line, and the admin inbox.
   Both sides render the same .msg markup (partials/chat-message.php
   and the append path in app-v2.js), so a conversation reads the
   same from either end.
   ============================================================ */
.chat {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); background-image: var(--grad-surface);
}
.chat__log {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; overflow-y: auto; scroll-behavior: smooth;
  height: min(58vh, 560px); min-height: 280px;
  /* a faint floor so bubbles do not float on a flat panel */
  background:
    radial-gradient(120% 60% at 50% 0%, #a78bfa0f, transparent 70%),
    repeating-linear-gradient(-45deg, #ffffff03 0 2px, transparent 2px 9px);
}
/* A short conversation should sit on the composer, not float at the top.
   An auto-margin spacer does that without the scroll clipping you get from
   justify-content: flex-end on an overflowing flex column. */
.chat__log::before { content: ""; margin-top: auto; }
.chat--admin .chat__log { height: min(46vh, 430px); }
.chat__log::-webkit-scrollbar { width: 8px; }
.chat__log::-webkit-scrollbar-thumb { background: #ffffff1a; border-radius: 8px; }

.chat__empty {
  margin: auto; text-align: center; color: var(--muted); max-width: 32ch;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.chat__empty svg { width: 42px; height: 42px; color: var(--violet); opacity: .8; }
.chat__empty p { margin: 0; font-size: var(--fs-sm); }

.msg { display: flex; flex-direction: column; gap: 6px; max-width: 78%; }
.msg--me { align-self: flex-end; align-items: flex-end; }
.msg--them, .msg--system { align-self: flex-start; }
.msg__bubble {
  padding: 13px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6;
}
.msg--me .msg__bubble {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7 62%, #c026d3);
  border-bottom-right-radius: 5px;
}
.msg--them .msg__bubble { border-bottom-left-radius: 5px; border-color: var(--line-strong); }
.msg--system .msg__bubble { background: none; border-style: dashed; color: var(--muted); }
.msg__text { margin: 0; overflow-wrap: anywhere; }
.msg__time { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--muted-2); }

.msg__tag {
  display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  background: #ffffff1f; color: #fff;
}
.msg--them .msg__tag { background: #a78bfa26; color: var(--lilac); }
.msg__tag--ok { background: var(--ok-dim) !important; color: var(--ok) !important; }
.msg__plan {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  background: #07040f4d; border: 1px solid #ffffff1f;
}
.msg--them .msg__plan { background: #07040f80; }
/* fine print on the violet bubble: the site-wide grey vanishes into it */
.msg--me .fine { color: #ffffffb3; }

/* ---- composer ---------------------------------------------- */
.chat__composer {
  display: flex; gap: 12px; align-items: flex-end; margin: 0;
  padding: 14px; border-top: 1px solid var(--line); background: #07040f66;
}
.chat__composer textarea {
  flex: 1; min-height: 46px; max-height: 190px; resize: none; line-height: 1.55;
  padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: #07040f99; color: var(--text); font: inherit; font-size: var(--fs-sm); outline: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.chat__composer textarea::placeholder { color: var(--muted-2); }
.chat__composer textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 4px #8b5cf61f; }
.chat__composer .btn { flex: none; }

/* ---- key card: readable head, blurred tail ------------------ */
.keycard {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between;
  margin-top: 12px; padding: 11px 14px; border-radius: var(--r-sm);
  background: #07040fb3; border: 1px dashed var(--line-strong);
}
.keycard__value {
  font-family: var(--font-mono); font-size: .95rem; letter-spacing: .1em; color: var(--text);
  white-space: nowrap;
}
.keycard__mask {
  filter: blur(5px); user-select: none; transition: filter .25s ease;
  /* keep the blur inside the card instead of smearing over the border */
  display: inline-block; padding: 0 2px;
}
.keycard:not(.is-masked) .keycard__mask { filter: none; user-select: text; }
.keycard__actions { display: flex; gap: 12px; }
.keycard__btn {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--lilac);
  font: inherit; font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 3px;
}
.keycard__btn:hover { color: #fff; }
.keycard--big { margin: 4px 0 18px; padding: 18px; }
.keycard--big .keycard__value { font-size: clamp(1rem, 2.1vw, 1.45rem); }
.keycard--inline {
  display: inline-flex; margin: 0; padding: 6px 10px; gap: 10px;
  border-style: solid; border-color: var(--line); background: #07040f80;
}
.keycard--inline .keycard__value { font-size: var(--fs-xs); }
.keycard--inline .keycard__actions { gap: 9px; }

/* ---- admin inbox ------------------------------------------- */
.inbox { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 22px; align-items: start; padding-bottom: 64px; }
.inbox__list {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); max-height: 78vh; overflow-y: auto;
}
.inbox__filter { margin: 0; padding: 12px; border-bottom: 1px solid var(--line); }
.inbox__filter input {
  width: 100%; padding: 10px 13px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: #07040f99; color: var(--text); font: inherit; font-size: var(--fs-sm); outline: none;
}
.inbox__tabs { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.inbox__tabs a { font-size: var(--fs-xs); color: var(--muted); padding: 5px 10px; border-radius: var(--r-pill); }
.inbox__tabs a.is-active { background: #a78bfa26; color: #fff; }

.inbox__row {
  display: flex; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line);
  color: var(--text-2); transition: background .2s;
}
.inbox__row:hover { background: #a78bfa0f; }
.inbox__row.is-active { background: #a78bfa1f; box-shadow: inset 3px 0 0 var(--violet); }
.inbox__avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: .8rem; color: #fff; background: var(--grad-brand);
}
.inbox__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.inbox__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.inbox__top b {
  color: var(--text); font-size: var(--fs-sm);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox__when { font-family: var(--font-mono); font-size: 10px; color: var(--muted-2); font-style: normal; }
.inbox__badge {
  font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--violet);
  border-radius: var(--r-pill); padding: 2px 7px; min-width: 18px; text-align: center;
}
.inbox__preview {
  font-size: var(--fs-xs); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.inbox__meta .pill { font-size: 9px; padding: 2px 8px; font-style: normal; }

.inbox__pane { display: flex; flex-direction: column; gap: 18px; }
.inbox__head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.inbox__head h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 2px; }
.inbox__head p { margin: 0; font-size: var(--fs-xs); }
.inbox__headmeta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---- approve & send ---------------------------------------- */
.approve {
  padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line-strong);
  background: linear-gradient(135deg, #a78bfa14, #f472b60f), var(--surface);
}
.approve h3 {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em; margin: 0 0 16px;
}
.approve__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.approve .field { margin-bottom: 16px; }
.approve .field:last-of-type { margin-bottom: 20px; }

/* ---- key generator ----------------------------------------- */
.keygen { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.keygen__form, .keygen__out {
  padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); background-image: var(--grad-surface);
}
.keygen__out { border-color: var(--line-strong); background: linear-gradient(135deg, #a78bfa17, #f472b60f), var(--surface); }
.keygen h3 {
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em; margin: 0 0 18px;
}
.keygen__row { display: grid; grid-template-columns: minmax(0, 1.4fr) 110px minmax(0, 1.2fr); gap: 14px; margin-bottom: 20px; }
.field--narrow input { text-align: center; }

/* ---- plan picker in the chat sidebar ----------------------- */
.plan-pick { display: flex; flex-direction: column; gap: 8px; }
.plan-pick__item {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: #07040f66; color: var(--text-2); transition: border-color .2s, background .2s, transform .2s;
}
.plan-pick__item:hover { border-color: var(--violet); background: #a78bfa14; transform: translateX(2px); }
.plan-pick__item b { display: block; color: var(--text); font-size: var(--fs-sm); }
.plan-pick__item small { color: var(--muted-2); font-size: var(--fs-xs); }
.plan-pick__item em { font-style: normal; color: var(--lilac); font-size: var(--fs-sm); }

.steps { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: var(--fs-sm); line-height: 1.75; }
.steps li::marker { color: var(--lilac); font-family: var(--font-mono); }

.pill--warn { background: #fbbf2422; color: var(--warn); border-color: #fbbf2440; }

/* unread count next to "Messages" in the account menu */
.acct__count, .nav__count {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px;
  border-radius: var(--r-pill); background: var(--violet); color: #fff;
  font-size: 10px; font-weight: 700; text-align: center; vertical-align: 1px;
}

@media (max-width: 1000px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox__list { max-height: 360px; }
  .keygen { grid-template-columns: 1fr; }
  .keygen__row { grid-template-columns: 1fr 1fr; }
  .approve__row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .msg { max-width: 92%; }
  .keygen__row { grid-template-columns: 1fr; }
  .keycard { flex-direction: column; align-items: flex-start; }
  /* A full key is ~245px at desktop size and a phone bubble has ~214px for it;
     tighter tracking fits it, and it may still break at a hyphen if not. */
  .keycard__value { white-space: normal; font-size: .85rem; letter-spacing: .06em; }
}

/* ---- template fix ------------------------------------------ */
/* The template gives some hidden-by-default blocks a display value of their
   own (.confirm is display:grid), which beats the hidden attribute. The fake
   "Ticket PBK-48213 received" panel sat permanently under the contact form. */
[hidden] { display: none !important; }

/* The settings-menu mock-up on the home page. Its wordmark was 16px wider
   than the sidebar it sits in, so it touched the divider on desktop; on
   phones the sidebar is 92px and the word ran straight across the panel. */
.menu__brand b { font-size: 15px; letter-spacing: 0; }
@media (max-width: 560px) {
  .menu { grid-template-columns: 136px 1fr; }
  .menu__side { padding: 16px 12px; }
  .menu__brand { padding-inline: 2px; }
  .menu__brand b { font-size: 12px; }
  /* "142 fps | 1920x1080" broke mid-phrase; stack the two instead. */
  .menu__meta { flex-direction: column; gap: 2px; padding-inline: 2px; }
  .menu__meta span + span::before { display: none; }
}

/* Round avatars in a flex row get squeezed into ovals by a long name beside
   them (the vouch cards did exactly that). Circles keep their size. */
.vouch__avatar, .acct__avatar { flex: none; }

/* Feature grid on the home page. Rows pair a card with a screenshot and one
   with only an icon; the icon card is stretched to the screenshot's height and
   its text hung at the top over an empty lower half. The text now sits on the
   bottom edge of every card, so each row reads as one line of captions. */
.features .card { display: flex; flex-direction: column; }
.features .card__icon + .card__tag { margin-top: auto; }
/* A screenshot card shorter than its row lets the screenshot take the slack
   (it is object-fit: cover) rather than leaving a gap under the caption. */
.features .card__media { flex: 1 0 auto; }
/* Three columns with rows of 2+1 and 1+2, then a last row of 1+1 that left a
   hole in the corner: the final card takes the two remaining columns. */
@media (min-width: 1101px) {
  .features > .card:last-child:nth-child(8):not(.card--wide) { grid-column: span 2; }
}
/* Two columns: "Wall warning" stood alone beside a gap, because the wide radar
   card after it needs a whole row. Give it the row. */
@media (min-width: 769px) and (max-width: 1100px) {
  .features > .card:nth-child(5):not(.card--wide) { grid-column: span 2; }
}

/* The comparison table tinted its 4th column, which was "Month" in the
   template's four-plan ladder. Columns now follow the plans table, so the
   "Most popular" plan marks its own cells instead. */
.matrix td:nth-child(4) { background: none; }
.matrix td.is-hot { background: linear-gradient(#f472b60f, #f472b605); }

/* The design was drawn for exactly four tiers (a 4-column grid). How many
   plans exist is up to the plans table, so a fifth one used to sit alone in
   a half-empty row. Flex wrapping centres whatever is left over instead. */
.tiers--page {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--gap, 22px);
}
.tiers--page .tier { flex: 1 1 248px; max-width: 306px; }
@media (max-width: 720px) {
  .tiers--page .tier { max-width: none; }
}

/* The decorative giant wordmark at the bottom of the footer is meant to bleed
   past the container. Left alone it widens the document by ~500px and the whole
   page scrolls sideways, so clip it at the footer edge instead. */
.footer { overflow-x: clip; }
/* .stack is a grid, so an inline-flex pill would stretch the full column. */
.footer .stack .status { justify-self: start; }

/* ---- cursor: simple glowing dot, no ring/crosshair -------- */
.cursor__ring,
.cursor__label { display: none !important; }
.cursor__dot {
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--pink-soft);
  box-shadow: 0 0 10px 2px #f472b6cc, 0 0 24px 4px #f472b666;
}
.cursor[data-mode=aim] .cursor__dot,
.cursor[data-mode=link] .cursor__dot { opacity: 1; }
.cursor[data-mode=text] .cursor__dot {
  border-radius: 2px; width: 3px; height: 22px; margin: -11px 0 0 -1.5px;
  box-shadow: 0 0 8px 1px #c4b5fdcc;
  background: var(--lilac);
}

/* ---- pricing fineprint: clear the tier cards --------------- */
.fineprint { margin-top: 48px; }

/* ---- kill all hover translate/shift animations ------------ */
/* Keep only the ::before swipe shine on .btn--primary. */
.btn:hover,
.btn:hover .btn__label > span,
.btn:hover svg,
.tier:hover,
.proof:hover,
.teaser__card:hover,
.plan-pick__item:hover,
.menu-wrap:hover .menu { transform: none !important; transition-duration: 0s !important; }

/* ---- nav always visible ----------------------------------- */
.nav.is-hidden { transform: none !important; }

/* ---- smaller page titles ---------------------------------- */
.scene__title { font-size: min(var(--fs-2xl), 7vh, 8.5vw) !important; }
@media (min-width: 1024px) {
  .scene__title { font-size: min(var(--fs-2xl), 9vh, 8vw) !important; }
}