/*
 * TallyComm — shared.css
 * Styles shared across cam.html, crew.html, director.html
 * Panel-specific styles stay in their respective <style> blocks
 */

/* ── Google Fonts ────────────────────────────────────────────── */
/* Imported individually per panel to allow panel-specific overrides if needed */

/* ── CSS Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html { background: var(--bg); }

/* ── CSS Variables (design tokens) ──────────────────────────── */
/*
 * NOTE: setup.html uses a different color scheme (slightly different bg/txt values)
 * and is NOT included in this shared file. It maintains its own :root block.
 * cam.html, crew.html, director.html all use identical values below.
 */
:root {
  --bg:       #111;
  --s1:       #1e1e1e;
  --s2:       #2a2a2a;
  --b1:       #3a3a3a;
  --red:      #ff3b3b;
  --red-bg:   #2d0808;
  --red-dim:  #3a1414;
  --red-glow: rgba(255,59,59,.35);
  --ylw:      #ffcc00;
  --ylw-bg:   #251e00;
  --grn:      #30d060;
  --grn-bg:   #0a2a14;
  --blu:      #3090ff;
  --blu-bg:   #0a1a30;
  --org:      #ff8c00;
  --txt:      #fff;
  --txt2:     #bbb;
  --txt3:     #888; /* was #666 — bumped for WCAG AA contrast on dark bg (~4.5:1) */
  --mono:     'Share Tech Mono', monospace;
  --sans:     'Barlow Condensed', sans-serif;
  /* Design tokens */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --topbar-h:  52px;
  --z-banner:  150;
  --z-overlay: 200;
  --z-modal:   300;
}

/* Day mode — toggled by toggleDay() in shared.js. Centralized here so all panels
   (cam, crew, director, setup, etc.) get identical day-mode values. */
body.day {
  --bg:     #e8e8e0;
  --s1:     #d8d8d0;
  --s2:     #c8c8c0;
  --b1:     #a0a098;
  --red-bg: #ffcccc;
  --red-dim:#ffd0d0;
  --ylw-bg: #fff9cc;
  --grn-bg: #ccf5dc;
  --blu-bg: #cce4ff;
  --txt:    #111;
  --txt2:   #333;
  --txt3:   #555;
}

/* ── Brand logo (shared dot animation) ───────────────────────── */
@keyframes bdot {
  0%,40% { background: var(--red); }
  50%,90% { background: var(--ylw); }
  100% { background: var(--red); }
}

/* ── Shared animations ───────────────────────────────────────── */
@keyframes pulse {
  0%,100% { opacity: 1 }
  50%      { opacity: .3 }
}

/* ── Accessibility: keyboard focus visible everywhere ────────── */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ── Respect prefers-reduced-motion (vestibular accessibility) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── VU meters (RX/TX) — used by all 3 panels via .vu-section/.vu-row/.vu-track ──
   Default is horizontal (RX | TX in one row) to save vertical space. */
