/* ==========================================================================
   Login, sign-up, password reset and account pages
   Loaded after style.css and built on its design tokens (colors, fonts, radii).
   ========================================================================== */
.auth-section {
  position: relative;
  padding: clamp(24px, 5vw, 64px) 0 clamp(56px, 8vw, 96px);
}

/* the hidden attribute must win over the display values set below */
.auth-msg[hidden],
.auth-step[hidden],
.field-error[hidden],
[data-resend][hidden] {
  display: none;
}

.auth-layout {
  display: grid;
  gap: 20px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}
.auth-card {
  padding: clamp(24px, 5vw, 44px);
  border-radius: var(--radius-xl);
}
.auth-card--narrow {
  width: min(100%, 480px);
  margin: 0 auto;
}
.auth-title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 36px);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.auth-lead {
  margin: 12px 0 0;
  color: var(--text-muted);
}
.auth-alt {
  margin: 24px 0 0;
  color: var(--text-muted);
  font-size: 15px;
  text-align: center;
}
.auth-alt a,
.auth-link {
  color: var(--lime);
  font-weight: 600;
}

.nowrap {
  white-space: nowrap;
}
.link-button {
  min-height: 44px;
  padding: 8px;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.auth-resend {
  margin-top: 12px;
}

/* ---------- messages (errors, notices) ---------- */
.auth-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.auth-msg .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--text-muted);
}
.auth-msg[data-tone="error"] {
  border-color: rgba(255, 90, 106, 0.45);
  background: rgba(255, 90, 106, 0.08);
}
.auth-msg[data-tone="error"] .icon {
  color: var(--down);
}
.auth-msg[data-tone="success"] {
  border-color: rgba(43, 243, 145, 0.4);
  background: rgba(43, 243, 145, 0.07);
}
.auth-msg[data-tone="success"] .icon {
  color: var(--mint);
}

/* ---------- form fields ---------- */
.field {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.field label {
  font-weight: 500;
  font-size: 14px;
}
.field .req {
  color: var(--lime);
}
.field .opt {
  color: var(--text-subtle);
  font-weight: 400;
}
.field-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.field-row a {
  display: inline-block;
  padding: 4px 0;
  color: var(--text-muted);
  font-size: 14px;
}
.input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: 400 16px/1.4 var(--font-body);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.input::placeholder {
  color: var(--text-subtle);
}
.input:hover {
  border-color: rgba(255, 255, 255, 0.28);
}
.input:focus-visible {
  outline: none;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(25, 211, 255, 0.22);
}
.input[aria-invalid="true"] {
  border-color: var(--down);
}
.input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 90, 106, 0.25);
}
select.input {
  padding-right: 44px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9a8b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
select.input option {
  background: var(--surface-2);
  color: var(--text);
}
.input-wrap {
  position: relative;
}
.input-wrap--action .input {
  padding-right: 56px;
}
.input-wrap--prefix .input {
  padding-left: 36px;
}
.input-prefix {
  position: absolute;
  top: 50%;
  left: 16px;
  translate: 0 -50%;
  color: var(--text-subtle);
  pointer-events: none;
}
.toggle-pw {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.toggle-pw:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.toggle-pw .icon-hide,
.toggle-pw[aria-pressed="true"] .icon-show {
  display: none;
}
.toggle-pw[aria-pressed="true"] .icon-hide {
  display: block;
}
.hint {
  margin: 0;
  color: var(--text-subtle);
  font-size: 13px;
}
.field-error {
  margin: 0;
  color: #ff8a8a;
  font-size: 13px;
}
.check-field {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 12px;
  align-items: start;
  margin-top: 22px;
}
.check-field input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--lime);
  cursor: pointer;
}
.check-field label {
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
}
.check-field label a {
  color: var(--lime);
}
.check-field .field-error {
  grid-column: 2;
}
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.form-actions .btn {
  flex: 1;
}
.form-actions .btn-back {
  flex: 0 0 auto;
}

/* busy buttons */
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn.is-busy {
  opacity: 1;
  cursor: progress;
}
.btn.is-busy .icon {
  display: none;
}
.btn.is-busy::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid rgba(3, 12, 19, 0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ---------- sign-up steps ---------- */
.steps-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.steps-bar li {
  display: grid;
  gap: 8px;
  color: var(--text-subtle);
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease-out);
}
.steps-bar li::before {
  content: "";
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color var(--dur) var(--ease-out);
}
.steps-bar li.is-done::before,
.steps-bar li.is-current::before {
  background: var(--lime);
}
.steps-bar li.is-current {
  color: var(--text);
}
.auth-step {
  min-width: 0;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}
