/* Daylight Session theme (default) + Midnight dark mode.
   The site is light by default: warm off-white ground, white cards, one
   coral "stage light" for actions and a blue second voice for links and
   highlights. The moon/sun button in the top bar sets data-theme="dark" on
   <html> (remembered in localStorage, applied by an inline script in the
   page <head> before first paint so there is no white flash), which swaps
   every colour token below for its dark counterpart.
   The brand-* names are kept from the old themes so existing rules still
   work: 50/100/200 are translucent coral tints for highlighted backgrounds,
   400/500 are the solid accent, 600/700 are the accent as *text*, so on the
   light theme they are darker and on the dark theme they are lighter.
   Anything sitting on a solid brand-500 fill takes --on-brand for its text.
   Only colours live in the two theme blocks; sizes/fonts stay in the shared
   :root block underneath. */
:root {
  color-scheme: light;

  --brand-50:  rgba(224, 74, 51, 0.08);
  --brand-100: rgba(224, 74, 51, 0.16);
  --brand-200: rgba(224, 74, 51, 0.30);
  --brand-400: #ec6a52;
  --brand-500: #e04a33;
  --brand-600: #c63d29;
  --brand-700: #a3301f;
  --accent-500: #2a6fdb;
  --accent-600: #1f5cbf;
  --on-brand: #ffffff;
  --green-500: #1f9d63;
  --green-600: #17834f;
  --cyan-500: #2a6fdb;

  --danger: #d63a2f;
  --danger-bg: rgba(214, 58, 47, 0.08);
  --danger-border: rgba(214, 58, 47, 0.32);
  --warn: #c76a12;

  --bg: #f6f4f1;
  --bg-deep: #ece8e3;
  --bg-soft: #efece8;
  --card: #ffffff;
  --card-raise: #ffffff;
  --text: #1d1b19;
  --text-muted: #6a655e;
  --text-faint: #8f8981;
  --border: #e3dfd9;
  --border-strong: #d2ccc4;

  /* Surfaces the old dark-only rules hard-coded. */
  --topbar-glass: rgba(246, 244, 241, 0.88);
  --cover-stripe-a: #efe9e2;
  --cover-stripe-b: #f4efe9;
  --cover-glow: rgba(224, 74, 51, 0.28);

  --shadow-sm: 0 1px 2px rgba(40, 30, 20, 0.06);
  --shadow-md: 0 10px 28px rgba(40, 30, 20, 0.12);
  --shadow-lg: 0 20px 48px rgba(40, 30, 20, 0.18);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-50:  rgba(255, 111, 97, 0.10);
  --brand-100: rgba(255, 111, 97, 0.20);
  --brand-200: rgba(255, 111, 97, 0.34);
  --brand-400: #ff8a7e;
  --brand-500: #ff6f61;
  --brand-600: #ff8a7e;
  --brand-700: #ffaba2;
  --accent-500: #6aa2ff;
  --accent-600: #8ab6ff;
  --on-brand: #1c0b09;
  --green-500: #2bc479;
  --green-600: #22a866;
  --cyan-500: #6aa2ff;

  --danger: #ff6b5b;
  --danger-bg: rgba(255, 107, 91, 0.12);
  --danger-border: rgba(255, 107, 91, 0.38);
  --warn: #ffa64d;

  --bg: #0f1115;
  --bg-deep: #0b0d10;
  --bg-soft: #1d2129;
  --card: #171a21;
  --card-raise: #20242d;
  --text: #ecebe6;
  --text-muted: #9a9faa;
  --text-faint: #6c717d;
  --border: #272b35;
  --border-strong: #353a46;

  --topbar-glass: rgba(11, 13, 16, 0.88);
  --cover-stripe-a: #1b1e25;
  --cover-stripe-b: #1f232b;
  --cover-glow: rgba(255, 111, 97, 0.36);

  --shadow-sm: none;
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
}

:root {
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --font-body: "Instrument Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Big Shoulders Display", "Instrument Sans", Impact, sans-serif;

  --studio-side-w: 300px;
  --player-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

/* The condensed display face only reads well at heading sizes, so h3 and
   smaller stay in the body face. */
h1, h2 { font-family: var(--font-display); font-style: normal; font-weight: 800; letter-spacing: 0.01em; }
h3 { font-style: normal; letter-spacing: 0; }

/* Belt-and-suspenders: no element anywhere renders italic, including any
   future <em>/<i>/<cite>/<blockquote> markup that would otherwise pick up
   the browser's default italic styling. */
em, i, cite, blockquote, address, q, var, dfn {
  font-style: normal;
}

::selection { background: var(--brand-100); color: var(--brand-700); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--topbar-glass);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  font-style: normal;
  background: var(--brand-500);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.brand__mark {
  /* The wordmark's "background-clip: text" trick above makes the
     computed `color` transparent, which currentColor-based SVG children
     would otherwise inherit - give the mark its own explicit color. */
  color: var(--brand-500);
  flex: none;
}
.search-form { flex: 1; max-width: 260px; }
.search-form input {
  width: 100%;
  padding: 10px 16px;
  border-radius: 24px;
  border: 1px solid transparent;
  background: var(--bg-soft);
  font-size: 14px;
  font-family: inherit;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.search-form input:focus {
  outline: none;
  background: var(--card);
  border-color: var(--brand-400);
  box-shadow: 0 0 0 4px var(--brand-50);
}
.topnav { display: flex; gap: 2px; flex: 1; justify-content: center; }
.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.nav-link:hover { background: var(--bg-soft); color: var(--text); }
.nav-link--active { color: var(--brand-600); }
.nav-link--active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 22%;
  right: 22%;
  height: 3px;
  border-radius: 3px;
  background: var(--brand-500);
}
.nav-icon { font-size: 19px; position: relative; display: inline-block; }
.nav-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--brand-500);
  color: var(--on-brand);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.topnav--guest { gap: 6px; }
.topnav--guest .nav-link { flex-direction: row; gap: 0; }
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--text-muted);
  background: var(--bg-soft);
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--brand-50); color: var(--brand-600); }
.icon-btn--active { color: var(--brand-600); background: var(--brand-50); }
.icon-btn .nav-badge { top: -4px; right: -6px; }

.notif-wrap { position: relative; }
.notif-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  z-index: 50;
  overflow: hidden;
}
.notif-dropdown__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.notif-dropdown__head strong { font-size: 15px; }
.notif-dropdown__head a { font-size: 13px; color: var(--brand-600); font-weight: 600; }
.notif-dropdown__head a:hover { text-decoration: underline; }
.notif-dropdown__list { max-height: 380px; overflow-y: auto; padding: 8px; }
.notif-dropdown__list .conversation-row { padding: 8px; }
.notif-dropdown__list .conversation-row__preview { max-width: 220px; }
.notif-dropdown__list .empty-state { padding: 28px 16px; }
.notif-dropdown__loading { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.likes-popover-wrap { position: relative; display: inline-block; }
.likes-count-btn { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.likes-count-btn:hover { text-decoration: underline; }
.likes-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 240px;
  max-width: calc(100vw - 32px);
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
  padding: 8px;
}
.likes-popover a { color: var(--text); }
.likes-popover a:hover { background: var(--bg); border-radius: 8px; }
.topbar__user { display: flex; align-items: center; gap: 10px; }
.topbar__user--guest { gap: 10px; }
.btn-link {
  background: none; border: none; color: var(--text); cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 6px 10px; font-family: inherit;
  border-radius: 8px; transition: background .15s ease;
}
.btn-link:hover { background: var(--bg-soft); }

/* ---------- Layout ---------- */
.page { max-width: 1240px; margin: 0 auto; padding: 16px 24px; }
/* Pages that used an empty .sidebar as a spacer column drop it now that
   the Studio side panel sits to the left of every page; the feed pages
   use --two (main column + right bar). */
.feed-layout > .sidebar:empty,
.feed-layout > .rightbar:empty { display: none; }
.feed-layout:has(> .sidebar:empty),
.feed-layout.feed-layout--two { grid-template-columns: minmax(0,1fr) 290px; }
/* The feed pages (feed, explore, hashtag) cap the post column so lines and
   media stay at a comfortable reading width on big screens instead of
   stretching across the whole page. */
/* The feed + right bar pair is centred in the space beside the Studio side
   panel, so the empty margin on each side is always equal. Both columns
   grow a little on wider screens (feed up to 780px, right bar up to 340px)
   so that margin stays small instead of leaving a wide strip on one side.
   Pinning the pair to the left menu was tried and rejected: it just moved
   all the empty space to the right. */
.feed-layout.feed-layout--two {
  grid-template-columns: minmax(0, 780px) clamp(290px, 22vw, 340px);
  justify-content: center;
  gap: clamp(24px, 2.5vw, 40px);
}
.feed-layout:has(> .sidebar:empty):has(> .rightbar:empty) { grid-template-columns: minmax(0, 960px); justify-content: center; }
/* Profile "Posts" tab: the composer and the posts under it get a
   comfortable reading width, centred under the full-width profile header,
   instead of stretching across the whole 960px profile column. */
.profile-posts { max-width: 780px; margin-inline: auto; } /* keep equal to the feed column width above */
.feed-layout {
  display: grid;
  grid-template-columns: 250px minmax(0,1fr) 290px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  /* minmax(0, 1fr), not plain 1fr: a bare 1fr track still won't shrink
     past its content's min-content width, which is exactly the same
     min-width:auto trap as a flex item and was letting wide content (e.g.
     the profile header's avatar+name row) stretch the whole page. */
  .feed-layout,
  .feed-layout.feed-layout--two,
  .feed-layout:has(> .sidebar:empty),
  .feed-layout:has(> .sidebar:empty):has(> .rightbar:empty) { grid-template-columns: minmax(0, 1fr); }
  .rightbar { display: none; }
  .page { padding: 16px; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin-bottom: 14px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.sidebar .card, .rightbar .card { padding: 14px; }

/* ---------- Shortcuts (sidebar) ---------- */
.shortcuts-card { padding: 10px !important; }
.shortcuts-card__title {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); padding: 10px 12px 6px;
}
.shortcuts-list { display: flex; flex-direction: column; gap: 2px; }
.shortcut-group-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); padding: 8px 10px 3px;
}
.shortcut-group-title:first-child { padding-top: 2px; }
.shortcut-item {
  display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 10px;
  color: var(--text); transition: background .15s ease;
}
.shortcut-item:hover { background: var(--bg-soft); }
.shortcut-item:hover .shortcut-item__arrow { transform: translateX(2px); opacity: 1; }
.shortcut-item__icon {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  /* One neutral tone for every icon instead of a different pastel per item -
     keeps the sidebar calm and lets the emoji themselves carry the color. */
  background: var(--bg-soft);
}
.shortcut-item__label { flex: 1; font-size: 14px; font-weight: 600; }
.shortcut-item__arrow { color: var(--text-faint); opacity: 0; transition: opacity .15s ease, transform .15s ease; font-size: 15px; }