.vu-section { padding:6px 14px; display:flex; flex-direction:row; gap:10px; flex-shrink:0; }
.vu-row { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.vu-lbl { font-family:var(--mono); font-size:9px; color:var(--txt3); width:20px; flex-shrink:0; }
.vu-track { flex:1; height:5px; background:var(--s2); border-radius:1px; overflow:hidden; }
.vu-fill { height:100%; width:0%; background:var(--grn); border-radius:2px; transition:width .05s; }
.vu-fill.mid { background: var(--ylw); }
.vu-fill.hot { background: var(--red); }
/* Legacy alias — director.html historically used .vu-bar as the inner track. */
.vu-bar { flex:1; height:5px; background:var(--s2); border-radius:2px; overflow:hidden; }

/* ── Speaker banner (#spk-banner) — used by cam + crew ──────── */
.spk-banner { display:none; margin:0 12px 6px; padding:8px 14px; background:var(--s1); border:1px solid var(--b1); border-radius:3px; align-items:center; gap:10px; flex-shrink:0; }
.spk-banner.show { display:flex; }
.spk-banner.t-dir   { background:rgba(48,144,255,.12); border-color:var(--blu); }
.spk-banner.t-cam   { background:rgba(48,208,96,.1);   border-color:var(--grn); }
.spk-banner.t-prod  { background:rgba(255,140,0,.1);   border-color:var(--org); }
.spk-banner.t-ifb   { background:rgba(48,144,255,.22); border-color:var(--blu); border-width:2px; }
.spk-banner.t-multi { background:rgba(255,140,0,.1);   border-color:var(--org); }
.spk-dot { width:7px; height:7px; border-radius:50%; background:var(--grn); animation:pulse .6s infinite; flex-shrink:0; }
.spk-banner.t-dir .spk-dot, .spk-banner.t-ifb .spk-dot { background:var(--blu); }
.spk-banner.t-prod .spk-dot, .spk-banner.t-multi .spk-dot { background:var(--org); }
.spk-info { flex:1; min-width:0; }
.spk-who { font-family:var(--mono); font-size:11px; color:var(--txt); display:block; }
.spk-ch  { font-family:var(--mono); font-size:9px;  color:var(--txt3); display:block; margin-top:1px; }
.spk-tag { font-family:var(--mono); font-size:9px; padding:2px 6px; background:var(--s2); border:1px solid var(--b1); border-radius:2px; color:var(--txt3); flex-shrink:0; }
.spk-banner.t-dir .spk-tag, .spk-banner.t-ifb .spk-tag { border-color:var(--blu); color:#5090ff; }
.spk-banner.t-cam .spk-tag   { border-color:var(--grn); color:var(--grn); }
.spk-banner.t-prod .spk-tag, .spk-banner.t-multi .spk-tag { border-color:var(--org); color:var(--org); }

/* ── Reconnection feedback (LK overlay + idle banner + recon bar) ── */
.lk-reconnecting-overlay { display:none; position:fixed; inset:0; z-index:200; background:rgba(10,10,10,.85); flex-direction:column; align-items:center; justify-content:center; gap:16px; backdrop-filter:blur(4px); }
.lk-reconnecting-overlay.show { display:flex; }
.lk-reconnecting-spinner { width:32px; height:32px; border:3px solid rgba(255,255,255,.15); border-top-color:#ff3b3b; border-radius:50%; animation:lk-spin .7s linear infinite; }
.lk-reconnecting-text { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.6); }
@keyframes lk-spin { to { transform:rotate(360deg); } }
.connecting { opacity:.7; animation:lk-pulse .8s ease-in-out infinite; }
@keyframes lk-pulse { 0%,100% { opacity:.7; } 50% { opacity:1; } }
.recon { display:none; margin:0 12px 6px; padding:8px 12px; background:#201600; border:1px solid var(--ylw); border-radius:3px; flex-shrink:0; }
.recon.show { display:block; }
.recon-t { font-family:var(--mono); font-size:10px; color:var(--ylw); }
.recon-bar { height:2px; background:var(--s2); margin-top:6px; border-radius:1px; overflow:hidden; }
.recon-fill { height:100%; background:var(--ylw); width:0%; }

/* .audio-banner and .lk-idle-banner stay per-panel (positioning differs) */

/* ── Party lines / channel rows (cam + crew share; director uses .pl-* differently) ── */
.channels { padding:6px 12px; display:flex; flex-direction:column; gap:5px; flex-shrink:0; }
.ch-section-lbl { font-family:var(--mono); font-size:7px; letter-spacing:.15em; color:var(--txt3); padding:0 2px 2px; display:flex; align-items:center; gap:8px; }
.ch-section-lbl::after { content:''; flex:1; height:1px; background:var(--b1); }
.ch-row { display:flex; align-items:center; gap:7px; background:var(--s1); padding:7px 10px; border-radius:3px; border:1px solid var(--b1); transition:all .12s; }
.ch-row.active  { border-color:var(--grn); background:var(--grn-bg); }
.ch-row.talking { border-color:var(--red); background:rgba(255,59,59,.08); }
/* .ch-row.ifb-on stays in cam.html — IFB is a cam-only channel */
.tl-w { display:flex; gap:4px; }
.tl   { width:32px; height:28px; border:1px solid var(--b1); border-radius:3px; background:var(--s2); color:var(--txt3); font-family:var(--mono); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .1s; touch-action:manipulation; }
.tl.l-on { background:var(--grn-bg); border-color:var(--grn); color:var(--grn); }
.tl.t-on { background:#3a0a0a;       border-color:var(--red); color:var(--red); }
.tl.off  { opacity:.2; pointer-events:none; }
.ch-name { flex:1; font-family:var(--sans); font-size:13px; font-weight:700; color:var(--txt2); letter-spacing:.04em; }
.ch-row.active .ch-name, .ch-row.talking .ch-name, .ch-row.ifb-on .ch-name { color:var(--txt); }
.ch-who  { font-family:var(--mono); font-size:8px; color:var(--txt3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90px; }
.ch-who.spk { color:var(--grn); animation:fade .8s infinite; }
@keyframes fade { 0%,100% { opacity:1; } 50% { opacity:.5; } }

/* ── Latency chip (cam + director) ──────────────────────────── */
/* ── Language toggle (EN/ES) ────────────────────────────────── */
.lang-toggle {
  display: flex; align-items: center; gap: 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.lang-opt {
  padding: 3px 5px;
  color: var(--txt3);
  transition: color .2s, background .2s;
  border: 1px solid var(--b1);
}
.lang-opt:first-child { border-radius: 3px 0 0 3px; border-right: none; }
.lang-opt:last-child  { border-radius: 0 3px 3px 0; }
.lang-opt.active { color: var(--txt); background: var(--s2); }

.chip {
  font-family: var(--mono); font-size: 9px;
  padding: 3px 8px;
  background: var(--s2); border: 1px solid var(--b1); border-radius: 2px;
  color: var(--txt3);
}
.chip.good { border-color: var(--grn); color: var(--grn); }
.chip.warn { border-color: var(--ylw); color: var(--ylw); }
.chip.bad  { border-color: var(--red); color: var(--red); }

/* ── Unified topbar (rendered by mountChrome in shared.js) ────── */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--s1);
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
  min-height: 44px;
  position: relative;
}
/* Broadcast tally effect: red hairline under topbar when event is ON AIR.
   Triggered by body.on-air class (toggled from _applyEventState in shared.js). */
body.on-air .topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--red);
  box-shadow: 0 0 8px rgba(255,59,59,.6);
  animation: tc-live-pulse 1.5s ease-in-out infinite;
}
.tb-l, .tb-r {
  display: flex; align-items: center; flex-shrink: 0;
}
.tb-l { gap: 8px; }
.tb-r { gap: 5px; }
.logo { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.brand-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  animation: bdot 1.8s ease-in-out infinite;
}
@keyframes bdot {
  0%, 40%  { background: var(--red); }
  50%, 90% { background: var(--ylw); }
  100%     { background: var(--red); }
}
.brand-name {
  font-family: var(--sans); font-size: 14px; font-weight: 900;
  letter-spacing: .18em; color: var(--txt);
}
.brand-name em { color: var(--red); font-style: normal; }
.topbar .role-badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  padding: 3px 8px; border-radius: 2px;
  background: var(--red); color: #fff;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0;
  border: none;
}
.conn {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px; color: var(--txt3);
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grn); animation: pulse 2s infinite;
}
.dot.err  { background: var(--red); }
.dot.warn { background: var(--ylw); }
.day-toggle {
  display: flex; align-items: center; gap: 5px; padding: 2px;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.day-toggle-lbl {
  font-family: var(--mono); font-size: 10px; color: var(--txt3);
  width: 14px; text-align: center; transition: color .2s;
}
.day-toggle-sw {
  width: 28px; height: 16px; border-radius: 8px; position: relative;
  background: var(--s2); border: 1px solid var(--b1); flex-shrink: 0;
  transition: all .2s;
}
.day-toggle-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--txt3); transition: all .2s;
}
body.day .day-toggle-sw { background: rgba(255,200,0,.15); border-color: rgba(255,200,0,.5); }
body.day .day-toggle-sw::after { left: 14px; background: #e6a800; }
.online-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: transparent; border: 1px solid var(--b1); border-radius: 2px;
  font-family: var(--mono); font-size: 9px; color: var(--txt3);
}
.online-chip .oc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--txt3); flex-shrink: 0;
}
.online-chip.has-online .oc-dot { background: var(--grn); box-shadow: 0 0 5px var(--grn); }
.online-chip.has-online { border-color: rgba(48,208,96,.3); color: var(--txt2); }
.online-chip .oc-num { font-size: 10px; font-weight: 700; letter-spacing: .04em; }