.step-legend {
  padding: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
}
.step-legend:focus-visible {
  outline: none;
}
.step-count {
  display: block;
  margin-bottom: 6px;
  color: var(--lime);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* "check your email" state */
.auth-done {
  text-align: center;
}
.auth-done-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 4px;
  border: 1px solid rgba(25, 211, 255, 0.3);
  border-radius: 50%;
  background: rgba(25, 211, 255, 0.1);
  color: var(--lime);
}
.auth-done-icon .icon {
  width: 28px;
  height: 28px;
}
.auth-done h2 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 30px);
  letter-spacing: 0.01em;
}
.auth-done h2:focus-visible {
  outline: none;
}
.auth-done p {
  margin: 12px auto 0;
  max-width: 36ch;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.auth-done strong {
  color: var(--text);
}
.auth-done .btn {
  margin-top: 24px;
}

/* ---------- free trial banner ---------- */
.trial-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(25, 211, 255, 0.3);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(25, 211, 255, 0.14), transparent 60%),
    rgba(25, 211, 255, 0.04);
  color: var(--text);
  text-decoration: none;
}
.trial-banner-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 2px;
  background: var(--grad);
  color: var(--on-accent);
}
.trial-banner-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.trial-banner strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
}
.trial-banner small {
  color: var(--text-muted);
  font-size: 14px;
}
a.trial-banner {
  margin-top: 28px;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
a.trial-banner:hover {
  border-color: rgba(25, 211, 255, 0.6);
}
a.trial-banner:active {
  transform: scale(0.99);
}
a.trial-banner > .icon {
  margin-left: auto;
  color: var(--lime);
}
/* phones: the trial panel comes under the box, with its three points (on wide screens it sits beside the box) */
.trial-panel {
  display: grid;
  gap: 20px;
}
.trial-panel .check-list {
  padding: 0 4px;
}

@media (min-width: 900px) {
  .auth-layout--split {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    gap: 32px;
  }
  .trial-panel {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    order: 0;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
  }
  .trial-panel .check-list {
    display: grid;
  }
}

/* ---------- dashboard: an app-style console (menu + one view at a time, like app.html) ---------- */
.form-msg[hidden],
.dash-view[hidden],
.dash-tool[hidden],
.dash-line[hidden],
.dash-empty[hidden] {
  display: none;
}

/* the dashboard is its own app screen: the top bar holds only the logo and the sign-out button,
   and there is no site footer (the website's pages are linked from the Plan and Tools tabs) */
body[data-auth-page="dashboard"] .primary-nav,
body[data-auth-page="dashboard"] .menu-toggle,
body[data-auth-page="dashboard"] .header-cta,
body[data-auth-page="dashboard"] .nav-menu-cta,
body[data-auth-page="dashboard"] .site-footer {
  display: none;
}
/* views differ in height: keep the scrollbar's space so the page doesn't jump sideways */
html:has(body[data-auth-page="dashboard"]) {
  scrollbar-gutter: stable;
}
/* room for the fixed menu at the bottom of the screen */
body[data-auth-page="dashboard"] {
  padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
}

.dash-shell {
  max-width: 980px;
  margin: 0 auto;
}

/* small capital label, like the app's .cap */
.cap {
  color: var(--text-subtle);
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ----- header strip ----- */
.dash-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dash-head-text {
  flex: 1;
  min-width: 0;
}
.avatar-lg {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border: 1px solid var(--frame);
  border-radius: 2px;
  background: var(--chip);
  color: var(--cyan);
  font: 700 22px/1 var(--font-display);
}
.dash-title {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 3.6vw, 28px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.dash-sub {
  margin: 4px 0 0;
  color: var(--text-subtle);
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

/* ----- layout: menu + deck of panels ----- */
.dash-layout {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}
.dash-deck {
  min-width: 0;
}
.dash-view,
.dash-tool {
  display: grid;
  gap: 12px;
}
[data-dash][aria-busy="true"] .dash-deck {
  opacity: 0.4;
  pointer-events: none;
}

/* ----- menu: a bottom dock on phones, exactly like the app ----- */
.dash-side {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column-reverse;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg);
}
.dash-dock {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.dash-dock button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 58px;
  margin-top: -1px;
  padding: 9px 0 10px;
  border: 0;
  border-top: 2px solid transparent;
  background: none;
  color: var(--text-subtle);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.dash-dock button[aria-selected="true"] {
  border-top-color: var(--cyan);
  color: var(--cyan);
}
.dash-dock button:focus-visible {
  outline-offset: -3px;
}
.dash-dock svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* action bar: its own row above the dock, so it never covers content */
.dash-actbar {
  padding: 10px var(--gutter);
  border-top: 1px solid var(--border);
  background: var(--bg);
}

@media (max-width: 1023.98px) {
  /* a field reached with the keyboard must not end up under the fixed menu */
  html:has(body[data-auth-page="dashboard"]) {
    scroll-padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }
}
/* a phone held sideways: no room for a fixed menu, so it sits above the panels */
@media (max-width: 1023.98px) and (max-height: 520px) {
  body[data-auth-page="dashboard"] {
    padding-bottom: 0;
  }
  .dash-side {
    position: static;
    flex-direction: column;
    padding-bottom: 0;
  }
  .dash-dock {
    border: 1px solid var(--border);
  }
  .dash-actbar {
    padding-inline: 0;
    border-top: 0;
  }
}

/* wide screens: the same menu becomes a side column */
@media (min-width: 1024px) {
  body[data-auth-page="dashboard"] {
    padding-bottom: 0;
  }
  .dash-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .dash-side {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    z-index: auto;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 0;
    background: none;
  }
  .dash-dock {
    grid-template-columns: 1fr;
    border: 1px solid var(--border);
    background: var(--surface);
  }
  .dash-dock button {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 50px;
    margin-top: 0;
    padding: 0 16px;
    border-top: 1px solid var(--border);
    font-size: 11px;
  }
  .dash-dock button:hover {
    background: var(--surface-2);
    color: var(--text-muted);
  }
  .dash-dock button[aria-selected="true"] {
    border-top-color: var(--border);
    background: var(--chip);
    color: var(--cyan);
    box-shadow: inset 2px 0 0 var(--cyan);
  }
  .dash-dock button:first-child {
    border-top: 0;
  }
  .dash-actbar {
    padding: 0;
    border: 0;
    background: none;
  }
}

/* ----- panels ----- */
.dash-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.dash-panel > h2 {
  margin: 0 0 12px;
  color: var(--text-subtle);
  font: 500 11px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dash-hint {
  margin: 10px 0 0;
  color: var(--text-subtle);
  font-size: 13px;
}
.dash-hint:first-of-type {
  margin-top: 0;
}
.dash-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dash-row > .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 10px;
}
/* long labels: side by side when there is room, one under the other on a phone */
.dash-row--wide > .btn {
  flex: 1 1 220px;
}
.dash-row + .dash-hint,
.dash-line + .dash-hint,
.dash-hint + .dash-row,
.dash-line + .dash-row,
.dash-row + .form-msg {
  margin-top: 12px;
}
/* "on" = this is the current state: solid fill, dark text (as in the app) */
.btn.is-on {
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--bg);
}
.btn-danger {
  border-color: #aa3241;
  background: #3a1422;
  color: #ff8a8a;
}
.btn-danger:hover {
  border-color: var(--bad);
}
/* a form's own button: the app's cyan-on-chip "primary" */
.btn-chip {
  border-color: var(--frame);
  background: var(--chip);
  color: var(--cyan);
}
.btn-chip:hover {
  border-color: var(--cyan);
}

/* label + value pairs */
.dash-kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash-kv b,
.dash-line b {
  color: var(--text);
  font: 600 14px/1.3 var(--font-display);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.dash-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}
.dash-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 9px;
  border-top: 1px solid var(--border);
}
.dash-line:first-of-type {
  padding-top: 0;
  border-top: 0;
}
.dash-line:last-of-type {
  padding-bottom: 0;
}
.dash-line b {
  text-align: right;
}
/* rows that open another page */
.dash-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 15px;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.dash-link:first-of-type {
  border-top: 0;
}
.dash-link .icon {
  width: 16px;
  height: 16px;
  color: var(--text-subtle);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dash-link:hover,
.dash-link:hover .icon {
  color: var(--cyan);
}
.dash-link:hover .icon {
  transform: translateX(2px);
}

/* ----- core: framed status panel with the ring ----- */
.dash-core {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 20px;
  border: 1px solid var(--frame);
  background: var(--surface);
  box-shadow: 0 0 0 2px rgba(31, 182, 214, 0.16), 0 0 26px var(--glow);
}
.dash-core::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  background:
    linear-gradient(var(--bracket), var(--bracket)) top left / 13px 1px,
    linear-gradient(var(--bracket), var(--bracket)) top left / 1px 13px,
    linear-gradient(var(--bracket), var(--bracket)) top right / 13px 1px,
    linear-gradient(var(--bracket), var(--bracket)) top right / 1px 13px,
    linear-gradient(var(--bracket), var(--bracket)) bottom left / 13px 1px,
    linear-gradient(var(--bracket), var(--bracket)) bottom left / 1px 13px,
    linear-gradient(var(--bracket), var(--bracket)) bottom right / 13px 1px,
    linear-gradient(var(--bracket), var(--bracket)) bottom right / 1px 13px;
  background-repeat: no-repeat;
}
.dash-ring {
  flex: none;
  width: 118px;
  height: 118px;
}
.dash-ring .ring-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 6;
}
.dash-ring .ring-arc {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 6;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  transition: stroke-dasharray 0.4s var(--ease-out), stroke 0.3s var(--ease-out);
}
.dash-ring .ring-dash {
  fill: none;
  stroke: var(--frame);
  stroke-width: 1.5;
  stroke-dasharray: 3 6;
  transform-origin: 60px 60px;
  animation: spin 14s linear infinite;
}
.dash-ring[data-tone="warn"] .ring-arc {
  stroke: var(--warn);
}
.dash-ring[data-tone="bad"] .ring-arc {
  stroke: var(--bad);
}
.dash-ring[data-tone="off"] .ring-dash,
.dash-ring[data-tone="bad"] .ring-dash {
  stroke: var(--text-subtle);
  animation-play-state: paused;
}
.dash-ring text {
  fill: var(--text);
  font-family: var(--font-display);
  text-anchor: middle;
}
.dash-ring .big {
  font-size: 26px;
  font-weight: 700;
}
.dash-ring .sub {
  fill: var(--text-subtle);
  font: 500 7.5px var(--font-mono);
  letter-spacing: 0.14em;
}
.dash-core-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.dash-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--good);
  font: 600 15px/1.2 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-pill[data-tone="warn"] {
  color: var(--warn);
}
.dash-pill[data-tone="bad"] {
  color: #ff8a8a;
}
.dash-pill[data-tone="off"] {
  color: var(--text-subtle);
}
.led {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
@media (max-width: 400px) {
  .dash-core {
    gap: 14px;
    padding: 18px 14px;
  }
  .dash-ring {
    width: 98px;
    height: 98px;
  }
}

/* ----- tools: segmented switch, like the app's ----- */
.dash-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  background: var(--surface);
}
.dash-seg button {
  min-height: 44px;
  padding: 11px 2px;
  border: 0;
  background: none;
  color: var(--text-subtle);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.dash-seg button[aria-selected="true"] {
  background: var(--chip);
  color: var(--cyan);
  box-shadow: inset 0 -2px 0 var(--cyan);
}
.dash-seg button:focus-visible {
  outline-offset: -3px;
}

/* ----- forms inside panels ----- */
.dash-panel form .field {
  margin-top: 14px;
}
.dash-panel form > .field:first-child,
.dash-panel form > .field-grid:first-child > .field:first-child {
  margin-top: 0;
}
.field-grid {
  display: grid;
  gap: 0 16px;
}
@media (min-width: 560px) {
  .field-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dash-panel form > .field-grid:first-child > .field {
    margin-top: 0;
  }
}
.dash-hint + form {
  margin-top: 14px;
}
.dash-panel .form-actions {
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.dash-panel .form-actions .btn {
  flex: 0 0 auto;
}
.form-msg {
  margin: 0;
  font-size: 14px;
}
.form-msg[data-tone="success"] {
  color: var(--good);
}
.form-msg[data-tone="error"] {
  color: #ff8a8a;
}

/* ----- log ----- */
/* what happened + its kind on the first line, the time under it */
.dash-ev {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  align-items: baseline;
  padding-block: 10px;
  border-top: 1px solid var(--border);
}
.dash-ev:first-child {
  padding-top: 0;
  border-top: 0;
}
.dash-ev:last-child {
  padding-bottom: 0;
}
.dash-ev p {
  grid-area: 1 / 1;
  margin: 0;
  color: var(--text);
  font-size: 14px;
}
.dash-ev .k {
  grid-area: 1 / 2;
  color: var(--text-subtle);
  font: 500 11px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dash-ev time {
  grid-area: 2 / 1 / auto / -1;
  color: var(--text-subtle);
  font: 400 11px/1.4 var(--font-mono);
}
.dash-ev .k[data-kind="plan"] {
  color: var(--cyan);
}
.dash-ev .k[data-kind="account"] {
  color: var(--good);
}
.dash-ev .k[data-kind="security"] {
  color: var(--warn);
}
.dash-empty {
  margin: 0;
  color: var(--text-subtle);
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .dash-ring .ring-dash {
    animation: none;
  }
  .dash-ring .ring-arc {
    transition: none;
  }
}

/* ==========================================================================
   Neon HUD theme for the account pages and the dashboard
   Same look as the rest of the site: cut-corner frames, cyan + lime neon,
   small capital labels, dark square inputs.
   ========================================================================== */

/* the card that holds a form: the key frame with a glow */
.auth-card {
  border: 1px solid transparent;
  border-image: var(--hud-frame) 24 fill / 24px;
  background: none;
  box-shadow: none;
  clip-path: none;
  filter: drop-shadow(0 0 16px var(--glow));
}

/* labels: small capitals */
.field label {
  color: var(--text-subtle);
  font: 500 11px/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.field .opt {
  letter-spacing: 0.06em;
}
.field .req {
  color: var(--neon);
}

/* inputs: dark, square, monospaced */
.input {
  border-color: var(--border-strong);
  background-color: var(--bg);
  color: var(--text);
  font: 500 16px/1.4 var(--font-mono);
}
.input:hover {
  border-color: var(--frame);
}
.input:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(25, 211, 255, 0.22);
}
.input[aria-invalid="true"] {
  border-color: var(--bad);
}
select.input option {
  background: var(--surface);
}

/* messages */
.auth-msg {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.auth-msg[data-tone="error"] {
  border-color: #b23a4c;
  background: #2c0f19;
}
.auth-msg[data-tone="error"] .icon {
  color: #ff9aa5;
}
.auth-msg[data-tone="success"] {
  border-color: rgba(43, 243, 145, 0.55);
  background: #062a1f;
}
.auth-msg[data-tone="success"] .icon {
  color: var(--good);
}

/* sign-up steps */
.steps-bar li::before {
  background: var(--border-strong);
}
.steps-bar li.is-done::before,
.steps-bar li.is-current::before {
  background: var(--grad);
}
.auth-done-icon {
  border-color: var(--frame);
  background: var(--chip);
  color: var(--good);
}

/* trial banner: a teal strip with a cyan line */
.trial-banner {
  border: 1px solid transparent;
  border-image: var(--hud-callout) 16 fill / 16px;
  background: none;
}
.trial-banner-icon,
.avatar-lg {
  border: 1px solid transparent;
  border-image: var(--hud-tile) 12 fill / 12px;
  background: none;
  color: var(--cyan);
  box-shadow: none;
}
a.trial-banner:hover {
  filter: brightness(1.15);
}
@media (min-width: 900px) {
  .trial-panel {
    border: 1px solid transparent;
    border-image: var(--hud-panel) 16 fill / 16px;
    background: none;
  }
}

/* the busy spinner sits on a bright button */
.btn.is-busy::before {
  border-color: rgba(2, 19, 26, 0.25);
  border-top-color: currentColor;
}

/* ---------- dashboard ---------- */
.dash-core {
  border: 1px solid transparent;
  border-image: var(--hud-frame) 24 fill / 24px;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 0 16px var(--glow));
}
.dash-core::before {
  display: none;
}
.dash-panel {
  border: 1px solid transparent;
  border-image: var(--hud-panel) 16 fill / 16px;
  background: none;
}
/* the switch inside Tools keeps its own fill, so the box is cut to shape and the line drawn on top */
.dash-seg {
  border: 1px solid transparent;
  border-image: var(--hud-line) 16 / 16px;
  clip-path: var(--cut-10);
}
.dash-seg button[aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--neon);
}
.dash-dock button[aria-selected="true"] {
  border-top-color: var(--neon);
}
@media (min-width: 1024px) {
  .dash-dock {
    border: 1px solid transparent;
    border-image: var(--hud-line) 16 / 16px;
    clip-path: var(--cut-10);
  }
  .dash-dock button[aria-selected="true"] {
    border-top-color: var(--border);
    box-shadow: inset 2px 0 0 var(--neon);
  }
}
.dash-ring .ring-arc {
  filter: drop-shadow(0 0 4px rgba(25, 211, 255, 0.6));
}
.dash-ev .k[data-kind="plan"] {
  color: var(--cyan);
}

/* button states on the dashboard */
.btn.is-on,
.btn.is-on:hover {
  border-image-source: var(--hud-btn-primary);
  background: none;
  color: var(--on-accent);
}
.btn-danger,
.btn-danger:hover {
  border-image-source: var(--hud-btn-danger);
  background: none;
  color: #ff9aa5;
}
.btn-chip,
.btn-chip:hover {
  border-image-source: var(--hud-btn-chip);
  background: none;
  color: var(--cyan);
}
.btn-danger:hover,
.btn-chip:hover {
  filter: brightness(1.25);
}

/* ---------- "Do you want to sign out?" ---------- */
/* the same card as the control app's quit question; the browser's own dialog keeps the keyboard inside it */
.dash-confirm {
  width: min(100% - 32px, 340px);
  padding: 0;
  border: 1px solid transparent;
  border-image: var(--hud-frame) 24 fill / 24px;
  background: none;
  color: var(--text-muted);
  filter: drop-shadow(0 0 14px var(--glow));
}
.dash-confirm::backdrop {
  background: rgba(1, 6, 10, 0.84);
}
.dash-confirm[open] {
  animation: confirm-in var(--dur) var(--ease-out);
}
@keyframes confirm-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.dash-confirm-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 22px 20px;
}
.dash-confirm-title {
  margin: 0;
  color: var(--text);
  font: 700 19px/1.25 var(--font-display);
  letter-spacing: 0.03em;
}
.dash-confirm-text {
  margin: 0;
  color: var(--text-subtle);
  font-size: 13.5px;
}
.dash-confirm .cap {
  margin: 0;
}

/* ==========================================================================
   Log in / Sign up switch at the top of the box.
   Each side is its own page. Where the browser can animate from page to page, the lit box slides
   across while the page changes; elsewhere the other page simply opens.
   ========================================================================== */
.auth-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 24px;
  border: 1px solid transparent;
  border-image: var(--hud-line) 16 / 16px;
  background: var(--surface);
  clip-path: var(--cut-10);
}
.auth-switch a {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 10px 8px;
  color: var(--text-subtle);
  font: 700 14px/1 var(--font-display);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.auth-switch a:hover {
  color: var(--text);
}
.auth-switch a[aria-current="page"] {
  color: var(--cyan);
  text-shadow: 0 0 12px var(--glow);
}
/* the lit box: left half on the log in page, right half on the sign up page */
.auth-switch-glide {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  border: 1px solid transparent;
  border-image: var(--hud-callout) 16 fill / 16px;
  pointer-events: none;
  view-transition-name: auth-switch-glide;
}
.auth-switch[data-pos="1"] .auth-switch-glide {
  transform: translateX(100%);
}
/* While the page changes, the lit box is drawn on its own, above the page. The two words get
   their own layers too, above the box: without them the box covers the word it stands on and
   the word it slides onto, and for a moment the switch shows no word there. */
.auth-switch a:nth-of-type(1) {
  view-transition-name: auth-switch-login;
}
.auth-switch a:nth-of-type(2) {
  view-transition-name: auth-switch-signup;
}
@view-transition {
  navigation: auto;
}
::view-transition-group(auth-switch-glide) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.3, 1.2, 0.45, 1);
}