/* ---------- Avatar ---------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--card-raise);
  color: var(--brand-500);
  font-weight: 700;
  font-family: var(--font-body);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--border);
}
.avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.avatar--md { width: 42px; height: 42px; font-size: 15px; }
.avatar--lg {
  width: 104px; height: 104px; font-size: 34px;
  border: 5px solid var(--card);
  box-shadow: var(--shadow-md);
}
.avatar--photo { background: var(--bg-soft); padding: 0; overflow: hidden; }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Profile avatar: click-to-enlarge, plus (owner only) a hover-to-reveal
   camera button for uploading a new photo without leaving the page. */
.avatar-edit { position: relative; display: inline-block; line-height: 0; border-radius: 50%; }
.avatar-edit[data-lightbox-img] { cursor: zoom-in; }
.avatar-edit__btn {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%;
  border: none; background: rgba(20, 20, 30, 0.5); color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease;
}
.avatar-edit--owner:hover .avatar-edit__btn,
.avatar-edit--owner .avatar-edit__btn:focus-visible { opacity: 1; }
.avatar-edit--loading .avatar-edit__btn { opacity: 1; cursor: wait; }
.avatar-edit--loading .avatar-edit__btn::after {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: avatar-edit-spin 0.7s linear infinite;
}
@keyframes avatar-edit-spin { to { transform: rotate(360deg); } }

.img-lightbox {
  position: fixed; inset: 0; background: rgba(10, 10, 15, 0.85); z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  cursor: zoom-out; animation: img-lightbox-in 0.12s ease;
}
@keyframes img-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.img-lightbox img {
  max-width: min(640px, 100%); max-height: 100%; border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5); cursor: default;
}
.img-lightbox__close {
  position: absolute; top: 18px; right: 22px; background: rgba(255,255,255,0.12);
  color: #fff; border: none; border-radius: 50%; width: 36px; height: 36px;
  font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.img-lightbox__close:hover { background: rgba(255,255,255,0.22); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  width: 100%;
  padding: 12px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--brand-500);
  color: var(--on-brand);
  box-shadow: none;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-green { background: linear-gradient(135deg, var(--green-500), var(--green-600)); color: var(--on-brand); box-shadow: none; }
.btn-outline { background: var(--card); border: 1.5px solid var(--border-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--brand-400); color: var(--brand-600); background: var(--brand-50); }
.btn-sm { width: auto; padding: 8px 18px; font-size: 13.5px; border-radius: var(--radius-sm); }
hr.sep { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.center { text-align: center; }
.error-box {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 500;
}
.hint { color: var(--text-muted); font-size: 12.5px; margin-top: 4px; }

/* ---------- Auth pages ---------- */
.auth-wrap {
  display: flex;
  gap: 70px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 20px;
}
.auth-hero { color: var(--text); max-width: 420px; }
.auth-hero h1 { font-size: 38px; margin-bottom: 14px; line-height: 1.15; }
.auth-hero p { font-size: 17px; line-height: 1.6; color: var(--text-muted); }
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  width: 380px;
  box-shadow: var(--shadow-lg);
}
.auth-card h2 { text-align: center; margin-top: 0; font-size: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: var(--bg-soft);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand-400);
  background: var(--card);
  box-shadow: 0 0 0 4px var(--brand-50);
}

/* A plain <input type="file"> can't be restyled directly - only its
   "choose file" button part can, via ::file-selector-button (the modern
   standard, Chrome/Firefox/Safari) and ::-webkit-file-upload-button (older
   Chrome/Safari). Styling that pseudo-element here, once, replaces every
   default gray OS-styled "Choose Files" button across the site with one
   that matches the rest of the UI, with no changes needed anywhere a file
   input is actually used. */
input[type="file"] {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-muted);
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--on-brand);
  background: var(--brand-500);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  margin-right: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button { background: var(--brand-600); }

