/* account.css — the account icon and its card, dialogs, toasts, and the
 * pickers the new settings tabs use. Buttons, toggles and swatches come from
 * settings.css.
 */

/* ── account chip (top right) ────────────────────────────────────────────── */
.acct {
  position: fixed;
  top: calc(var(--safe-t) + 12px);
  right: calc(var(--safe-r) + 12px);
  z-index: 9500;
}

.acct-chip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border-radius: 26px;
  background: var(--ui-bg);
  border: 1.5px solid var(--theme-color);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  transition: gap .35s var(--ease-out), padding .35s var(--ease-out),
              box-shadow .25s ease, background .25s ease;
}

/* The name hides behind the icon and slides out on hover. */
.acct-name {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--theme-color);
  opacity: 0;
  transform: translateX(10px);
  transition: max-width .4s var(--ease-out), opacity .25s ease, transform .4s var(--ease-out);
}
.acct:hover .acct-chip,
.acct.open .acct-chip,
.acct-chip:focus-visible {
  gap: 9px;
  padding-left: 15px;
  background: rgba(6, 14, 34, 0.94);
  box-shadow: var(--shadow), 0 0 22px var(--theme-glow);
}
.acct:hover .acct-name,
.acct.open .acct-name,
.acct-chip:focus-visible .acct-name {
  max-width: 180px;
  opacity: 1;
  transform: none;
}

.acct-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-soft);
  color: var(--theme-color);
  overflow: visible;
  transition: transform .35s var(--ease-spring);
}
.acct-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.acct:hover .acct-chip .acct-avatar { transform: rotate(-8deg) scale(1.06); }
.acct-initial {
  font-weight: 800;
  font-size: 16px;
  color: #05101f;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-color);   /* for browsers without color-mix() */
  background: linear-gradient(135deg, var(--theme-color), color-mix(in srgb, var(--theme-color) 55%, #ff2d95));
}
.acct-avatar.big  { width: 56px; height: 56px; }
.acct-avatar.big .acct-initial { font-size: 24px; }
.acct-avatar.huge { width: 120px; height: 120px; }
.acct-avatar.huge .acct-initial { font-size: 48px; }
.acct-avatar.big .ic { width: 32px; height: 32px; }
.acct-avatar.huge .ic { width: 64px; height: 64px; }


/* ── the card ────────────────────────────────────────────────────────────── */
.acct-card {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  padding: 14px;
  border-radius: 18px;
  background: rgba(6, 13, 34, 0.97);
  border: 1.5px solid var(--theme-color);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 30px var(--theme-glow);
  backdrop-filter: blur(16px);
  transform-origin: top right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.92);
  transition: opacity .2s ease, transform .3s var(--ease-spring), visibility 0s linear .3s;
}
.acct.open .acct-card {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .35s var(--ease-spring), visibility 0s;
}
/* An invisible bridge over the gap, so moving the mouse from the chip to the
   card never leaves the hover area. */
.acct-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 14px;
}

/* Items cascade in when the card opens. */
.acct.open .acct-card > * { animation: cardItemIn .4s var(--ease-out) backwards; }
.acct.open .acct-card > *:nth-child(2) { animation-delay: .05s; }
.acct.open .acct-card > *:nth-child(3) { animation-delay: .1s; }
@keyframes cardItemIn { from { opacity: 0; transform: translateY(6px); } }

.acct-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.acct-who { min-width: 0; }
.acct-who strong {
  display: block;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-who small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.acct-badge {
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--theme-color);
  color: #05101f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.acct-section { padding: 12px 0 4px; border-top: 1px solid var(--ui-border); }
.acct-note { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); margin-bottom: 10px; }
.acct-note b { color: var(--text); }

.acct-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.acct-row > * { flex: 1; }
.acct-row .btn-primary, .acct-row .btn-ghost, .acct-row .btn-danger,
.acct-card .btn-primary, .acct-card .btn-ghost, .acct-card .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

.acct-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  text-align: left;
  color: var(--text);
  transition: background .15s ease, padding-left .2s var(--ease-out);
}
.acct-item .ic { color: var(--theme-color); }
a.acct-item { text-decoration: none; }
.acct-item:hover { background: rgba(255, 255, 255, 0.07); padding-left: 14px; }
.acct-item.danger, .acct-item.danger .ic { color: #fca5a5; }

.acct-station { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.acct-station-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--theme-soft);
  color: var(--theme-color);
}
.acct-station strong { display: block; font-size: 14px; }
.acct-station small { font-size: 12px; color: var(--text-dim); }