/* The box stands in the same place on the log in page and on the sign up page, at every width:
   both pages use the same layout. Up to 900px it is one column, no wider than a form should be;
   from 900px the box is the left column and the trial panel the right one (set further up).
   On the log in page the panel beside the box invites to sign up. On a phone the banner inside
   the box does that already, so there the panel is left out. */
.auth-layout--split {
  max-width: 560px;
}
.auth-layout--login .trial-panel {
  display: none;
}
@media (min-width: 900px) {
  .auth-layout--split {
    max-width: 980px;
  }
  .auth-layout--login .trial-panel {
    display: grid;
  }
  .auth-layout--login .auth-card > a.trial-banner {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ==========================================================================
   Profile picture (dashboard): the tile shows the photo, or the first letter of the name when there is none
   ========================================================================== */
.avatar-lg,
.avatar-xl {
  position: relative;
}
.avatar-xl {
  display: grid;
  place-items: center;
  flex: none;
  width: 88px;
  height: 88px;
  border: 1px solid transparent;
  border-image: var(--hud-tile) 12 fill / 12px;
  color: var(--cyan);
  font: 700 34px/1 var(--font-display);
}
/* the photo sits inside the frame line and is cut at the same two corners */
.avatar-lg img,
.avatar-xl img {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  object-fit: cover;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.avatar-edit {
  display: flex;
  align-items: center;
  gap: 16px;
}
.avatar-edit-body {
  flex: 1;
  min-width: 0;
}
.avatar-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
.avatar-edit-body .dash-hint {
  margin-top: 8px;
}
.avatar-edit-body .form-msg {
  margin-top: 8px;
}

/* small print under the log in box: which login is which */
.auth-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: 13px;
  line-height: 1.6;
}

/* dashboard: the "Connect Telegram" button under the account details (shown until the bot is connected) */
.dash-connect {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.dash-connect .dash-hint {
  margin: 0;
}

/* dashboard: "Your order", the buying steps reported by the Telegram bot.
   A dot per step joined by a line; each step also says DONE / NOW in words. */
.dash-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  color: var(--text-subtle);
  font: 600 14px/1.3 var(--font-display);
  letter-spacing: 0.04em;
}
.dash-steps li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg);
}
.dash-steps li + li::after {
  content: "";
  position: absolute;
  top: -13px;
  left: 7px;
  width: 1px;
  height: 26px;
  background: var(--border-strong);
}
.dash-steps small {
  margin-left: auto;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dash-steps li[data-state="done"] {
  color: var(--text-muted);
}
.dash-steps li[data-state="done"]::before {
  border-color: var(--good);
  background: var(--good);
}
.dash-steps li[data-state="done"] small {
  color: var(--good);
}
.dash-steps li[data-state="now"] {
  color: var(--text);
}
.dash-steps li[data-state="now"]::before {
  border-color: var(--cyan);
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(25, 211, 255, 0.18);
}
.dash-steps li[data-state="now"] small {
  color: var(--cyan);
}


/* ----- the profile card at the top of the dashboard ----- */
.dash-profile {
  display: grid;
  gap: 16px;
  padding: 18px;
}
.dp-id {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.dp-name {
  min-width: 0;
}
.dp-name .dash-title {
  margin: 0;
}
.dp-plan {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 9px;
  background: var(--chip);
  color: var(--cyan);
  font: 600 10px/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.dp-plan[data-tone="off"] {
  color: var(--text-subtle);
}
.dp-plan[data-tone="trial"] {
  color: var(--neon);
}
.dp-plan[data-tone="diamond"] {
  color: #c58bff;
}
.dp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.dp-stats dd {
  margin: 6px 0 0;
  color: var(--text);
  font: 700 26px/1 var(--font-display);
}
.dp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.dp-actions .btn {
  min-width: 0;
  padding-inline: 8px;
}
.dp-about {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: 400 14px/1.5 var(--font-body);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.dp-about:hover {
  color: var(--text);
}
.dp-about.is-empty {
  color: var(--text-subtle);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dp-meta li,
.dp-meta button,
.dp-meta a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-subtle);
  font: 400 13px/1.3 var(--font-body);
}
.dp-meta button,
.dp-meta a {
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  cursor: pointer;
}
.dp-meta button:hover,
.dp-meta a:hover {
  color: var(--cyan);
}
.dp-meta b {
  color: var(--cyan);
  font-weight: 600;
}
.dp-meta .icon,
.dp-add .icon {
  width: 15px;
  height: 15px;
}
.dp-socials,
.dp-social-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dp-social-list:empty {
  display: none;
}
.dp-social,
.dp-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  background: none;
  color: var(--text-muted);
  font: 500 12px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.dp-social:hover,
.dp-add:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
textarea.input {
  min-height: 84px;
  padding-block: 12px;
  line-height: 1.5;
  resize: vertical;
}
/* the achievements */
.dp-awards {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.dp-awards li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
}
.dp-awards li.is-done {
  border-color: rgba(166, 255, 26, 0.35);
}
.dp-awards li > div {
  flex: 1;
  min-width: 0;
}
.dp-awards strong {
  display: block;
  color: var(--text-muted);
  font: 600 14px/1.3 var(--font-body);
}
.dp-awards li.is-done strong {
  color: var(--text);
}
.dp-awards li > div span {
  color: var(--text-subtle);
  font-size: 13px;
  line-height: 1.4;
}
.dp-award-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-strong);
  color: var(--neon);
  font: 700 14px/1 var(--font-body);
}
.dp-awards li.is-done .dp-award-mark {
  border-color: var(--neon);
  background: rgba(166, 255, 26, 0.12);
}
.dp-awards .btn {
  flex: none;
}
@media (max-width: 1023.98px) {
  .dash-dock button {
    letter-spacing: 0.04em;
  }
  /* a phone shows the card on the first tab only; the other tabs start with what they are for */
  [data-dash]:not([data-view="core"]) .dash-profile {
    display: none;
  }
}
@media (max-width: 479.98px) {
  .dp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 14px;
  }
  .dp-awards li {
    flex-wrap: wrap;
  }
  .dp-awards .btn {
    width: 100%;
  }
}
/* .btn and .dash-row set their own display, which would otherwise win over "hidden" */
.dash-panel .dash-row[hidden],
.dash-panel .dash-row > [hidden] {
  display: none;
}