/* ---------- Composer / feed ---------- */
.composer textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  resize: none;
  font-family: inherit;
  font-size: 15px;
  min-height: 38px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.composer textarea:focus {
  outline: none; border-color: var(--brand-400); background: var(--card); box-shadow: 0 0 0 4px var(--brand-50);
}
.composer-row { display: flex; gap: 12px; align-items: flex-start; }
.composer-row2 { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.composer-image-preview { margin-top: 12px; position: relative; display: inline-block; }
.composer-image-preview[hidden] { display: none; }
.composer-image-preview img { max-height: 220px; border-radius: 12px; display: block; }
.composer-image-preview__remove {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none;
  cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.composer-video-row { margin-top: 12px; position: relative; background: var(--bg-soft); border-radius: 12px; padding: 14px; padding-right: 40px; }
.composer-video-row__tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.composer-video-row__tab {
  background: none; border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; font-family: inherit;
}
.composer-video-row__tab--active { background: var(--brand-500); border-color: var(--brand-500); color: var(--on-brand); }
.composer-video-row input[type=url] {
  flex: 1; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border);
  font-size: 14px; font-family: inherit;
}
.composer-video-row input[type=url]:focus {
  outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 4px var(--brand-50);
}
.composer-video-row .composer-image-preview__remove {
  position: static; background: var(--bg-soft); color: var(--text-muted); flex-shrink: 0;
}
.composer-video-row .composer-image-preview__remove:hover { background: var(--brand-50); color: var(--brand-600); }
.video-link-preview {
  display: block; margin-top: 10px; width: 100%; max-width: 320px; border-radius: 10px;
  aspect-ratio: 16 / 9; object-fit: cover; background: #000;
}
.video-link-preview[hidden] { display: none; }
.audio-link-preview {
  display: block; margin-top: 10px; width: 100%; max-width: 400px;
}
.audio-link-preview[hidden] { display: none; }
.audio-link-preview iframe { width: 100%; border: none; border-radius: 10px; }
.composer-audio-file-preview, .composer-video-file-preview {
  display: block; margin-top: 10px; width: 100%; max-width: 400px;
}
.composer-audio-file-preview[hidden], .composer-video-file-preview[hidden] { display: none; }
.composer-audio-file-preview audio { width: 100%; }
.composer-video-file-preview video { width: 100%; max-height: 220px; border-radius: 10px; background: #000; }
.composer-error {
  margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--danger);
  background: var(--danger-bg); border-radius: 10px; padding: 8px 12px;
}
.composer-upload-progress {
  margin-top: 12px; background: var(--bg-soft); border-radius: 12px; padding: 12px 14px;
}
.composer-upload-progress__track {
  height: 18px; border-radius: 9px; background: var(--card); overflow: hidden;
  border: 1px solid var(--border); position: relative;
}
.composer-upload-progress__bar {
  height: 100%; width: 0%; border-radius: 9px;
  background: var(--brand-500);
  transition: width 0.2s ease;
  display: flex; align-items: center; justify-content: flex-end;
}
.composer-upload-progress__bar-pct {
  color: var(--on-brand); font-size: 11px; font-weight: 700; padding-right: 8px; white-space: nowrap;
}
.composer-upload-progress__label {
  margin-top: 8px; font-size: 13px; color: var(--text); font-weight: 600;
  display: flex; justify-content: space-between; gap: 10px;
}
.composer-upload-progress__label .hint { font-weight: 500; }

.post { margin-bottom: 12px; }
.hidden { display: none !important; }
/* Uploaded audio: app.js swaps the browser's tall native player for the
   slim .slim-audio bar below (the <audio> stays in the page, hidden, and
   does the playback). Without JS the native control shows at 40px.
   Embeds (iframe) keep their own sizing. */
.post__audio { margin-top: 10px; }
.post__audio audio { width: 100%; height: 40px; display: block; }
.post__audio audio[data-slim] { display: none; }

.slim-audio {
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 12px 0 4px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px;
}
.slim-audio__play {
  flex: none; width: 28px; height: 28px; border-radius: 50%; border: none;
  display: grid; place-items: center; cursor: pointer;
  background: var(--brand-500); color: var(--on-brand);
  transition: transform .12s ease, background .15s ease;
}
.slim-audio__play:hover { background: var(--brand-600); transform: scale(1.06); }
.slim-audio__play:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.slim-audio__play svg { width: 14px; height: 14px; fill: currentColor; }
.slim-audio__icon-pause { display: none; }
.slim-audio.is-playing .slim-audio__icon-play { display: none; }
.slim-audio.is-playing .slim-audio__icon-pause { display: inline; }

/* Thin seek line: the filled part is painted from --pct, set by app.js. */
.slim-audio__seek {
  --pct: 0%;
  flex: 1; min-width: 0; height: 4px; margin: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; border-radius: 999px;
  background: linear-gradient(to right, var(--brand-500) var(--pct), var(--border-strong) var(--pct));
}
.slim-audio__seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-500); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--brand-200);
}
.slim-audio__seek::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-500); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--brand-200);
}
.slim-audio__seek:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 4px; }
.slim-audio__time {
  flex: none; font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.composer-audio-file-preview audio { height: 40px; }
.post__audio iframe { width: 100%; border: none; border-radius: 10px; }
.comment-reply-btn {
  background: none; border: none; color: var(--text-muted); font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 0; margin-top: 2px;
}
.comment-reply-btn:hover { color: var(--brand-600); }
.comment-reply { margin-left: 28px; }
.post:hover { box-shadow: var(--shadow-md); }
.post__head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.post__meta { line-height: 1.3; }
.post__author { font-weight: 700; font-size: 15px; }
.post__author a:hover { color: var(--brand-600); }
.post__time { font-size: 12.5px; color: var(--text-faint); }
.post__body { font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; margin-bottom: 10px; }
.post__img { margin: -4px 0 12px; border-radius: 12px; overflow: hidden; }
.post__img img { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.post__video { margin: -4px 0 12px; border-radius: 12px; overflow: hidden; position: relative; padding-top: 56.25%; background: #000; }
.post__video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.post__video--native { padding-top: 0; }
.post__video--native video { width: 100%; max-height: 480px; display: block; background: #000; }
.post__video--preview { cursor: pointer; }
.post__video--preview img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
.post__video-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #3a2a10, #14110b); color: #fff; font-weight: 700; font-size: 15px;
}
.post__video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%; background: rgba(0, 0, 0, 0.6);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 20px; padding-left: 3px; transition: background .15s ease, transform .15s ease;
}
.post__video--preview:hover .post__video-play { background: #e02424; transform: translate(-50%, -50%) scale(1.08); }
.hashtag { color: var(--brand-600); font-weight: 600; text-decoration: none; }
.hashtag:hover { text-decoration: underline; }
.post__head { position: relative; }
.post__owner-menu { position: absolute; top: 0; right: 0; display: flex; gap: 6px; }
.post__owner-menu a, .post__owner-menu button {
  background: none; border: none; cursor: pointer; font-size: 14px; padding: 6px;
  border-radius: 8px; color: var(--text-muted); opacity: 0.7; line-height: 1;
}
.post__owner-menu a:hover, .post__owner-menu button:hover { opacity: 1; background: var(--bg-soft); }
/* Like / Comment / Report share the row in equal slots with centred
   labels, between two hairlines. Like sits inside its own <form>, so the
   form is what takes the slot and its button fills it - otherwise Like
   stays label-sized while the bare Comment/Report buttons stretch. The
   "N likes" counter keeps its natural size. */
.post__actions {
  display: flex; align-items: center; gap: 4px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 4px 0; margin-top: 4px;
}
.post__actions > form, .post__actions > button { flex: 1 1 0; min-width: 0; }
.post__actions > form > button { width: 100%; }
.post__actions > .likes-popover-wrap { flex: none; font-size: 13px; color: var(--text-muted); padding: 0 6px; }
.post__actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: none; padding: 8px 10px; border-radius: var(--radius-md);
  color: var(--text-muted); font-weight: 600; cursor: pointer; font-size: 14px; font-family: inherit;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
@media (max-width: 480px) {
  /* Three equal slots get tight on phones; trim padding so "Comment (12)" fits. */
  .post__actions button { padding: 8px 4px; font-size: 13px; gap: 4px; }
}
.post__actions .likes-count-btn { padding: 4px 2px; font-weight: 500; font-size: 13px; }
.post__actions .likes-count-btn:hover { background: none; }

/* Comment box under a post: pill input and pill Send button at one height. */
.comment-compose { display: flex; gap: 8px; align-items: center; }
.comment-compose input[type="text"] {
  flex: 1; min-width: 0; height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  font: inherit; font-size: 14px;
}
.comment-compose input[type="text"]:focus { outline: none; border-color: var(--brand-400); background: var(--card); box-shadow: 0 0 0 3px var(--brand-50); }
.comment-compose .btn { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; }
.post__actions button:hover { background: var(--bg-soft); color: var(--text); }
.post__actions button.liked { color: var(--brand-600); }

/* ---------- Profile ---------- */
.profile-cover {
  height: 200px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background:
    radial-gradient(520px 220px at 28% -10%, var(--cover-glow), transparent 70%),
    repeating-linear-gradient(90deg, var(--cover-stripe-a) 0 6px, var(--cover-stripe-b) 6px 12px);
  border-bottom: 2px solid var(--brand-500);
}
/* Cover photo: same click-to-enlarge / hover-to-upload pattern as the
   avatar (see .avatar-edit above), just shaped for a wide banner. */
.cover-edit { position: relative; display: block; }
.cover-edit[data-lightbox-img] { cursor: zoom-in; }
.cover-edit__btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: none; background: rgba(20, 20, 30, 0.45); color: #fff; font-size: 26px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease;
}
.cover-edit--owner:hover .cover-edit__btn,
.cover-edit--owner .cover-edit__btn:focus-visible { opacity: 1; }
.cover-edit--loading .cover-edit__btn { opacity: 1; cursor: wait; }
.cover-edit--loading .cover-edit__btn::after {
  content: ''; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: avatar-edit-spin 0.7s linear infinite;
}
.profile-head {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 0 24px 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.profile-head__row { display: flex; align-items: flex-end; gap: 18px; margin-top: -30px; }
.profile-head__name { font-family: var(--font-display); font-size: 25px; font-weight: 800; margin: 12px 0 2px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.tag {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
}
.tag--danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.tag--warn { background: rgba(230, 126, 34, 0.12); border-color: rgba(230, 126, 34, 0.32); color: var(--warn); }
.tag--sm { padding: 1px 8px; font-size: 11px; }
.tag--accent {
  background: var(--brand-50);
  border-color: var(--brand-100);
  color: var(--brand-600);
  font-weight: 600;
}
.info-row { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--text-muted); margin: 5px 0; }
.star-rating { color: #f5a623; letter-spacing: 1px; font-size: 15px; }
.review-row { border-bottom: 1px solid var(--border); padding: 12px 0; }
.review-row:last-child { border-bottom: none; }
.star-select { display: flex; gap: 4px; font-size: 24px; }
.star-select button {
  background: none; border: none; cursor: pointer; color: var(--border); padding: 0; line-height: 1;
}
.star-select button.star-select__on { color: #f5a623; }

/* ---------- Search ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.filters select, .filters input {
  padding: 10px 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  font-size: 14px; font-family: inherit; background: var(--bg-soft);
  transition: border-color .15s ease, background .15s ease;
}
.filters select:focus, .filters input:focus { outline: none; border-color: var(--brand-400); background: var(--card); }
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 16px; }
.result-card { text-align: center; }
.result-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.result-card .avatar--lg { margin: 0 auto 12px; width: 84px; height: 84px; font-size: 28px; }
.band-card__looking {
  margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--brand-600);
  background: var(--brand-50); border-radius: 8px; padding: 6px 10px;
}
.empty-state { text-align: center; color: var(--text-muted); padding: 48px 0; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab { padding: 11px 20px; color: var(--text-muted); font-weight: 600; border-bottom: 3px solid transparent; font-size: 14.5px; transition: color .15s ease; }
.tab:hover { color: var(--text); }
.tab--active { color: var(--brand-600); border-color: var(--brand-500); }

.soon-badge {
  background: var(--brand-100);
  color: var(--brand-700);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
}

/* ---------- Home page (logged out) ----------
   Headline + sign-up on one side, a small preview of the app on the other
   (a sample post with the slim player, plus the real next show and newest
   open gig). Uses the theme tokens, so it follows light/dark mode, and the
   grid mirrors on its own in Hebrew. */
.home-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center;
  padding: 48px 8px 64px;
}
.home-eyebrow { color: var(--brand-600); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.home-title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 66px); line-height: .98;
  text-transform: uppercase; letter-spacing: .005em; margin: 0 0 18px; text-wrap: balance;
}
.home-lead { font-size: 18px; line-height: 1.65; color: var(--text-muted); max-width: 52ch; margin: 0 0 26px; }
.home-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.home-cta .btn { width: auto; padding: 14px 28px; font-size: 15.5px; border-radius: 999px; }
.home-proof { display: flex; align-items: center; gap: 14px; margin-top: 24px; color: var(--text-muted); font-size: 14px; }
.home-proof__faces { display: flex; }
.home-proof__faces > * { border: 2px solid var(--bg); border-radius: 50%; }
.home-proof__faces > * + * { margin-inline-start: -10px; }

.home-hero__preview { position: relative; isolation: isolate; display: grid; gap: 14px; }
.home-hero__preview::before {
  content: ""; position: absolute; inset: -40px -24px; z-index: -1; border-radius: 40px;
  background: radial-gradient(closest-side, var(--brand-100), transparent);
}
.home-mock {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px;
  box-shadow: var(--shadow-md); display: grid; gap: 6px;
}
.home-mock--post { transform: rotate(-1.2deg); }
.home-mock--event { margin-inline-start: 36px; transform: rotate(0.8deg); }
.home-mock--gig { margin-inline-end: 36px; transform: rotate(-0.6deg); }
.home-mock__head { display: flex; gap: 10px; align-items: center; }
.home-mock__avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--brand-50); color: var(--brand-600); font-weight: 800;
}
.home-mock__text { margin: 4px 0 6px; font-size: 14.5px; }
.home-mock__player { height: 34px; }
.home-mock__bars { flex: 1; display: flex; align-items: center; gap: 3px; height: 100%; min-width: 0; overflow: hidden; }
.home-mock__bars span { width: 3px; flex: none; border-radius: 2px; background: var(--brand-400); }
.home-mock__bars span:nth-child(n+11) { background: var(--border-strong); }
.home-mock__actions { display: flex; gap: 18px; font-size: 13px; font-weight: 600; color: var(--text-muted); padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; }
.home-mock__label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-600); }
@media (max-width: 860px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 28px 0 40px; }
  .home-mock--event, .home-mock--gig { margin-inline: 0; }
}
[dir="rtl"] .home-title { font-family: "Rubik", var(--font-display); font-weight: 800; letter-spacing: 0; }

/* .section-label/.section-title/.features/.feature-card/.cta-bottom are
   only ever used on the logged-out home page (handleHome). They used to
   keep a gold accent independent of the shared --brand-* tokens; now that
   the site's brand color is this same teal, they just reference the
   tokens directly instead of hardcoding a second copy of the palette. */
.section-label {
  text-align: center;
  color: var(--brand-600);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title { text-align: center; font-size: 28px; margin: 0 0 32px; font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: -0.005em; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 22px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.feature-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
}
.feature-card h3 { margin: 0 0 8px; font-size: 17px; font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: -0.005em; }
.feature-card p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; }