/* ── Logout button (cam/crew/director topbars) ──────────────── */
.logout-btn {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid rgba(255,59,59,.4);
  color: var(--red);
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .12em;
  border-radius: 2px; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.logout-btn:hover, .logout-btn:active {
  background: var(--red); color: #fff; border-color: var(--red);
}

/* ── Mic-lost banner (web — iOS Safari / Android Chrome kill mic in bg) ─ */
.mic-lost-banner {
  display: none;
  position: fixed;
  top: calc(60px + env(safe-area-inset-top, 0px));
  left: 12px; right: 12px;
  z-index: 150;
  background: rgba(180, 30, 30, .95);
  border: 2px solid var(--red);
  border-radius: 4px;
  padding: 12px 16px;
  color: #fff;
  font-family: var(--mono);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
  animation: mlb-pulse 1.8s ease-in-out infinite;
}
.mic-lost-banner.show { display: block; }
.mic-lost-banner .mlb-main {
  font-size: 12px; letter-spacing: .1em; font-weight: 700;
}
.mic-lost-banner .mlb-icon { margin-right: 6px; font-size: 14px; }
.mic-lost-banner .mlb-hint {
  font-size: 9px; letter-spacing: .04em;
  opacity: .8; margin-top: 4px;
}
.mic-lost-banner.busy {
  animation: none; opacity: .6; cursor: wait;
}
@keyframes mlb-pulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,.5); }
  50%      { box-shadow: 0 4px 18px rgba(0,0,0,.5), 0 0 20px 4px rgba(255,59,59,.5); }
}