/* ==========================================================================
   Dashboard (31 Oct 2026): the profile card stands upright on the left, the menu is a row
   above the content, and Edit profile is a box of its own.
   ========================================================================== */
/* the card: the number above its label */
.dp-stats {
  grid-template-columns: repeat(4, auto);
  justify-content: space-between;
  gap: 8px;
}
.dp-stats > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
}
.dp-stats dd {
  margin: 0;
}
.dp-stats .cap {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.dp-today {
  margin: -8px 0 0;
  color: var(--text-subtle);
  font-size: 12px;
}
.dp-about {
  padding: 12px 14px;
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.dp-about:hover {
  border-color: var(--cyan);
}
.dp-about.is-empty {
  color: var(--text-muted);
  text-decoration: none;
}
.dp-about.is-empty::after {
  content: "Describe your trading journey in a few words";
  display: block;
  margin-top: 4px;
  color: var(--text-subtle);
  font-size: 13px;
}

@media (min-width: 1024px) {
  .dash-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    max-width: none;
  }
  .dash-profile {
    grid-column: 1;
    grid-row: 1 / span 3;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px;
  }
  .dash-shell > .auth-msg {
    grid-column: 2;
    margin: 0 0 12px;
  }
  .dash-layout {
    display: block;
    grid-column: 2;
    margin-top: 0;
  }
  .dp-id {
    flex-direction: column;
    align-items: flex-start;
  }
  .dash-profile .avatar-xl {
    width: 112px;
    height: 112px;
    font-size: 44px;
  }
  .dp-actions {
    grid-template-columns: 1fr;
  }
  .dp-meta {
    flex-direction: column;
    gap: 6px;
  }
  /* the row: the tabs, and on the right the control app */
  .dash-side {
    position: static;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 14px;
  }
  .dash-dock {
    flex: 1;
    grid-template-columns: repeat(5, 1fr);
    min-width: 0;
  }
  .dash-dock button,
  .dash-dock button:first-child {
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 6px;
    border-top: 0;
    letter-spacing: 0.08em;
  }
  .dash-dock svg {
    width: 18px;
    height: 18px;
  }
  .dash-actbar {
    flex: none;
  }
  .dash-actbar .btn {
    width: auto;
    height: 100%;
    padding-inline: 22px;
    white-space: nowrap;
  }
}
/* tall enough for the whole card: it stays in view while the content scrolls */
@media (min-width: 1024px) and (min-height: 800px) {
  .dash-profile {
    position: sticky;
    top: calc(var(--header-h) + 12px);
  }
}

/* the Plan tab: plans that can't start yet */
.btn.is-locked {
  opacity: 0.45;
  cursor: default;
}

/* the Edit profile box */
html:has(dialog.dash-edit[open]) {
  overflow: hidden;
}
dialog.dash-edit {
  width: min(600px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 1px;
  overflow: hidden;
  border: 0;
  background: linear-gradient(180deg, rgba(25, 211, 255, 0.8), rgba(25, 211, 255, 0.18));
  color: var(--text-muted);
  clip-path: var(--cut-14);
}
dialog.dash-edit::backdrop {
  background: rgba(1, 6, 10, 0.84);
}
.dash-edit-in {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 26px);
  background: #06141c;
  clip-path: var(--cut-14);
}
.de-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.de-head h2 {
  margin: 0;
  color: var(--text);
  font: 700 18px/1.2 var(--font-display);
}
.de-x {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.de-x:hover {
  color: var(--cyan);
}
.de-scroll {
  flex: 1;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.de-label {
  margin: 0 0 10px;
  color: var(--text);
  font: 600 14px/1.3 var(--font-body);
}
.de-label--group {
  margin: 24px 0 4px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.de-block--line {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
/* the picture on the left, full name and username beside it, then everything else across the whole width */
.de-scroll {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  column-gap: 24px;
  align-content: start;
}
.de-scroll > *,
.de-scroll > form > * {
  grid-column: 1 / -1;
}
.de-scroll > [data-avatar-edit] {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.de-scroll > form,
.de-scroll > form > .field-grid:first-child {
  display: contents;
}
.de-scroll > form > .field-grid:first-child > .field {
  grid-column: 2;
  grid-row: 1;
  align-content: start;
  margin-top: 0;
}
.de-scroll > form > .field-grid:first-child > .field + .field {
  grid-row: 2;
  margin-top: 14px;
}
.de-pic-hint {
  grid-row: 3;
  margin: 18px 0 0;
}
.de-pic-box {
  position: relative;
  display: block;
  width: 124px;
  height: 124px;
}
.de-pic .avatar-xl {
  width: 100%;
  height: 100%;
}
.de-pic-add,
.de-pic-del {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--border-strong);
  background: #0b2430;
  color: var(--text);
  cursor: pointer;
}
.de-pic-add {
  position: absolute;
  right: -8px;
  bottom: -8px;
}
.de-pic-add:hover,
.de-pic-del:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
.de-pic-del {
  position: absolute;
  left: -8px;
  bottom: -8px;
}
.de-pic-del[hidden] {
  display: none;
}
.de-pic-add .icon,
.de-pic-del .icon {
  width: 17px;
  height: 17px;
}
.de-count {
  justify-self: end;
  color: var(--text-subtle);
  font-size: 12px;
}
.de-foot {
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.de-foot .form-msg {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.de-out {
  margin-right: auto;
  padding: 8px 0;
  border: 0;
  background: none;
  color: #ff8a8a;
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
}
.de-out:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 479.98px) {
  .de-scroll,
  .de-foot {
    padding-inline: 14px;
  }
  .de-scroll {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 18px;
  }
  .de-pic-box {
    width: 96px;
    height: 96px;
  }
  .de-label {
    font-size: 13px;
    white-space: nowrap;
  }
  .de-scroll > form > .field-grid:first-child > .field {
    gap: 6px;
  }
  .de-scroll > form > .field-grid:first-child > .field + .field {
    margin-top: 10px;
  }
  .de-scroll > form > .field-grid:first-child .input {
    min-height: 44px;
    padding-inline: 12px;
  }
}

/* ---------- The log in and sign up boxes: smaller, so the whole box fits on a laptop screen (the owner, 2026-11-02) ---------- */
.auth-section {
  padding: clamp(14px, 2.4vh, 28px) 0 clamp(28px, 5vh, 56px);
}
.auth-section .auth-card {
  padding: 20px 24px;
}
.auth-section .auth-card .kicker {
  display: none;
}
.auth-section .auth-switch {
  margin-bottom: 14px;
}
.auth-section .auth-switch a {
  min-height: 40px;
  padding: 6px 8px;
  font-size: 13px;
}
.auth-section .auth-title {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 28px);
  line-height: 1.15;
}
.auth-section .auth-lead {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.45;
}
.auth-section .field {
  gap: 5px;
  margin-top: 10px;
}
.auth-section .input {
  min-height: 42px;
}
.auth-section .hint {
  margin-top: 0;
  font-size: 12.5px;
  line-height: 1.4;
}
.auth-section .form-actions {
  margin-top: 14px;
}
.auth-section .form-actions .btn {
  --btn-h: 44px;
  min-height: 44px;
}
.auth-section .steps-bar {
  margin-top: 10px;
}
.auth-section .steps-bar li {
  gap: 5px;
  font-size: 10px;
}
.auth-section .auth-step {
  margin-top: 10px;
}
.auth-section .step-legend {
  font-size: 15px;
}
.auth-section .step-count {
  display: inline;
  margin: 0 8px 0 0;
  font-size: 11px;
}
.auth-section .auth-note {
  margin-top: 12px;
  padding-top: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.auth-section .auth-alt {
  margin-top: 10px;
  font-size: 13px;
}
.auth-section a.trial-banner {
  margin-top: 12px;
}
.auth-social {
  margin-top: 12px;
}
.auth-social[hidden],
.auth-social [hidden] {
  display: none;
}
.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--text-subtle);
  font-size: 12px;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.auth-social-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
}
.auth-social-row .btn {
  --btn-h: 42px;
  min-height: 42px;
  padding: 0 10px;
  font-size: 14px;
}
.auth-social-row svg {
  flex: none;
}
.auth-social-note {
  margin: 8px 0 0;
  color: var(--text-subtle);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
.auth-social-note a {
  color: var(--text-muted);
  text-underline-offset: 2px;
}
@media (min-width: 900px) {
  .auth-section .auth-layout--split {
    grid-template-columns: minmax(0, 440px) minmax(0, 340px);
    justify-content: center;
    gap: 24px;
    max-width: 804px;
  }
  .auth-section .trial-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }
  .auth-section .trial-panel .btn {
    --btn-h: 44px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .auth-section .trial-panel .trial-banner {
    padding: 12px;
  }
  .auth-section .trial-panel .check-list li {
    font-size: 14px;
  }
}

/* ---------- The sign-up (2026-11-02): one screen, then the code from the email ---------- */
.steps-bar--2 {
  grid-template-columns: repeat(2, 1fr);
}
.pw-rules {
  display: grid;
  gap: 3px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.pw-rules li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-subtle);
  font-size: 12.5px;
  line-height: 1.35;
  transition: color var(--dur) var(--ease-out);
}
.pw-rules .icon {
  flex: none;
  width: 15px;
  height: 15px;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.pw-rules li.is-met {
  color: var(--good);
}
.pw-rules li.is-met .icon {
  border-color: var(--good);
  background: rgba(43, 243, 145, 0.14);
  color: var(--good);
}
.auth-verify .steps-bar {
  margin: 0 0 18px;
  text-align: left;
}
.auth-verify h2 {
  margin: 10px 0 6px;
  font-size: 22px;
}
.auth-verify > p {
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.auth-verify .field {
  margin-top: 14px;
  text-align: left;
}
.auth-verify .field .field-error {
  max-width: none;
  margin: 2px 0 0;
  color: #ff8a8a;
  font-size: 13px;
  text-align: left;
}
.code-input {
  padding-left: 0.4em;
  font: 600 24px/1 var(--font-mono);
  letter-spacing: 0.4em;
  text-align: center;
}
.auth-section .code-input {
  min-height: 52px;
}
.auth-verify .auth-verify-help {
  margin-top: 12px;
  color: var(--text-subtle);
  font-size: 13px;
}
.auth-verify-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 6px;
}

/* ---------- Cloudflare's safety check (Turnstile), 2026-11-02 ---------- */
.captcha {
  margin-top: 12px;
}
.captcha[hidden] {
  display: none;
}
/* the box's own height, kept free so the button does not jump when it appears */
.captcha-box {
  min-height: 65px;
}
.captcha--quiet {
  margin-top: 0;
}
.captcha--quiet .captcha-box {
  min-height: 0;
}
.captcha--quiet.is-asking {
  margin-top: 12px;
}
.captcha .field-error {
  margin-top: 6px;
  text-align: left;
}


/* ==========================================================================
   The account area (the owner's sketch, 2 Nov 2026): two pages, the profile (the dashboard as it was, its menu
   moved to the left) and Manage account (Personal profile, Subscription, Usage, Sessions, Help). Both have the menu
   on the left, a drawer on a phone. The older menu and layout rules above are overridden here.
   ========================================================================== */
body.acc-page .primary-nav,
body.acc-page .menu-toggle,
body.acc-page .header-cta,
body.acc-page .nav-menu-cta,
body.acc-page .site-footer {
  display: none;
}
body.acc-page {
  padding-bottom: 0;
}
html:has(body.acc-page) {
  scrollbar-gutter: stable;
  scroll-padding-bottom: 0;
}
.dash-shell.acc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 1180px;
}
.acc-main,
.acc-view,
.acc-part {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}
.acc-main {
  gap: 14px;
}
.acc-view {
  gap: 16px;
}
.acc-view[hidden],
.acc-part[hidden],
.acc-shade[hidden] {
  display: none;
}
.acc[aria-busy="true"] .acc-main {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- the menu ---------- */
.acc-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.acc-side-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 4px;
}
.acc-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--text);
  font: 700 16px/1 var(--font-display);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.acc-brand img {
  flex: none;
  width: 30px;
  height: 30px;
}
.acc-fold {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  clip-path: var(--cut-10);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.acc-fold:hover {
  --edge: var(--frame);
  color: var(--cyan);
}
.acc-fold .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--dur) var(--ease-out);
}
/* the control app, the one big way out of this menu (Higgsfield's Create) */
.acc-app {
  justify-content: flex-start;
  gap: 12px;
  padding-inline: 14px;
}
.acc-app .icon {
  flex: none;
  width: 20px;
  height: 20px;
}
.acc-nav {
  display: grid;
  gap: 2px;
}
.acc-nav a,
.acc-nav button {
  position: relative;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  color: var(--text-muted);
  font: 500 14px/1.2 var(--font-body);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.acc-nav a:hover,
.acc-nav button:hover {
  background: var(--surface-2);
  color: var(--text);
}
.acc-nav a[aria-current="page"],
.acc-nav button[aria-selected="true"] {
  background: var(--chip);
  color: var(--cyan);
  box-shadow: inset 2px 0 0 var(--cyan);
}
.acc-nav .icon,
.acc-nav svg {
  flex: none;
  width: 20px;
  height: 20px;
}
/* the pictures of the old menu draw with lines */
.acc-nav svg:not(.icon) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.acc-nav button:focus-visible {
  outline-offset: -3px;
}
.acc-nav span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-count {
  flex: none;
  padding: 4px 6px;
  background: rgba(166, 255, 26, 0.08);
  color: var(--neon);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.04em;
}
.acc-nav-cap {
  margin: 6px 12px 0;
  color: var(--text-subtle);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.acc-nav--site a {
  min-height: 38px;
  font-size: 13.5px;
}
.acc-nav--site .icon {
  width: 18px;
  height: 18px;
}
/* the profile button at the bottom; its card opens above it (plans.js) */
.acc-me-wrap {
  position: relative;
  margin-top: auto;
  padding-top: 10px;
}
.acc-card {
  position: absolute;
  right: 0;
  bottom: calc(100% + 2px);
  left: 0;
  z-index: 5;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.7));
}

/* the button in the header that opens the drawer: only on a phone */
.acc-open {
  display: none;
}

@media (max-width: 1023.98px) {
  body.acc-page .acc-open {
    display: inline-grid;
    place-items: center;
    flex: none;
  }
  body.acc-page .header-inner {
    justify-content: flex-start;
    gap: 10px;
  }
  body.acc-page .header-actions {
    margin-left: auto;
  }
  .acc-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    width: min(320px, 86vw);
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    border-right: 1px solid var(--border-strong);
    background: #05121a;
    box-shadow: 30px 0 60px -20px rgba(0, 0, 0, 0.85);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform 0.26s var(--ease-out), visibility 0s linear 0.26s;
  }
  .acc-side.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.26s var(--ease-out), visibility 0s;
  }
  .acc-fold .icon {
    transform: none;
  }
  .acc-shade {
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(2, 8, 12, 0.64);
    backdrop-filter: blur(2px);
  }
  html.acc-locked {
    overflow: hidden;
  }
  .acc-main {
    padding-top: 4px;
  }
}