.cta-bottom {
  text-align: center;
  padding: 56px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
.cta-bottom h2 { margin: 0 0 20px; font-size: 28px; font-family: "Big Shoulders Display", "Inter", sans-serif; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; }
.cta-bottom .btn { width: auto; padding: 14px 32px; }
.cta-bottom .btn-primary { background: var(--brand-500); box-shadow: none; }
.cta-bottom .btn-primary:hover { box-shadow: 0 8px 22px rgba(44, 62, 112, 0.4); }

/* ---------- Gear marketplace ---------- */
.marketplace-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.marketplace-header h1 { font-size: 24px; margin: 0; }
.marketplace-header .btn { width: auto; padding: 11px 22px; }

.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.listing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: block;
  position: relative;
}
.listing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.listing-card__img {
  height: 160px;
  background: linear-gradient(160deg, var(--card-raise), var(--bg-soft));
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  overflow: hidden;
}
.listing-card__img img { width: 100%; height: 100%; object-fit: cover; }
.listing-card__body { padding: 14px 16px; }
.listing-card__price { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--brand-600); }
.listing-card__title { font-weight: 600; font-size: 14.5px; margin: 3px 0 6px; color: var(--text); line-height: 1.35; }
.listing-card__meta { font-size: 12.5px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.listing-card__sold {
  position: absolute; top: 12px; left: 12px;
  background: #1a1a22; color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 8px; text-transform: uppercase;
}

.listing-detail { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 22px; align-items: start; }
@media (max-width: 800px) { .listing-detail { grid-template-columns: 1fr; } }
.listing-detail__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 340px;
  background: linear-gradient(160deg, var(--card-raise), var(--bg-soft));
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.listing-detail__img img { width: 100%; height: 100%; object-fit: cover; }
.listing-detail__price { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--brand-600); margin: 4px 0 10px; }
.listing-detail__title { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.seller-card { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); margin-top: 14px; }

.file-drop {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  background: var(--bg-soft);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.file-drop:hover { border-color: var(--brand-400); background: var(--brand-50); }
.file-drop { display: block; }
.file-drop--chosen { color: var(--text); font-weight: 600; }
/* The real file input behind a drop box: hidden but still focusable and
   usable, so the box is the only picker people see. */
.field input.file-drop__input, input.file-drop__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.file-drop__input:focus-visible + .field-error, .file-drop:focus-within { outline: 2px solid var(--brand-400); }

/* ---------- Messages ---------- */
.conversation-list { display: flex; flex-direction: column; gap: 4px; }
.conversation-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-md);
  transition: background .15s ease;
}
.conversation-row:hover { background: var(--bg-soft); }
.conversation-row--unread { background: var(--brand-50); }
.conversation-row__name { font-weight: 700; font-size: 14.5px; }
.conversation-row__preview { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px; }
.conversation-row__time { font-size: 12px; color: var(--text-faint); margin-left: auto; white-space: nowrap; }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-500); flex-shrink: 0; }

.thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.bubble--in { background: var(--bg-soft); align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble--out { background: var(--brand-500); color: var(--on-brand); align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble__time { font-size: 11px; opacity: .7; margin-top: 4px; }
.bubble__img { max-width: 100%; border-radius: 10px; display: block; margin-top: 4px; }
.bubble--typing { padding: 12px 16px; display: flex; align-items: center; }
.bubble--typing[hidden] { display: none; } /* shown only while the other person is typing */
.typing-dots { display: inline-flex; gap: 4px; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.listing-context {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px;
}
.listing-context img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }

/* ---------- Docked chat popups (Messenger-style 1-on-1 chat) ----------
   A fixed strip of small chat windows in the bottom-right corner, layered
   over every logged-in page, so a conversation never has to take over the
   whole window the way /messages/:id used to. New popups stack to the
   left of the dock so the newest is always closest to the corner. */
.chat-dock {
  position: fixed;
  right: 16px;
  bottom: 0;
  z-index: 220;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.chat-popup {
  pointer-events: auto;
  width: 300px;
  height: 380px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.chat-popup--minimized { height: auto; }
.chat-popup--minimized .chat-popup__body,
.chat-popup--minimized .chat-popup__footer { display: none; }
.chat-popup__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  background: var(--brand-500);
  color: var(--on-brand);
  cursor: pointer;
}
.chat-popup__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: rgba(0,0,0,.2); }
.chat-popup__header-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-popup__icon-btn {
  background: none;
  border: none;
  color: var(--on-brand);
  opacity: 0.85;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 4px 5px;
  border-radius: 6px;
  font-family: inherit;
}
.chat-popup__icon-btn:hover { opacity: 1; background: rgba(0,0,0,.12); }
.chat-popup__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: var(--bg-soft);
}
.chat-popup__body .thread { margin-bottom: 0; }
.chat-popup__body .bubble { max-width: 80%; padding: 8px 12px; font-size: 13px; }
.chat-popup__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding: 6px 8px;
  background: var(--card);
}
.chat-popup__form { display: flex; align-items: center; gap: 4px; }
.chat-popup__input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  font-family: inherit;
  font-size: 13px;
  background: var(--bg-soft);
  color: var(--text);
}
.chat-popup__input:focus { outline: none; border-color: var(--brand-400); }
.chat-popup__loading { text-align: center; color: var(--text-muted); font-size: 12.5px; padding: 20px 0; }
@media (max-width: 680px) {
  .chat-dock { right: 8px; gap: 8px; }
  .chat-popup { width: 78vw; max-width: 300px; }
}

/* ---------- Profile hover card ----------
   Shown on hover over ANY /profile/:id link site-wide - wired up generically
   in app.js by scanning for that href pattern, not by touching every place
   a profile link is rendered. Positioned absolutely by JS next to whatever
   was hovered. */