/* ── Status footer (event · controls · credit) ──────────────── */
.status-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  padding: 6px 12px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--s1);
  border-top: 1px solid var(--b1);
  flex-shrink: 0;
  min-height: 34px;
  font-family: var(--mono); font-size: 9px; color: var(--txt3);
}
.status-footer .sf-sec { display: flex; align-items: center; gap: 8px; }
.status-footer .sf-left  { justify-content: flex-start; }
.status-footer .sf-mid   { justify-content: center; flex: 1 1 auto; }
.status-footer .sf-right { justify-content: flex-end; }
.status-footer .chip { background: transparent; border-color: var(--b1); }
.status-footer .room-id {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; color: var(--txt);
  padding: 3px 8px; border: 1px solid var(--b1); border-radius: 2px;
  background: var(--s2);
}
.sf-credit {
  font-family: var(--mono); font-size: 8px; letter-spacing: .08em;
  color: var(--txt3); white-space: nowrap;
}
.sf-credit:hover { color: var(--txt2); }
/* Very narrow phones: hide credit to keep essentials visible */
@media (max-width: 380px) {
  .sf-credit { display: none; }
}

/* ── Event chip (ON AIR status in footer) ──────────────────── */
.tc-event-chip {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .08em; padding: 3px 8px; border-radius: 2px;
  border: 1px solid var(--b1); white-space: nowrap;
}
.tc-event-chip.off {
  background: transparent; color: var(--txt3); border-color: var(--b1);
}
.tc-event-chip.live {
  background: var(--red); color: #fff; border-color: var(--red);
  box-shadow: 0 0 8px rgba(255,59,59,.45);
  animation: tc-live-pulse 1.5s ease-in-out infinite;
}
.tc-event-chip.live::before {
  content: '\25CF'; margin-right: 4px;
}
.tc-event-chip.live.ending {
  background: var(--ylw); color: #111; border-color: var(--ylw);
  box-shadow: 0 0 8px rgba(255,204,0,.5);
}
.tc-event-chip.paused {
  background: var(--s2); color: var(--txt2); border-color: var(--b1);
}
@keyframes tc-live-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,59,59,.45); }
  50%      { box-shadow: 0 0 14px rgba(255,59,59,.8); }
}