@media (min-width: 1024px) {
  .dash-shell.acc {
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  .acc-side {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    z-index: 3;
    min-height: min(640px, calc(100vh - var(--header-h) - 40px));
    padding: 12px;
    border: 1px solid transparent;
    border-image: var(--hud-panel) 16 fill / 16px;
  }
  /* folded to its icons: the words stay for screen readers and come back as a tip on hover */
  .dash-shell.acc.is-folded {
    grid-template-columns: 66px minmax(0, 1fr);
  }
  .acc.is-folded .acc-side {
    padding: 12px 8px;
  }
  .acc.is-folded .acc-side-top {
    flex-direction: column;
  }
  .acc.is-folded .acc-brand .brand-name,
  .acc.is-folded .acc-count,
  .acc.is-folded .acc-nav-cap,
  .acc.is-folded .acc-me .pm-who,
  .acc.is-folded .acc-me > .icon {
    display: none;
  }
  .acc.is-folded .acc-nav span,
  .acc.is-folded .acc-app span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .acc.is-folded .acc-nav a,
  .acc.is-folded .acc-nav button,
  .acc.is-folded .acc-app {
    justify-content: center;
    padding: 0;
  }
  .acc.is-folded .acc-me {
    justify-content: center;
    padding: 8px 0;
  }
  .acc.is-folded .acc-fold .icon {
    transform: rotate(180deg);
  }
  /* the card is wider than the menu, so its words fit on one line */
  .acc-card {
    right: auto;
    width: 300px;
  }
}
/* a narrow computer screen: the profile has two columns already, so the menu keeps to its icons */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .dash-shell.acc {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 20px;
  }
  .acc .acc-side {
    padding: 12px 8px;
  }
  .acc .acc-side-top {
    flex-direction: column;
  }
  .acc .acc-brand .brand-name,
  .acc .acc-count,
  .acc .acc-nav-cap,
  .acc .acc-me .pm-who,
  .acc .acc-me > .icon {
    display: none;
  }
  .acc .acc-nav span,
  .acc .acc-app span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .acc .acc-nav a,
  .acc .acc-nav button,
  .acc .acc-app {
    justify-content: center;
    padding: 0;
  }
  .acc .acc-me {
    justify-content: center;
    padding: 8px 0;
  }
  .acc-fold {
    display: none;
  }
}