.hovercard {
  position: fixed;
  z-index: 230;
  width: 280px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  font-size: 13.5px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
.hovercard--visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.hovercard__head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.hovercard__id { min-width: 0; }
.hovercard__name { font-weight: 700; font-size: 15px; color: var(--text); }
.hovercard__name:hover { text-decoration: underline; }
.hovercard__location { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.hovercard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hovercard__bio { color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
.hovercard__stats { color: var(--text-muted); font-size: 12.5px; margin-bottom: 12px; }
.hovercard__stats strong { color: var(--text); }
.hovercard__actions { display: flex; gap: 8px; }
.hovercard__actions .btn { flex: 1; text-align: center; }
.hovercard__loading { text-align: center; color: var(--text-muted); padding: 10px 0; }
@media (max-width: 680px) {
  .hovercard { display: none; } /* no real hover on touch devices */
}

/* ---------- Admin control panel ---------- */
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.admin-stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 14px;
}
.admin-stat__value { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; }
.admin-stat__label { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.admin-stat--warn .admin-stat__value { color: var(--warn); }
.admin-stat--danger .admin-stat__value { color: var(--danger); }
.admin-stat--good .admin-stat__value { color: var(--green-500, #1fae63); }
.admin-stats--dashboard { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .admin-stats--dashboard { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } }

/* Left-column nav that replaced the old horizontal pill-tab row - lives in
   the page's existing .sidebar column (empty everywhere else on this page). */
.admin-sidenav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.admin-sidenav__heading {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-faint);
  text-transform: uppercase; padding: 0 10px 8px;
}
.admin-sidenav__item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--text); transition: background .15s ease;
}
.admin-sidenav__item:hover { background: var(--bg-soft); }
.admin-sidenav__item--active { background: var(--brand-50); color: var(--brand-600); font-weight: 700; }
.admin-sidenav__icon { width: 18px; text-align: center; flex-shrink: 0; }
.admin-sidenav__badge {
  margin-left: auto; background: var(--danger); color: var(--on-brand); font-size: 11px; font-weight: 700;
  border-radius: 20px; padding: 1px 7px; line-height: 1.5;
}
@media (max-width: 900px) { .admin-sidenav { position: static; } }

/* Dashboard tab: needs-attention list + recent-activity feed, side by side */
.admin-dashboard-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .admin-dashboard-grid { grid-template-columns: 1fr; } }
.admin-attn-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.admin-attn {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(230, 126, 34, 0.10); color: var(--text); transition: filter .15s ease;
}
.admin-attn:hover { filter: brightness(0.97); }
.admin-attn__icon { font-size: 16px; flex-shrink: 0; }
.admin-attn__title { flex: 1; font-size: 13.5px; font-weight: 600; }
.admin-attn__cta {
  padding: 6px 13px; border-radius: 8px; background: #b9650f; color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.admin-activity-feed { display: flex; flex-direction: column; margin-top: 12px; }
.admin-activity-feed__row { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.admin-activity-feed__row:last-child { border-bottom: none; }

.admin-search { margin-bottom: 14px; }
.admin-search input { width: 100%; max-width: 320px; }
.admin-row {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.admin-row__meta { font-size: 12px; color: var(--text-muted); }
.admin-row__body { font-size: 14px; }
.admin-row__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; align-items: center; }
/* Filter chips above the users list - one status per chip, "All" clears it */
.admin-chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px; }
.admin-chip {
  padding: 6px 13px; border-radius: 20px; background: var(--card); border: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.admin-chip:hover { border-color: var(--border-strong); color: var(--text); }
.admin-chip--active { background: var(--brand-500); border-color: var(--brand-500); color: var(--on-brand); }
.admin-chip__count { opacity: 0.75; }

/* User row: member (name/email + any status badges) / actions. Only two
   grid tracks - a dedicated fixed-width badges column wasted space on the
   (usual) row with no badges and starved the name column of room, which is
   what was truncating names down to a couple of characters. Actions get a
   guaranteed minimum so they never wrap onto their own messy line; less
   common ones (mute, ban, warn, admin) live in the "more" menu instead of
   crowding the row. */
.admin-user-row {
  display: grid; grid-template-columns: 20px 1fr minmax(240px, 300px);
  gap: 12px; align-items: center; border-bottom: 1px solid var(--border);
  padding: 12px 0; position: relative;
}
.admin-user-row:last-child { border-bottom: none; }
.admin-user-row__member { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.admin-user-row__member-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-user-row__id { min-width: 0; }
.admin-user-row__name { font-weight: 700; font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-row__email { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-user-row__badges { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-user-row__actions { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; justify-content: flex-end; position: relative; }
.admin-more-btn, .admin-manage-btn { flex-shrink: 0; padding-left: 10px; padding-right: 10px; }
.admin-more-menu {
  position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 20;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 10px; min-width: 220px;
  display: flex; flex-direction: column; gap: 8px;
}
.admin-more-menu form { width: 100%; }
.admin-more-menu .btn { width: 100%; }
.admin-mute-form { display: flex; gap: 4px; align-items: center; width: 100%; flex-wrap: wrap; }
.admin-mute-form select { flex: 1; min-width: 0; font-size: 12.5px; padding: 5px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text); }
.admin-custom-duration { display: flex; gap: 4px; align-items: center; width: 100%; }
.admin-custom-duration input[type="number"] {
  width: 56px; font-size: 12.5px; padding: 5px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text);
}
@media (max-width: 760px) {
  .admin-user-row { grid-template-columns: 20px 1fr; gap: 8px; }
  .admin-user-row__actions { justify-content: flex-start; grid-column: 1 / -1; }
}

.admin-bulk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 8px 12px; margin: 10px 0;
}
.admin-bulk-bar select { padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--text); }

.admin-impersonate-banner {
  background: #b9650f; color: #fff; text-align: center; padding: 8px 14px; font-size: 13.5px; font-weight: 600;
}
.admin-impersonate-banner__link { color: #fff !important; text-decoration: underline; font-weight: 700; }
.site-announcement {
  background: var(--brand-50); color: var(--brand-600); text-align: center; padding: 8px 14px; font-size: 13.5px; font-weight: 600;
  border-bottom: 1px solid var(--brand-100, var(--border));
}

/* Honeypot field on the signup form (see handleSignup's website-field
   check) - positioned off-screen rather than display:none, since some bots
   specifically skip hidden fields but still fill in anything visually
   present in the DOM. */
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999;
  max-width: 640px; margin: 0 auto;
  background: var(--card-raise); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25); font-size: 13.5px; line-height: 1.4;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner a { color: var(--brand-600); text-decoration: underline; }
.cookie-banner span { flex: 1; min-width: 200px; }

.admin-settings-form .field { margin-bottom: 14px; }
.admin-settings-form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.admin-settings-form .hint { margin-top: 2px; }

/* ---------- Pagination ---------- */
.pager { display: flex; justify-content: space-between; align-items: center; margin: 18px 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); margin-top: 32px; padding: 20px 24px; }
.site-footer__inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: 13px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 16px; }
.site-footer__links a { color: var(--text-muted); }
.site-footer__links a:hover { color: var(--text); }

/* ==========================================================================
   Mobile responsiveness
   Appended at the end of the file (after every base rule) on purpose: CSS
   at equal specificity is decided by source order, so a media query placed
   earlier than the base .shortcuts-list/.shortcut-item rules it means to
   override would just lose to them. Keeping all of this at the bottom
   guarantees it wins whenever its breakpoint matches.
   ========================================================================== */

@media (max-width: 900px) {
  /* The full sidebar (profile card + grouped links) doesn't fit next to
     the feed anymore, but its links (Explore, Bands, Events, Gear
     Market...) are the only way to reach those sections - there's no
     other nav for them on mobile. Instead of hiding it, collapse it into
     a single horizontally-scrolling row of icon chips above the feed. */
  /* min-width: 0 overrides the default min-width: auto that grid/flex
     items get, which would otherwise let this column grow to fit the
     shortcuts row's full content width instead of clipping it - the
     classic flexbox "overflow-x:auto does nothing" trap. */
  .sidebar { margin-bottom: 14px; min-width: 0; }
  .sidebar > .card:first-child { display: none; }
  .shortcuts-card { padding: 10px !important; min-width: 0; }
  .shortcuts-list {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    min-width: 0;
  }
  .shortcuts-list::-webkit-scrollbar { display: none; }
  .shortcut-group-title { display: none; }
  .shortcut-item {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    min-width: 66px;
    padding: 10px 6px;
    background: var(--bg-soft);
    text-align: center;
  }
  .shortcut-item__label { flex: none; font-size: 11px; line-height: 1.2; }
  .shortcut-item__arrow { display: none; }
}

/* ---------- Album page (profile Music tab) ---------- */
/* An "ambient" hero built from the album's own cover - a blurred, darkened
   copy of the art fills the banner behind it, the same trick music apps use
   so every album page is colored by the art the artist actually uploaded
   rather than one flat brand-colored banner for every album. */
.album-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: -1px -1px 22px;
}
.album-hero__backdrop {
  position: absolute;
  inset: -25%;
  background-size: cover;
  background-position: center;
  filter: blur(36px) saturate(1.3) brightness(0.55);
  transform: scale(1.15);
}
.album-hero__backdrop--empty { background: linear-gradient(135deg, var(--brand-600), var(--brand-400)); }
.album-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10, 14, 30, 0.35), rgba(10, 14, 30, 0.65));
}
.album-hero__back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  margin-bottom: 18px;
}
.album-hero__back:hover { color: #fff; }
.album-hero__row { position: relative; display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.album-hero__cover {
  width: 168px;
  height: 168px;
  flex: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-soft);
  box-shadow: 0 16px 36px rgba(5, 8, 20, 0.45);
}
.album-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-hero__cover--empty { display: flex; align-items: center; justify-content: center; font-size: 52px; }

/* Same hover-camera-button interaction as the profile avatar/cover editors
   (see .avatar-edit / .cover-edit and PHOTO_EDIT_KINDS in app.js), just
   sized to sit inside the square album-hero__cover instead. */
.album-cover-edit { position: relative; display: block; width: 100%; height: 100%; }
.album-cover-edit__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  border: none;
  background: rgba(20, 20, 30, 0.45);
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.album-cover-edit--owner:hover .album-cover-edit__btn,
.album-cover-edit--owner .album-cover-edit__btn:focus-visible { opacity: 1; }
.album-cover-edit--loading .album-cover-edit__btn { opacity: 1; cursor: wait; }
.album-cover-edit--loading .album-cover-edit__btn::after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: avatar-edit-spin 0.7s linear infinite;
}
.album-hero__info { min-width: 200px; padding-bottom: 2px; }
.album-hero__eyebrow { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.7); margin-bottom: 6px; }
.album-hero__title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.08;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  word-break: break-word;
}
.album-hero__meta { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.album-hero__meta a { color: #fff; font-weight: 600; text-decoration: none; }
.album-hero__meta a:hover { text-decoration: underline; text-underline-offset: 2px; }
.album-hero__delete {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.14);
  border: none;
  padding: 7px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.album-hero__delete:hover { background: #d64545; color: #fff; }

.album-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.album-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.album-card__art { aspect-ratio: 1; background: var(--bg-soft); }
.album-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-card__art--empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36px; }
.album-card__body { padding: 8px 10px; }
.album-card__title {
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A real numbered tracklist (it's an actual ordered playlist, not a
   decorative 01/02/03) instead of the boxed track cards used elsewhere -
   quieter rows let a 12-track album stay scannable. */
.track-list { display: flex; flex-direction: column; }
.track-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border);
}
.track-row:last-child { border-bottom: none; }
.track-row:hover { background: var(--bg-soft); }
.track-row__num {
  width: 22px;
  flex: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  font-size: 13px;
}
.track-row__body { flex: 1; min-width: 0; }
.track-row__title {
  font-weight: 600;
  font-size: 14.5px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-row__player audio { width: 100%; height: 32px; display: block; }
.track-row__remove {
  flex: none;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  opacity: 0.55;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.track-row__remove:hover, .track-row__remove:focus-visible { opacity: 1; color: var(--danger); background: var(--danger-bg); }

.album-add-tracks { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }

@media (max-width: 640px) {
  .album-hero__row { align-items: center; text-align: center; flex-direction: column; }
  .album-hero__info { min-width: 0; width: 100%; }
  .album-hero__meta, .album-hero__eyebrow { justify-content: center; }
}

@media (max-width: 640px) {
  /* ---- Topbar: drop the inline search box (still reachable via the
     bottom tab bar's Search icon) and tighten spacing so brand + icon
     controls fit one row on a phone. ---- */
  .topbar__inner { padding: 8px 12px; gap: 8px; }
  .search-form { display: none; }
  .brand { font-size: 18px; }
  .topbar__user { gap: 4px; }
  .topbar__user .btn-link { padding: 6px 8px; font-size: 12px; white-space: nowrap; }

  /* Guest topbar (logged-out marketing/login/signup pages): the text nav
     (Features/Browse Musicians/Gear Market) plus the theme toggle and Log
     In/Sign Up buttons don't fit one row on a phone. The nav links are all
     reachable another way (hero buttons, or after signing up), so they're
     dropped here rather than wrapped or truncated. */
  .topnav--guest { display: none; }
  .topbar__user--guest { gap: 6px; }
  .topbar__user--guest .btn-sm { padding: 8px 12px; font-size: 13px; }

  /* backdrop-filter creates a new containing block for any position:fixed
     descendant (same as `transform` does), so with it left on, the "fixed"
     bottom nav below would anchor to this sticky topbar instead of the
     viewport and end up pinned under the logo instead of at the screen's
     bottom edge. Dropping the blur on mobile avoids that; the topbar stays
     opaque via its background color either way. */
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* ---- Bottom tab bar: the logged-in topnav (Home/Search/Gear
     Market/Messages/Profile) moves to a fixed bar at the bottom of the
     screen - the standard mobile pattern - instead of squeezing into the
     top row next to the logo and search. The guest topnav (Features/
     Browse/Gear Market text links on the logged-out pages) is left
     alone; it's short enough to just wrap. ---- */
  .topnav:not(.topnav--guest) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    justify-content: space-around;
    gap: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-md);
  }
  .topnav:not(.topnav--guest) .nav-link { flex: 1; padding: 6px 2px; }
  .topnav:not(.topnav--guest) .nav-label { font-size: 10px; }
  .page { padding-bottom: 78px; }
  body:has(.topnav:not(.topnav--guest)) .site-footer { padding-bottom: calc(20px + 78px); }

  /* Filter/section tab rows (feed's For You/All Posts/Following, search's
     Everything/Musicians/Bands/..., marketplace's tabs) can have more tabs
     than fit one line. Scroll horizontally instead of wrapping or
     overflowing the page - same min-width:0 fix as the shortcuts row
     above, needed because .tabs is a flex item too. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex-shrink: 0; padding: 11px 14px; }
}

/* ---------- Studio shell (logged-in pages) ----------
   A fixed library panel on the left (.studio-side), the page in
   .studio-main, and the "now playing" bar pinned to the bottom. Below
   900px the panel turns into a drawer opened by .studio-menu-btn. */
body.studio { padding-left: var(--studio-side-w); }
body.studio.has-player { padding-bottom: var(--player-h); }

.brand {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--text);
  gap: 6px;
}
.brand .brand__mark { width: 28px; height: 28px; }
.brand__word span { color: var(--brand-500); }

.studio-side {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--studio-side-w);
  background: var(--bg-deep);
  border-right: 1px solid var(--border);
  padding: 18px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  z-index: 60;
}
body.studio.has-player .studio-side { bottom: var(--player-h); }
.studio-side > .brand { padding: 0 8px; }
.studio-nav { display: flex; flex-direction: column; gap: 2px; }
.studio-section__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 10px 6px;
}
.studio-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  transition: background .15s ease, color .15s ease;
}
.studio-link:hover { background: var(--bg-soft); color: var(--text); }
.studio-link--active { background: var(--card-raise); color: var(--text); box-shadow: inset 3px 0 0 var(--brand-500); }
.studio-link__icon { width: 22px; text-align: center; flex: none; font-size: 15px; }
.studio-link__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-link .nav-badge { position: static; box-shadow: none; }
.studio-link--muted { color: var(--text-faint); }
.avatar--xs { width: 22px; height: 22px; font-size: 9.5px; border-radius: 5px; }
.studio-link--band .avatar { border-radius: 5px; }