/* ── dialogs ─────────────────────────────────────────────────────────────── */
.modal-back {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  transition: background .25s ease, backdrop-filter .25s ease;
}
.modal-back.in { background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(6px); }
.modal-back.out { background: rgba(0, 0, 0, 0); }

.modal {
  width: min(430px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-radius: 20px;
  background: rgba(6, 14, 36, 0.98);
  border: 1.5px solid var(--theme-color);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 40px var(--theme-glow);
  opacity: 0;
  transform: translateY(18px) scale(.94);
  transition: opacity .2s ease, transform .35s var(--ease-spring);
}
.modal-back.in .modal { opacity: 1; transform: none; }
.modal-back.out .modal { opacity: 0; transform: translateY(10px) scale(.96); transition-duration: .18s; }
.modal.create-modal { width: min(480px, 100%); }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 20px 6px;
}
.modal-head h2 { font-size: 1.25rem; color: var(--theme-color); }
.modal-x {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  opacity: .7;
  transition: opacity .15s ease, transform .25s var(--ease-spring), background .15s ease;
}
.modal-x:hover { opacity: 1; background: rgba(255, 255, 255, .1); transform: rotate(90deg); }
.modal-body { padding: 8px 20px 22px; }

.modal-note { font-size: 13px; line-height: 1.55; color: var(--text-dim); margin-bottom: 14px; }
.modal-split {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  color: var(--text-dim);
  font-size: 12px;
}
.modal-split::before, .modal-split::after { content: ''; flex: 1; height: 1px; background: var(--ui-border); }

.field-label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 12px; }
.field-label small { opacity: .75; }
span.field-label { margin-bottom: 7px; }
.field {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--ui-border);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 14.5px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus { border-color: var(--theme-color); box-shadow: 0 0 0 3px var(--theme-soft); }
.name-modal .field { margin-bottom: 12px; }