/* ---------- the profile (the dashboard): its card, then the tab on screen; on a computer the card is a column ---------- */
.acc-main--dash {
  gap: 12px;
}
@media (min-width: 1024px) {
  .acc-main--dash {
    grid-template-columns: 290px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }
  .acc-main--dash > .dash-profile {
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .acc-main--dash > .auth-msg,
  .acc-main--dash > .dash-deck {
    grid-column: 2;
  }
}

/* ---------- Manage account ---------- */
.acc-chips::-webkit-scrollbar {
  display: none;
}
.acc-chips button:focus-visible {
  outline-offset: -3px;
}
.acc-h1 {
  margin: 2px 0 0;
  color: var(--text);
  font: 700 clamp(24px, 3.4vw, 32px)/1.1 var(--font-display);
  letter-spacing: 0.02em;
}
/* the tabs as chips with a coloured picture, scrolling sideways on a phone (Higgsfield's account page) */
.acc-chips {
  display: flex;
  gap: 8px;
  margin-inline: calc(var(--gutter) * -1);
  padding: 2px var(--gutter) 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.acc-chips button {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  min-height: 48px;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
  clip-path: var(--cut-10);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.acc-chips button:hover {
  color: var(--text);
}
.acc-chips button[aria-selected="true"] {
  --edge: var(--frame);
  background-color: var(--surface-2);
  color: var(--text);
}
.acc-chip-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  color: #fff;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.acc-chip-ico .icon {
  width: 18px;
  height: 18px;
}
.acc-chip-ico[data-tone="user"] {
  background: linear-gradient(135deg, #3b6a7c, #1a3c4a);
}
.acc-chip-ico[data-tone="plan"] {
  background: linear-gradient(135deg, #e0569f, #8a2f8f);
}
.acc-chip-ico[data-tone="usage"] {
  background: linear-gradient(135deg, #2bd88f, #0f7a55);
}
.acc-chip-ico[data-tone="sessions"] {
  background: linear-gradient(135deg, #6f7dff, #3b3fc4);
}
.acc-chip-ico[data-tone="help"] {
  background: linear-gradient(135deg, #ffc04d, #d77d1f);
}
@media (min-width: 1024px) {
  .acc-chips {
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
  }
}
.acc-part-head {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}
.acc-part-head h2 {
  margin: 0;
  color: var(--text);
  font: 700 22px/1.15 var(--font-display);
  letter-spacing: 0.02em;
}
.acc-part-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}
.acc-part-head--row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.acc-part-head .btn .icon,
.acc-toolbar .btn .icon,
.acc-id-name .btn .icon {
  width: 16px;
  height: 16px;
}

/* Personal profile: the picture, the name with Edit, and the email */
.acc-id {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid transparent;
  border-image: var(--hud-panel) 16 fill / 16px;
}
.acc-id .avatar-xl {
  width: 76px;
  height: 76px;
  font-size: 30px;
}
.acc-id-text {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.acc-id-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.acc-id-name b {
  color: var(--text);
  font: 700 clamp(20px, 3vw, 26px)/1.1 var(--font-display);
  overflow-wrap: anywhere;
}
.acc-id-name .btn {
  gap: 6px;
}
.acc-id-mail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 14px;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.acc-id-mail:hover {
  color: var(--cyan);
}
.acc-id-mail .icon {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Subscription */
.acc-plan {
  display: grid;
}
.acc-plan-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.acc-plan-text {
  flex: 1;
  min-width: 0;
}
.acc-plan-name {
  margin: 0;
  color: var(--text);
  font: 700 22px/1.15 var(--font-display);
}
.acc-plan-until {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}
.acc-plan-price {
  margin: 0;
  color: var(--text);
  font: 600 14px/1 var(--font-mono);
  white-space: nowrap;
}
.acc-plan .btn-block {
  margin-top: 16px;
}
.dash-panel.acc-plan .dash-hint {
  margin-top: 14px;
}
.acc-plan-get {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}
.acc-plan-get li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}
.acc-plan-get .icon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--neon);
}
.acc-text-btn {
  justify-self: start;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-subtle);
  font: 500 13px/1.4 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.acc-text-btn:hover {
  color: var(--bad);
}
.acc-text-btn[hidden] {
  display: none;
}
.acc-plans {
  display: grid;
  gap: 10px;
}
@media (min-width: 640px) {
  .acc-plans {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
.acc-plan-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  background: rgba(10, 35, 48, 0.55);
  clip-path: var(--cut-10);
}
.acc-plan-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.acc-plan-card-top b {
  color: var(--text);
  font: 700 17px/1 var(--font-display);
}
.acc-plan-card-top span {
  padding: 4px 7px;
  background: var(--chip);
  color: var(--cyan);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.acc-plan-card[data-tone="trial"] .acc-plan-card-top span {
  color: var(--neon);
}
.acc-plan-card[data-tone="diamond"] .acc-plan-card-top span {
  color: #c58bff;
}
.acc-plan-card-price {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}
.acc-plan-card-price b {
  margin-right: 4px;
  color: var(--text);
  font: 700 22px/1 var(--font-display);
}
.acc-plan-card-lead {
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.45;
}
.acc-plan-card .btn {
  margin-top: 4px;
}

/* Usage */
.acc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.acc-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  clip-path: var(--cut-10);
}
.acc-select:focus-within {
  --edge: var(--cyan);
}
.acc-select select {
  padding: 0 24px 0 0;
  border: 0;
  background: none;
  color: inherit;
  font: 500 14px/1 var(--font-body);
  appearance: none;
  cursor: pointer;
}
.acc-select select:focus-visible {
  outline: none;
}
.acc-select option {
  background: #071922;
  color: var(--text);
}
.acc-select .icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-subtle);
}
.acc-select .icon:last-child {
  position: absolute;
  right: 10px;
  pointer-events: none;
}
.acc-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}
.acc-state[hidden] {
  display: none;
}
.acc-state::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-subtle);
}
.acc-state[data-tone="good"]::before {
  background: var(--good);
  box-shadow: 0 0 8px var(--good);
}
.acc-state[data-tone="bad"]::before {
  background: var(--bad);
}
.acc-stats {
  display: grid;
  gap: 10px;
}
@media (min-width: 640px) {
  .acc-stats {
    grid-template-columns: 1fr 1fr;
  }
}
.acc-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  background: rgba(10, 35, 48, 0.55);
  clip-path: var(--cut-10);
}
.acc-stat-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--chip);
  color: var(--cyan);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.acc-stat-ico .icon {
  width: 20px;
  height: 20px;
}
.acc-stat > div {
  min-width: 0;
}
.acc-stat b {
  display: block;
  color: var(--text);
  font: 700 22px/1.1 var(--font-display);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.acc-stat b[data-tone="good"] {
  color: var(--good);
}
.acc-stat b[data-tone="bad"] {
  color: var(--bad);
}
.acc-stat > div > span {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
}
.acc-bars {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 4px auto 0;
  overflow: visible;
}
.acc-bars .zero {
  stroke: var(--border-strong);
}
.acc-bars .win {
  fill: var(--frame);
}
.acc-bars .now {
  fill: var(--cyan);
}
.acc-bars .loss {
  fill: var(--bad);
}
.acc-bars text {
  fill: var(--text-subtle);
  font: 500 9.5px var(--font-mono);
  text-anchor: middle;
}
.acc-bars text.amt {
  fill: var(--text);
}
.acc-bars text.today {
  fill: var(--cyan);
}
.acc-bars text.later {
  opacity: 0.45;
}
.acc-split-bar {
  display: flex;
  gap: 3px;
  height: 12px;
}
.acc-split-bar i {
  display: block;
  min-width: 6px;
  border-radius: 6px;
}
.acc-split-bar [data-k="tp"],
.acc-split-legend [data-k="tp"]::before {
  background: var(--good);
}
.acc-split-bar [data-k="basket"],
.acc-split-legend [data-k="basket"]::before {
  background: var(--cyan);
}
.acc-split-legend [data-k="cycles"]::before {
  background: var(--neon);
}
.acc-split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.acc-split-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 14px;
}
.acc-split-legend li::before {
  content: "";
  width: 14px;
  height: 8px;
  border-radius: 4px;
}
.acc-split-legend small {
  color: var(--text-subtle);
  font: 500 12px/1 var(--font-mono);
}