.studio-main { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.studio-main > .page { flex: 1; width: 100%; }
.studio-top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  background: var(--topbar-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.studio-top .search-form { flex: 1; max-width: 520px; }
.studio-top .topbar__user { margin-left: auto; }
.studio-top__brand, .studio-menu-btn { display: none; }
.search-form input { color: var(--text); border-color: var(--border); }
.search-form input::placeholder { color: var(--text-faint); }
.search-form input:focus { background: var(--card); box-shadow: 0 0 0 3px var(--brand-100); }
.icon-btn { border: 0; cursor: pointer; font-family: inherit; }

.studio-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 55; }

@media (max-width: 900px) {
  body.studio { padding-left: 0; }
  .studio-side { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  body.studio-nav-open .studio-side { transform: none; }
  .studio-menu-btn, .studio-top__brand { display: inline-flex; }
  .studio-top { padding: 8px 12px; gap: 10px; }
  .studio-top .search-form { display: none; }
  .studio-top__brand { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .studio-side { transition: none; } }

/* ---------- Now playing bar ---------- */
.player-bar {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--player-h);
  z-index: 70;
  display: grid;
  grid-template-columns: minmax(0, 260px) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
}
.player-bar__info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-bar__art {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm);
  display: grid; place-items: center; font-size: 18px;
  background: linear-gradient(160deg, #3a2a10, #14110b); color: var(--brand-500);
}
.player-bar__text { min-width: 0; }
.player-bar__title, .player-bar__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-bar__title { font-weight: 600; font-size: 14px; }
.player-bar__sub { font-size: 12.5px; color: var(--text-muted); }
.player-bar__btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--brand-500); color: var(--on-brand); font-size: 13px; font-weight: 700;
}
.player-bar__progress { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-bar__progress input[type="range"] { flex: 1; min-width: 0; accent-color: var(--brand-500); }
.player-bar__time { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Close (✕): stops playback and hides the bar. */
.player-bar__close {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  background: transparent; color: var(--text-muted);
  transition: background .15s ease, color .15s ease;
}
.player-bar__close:hover { background: var(--bg-soft); color: var(--text); }
.player-bar__close:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
@media (max-width: 640px) {
  .player-bar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 0 12px; }
  .player-bar__progress { display: none; }
}
/* Docked chat popups sit above the player bar instead of under it. */
body.has-player .chat-dock { bottom: var(--player-h); }
.player-bar[hidden] { display: none; }

/* ---------- Light/dark toggle ----------
   Shows the moon in light mode (click to go dark) and the sun in dark mode. */
.theme-toggle .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: inline; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }

/* ---------- EN/Hebrew toggle ----------
   Sits beside the light/dark toggle; a text label instead of an icon. */
/* Keep it on the right of the light/dark toggle in Hebrew too: in RTL the
   row starts on the right, so it's moved to the front of the row (the
   theme toggle is the row's first item, so it lands right beside it). */

/* ---------- Right-to-left (Hebrew) ----------
   <html dir="rtl"> is set when the site is in Hebrew (lib/view.js). The
   browser mirrors normal flow, flex and grid on its own; these rules flip
   the few things positioned to a physical side: the Studio side panel
   moves to the right, and badges, menus, close buttons and indents swap
   sides. */
[dir="rtl"] body.studio { padding-left: 0; padding-right: var(--studio-side-w); }
[dir="rtl"] .studio-side { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid var(--border); }
[dir="rtl"] .studio-top .topbar__user { margin-left: 0; margin-right: auto; }
@media (max-width: 900px) {
  [dir="rtl"] body.studio { padding-right: 0; }
  [dir="rtl"] .studio-side { transform: translateX(100%); }
  [dir="rtl"] body.studio-nav-open .studio-side { transform: none; }
}
[dir="rtl"] .nav-badge { right: auto; left: -10px; }
[dir="rtl"] .icon-btn .nav-badge { right: auto; left: -6px; }
[dir="rtl"] .notif-dropdown { right: auto; left: 0; }
[dir="rtl"] .likes-popover { left: auto; right: 0; }
[dir="rtl"] .shortcut-item__arrow { transform: scaleX(-1); }
[dir="rtl"] .shortcut-item:hover .shortcut-item__arrow { transform: scaleX(-1) translateX(2px); }
[dir="rtl"] .img-lightbox__close { right: auto; left: 22px; }
[dir="rtl"] input[type="file"]::file-selector-button { margin-right: 0; margin-left: 12px; }
[dir="rtl"] input[type="file"]::-webkit-file-upload-button { margin-right: 0; margin-left: 12px; }
[dir="rtl"] .composer-image-preview__remove { right: auto; left: 6px; }
[dir="rtl"] .composer-video-row { padding-right: 14px; padding-left: 40px; }
[dir="rtl"] .composer-upload-progress__bar-pct { padding-right: 0; padding-left: 8px; }
[dir="rtl"] .comment-reply { margin-left: 0; margin-right: 28px; }
[dir="rtl"] .post__owner-menu { right: auto; left: 0; }
[dir="rtl"] .soon-badge { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .listing-card__sold { left: auto; right: 12px; }
[dir="rtl"] .conversation-row__time { margin-left: 0; margin-right: auto; }
[dir="rtl"] .chat-dock { right: auto; left: 16px; }
@media (max-width: 680px) { [dir="rtl"] .chat-dock { left: 8px; } }
[dir="rtl"] .admin-sidenav__badge { margin-left: 0; margin-right: auto; }
[dir="rtl"] .admin-more-menu, [dir="rtl"] .admin-manage-menu { right: auto; left: 0; }
/* The slim audio bar keeps playback direction left-to-right (time runs
   left to right on every player), only its position in the post flips. */
[dir="rtl"] .slim-audio__seek { direction: ltr; }
[dir="rtl"] .player-bar__progress input[type="range"] { direction: ltr; }
/* Instrument Sans and Big Shoulders have no Hebrew letters, so Hebrew
   pages use Rubik (loaded only for them, see layout() in lib/view.js),
   which has matching Latin for names and numbers. */
[dir="rtl"] body { font-family: "Rubik", var(--font-body); direction: rtl; }
[dir="rtl"] h1, [dir="rtl"] h2 { font-family: "Rubik", var(--font-display); font-weight: 700; letter-spacing: 0; }
[dir="rtl"] .studio-link--active { box-shadow: inset -3px 0 0 var(--brand-500); }
/* User-written text (posts, comments, bios, messages - everything marked
   data-i18n-skip) takes its direction from its own first letters, so an
   English post reads left-to-right on a Hebrew page and vice versa, with
   punctuation in the right place. */
[data-i18n-skip] { unicode-bidi: plaintext; text-align: start; }
.brand__word[data-i18n-skip] { unicode-bidi: normal; }
[dir="rtl"] .admin-stat__value { direction: ltr; unicode-bidi: isolate; }
.settings-subhead { font-size: 15px; margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.card > h2 + .settings-subhead { border-top: 0; padding-top: 0; margin-top: 4px; }

/* "Complete your profile" card (own profile only, until done). */
.profile-checklist { margin-top: 16px; }
.profile-checklist__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.profile-checklist__pct { font-weight: 700; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.profile-checklist__bar { height: 6px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; margin: 10px 0 8px; }
.profile-checklist__bar span { display: block; height: 100%; background: var(--brand-500); border-radius: 999px; }
.profile-checklist__list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.profile-checklist__list li a, .profile-checklist__list li.is-done {
  display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
.profile-checklist__list li a { background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-200); }
.profile-checklist__list li a:hover { background: var(--brand-100); }
.profile-checklist__list li.is-done { color: var(--text-muted); background: var(--bg-soft); }

/* ---------- Sharing, saved posts, mentions, single post ---------- */
.post__actions button.saved { color: var(--brand-600); }
@media (max-width: 480px) {
  /* Five actions on a phone: Save/Share/Report collapse to their icons. */
  .post__actions .act-label { display: none; }
}
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.title-row > :first-child { min-width: 0; }
.profile-head__handle { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
a.mention { color: var(--accent-600); font-weight: 600; }
a.mention:hover { text-decoration: underline; }
.single-post { max-width: 600px; margin: 0 auto; display: grid; gap: 12px; }
.single-post__back { font-weight: 600; }
.guest-cta { display: grid; gap: 8px; }
.post-result-list { display: grid; gap: 8px; margin-top: 12px; }
.post-result { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.post-result:hover { border-color: var(--brand-200); }
.post-result__body { min-width: 0; }
.post-result__head { font-size: 14px; }
.post-result__text { font-size: 14px; color: var(--text); margin-top: 2px; overflow-wrap: anywhere; }
.mention-box {
  position: absolute; z-index: 3000; background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 4px; display: grid;
}
.mention-box[hidden] { display: none; }
.mention-box__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: start;
  background: none; border: 0; border-radius: var(--radius-sm); padding: 7px 10px; cursor: pointer;
  font: inherit; color: var(--text);
}
.mention-box__item strong { font-size: 14px; }
.mention-box__item span { font-size: 12px; color: var(--text-muted); }
.mention-box__item.is-active, .mention-box__item:hover { background: var(--brand-50); }

/* ---------- Message edit / delete ---------- */
.bubble__actions { display: inline-flex; gap: 6px; margin-inline-start: 6px; opacity: 0; transition: opacity .15s ease; }
.bubble:hover .bubble__actions, .bubble:focus-within .bubble__actions { opacity: 1; }
@media (hover: none) { .bubble__actions { opacity: 1; } }
.bubble__action {
  background: none; border: 0; padding: 0; font: inherit; font-size: 11px; font-weight: 700;
  color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.bubble--deleted { opacity: .75; }
.bubble__deleted { font-size: 13.5px; color: inherit; opacity: .8; }
/* Inline edit inside your own (coral) bubble: a see-through box in the
   bubble's own colours that grows with the text, and two small pills. */
.bubble--editing { width: min(380px, 85%); max-width: 85%; }
.bubble--editing .bubble__time { display: none; }
.bubble__edit { display: grid; gap: 8px; }
.bubble__edit textarea,
.bubble__edit textarea:hover,
.bubble__edit textarea:focus {
  width: 100%; min-height: 0; max-height: 220px; overflow-y: auto; resize: none; margin: 0;
  font: inherit; font-size: 14.5px; line-height: 1.5; color: inherit;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 10px; padding: 7px 10px; outline: none; box-shadow: none;
}
.bubble__edit textarea:focus { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .7); }
.bubble__edit-row { display: flex; gap: 8px; justify-content: flex-end; }
.bubble__edit-btn {
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; cursor: pointer;
  padding: 6px 14px; border-radius: 999px; color: inherit;
  background: transparent; border: 1px solid rgba(255, 255, 255, .55);
  transition: background-color .15s ease, border-color .15s ease;
}
.bubble__edit-btn:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .85); }
.bubble__edit-btn--save { background: var(--card); color: var(--brand-600); border-color: var(--card); }
.bubble__edit-btn--save:hover { background: var(--card); filter: brightness(.96); }
.bubble__edit-btn:focus-visible { outline: 2px solid var(--card); outline-offset: 2px; }
[dir="rtl"] .bubble--in { border-bottom-left-radius: 16px; border-bottom-right-radius: 4px; }
[dir="rtl"] .bubble--out { border-bottom-right-radius: 16px; border-bottom-left-radius: 4px; }
.cal-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
/* The name column starts just below the cover (the avatar alone overlaps
   it), however many lines it has, instead of growing up into the cover. */
.profile-head__row > [style*="flex:1"] { align-self: flex-start; margin-top: 36px; min-width: 0; }

/* Text fields sit on a soft grey and turn white when focused; they also
   turn white on mouse hover, so it's clear they're clickable. One rule for
   every typing field on the site (not checkboxes, files, buttons, sliders). */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="hidden"]), textarea:not(.bubble__edit-input), select):hover {
  background: var(--card);
}
/* ...with a soft fade between grey and white (hover and focus alike). */
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="hidden"]), textarea:not(.bubble__edit-input), select) {
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  :is(input, textarea, select) { transition: none; }
}