/* ── Event gate (disable audio buttons outside active event) ── */
/* No `pointer-events:none` — we want the click to fire so the global
   interceptor in shared.js can show the explanatory message. */
.evt-disabled {
  opacity: 0.35;
  filter: grayscale(0.6);
  cursor: not-allowed;
}
/* Inline banner between topbar and content — shows event state explicitly */
.tc-event-banner {
  display: none;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-align: center;
  font-weight: 700;
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
}
.tc-event-banner.show { display: block; }
.tc-event-banner.waiting {
  background: var(--s2);
  color: var(--txt2);
  border-bottom-color: var(--b1);
}
.tc-event-banner.paused {
  background: rgba(255,204,0,.15);
  color: var(--ylw);
  border-bottom-color: var(--ylw);
}

/* ── Unified account header (rendered by mountAccountHeader in cap-chrome.js) ──
   Used on dashboard, profile, setup, dashboard-event. 3-zone flex layout
   (left: home + back, center: logo, right: user-menu or empty). Distinct from
   the panel topbar (.topbar built by mountChrome in shared.js) which has
   role-badge + conn + lang-toggle + logout. */
.account-topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  padding: 14px 20px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: var(--s1);
  border-bottom: 1px solid var(--b1);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 10;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.account-topbar .ah-l, .account-topbar .ah-r {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 0; min-width: 0;
}
.account-topbar .ah-l { justify-content: flex-start; }
.account-topbar .ah-r { justify-content: flex-end; }
.account-topbar .ah-c {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.account-topbar .ah-c .brand {
  display: flex; align-items: center; gap: 7px; text-decoration: none;
}
.account-topbar .ah-c .brand-dot {
  width: 8px; height: 8px;
}
.account-topbar .ah-c .brand-name {
  font-size: 16px; letter-spacing: .2em;
}

/* Home button — circular icon, only injected when in Capacitor */
.account-home-btn {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%; color: var(--txt); cursor: pointer;
  transition: background .15s, border-color .15s;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.account-home-btn:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.32); }
.account-home-btn:active { transform: scale(.94); }
.account-home-btn svg {
  width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Back-link — text link "← DASHBOARD" */
.account-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; color: var(--txt); text-decoration: none;
  background: transparent; border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px; transition: border-color .15s, background .15s;
  white-space: nowrap;
}
.account-back-link:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); }

/* User-menu — avatar + name + tier pill, click → /profile.
   Extracted from dashboard.html inline so setup + dashboard-event reuse it. */
.user-menu {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; padding: 6px 12px 6px 7px;
  background: transparent; border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.user-menu:hover { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.03); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .03em;
}
.user-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.user-name {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  color: var(--txt); letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.user-tier {
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .12em;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(255,255,255,.06); color: var(--txt2);
  border: 1px solid rgba(255,255,255,.12);
  align-self: flex-start;
}
.user-tier.pro     { background: rgba(48,208,96,.12); color: var(--grn); border-color: rgba(48,208,96,.35); }
.user-tier.trial   { background: rgba(59,130,246,.15); color: #60a5fa; border-color: rgba(59,130,246,.4); }
.user-tier.expired { background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.4); }

/* Compact mode for narrow viewports — hide the name/tier text, keep avatar */
@media (max-width: 520px) {
  .user-info { display: none; }
  .user-menu { padding: 4px; }
  .account-back-link { padding: 8px 10px; font-size: 10px; letter-spacing: .1em; }
  .account-topbar .ah-c .brand-name { font-size: 13px; letter-spacing: .15em; }
}

/* Panel topbar back-arrow (rendered by mountChrome in shared.js) — small
   circular button as first child of .tb-l, before the logo. Visible on
   both Capacitor and web (destination differs by platform). */
.tb-back-btn {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--b1);
  border-radius: 50%; color: var(--txt2); cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, border-color .15s;
}
.tb-back-btn:hover { color: var(--txt); border-color: rgba(255,255,255,.32); }
.tb-back-btn:active { transform: scale(.92); }
.tb-back-btn svg {
  width: 14px; height: 14px; stroke: currentColor; fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}