.field-hint {
  margin: -6px 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-height: 0;
}
.field-hint:empty { display: none; }
.field-hint.err { color: #f87171; }
.field-hint.gold { color: #ffd166; }
.field-hint code, .claim-banner code {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .08);
  color: var(--theme-color);
}

.form-msg { font-size: 12.5px; margin: 6px 0 10px; min-height: 0; opacity: 0; transition: opacity .2s ease; }
.form-msg.visible { opacity: 1; min-height: 16px; }
.form-msg.ok { color: #4ade80; }
.form-msg.err { color: #f87171; }

/* Log in / Sign up switch with a sliding highlight. */
.seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
}
.seg button {
  position: relative;
  z-index: 1;
  padding: 9px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dim);
  transition: color .2s ease;
}
.seg button[aria-selected="true"] { color: #05101f; }
.seg-ink {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 9px;
  background: var(--theme-color);
  box-shadow: 0 0 16px var(--theme-glow);
  transition: transform .35s var(--ease-spring);
}
.auth-modal[data-mode="signup"] .seg-ink { transform: translateX(100%); }
.auth-modal[data-mode="login"] .su-only { display: none; }
.auth-modal .su-only { animation: fadeIn .3s ease; }

.claim-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 209, 102, .16), rgba(255, 45, 149, .12));
  border: 1px solid rgba(255, 209, 102, .5);
  font-size: 13px;
  line-height: 1.5;
}
.claim-banner .ic { color: #ffd166; margin-top: 1px; animation: taPulse 1.6s ease-in-out infinite; }

/* Welcome: a preview of the account chip, marked as a guest nickname. */
.nm-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed var(--ui-border);
}
.nm-preview-label { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--text-dim); }
.nm-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 3px 3px 3px 15px;
  border-radius: 26px;
  background: var(--ui-bg);
  border: 1.5px solid var(--theme-color);
  box-shadow: 0 0 16px var(--theme-glow);
}
.nm-chip-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--theme-color);
}
.nm-chip-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-soft);
  color: var(--theme-color);
}
.nm-tag {
  padding: 2px 9px;
  border-radius: 10px;
  background: rgba(251, 191, 36, .14);
  border: 1px solid rgba(251, 191, 36, .45);
  color: #fbbf24;
  font-size: 11.5px;
  font-weight: 700;
}
.nm-temp {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: -4px 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: left;
}
.nm-temp .ic { flex: none; margin-top: 2px; color: #fbbf24; }
.nm-temp b { color: var(--text); }

.delete-modal { border-color: rgba(248, 113, 113, .7); box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 40px rgba(248, 113, 113, .25); }
.delete-modal .modal-head h2 { color: #fca5a5; }
.delete-list { margin: -6px 0 14px 18px; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.delete-list b { color: var(--text); }

.photo-preview { display: flex; justify-content: center; margin: 6px 0 14px; }
.photo-preview .acct-avatar { animation: popIn .45s var(--ease-spring) both; }

/* ── wallpaper picker ────────────────────────────────────────────────────── */
.wp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.wp-pick {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, .05);
  transition: transform .25s var(--ease-spring), border-color .15s ease, box-shadow .2s ease;
}
.wp-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-pick span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 4px 4px;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
}
.wp-pick:hover { transform: translateY(-3px); }
.wp-pick.active { border-color: var(--theme-color); box-shadow: 0 0 16px var(--theme-glow); }

/* ── animations tab ──────────────────────────────────────────────────────── */
.anim-grid, .fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.anim-pick, .fx-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px 9px;
  border-radius: 11px;
  border: 1.5px solid var(--ui-border);
  background: rgba(255, 255, 255, .04);
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease, transform .25s var(--ease-spring);
}
.anim-pick:hover, .fx-pick:hover { background: rgba(255, 255, 255, .09); transform: translateY(-2px); }
.anim-pick.active, .fx-pick.active { border-color: var(--theme-color); background: var(--theme-soft); }
.anim-name { font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.anim-pick.active .anim-name, .fx-pick.active .anim-name { color: var(--text); }

/* A miniature title, animated by the very same .ta-* rules as the real one. */
.anim-sample {
  display: block;
  height: 30px;
  line-height: 30px;
  font: 800 19px/30px var(--title-font);
  color: #fff;
  --title-shadow: 0 0 0 transparent;
}
.anim-sample .title-text { display: inline-block; position: relative; }
.anim-sample .tl { display: inline-block; }

/* Background effect swatches, each a tiny animated hint of the real thing. */
.fx-swatch {
  position: relative;
  width: 100%;
  height: 30px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .35);
  overflow: hidden;
}
.fx-swatch::before, .fx-swatch::after { content: ''; position: absolute; }
.fx-particles .fx-swatch::before {
  inset: 0;
  background:
    radial-gradient(circle, var(--theme-color) 1.5px, transparent 2px) 0 0 / 18px 14px,
    radial-gradient(circle, var(--theme-color) 1px, transparent 1.5px) 9px 7px / 18px 14px;
  opacity: .8;
  animation: fxDrift 6s linear infinite;
}
.fx-snow .fx-swatch::before {
  inset: -30px 0 0;
  background: radial-gradient(circle, #fff 1.4px, transparent 2px) 0 0 / 12px 10px;
  animation: fxFall 2.4s linear infinite;
}
.fx-stars .fx-swatch::before {
  inset: 0;
  background: radial-gradient(circle, #fff 1px, transparent 1.5px) 0 0 / 11px 9px;
  animation: fxTwinkle 1.6s ease-in-out infinite;
}
.fx-bubbles .fx-swatch::before {
  inset: 0 0 -30px;
  background: radial-gradient(circle, transparent 3px, var(--theme-color) 3.5px, transparent 4.5px) 0 0 / 16px 15px;
  animation: fxRise 3s linear infinite;
}
.fx-equalizer .fx-swatch::before {
  left: 0; right: 0; bottom: 0; height: 100%;
  background: repeating-linear-gradient(90deg, var(--theme-color) 0 5px, transparent 5px 9px);
  opacity: .7;
  transform-origin: bottom;
  animation: fxEq .5s ease-in-out infinite alternate;
  clip-path: polygon(0 60%, 10% 20%, 20% 70%, 30% 35%, 40% 80%, 50% 10%, 60% 55%, 70% 30%, 80% 75%, 90% 25%, 100% 50%, 100% 100%, 0 100%);
}
.fx-confetti .fx-swatch::before {
  inset: -30px 0 0;
  background:
    linear-gradient(45deg, #ff3b6b 3px, transparent 3px) 0 0 / 14px 13px,
    linear-gradient(-45deg, #ffd23b 3px, transparent 3px) 7px 4px / 14px 13px,
    linear-gradient(90deg, #3bc8ff 3px, transparent 3px) 3px 8px / 14px 13px;
  animation: fxFall 2s linear infinite;
}
@keyframes fxDrift   { to { background-position: 36px 14px, 45px 21px; } }
@keyframes fxFall    { to { transform: translateY(30px); } }
@keyframes fxRise    { to { transform: translateY(-30px); } }
@keyframes fxTwinkle { 50% { opacity: .25; } }
@keyframes fxEq      { to { transform: scaleY(.55); } }

/* ── images tab: what is on the page ─────────────────────────────────────── */
.ov-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.ov-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--ui-border);
  animation: cardItemIn .3s var(--ease-out) backwards;
}
.ov-thumb {
  width: 42px; height: 42px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(0, 0, 0, .35);
  color: var(--theme-color);
}
.ov-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ov-row select {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid var(--ui-border);
  background: rgba(0, 0, 0, .32);
  color: var(--text);
  font-size: 12.5px;
}
.ov-row select option { background: #0a1430; }
.ov-row .rq-del { position: static; }
.ov-empty { font-size: 12.5px; color: var(--text-dim); padding: 6px 2px; }

/* ── station tab ─────────────────────────────────────────────────────────── */
/* The live "what is Shoutcast reporting, does it match" check. */
.sc-check { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 12px; }
.sc-check:empty { display: none; }
.sc-line {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
}
.sc-line .ic { margin-top: 2px; color: var(--theme-color); }
.sc-line.dim { color: var(--text-dim); }
.sc-line.ok, .sc-line.ok .ic { color: #4ade80; }
.sc-line.warn, .sc-line.warn .ic { color: #fbbf24; }
.sp-code {
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .08);
  color: var(--theme-color);
  font-size: 12px;
  word-break: break-word;
}
.sp-link {
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--ui-border);
  background: rgba(0, 0, 0, .32);
  color: var(--theme-color);
  font-size: 12.5px;
  margin-bottom: 8px;
}
.rq-verified { display: inline-block; color: var(--theme-color); vertical-align: -1px; }

/* Requests list: profile picture (or a colored initial for guests) on the left. */
.rq-item { display: flex; align-items: flex-start; gap: 10px; animation: cardItemIn .3s var(--ease-out) backwards; }
.rq-body { flex: 1; min-width: 0; }
.rq-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: hsl(var(--hue, 190) 70% 45% / .3);
  color: hsl(var(--hue, 190) 90% 75%);
  font-weight: 800;
  font-size: 14px;
}
.rq-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; animation: fadeIn .3s ease; }
.rq-item.leaving { opacity: .3; transform: translateX(14px); transition: opacity .2s ease, transform .2s ease; }

/* ── toasts ──────────────────────────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 22px);
  transform: translateX(-50%);
  z-index: 25000;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}
.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 14px;
  background: rgba(5, 12, 30, .96);
  border: 1.5px solid var(--theme-color);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 0 20px var(--theme-glow);
  font-size: 13.5px;
  line-height: 1.4;
  pointer-events: auto;
  animation: toastIn .45s var(--ease-spring) backwards;
}
.toast.ok  { border-color: #4ade80; }
.toast.err { border-color: #f87171; }
.toast.busy .spinner { color: var(--theme-color); }
.toast.out { animation: toastOut .25s ease forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(18px) scale(.9); } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(10px) scale(.95); } }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  .acct-avatar { width: 40px; height: 40px; }
  .acct-item { padding: 12px 10px; }
}

@media (max-width: 640px) {
  .acct-card { position: fixed; top: calc(var(--safe-t) + 64px); right: 10px; left: 10px; width: auto; max-width: none; }
  .wp-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .modal-head { padding: 16px 16px 4px; }
  .modal-body { padding: 8px 16px 18px; }
  .toast-stack { bottom: calc(var(--safe-b) + 160px); }
}

@media (orientation: landscape) and (max-height: 500px) {
  .acct { top: calc(var(--safe-t) + 6px); }
  .acct-card { max-height: calc(100vh - 60px); }
}

@media (pointer: coarse) {
  .field { font-size: 16px; }   /* iOS zooms into anything smaller */
}