/* Ticks on your own messages: ✓ sent, ✓✓ received, ✓✓ golden orange =
   seen. The bubble itself is coral, so plain orange would vanish; this
   brighter golden orange (with a faint outline) stays visible in both themes. */
.bubble__status { margin-inline-start: 5px; font-size: 13px; line-height: 1; letter-spacing: -0.14em; font-weight: 700; opacity: .8; }
.bubble__status--delivered { opacity: 1; }
.bubble__status--seen { opacity: 1; color: #ffd23f; text-shadow: 0 0 1px rgba(60, 20, 0, .55); }

/* ---------- Chat attachments (📎 photo / video / audio) ---------- */
.chat-attach {
  display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  color: var(--text-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.chat-attach:hover { background: var(--bg-soft); color: var(--brand-600); }
.chat-attach--sm { width: 30px; height: 30px; }
.chat-attach--sm svg { width: 17px; height: 17px; }
/* The chat forms wrap so the chip row sits on its own line above the box. */
#messageForm, .chat-popup__form { flex-wrap: wrap; }
#messageForm input[name="content"], .chat-popup__input { min-width: 0; }
.attach-row { flex: 0 0 100%; min-width: 0; display: flex; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0;
  padding: 4px 6px 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--brand-50); color: var(--brand-600); border: 1px solid var(--brand-200);
}
.attach-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.attach-chip__remove {
  flex: none; width: 20px; height: 20px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 11px; background: transparent; color: inherit;
}
.attach-chip__remove:hover { background: var(--brand-100); }
.bubble__video { display: block; width: min(320px, 100%); max-height: 360px; border-radius: 10px; margin-top: 4px; background: #000; }
/* Audio in a chat bubble: a compact slim player that always fits inside
   the bubble (full page or the narrow chat popup). */
.bubble__audio { margin-top: 6px; width: 240px; max-width: 100%; min-width: 0; }
.chat-popup__body .bubble__audio { width: 200px; }
.bubble__audio .slim-audio { height: 32px; gap: 8px; padding: 0 10px 0 3px; min-width: 0; }
.bubble__audio .slim-audio__play { width: 26px; height: 26px; }
.bubble__audio .slim-audio__play svg { width: 12px; height: 12px; }
.bubble__audio .slim-audio__time { font-size: 11px; }
/* On your own coral bubbles: see-through in the bubble colour, white controls. */
.bubble--out .bubble__audio .slim-audio { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); }
.bubble--out .bubble__audio .slim-audio__play { background: var(--card); color: var(--brand-600); }
.bubble--out .bubble__audio .slim-audio__time { color: inherit; opacity: .9; }
.bubble--out .bubble__audio .slim-audio__seek { background: linear-gradient(to right, var(--card) var(--pct), rgba(255, 255, 255, .35) var(--pct)); }
.bubble--out .bubble__audio .slim-audio__seek::-webkit-slider-thumb { background: var(--card); border-color: transparent; box-shadow: none; }
.bubble--out .bubble__audio .slim-audio__seek::-moz-range-thumb { background: var(--card); border-color: transparent; box-shadow: none; }

/* ---------- Book for an event (/book) ---------- */
.book-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 8px 0 18px; }
.book-hero > div { min-width: 0; max-width: 680px; }
.book-hero__title { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.02; margin: 0 0 10px; text-transform: uppercase; text-wrap: balance; }
.book-hero__lead { font-size: 15.5px; line-height: 1.6; margin: 0; }
.book-hero__offer { width: auto; flex: none; }
.book-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
.book-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.book-filters select, .book-filters input { flex: 1 1 150px; min-width: 0; }
.book-filters .btn { width: auto; flex: none; }
.book-count { margin: 0 0 10px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.book-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.book-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }
.book-card__cover { aspect-ratio: 16 / 9; max-width: 100%; display: grid; place-items: center; font-size: 40px; background: linear-gradient(135deg, var(--brand-50), var(--brand-100)); }
.book-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-card__body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.book-card__title { font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.book-card__by { display: flex; align-items: center; gap: 8px; font-size: 13.5px; flex-wrap: wrap; }
.book-card__by .star-rating { font-size: 12.5px; }
.book-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.book-card__meta strong { color: var(--brand-600); }

.book-listing { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.book-listing__main { display: grid; gap: 14px; }
.book-listing__cover { margin: -14px -16px 0; aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.book-listing__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-listing__title { font-size: clamp(26px, 3.6vw, 36px); margin: 0; line-height: 1.1; }
.book-listing__by { display: flex; align-items: center; gap: 10px; }
.book-listing__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.book-listing__facts > div { display: grid; gap: 2px; background: var(--bg-soft); border-radius: var(--radius-md); padding: 10px 12px; }
.book-listing__facts .hint { font-size: 12px; }
.book-listing__desc { margin: 0; line-height: 1.65; white-space: pre-wrap; }
.book-listing__media iframe { width: 100%; border: 0; border-radius: 10px; }
.book-sent { border-color: var(--green-500); background: color-mix(in srgb, var(--green-500) 8%, var(--card)); font-weight: 600; }
.book-request { display: grid; gap: 10px; }
.book-request__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; }
.book-request__grid .field { margin-bottom: 6px; }
.book-request__grid input, .book-request__grid select { width: 100%; }
.book-request .btn-primary { width: auto; justify-self: start; padding-inline: 28px; }
.book-request__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.book-request__actions .btn { width: auto; }
.book-reviews { display: grid; gap: 10px; margin-top: 10px; }
.booking-event { margin-top: 3px; }

.book-form { max-width: 680px; margin: 0 auto; }
.book-form h1 { font-size: 30px; margin: 0 0 6px; }
.book-form__types { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.book-form__types legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }
.book-form__types label {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-soft); font-size: 13.5px; font-weight: 600;
}
.book-form__types label:has(input:checked) { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-600); }
.book-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }

.signup-role { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.signup-role legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }
.signup-role__opt {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer;
  border: 1.5px solid var(--border); background: var(--bg-soft); font-size: 14px; font-weight: 600;
}
.signup-role__opt:has(input:checked) { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-600); }
@media (max-width: 420px) { .signup-role { grid-template-columns: 1fr; } }

.home-book {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin: 8px 0 28px; padding: 32px; border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--brand-50), var(--card)); border: 1px solid var(--brand-100);
}
.home-book > div { max-width: 640px; min-width: 0; }
.home-book h2 { margin: 0 0 8px; font-size: 30px; text-transform: uppercase; }
.home-book .btn { width: auto; padding: 14px 26px; border-radius: 999px; }
[dir="rtl"] .book-hero__title, [dir="rtl"] .home-book h2 { font-family: "Rubik", var(--font-display); letter-spacing: 0; }
/* Radio/checkbox chips inside .field fieldsets: undo the full-width text-input styling. */
.signup-role .signup-role__opt input, .book-form__types label input { width: auto; flex: none; margin: 0; padding: 0; box-shadow: none; }