/* Sessions */
.acc-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  clip-path: var(--cut-10);
}
.acc-note[hidden] {
  display: none;
}
.acc-note-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--surface-2);
  color: var(--text-muted);
}
.acc-note-ico .icon,
.acc-note-x .icon {
  width: 18px;
  height: 18px;
}
.acc-note p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}
.acc-note b {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-weight: 600;
}
.acc-note-x {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
}
.acc-note-x:hover {
  color: var(--text);
}
.dash-panel > h2.acc-h2-count {
  display: flex;
  align-items: center;
  gap: 8px;
}
.acc-badge {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  background: var(--surface-3);
  color: var(--text);
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0;
}
.acc-devices {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.acc-device {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.acc-device:first-child {
  padding-top: 4px;
  border-top: 0;
}
.acc-device-ico {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--surface-2);
  color: var(--text-muted);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.acc-device-ico .icon {
  width: 20px;
  height: 20px;
}
.acc-device-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font: 600 15px/1.3 var(--font-body);
}
.acc-here {
  padding: 3px 8px;
  background: rgba(43, 243, 145, 0.12);
  color: var(--good);
  font: 600 11px/1.2 var(--font-mono);
  letter-spacing: 0.04em;
}
.acc-device-meta {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.acc-device-meta span:not(:empty) + span:not(:empty)::before {
  content: " · ";
  color: var(--text-subtle);
}
.acc-device > .btn,
.acc-gone {
  grid-row: 1 / span 2;
  grid-column: 3;
}
.acc-gone {
  color: var(--text-subtle);
  font: 500 12px/1 var(--font-mono);
}
.acc-device.is-gone .acc-device-name,
.acc-device.is-gone .acc-device-meta {
  opacity: 0.5;
}
@media (max-width: 479.98px) {
  .acc-device {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .acc-device > .btn,
  .acc-gone {
    grid-row: auto;
    grid-column: 2;
    justify-self: start;
    margin-top: 6px;
  }
  .acc-part-head--row {
    grid-template-columns: 1fr;
  }
  .acc-part-head--row .btn {
    justify-self: start;
  }
}

/* ---------- Manage account on a computer (the owner's Higgsfield picture, 2026-11-03): the list of its parts on the
   left in place of the menu, with Need help? and Log out under it; the part on the right. Phones keep the chips. ---------- */
.acc-back,
.acc-help-card,
.acc-signout {
  display: none;
}
.acc-manage-nav {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.acc-manage-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}
/* Personal profile: the picture, the name and the email, as a header without a frame */
.acc-id {
  padding: 4px 0 6px;
  border: 0;
  border-image: none;
}
.acc-id .avatar-xl {
  width: 92px;
  height: 92px;
  font-size: 36px;
}
/* the plan and the profit at a glance: one above the other on a phone, side by side on a wide screen */
.acc-sum {
  display: grid;
  gap: 12px;
}
.acc-sum-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 210px;
}

.acc-sum-card > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.acc-sum-card > h2 .icon {
  flex: none;
  width: 16px;
  height: 16px;
}
.acc-sum-all {
  margin-left: auto;
  color: var(--text-muted);
  font: 500 13px/1 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline dotted;
  text-underline-offset: 4px;
}
.acc-sum-all:hover {
  color: var(--cyan);
}
/* the number sits low in its card, over its meter and its button (Higgsfield's Credits card) */
.acc-sum-big {
  margin: auto 0 0;
  padding-top: 18px;
  color: var(--text);
  font: 700 30px/1.1 var(--font-display);
}
.acc-sum-card .pm-meter {
  margin: 4px 0 2px;
}
.acc-sum-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  color: var(--text-muted);
  font-size: 13.5px;
}
.acc-mini {
  max-width: none;
  margin: 6px 0 0;
}
.acc-sum-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
}
@media (min-width: 760px) {
  .acc-sum {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  /* this page has its own list on the left: the menu stays on the profile (the header's button opens the account card) */
  body[data-auth-page="manage"] .dash-shell.acc {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-auth-page="manage"] .acc-side,
  body[data-auth-page="manage"] .acc-shade {
    display: none;
  }
  .acc-manage {
    grid-template-columns: 250px minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
  }
  .acc-manage-nav {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: min(720px, calc(100vh - var(--header-h) - 40px));
  }
  .acc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    color: var(--text-subtle);
    font: 500 13px/1 var(--font-body);
    text-decoration: none;
  }
  .acc-back:hover {
    color: var(--cyan);
  }
  .acc-back .icon {
    width: 16px;
    height: 16px;
  }
  .acc-manage-nav .acc-h1 {
    margin: 10px 0 12px;
    font-size: 22px;
  }
  /* the chips become the list */
  .acc-manage-nav .acc-chips {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .acc-manage-nav .acc-chips button {
    width: 100%;
    min-height: 52px;
    --edge: transparent;
    background-color: transparent;
    font-size: 15px;
  }
  .acc-manage-nav .acc-chips button:hover {
    background-color: var(--surface);
  }
  .acc-manage-nav .acc-chips button[aria-selected="true"] {
    --edge: var(--border-strong);
    background-color: var(--surface-2);
  }
  .acc-help-card {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 18px 16px 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    text-align: center;
    clip-path: var(--cut-10);
  }
  .acc-help-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
    background: var(--surface-2);
    color: var(--cyan);
    clip-path: var(--cut-10);
  }
  .acc-help-ico .icon {
    width: 22px;
    height: 22px;
  }
  .acc-help-card b {
    color: var(--text);
    font: 700 16px/1.2 var(--font-display);
  }
  .acc-help-card p {
    margin: 0 0 8px;
    color: var(--text-muted);
    font-size: 13.5px;
    line-height: 1.45;
  }
  .acc-signout {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: 500 14px/1 var(--font-body);
    cursor: pointer;
  }
  .acc-signout:hover {
    color: var(--bad);
  }
  /* Log out is in the list on the left already */
  .acc-out-panel {
    display: none;
  }
  .acc-signout .icon {
    width: 18px;
    height: 18px;
  }
  .acc-id .avatar-xl {
    width: 116px;
    height: 116px;
    font-size: 44px;
  }
  .acc-id-name b {
    font-size: 32px;
  }
  .acc-id-mail {
    font-size: 15px;
  }
}

/* ---------- a plan's picture (the owner, 2026-11-03): the free trial a bolt, Elite a hexagon, Diamond a gem ---------- */
.plan-logo {
  --tone: #5f7d88;
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tone) 26%, transparent), transparent 72%), #051118;
  color: var(--tone);
  clip-path: var(--cut-10);
}
.plan-logo .icon {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--tone) 70%, transparent));
}
.plan-logo[data-tone="trial"] {
  --tone: var(--neon);
}
.plan-logo[data-tone="elite"] {
  --tone: var(--cyan);
}
.plan-logo[data-tone="diamond"] {
  --tone: #c58bff;
}
.plan-logo.is-ended {
  opacity: 0.55;
  filter: grayscale(0.6);
}
/* the dashboard's Subscription tab: the picture, the name, its dates and price */
.plan-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}
.plan-hero .plan-logo {
  width: 78px;
  height: 78px;
}
.plan-hero .plan-logo .icon {
  width: 38px;
  height: 38px;
}
.plan-hero-text {
  flex: 1;
  min-width: 150px;
}
.plan-hero-chip {
  margin: 0;
  color: var(--text-subtle);
  font: 600 10.5px/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.plan-hero[data-tone="trial"] .plan-hero-chip {
  color: var(--neon);
}
.plan-hero[data-tone="elite"] .plan-hero-chip {
  color: var(--cyan);
}
.plan-hero[data-tone="diamond"] .plan-hero-chip {
  color: #c58bff;
}
.plan-hero-name {
  margin: 4px 0 0;
  color: var(--text);
  font: 700 clamp(26px, 4vw, 32px)/1.1 var(--font-display);
}
.plan-hero-line {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 14px;
}
.plan-hero-price {
  margin: 0;
  color: var(--text);
  font: 600 15px/1 var(--font-mono);
  white-space: nowrap;
}
/* Manage account: the picture in the Plan card and on Subscription */
.acc-sum-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.acc-sum-plan .plan-logo {
  width: 50px;
  height: 50px;
}
.acc-sum-plan .plan-logo .icon {
  width: 24px;
  height: 24px;
}
.acc-sum-plan b {
  display: block;
  color: var(--text);
  font: 700 20px/1.15 var(--font-display);
}
.acc-sum-plan small {
  display: block;
  margin-top: 4px;
  color: var(--text-subtle);
  font: 500 11px/1.2 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.acc-plan-top .plan-logo {
  width: 64px;
  height: 64px;
}
.acc-plan [data-sub-action][hidden] {
  display: none;
}

/* ---------- cut corners with a plain outline (the owner, 2026-11-03: "fix these edges") ----------
   clip-path cuts a box's outline off at its two cut corners. Two thin lines in the outline's colour (--edge), sized to
   the cut (--cut), draw the cut edges back. Their state rules change --edge (not border-color) and only the background
   colour, so the lines stay. */
.acc-fold,
.acc-chips button,
.acc-plan-card,
.acc-select,
.acc-stat,
.acc-note,
.acc-help-card {
  border-color: var(--edge);
  background-image:
    linear-gradient(to bottom right, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--edge) calc(50% - 1px), var(--edge) 50%, transparent 50%);
  background-position: left top, right bottom;
  background-size: var(--cut, 10px) var(--cut, 10px);
  background-repeat: no-repeat;
  background-origin: border-box;
}
.acc-fold,
.acc-chips button,
.acc-plan-card,
.acc-stat,
.acc-note,
.acc-help-card {
  --edge: var(--border);
}
.acc-select {
  --edge: var(--border-strong);
}
/* a plan's picture: the lines, then its own glow */
.plan-logo {
  --edge: color-mix(in srgb, var(--tone) 55%, transparent);
  border-color: var(--edge);
  background-image:
    linear-gradient(to bottom right, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--edge) calc(50% - 1px), var(--edge) 50%, transparent 50%),
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tone) 26%, transparent), transparent 72%);
  background-position: left top, right bottom, center;
  background-size: 10px 10px, 10px 10px, auto;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-color: #051118;
}

/* ---------- the Manage account menu moves (the owner, 4 Nov 2026: "add animation in these menu") ----------
   A row's picture lifts under the pointer and dips when pressed; the chosen row's picture pops as its box lights
   up, and the part it opens rises in. A tap works at once, and with "reduce motion" nothing moves. */
@media (prefers-reduced-motion: no-preference) {
  .acc-chip-ico {
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter var(--dur-fast) var(--ease-out);
  }
  .acc-chips button:active .acc-chip-ico {
    transform: scale(0.88);
    transition-duration: 0.08s;
  }
  .acc-chips button[aria-selected="true"] .acc-chip-ico {
    animation: acc-chip-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .acc-part:not([hidden]) {
    animation: acc-part-in 0.36s var(--ease-out);
  }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .acc-chips button:hover .acc-chip-ico {
    transform: translateY(-2px) rotate(-4deg);
    filter: brightness(1.12);
  }
}
@keyframes acc-chip-pop {
  0% {
    transform: scale(0.78);
  }
  55% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes acc-part-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---------- Affiliate program (the owner, 2026-11-04): invite 5 friends, get 1 month of Elite free ---------- */
.acc-chip-ico[data-tone="invite"] {
  background: linear-gradient(135deg, #a6ff1a, #1f9e6a);
  color: #04131a;
}
.acc-invite-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px 16px;
}
.acc-invite-ico {
  width: 52px;
  height: 52px;
}
.acc-invite-ico .icon {
  width: 26px;
  height: 26px;
}
.acc-invite-copy h3 {
  margin: 0 0 4px;
  color: var(--text);
  font: 700 20px/1.2 var(--font-display);
}
.acc-invite-copy p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}
.acc-invite-meter {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.acc-invite-meter i {
  height: 12px;
  background: var(--surface-3);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.acc-invite-meter i.on {
  background: var(--neon);
}
.acc-invite-progress {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}
.acc-invite-ready {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(166, 255, 26, 0.45);
  background: rgba(166, 255, 26, 0.07);
}
.acc-invite-ready[hidden] {
  display: none;
}
.acc-invite-ready p {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}
.acc-invite-link {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 12px 0;
}
.acc-invite-link input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  background: #041019;
  color: var(--text);
  font: 500 14px/1 var(--font-mono);
}
.acc-invite-code {
  color: var(--neon);
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
}
.acc-invites {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.acc-invites li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.acc-invites li:first-child {
  border-top: 0;
}
.acc-invites b {
  display: block;
  color: var(--text);
  font-weight: 600;
}
.acc-invites small {
  color: var(--text-subtle);
  font-size: 12.5px;
}
.acc-invite-tag {
  flex: none;
  padding: 5px 9px;
  border: 1px solid var(--border-strong);
  color: var(--text-subtle);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.acc-invite-tag[data-tone="good"] {
  border-color: rgba(166, 255, 26, 0.5);
  color: var(--neon);
}
.acc-invite-steps {
  display: grid;
  gap: 12px;
  margin: 10px 0 14px;
  padding: 0;
  list-style: none;
}
.acc-invite-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.acc-invite-steps span {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--frame);
  color: var(--cyan);
  font: 700 13px/1 var(--font-display);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.acc-invite-steps b {
  color: var(--text);
}
.acc-invite-steps p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}
.acc-invite-rules {
  margin: 0;
  padding-left: 18px;
  color: var(--text-subtle);
  font-size: 13px;
  line-height: 1.6;
}
@media (min-width: 720px) {
  .acc-invite-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .acc-invite-meter i.on {
    animation: acc-invite-lit 0.5s var(--ease-out) both;
  }
  .acc-invite-meter i.on:nth-child(2) { animation-delay: 0.08s; }
  .acc-invite-meter i.on:nth-child(3) { animation-delay: 0.16s; }
  .acc-invite-meter i.on:nth-child(4) { animation-delay: 0.24s; }
  .acc-invite-meter i.on:nth-child(5) { animation-delay: 0.32s; }
}
@keyframes acc-invite-lit {
  from {
    opacity: 0.2;
    transform: scaleX(0.4);
  }
}

/* ---------- the referral code (the owner, 2026-11-04): its own copy box, and a box on the sign-up page ---------- */
.field .field-opt {
  color: var(--text-subtle);
  font-weight: 400;
}
.input-code {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.input-code::placeholder {
  font-family: var(--font-body);
  letter-spacing: normal;
  text-transform: none;
}
.acc-invite-sub {
  margin: 18px 0 4px;
  color: var(--text-subtle);
  font: 500 12px/1.2 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.acc-invite-link .acc-invite-code {
  color: var(--neon);
  font: 700 16px/1 var(--font-mono);
  letter-spacing: 0.24em;
}
/* the 1 2 3 boxes of How it works: their cut corners get their own lines, as on every cut box of the site
   (clip-path cuts the outline off at the corners) */
.acc-invite-steps span {
  --edge: var(--frame);
  border-color: var(--edge);
  background-image:
    linear-gradient(to bottom right, transparent 50%, var(--edge) 50%, var(--edge) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--edge) calc(50% - 1px), var(--edge) 50%, transparent 50%);
  background-position: left top, right bottom;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-origin: border-box;
}

/* the two share buttons: side by side on a computer, one under the other on a phone (each needs about 220px) */
.acc-invite-share > .btn {
  flex: 1 1 220px;
}

/* the referral code check (the owner, 2026-11-06): "Code found" under the sign-up box, and who invited this person */
.field-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--neon);
  font-size: 13px;
}
.field-ok[hidden] {
  display: none;
}
.field-ok .icon {
  width: 15px;
  height: 15px;
}
.acc-invite-by {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-subtle);
  font-size: 13px;
}