/* ---------- Studios (/studios) ---------- */
.book-card__cover--studio { background: linear-gradient(135deg, var(--bg-soft), var(--brand-50)); }
.studio-subhead { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.studio-gallery {
  margin: -14px -16px 0; display: grid; gap: 4px; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 120px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden;
}
.studio-gallery--single { grid-template-columns: 1fr; grid-auto-rows: 280px; }
.studio-gallery__item { padding: 0; border: 0; background: var(--bg-soft); cursor: zoom-in; min-width: 0; overflow: hidden; }
.studio-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.studio-gallery__item:hover img { transform: scale(1.03); }
.studio-gallery__item--main { grid-row: span 2; }
.studio-gallery--single .studio-gallery__item--main { grid-row: auto; }
@media (max-width: 560px) {
  .studio-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 110px; }
  .studio-gallery__item--main { grid-column: 1 / -1; grid-row: auto; height: 200px; }
}
.studio-form__photos { display: flex; flex-wrap: wrap; gap: 10px; }
.studio-form__photo { display: grid; gap: 4px; width: 110px; font-size: 12.5px; cursor: pointer; }
.studio-form__photo img { width: 110px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.studio-form__photo input { width: auto; margin: 0; }
.home-book--studio { background: linear-gradient(135deg, var(--bg-soft), var(--card)); border-color: var(--border); }

/* Inline message under a field: a file in the wrong format was picked, or
   the form came back with an error and files need choosing again. */
.field-error {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  font-size: 13px;
  line-height: 1.4;
}
.field-error__file { display: block; margin-top: 2px; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- My Listings (/mine) ---------- */
.mine { max-width: 860px; margin: 0 auto; }
.mine-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.mine-head h1 { margin: 0 0 4px; }
.mine-todo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.mine-alert {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--brand-600);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.mine-alert:hover { text-decoration: underline; }
.mine-section { padding: 6px 18px 10px; margin-bottom: 16px; }
.mine-section__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0 6px; }
.mine-section__head .btn { white-space: nowrap; flex-shrink: 0; }
.mine-section__head h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.mine-section__count { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--bg-soft); border-radius: 999px; padding: 2px 8px; }
.mine-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.mine-row__main { display: flex; align-items: center; gap: 12px; flex: 1 1 280px; min-width: 0; color: inherit; text-decoration: none; }
.mine-row__main:hover .mine-row__title { text-decoration: underline; }
.mine-row__thumb {
  width: 52px; height: 52px; border-radius: 10px; background: var(--bg-soft); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px; overflow: hidden;
}
.mine-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mine-row__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mine-row__title { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--text-muted); }
.mine-row__alerts { display: flex; flex-wrap: wrap; gap: 6px; }
.mine-row__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.mine-row__actions form { margin: 0; }
.mine-tag { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--bg-soft); color: var(--text-muted); }
.mine-tag--ok { background: rgba(31, 157, 99, 0.12); color: var(--green-600); }
.mine-tag--muted { background: var(--bg-soft); color: var(--text-muted); }
:root[data-theme="dark"] .mine-tag--ok { color: #5fd47a; }
.mine-start { margin-top: 8px; }
.mine-start h2 { font-size: 15px; color: var(--text-muted); margin: 0 0 10px; }
.mine-start__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mine-start__item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed var(--border);
  border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; background: var(--surface, transparent);
}
.mine-start__item:hover { border-color: var(--brand-600); color: var(--brand-600); }
.mine-start__item span:first-child { font-size: 20px; }
@media (max-width: 600px) {
  .mine-head { flex-direction: column; }
  .mine-section { padding: 4px 12px 8px; }
  .mine-row__actions { margin-inline-start: 64px; }
}
.mine-remove { color: var(--danger); border-color: var(--danger-border); }
.mine-remove:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* Price + currency side by side (gear, studio and event forms, filters). */
.price-row { display: flex; gap: 8px; }
.price-row input { flex: 1; min-width: 0; }
.price-row select { flex: 0 0 auto; max-width: 48%; }
.currency-filter { max-width: 170px; }

/* ---------- Musicians wanted (/gigs) ---------- */
.gig-wanted { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.gig-wanted__label { font-size: 13px; font-weight: 700; color: var(--text-muted); margin-inline-end: 2px; }
.gig-wanted__chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.gig-wanted__chip:hover { border-color: var(--brand-200); }
.gig-wanted__chip.is-active { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-600); }
.gig-wanted__n { font-size: 11.5px; font-weight: 700; background: var(--bg-soft); color: var(--text-muted); border-radius: 999px; padding: 1px 7px; }
.gig-tabs { margin-bottom: 16px; }
.gig-tabs__n { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-inline-start: 4px; }
.gig-also { margin-top: 18px; }

.gig-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.gig-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }
.gig-card + .gig-card { margin-top: 0; }
.gig-card__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, var(--brand-50), var(--brand-100)); }
.gig-card__icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--card); display: grid; place-items: center; font-size: 24px; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.gig-card__wanted { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gig-card__label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-600); }
.gig-card__role { font-family: var(--font-display); font-size: 21px; line-height: 1.1; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gig-card__badge { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; background: var(--card); color: var(--text-muted); border: 1px solid var(--border); }
.gig-card__body { padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gig-card__title { font-weight: 700; font-size: 16px; line-height: 1.35; }
.gig-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gig-chip { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gig-chip--pay { background: rgba(31, 157, 99, 0.12); color: var(--green-600); font-weight: 600; }
:root[data-theme="dark"] .gig-chip--pay { color: #5fd47a; }
.gig-card__foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-muted); }
.gig-card__by { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gig-card__by > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gig-card__count { font-weight: 700; flex-shrink: 0; }
.gig-card--filled { opacity: .7; }
.gig-card--filled .gig-card__head { background: var(--bg-soft); }
.gig-card--filled .gig-card__label { color: var(--text-muted); }
.gig-card__icon { color: var(--brand-600); }
.gig-card--filled .gig-card__icon { color: var(--text-muted); }
.gig-wanted__chip .inst-icon { color: var(--brand-600); flex-shrink: 0; }
.gig-chip { display: inline-flex; align-items: center; gap: 5px; }
.gig-chip > span { overflow: hidden; text-overflow: ellipsis; }
.gig-chip .ui-icon { flex-shrink: 0; color: var(--text-muted); }
.gig-chip--pay .ui-icon { color: currentColor; }
.gig-card__count { display: inline-flex; align-items: center; gap: 4px; }

/* Single "Musicians wanted" ad */
.gig-view__main { padding: 0; overflow: hidden; }
.gig-view__head { padding: 18px 20px; }
.gig-view__head .gig-card__icon { width: 54px; height: 54px; }
.gig-view__head .gig-card__role { font-size: 26px; }
.gig-view__body { padding: 18px 20px 20px; display: grid; gap: 16px; }
.gig-view__body .book-listing__facts .hint { display: inline-flex; align-items: center; gap: 4px; }
.gig-view__msg { margin-inline-start: auto; }
.gig-view__panel { display: grid; gap: 10px; }
.gig-view__panel textarea { width: 100%; }
.gig-view__panel--done { color: var(--text-muted); }
.gig-view__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gig-view__actions form { margin: 0; }
.gig-view__people { display: grid; gap: 10px; margin-top: 12px; }
.gig-view__person { border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.gig-view__person-head { display: flex; align-items: center; gap: 10px; }
.gig-view__note { margin-top: 8px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* Event page owner buttons + edit form photo */
.event-view__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.event-view__actions form { margin: 0; }
.event-form__current { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.event-form__current img { width: 120px; height: 72px; object-fit: cover; border-radius: 8px; }

/* Studio opening hours (owner form) and calendar hint (request form) */
.studio-hours { display: grid; gap: 8px; }
.studio-hours .hint { margin: 0 0 4px; }
.studio-hours__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.studio-hours__day { display: flex; align-items: center; gap: 8px; min-width: 130px; font-weight: 600; }
.studio-hours__row select { flex: 0 1 150px; min-width: 0; }
.studio-avail { margin: 2px 0 6px; }
.studio-card__km { font-size: 12.5px; font-weight: 600; color: var(--brand-600); }

/* Photos chosen in a drop-box picker: one row per photo, with ✕ to remove */
.file-drop__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.file-drop__list:empty { display: none; }
.file-drop__item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); min-width: 0; }
.file-drop__item img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: var(--bg-soft); }
.file-drop__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.file-drop__size { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.file-drop__remove { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; }
.file-drop__remove:hover { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }

/* Find musicians / search results header */
.search-card { display: grid; gap: 12px; }
.search-head { margin: 0; font-size: 26px; }
.search-head__q { color: var(--brand-600); }

/* Instrument choice + the box for "Other..." */
.instrument-pick { display: flex; gap: 8px; flex: 1 1 200px; min-width: 0; flex-wrap: wrap; }
.instrument-pick select { flex: 1 1 160px; min-width: 0; }
.instrument-pick__other { flex: 1 1 160px; min-width: 0; }
.instrument-pick__other[hidden] { display: none; }
.instrument-pick__more { margin-top: 8px; width: 100%; }

/* Private chat: each message is a row with the sender's picture beside the
   bubble (theirs on the left, yours on the right). */
.msg-row { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.msg-row--in { align-self: flex-start; }
.msg-row--out { align-self: flex-end; flex-direction: row-reverse; }
.msg-row .bubble { max-width: 100%; min-width: 0; align-self: auto; }
.msg-row__avatar { flex-shrink: 0; }
.chat-popup__body .msg-row { max-width: 90%; gap: 6px; }
.chat-popup__body .msg-row__avatar { width: 24px; height: 24px; font-size: 10px; }
.bubble__text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Chat message boxes: one line to start, growing with Shift+Enter lines. */
textarea.chat-compose { flex: 1; min-width: 0; resize: none; overflow-y: auto; max-height: 140px; line-height: 1.4; font-family: inherit; }
#messageForm textarea.chat-compose { padding: 10px 14px; border-radius: 20px; border: 1.5px solid var(--border); }
#messageForm { align-items: flex-end !important; }
.chat-popup__form { align-items: flex-end; }
/* The popup's background is the same soft grey as incoming bubbles, so
   there they get the card colour and a hairline border to stand out. */
.chat-popup__body .bubble--in { background: var(--card); border: 1px solid var(--border); }
.chat-popup__body .msg-row .bubble { max-width: 100%; }

/* Message text is a block so a Hebrew message (dir="auto") lines up on the
   right of its bubble, English on the left. */
.bubble__text { display: block; }

/* Tabs between the pages of one sidebar section (Musicians Wanted, Events) */
.section-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 4px; background: var(--bg-soft); border-radius: 12px; width: fit-content; max-width: 100%; }
.section-tab { padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.section-tab:hover { color: var(--text); }
.section-tab--active { background: var(--card); color: var(--brand-600); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
@media (max-width: 600px) {
  .section-tabs { flex-wrap: nowrap; overflow-x: auto; width: auto; scrollbar-width: none; }
  .section-tabs::-webkit-scrollbar { display: none; }
}