:root {
    --bg-0: #0a0a0f;
    --ink: #f4f4f6;
    --ink-soft: rgba(244, 244, 246, 0.64);
    --ink-faint: rgba(244, 244, 246, 0.40);
    --glass: rgba(255, 255, 255, 0.045);
    --glass-2: rgba(255, 255, 255, 0.07);
    --glass-edge: rgba(255, 255, 255, 0.13);
    --glass-edge-2: rgba(255, 255, 255, 0.22);
    --field-bg: rgba(255, 255, 255, 0.03);
    --accent: #c9a24b;
    --accent-bright: #e0bd68;
    --accent-soft: rgba(201, 162, 75, 0.14);
    --danger: #e4726b;
    --ok: #7fc08a;
    --max: 1120px;
    /* Every page's width (Mat, 2026-10-24), the same as the public pages:
       72% of the screen, from 1280px to 1672px. */
    --page: clamp(1280px, calc(72vw + 136px), 1672px);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  /* The hidden attribute is only a UA rule, so any author display wins over it.
     Several components here set display explicitly. */
  [hidden] { display: none !important; }

  body {
    background: var(--bg-0);
    color: var(--ink);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 16.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
  }

  /* atmospheric ground, matching the marketing pages */
  .bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(120% 80% at 50% -10%, #1c1c2a 0%, transparent 55%),
      radial-gradient(90% 70% at 15% 110%, #1a2028 0%, transparent 50%),
      radial-gradient(90% 70% at 85% 110%, #221a20 0%, transparent 50%),
      var(--bg-0);
  }
  .bg::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 80%);
  }

  a { color: inherit; text-decoration: none; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(22px, 5vw, 40px); width: 100%; }

  /* ================= NAV ================= */
  .nav {
    position: relative; z-index: 50;
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
  .wordmark {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.3rem;
    display: inline-flex; align-items: center; gap: 10px;
  }
  .wordmark .tick { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); }
  .nav-links { display: flex; align-items: center; gap: 24px; }
  .nav-links a { font-size: 0.86rem; font-weight: 500; color: var(--ink-soft); transition: color .25s; }
  .nav-links a:hover { color: var(--ink); }
  @media (max-width: 560px) { .nav-links a { font-size: 0.8rem; } .nav-links { gap: 16px; } }

  /* ================= LAYOUT ================= */
  main { flex: 1; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: clamp(32px, 7vw, 72px) 0; }
  .card {
    width: 100%; max-width: 460px;
    background: var(--glass);
    border: 1px solid var(--glass-edge);
    border-radius: 20px;
    padding: clamp(26px, 5vw, 38px);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8);
  }
  .card.wide { max-width: 560px; }

  .view { display: none; }
  .view.is-active { display: block; animation: rise .35s cubic-bezier(.22,.8,.3,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

  .eyebrow {
    color: var(--accent); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 12px;
  }
  h1 {
    font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: -0.015em;
    font-size: clamp(1.7rem, 4vw, 2.1rem); line-height: 1.1; margin-bottom: 10px;
  }
  .sub { color: var(--ink-soft); font-size: 0.92rem; font-weight: 300; margin-bottom: 26px; }

  /* ================= FORM ================= */
  .field { margin-bottom: 16px; }
  .field label {
    display: block; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.04em;
    color: var(--ink-faint); text-transform: uppercase; margin-bottom: 7px;
  }
  .input-shell { position: relative; display: flex; align-items: center; }
  /* Every text-like input, rather than a list that keeps missing one: url and
     date have both been forgotten here already. */
  .input-shell input,
  input[type="email"], input[type="password"], input[type="text"],
  input[type="url"], input[type="date"], input[type="search"] {
    width: 100%;
    background: var(--field-bg);
    border: 1px solid var(--glass-edge);
    border-radius: 12px;
    color: var(--ink);
    font: inherit; font-size: 0.95rem;
    padding: 13px 15px;
    transition: border-color .2s ease, background .2s ease;
  }
  input::placeholder { color: rgba(244,244,246,0.28); }
  input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255,255,255,0.05);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .has-eye input { padding-right: 48px; }
  .eye {
    position: absolute; right: 6px;
    background: none; border: 0; cursor: pointer;
    color: var(--ink-faint); padding: 9px; line-height: 0; border-radius: 8px;
  }
  .eye:hover { color: var(--ink); }
  .eye svg { width: 18px; height: 18px; }
  .hint { font-size: 0.78rem; color: var(--ink-faint); font-weight: 300; margin-top: 6px; }

  /* role picker */
  .seg-label {
    display: block; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.04em;
    color: var(--ink-faint); text-transform: uppercase; margin-bottom: 9px;
  }
  .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }
  .seg-3 { grid-template-columns: repeat(3, 1fr); }
  .seg-3 .chip { font-size: 0.82rem; padding: 11px 4px; }
  .seg-1 { grid-template-columns: 1fr; }
  /* A promoter-only account (body.kind-promoter) sees its own wording, and
     a producer-only one (body.kind-producer, 2026-10-10) its own.
     "artist-producer" is what an artist's page and a producer's both have. */
  body:not(.kind-promoter) [data-kind="promoter"], body.kind-promoter [data-kind="artist"],
  body:not(.kind-producer) [data-kind="producer"], body.kind-producer [data-kind="artist"],
  body.kind-promoter [data-kind="artist-producer"] { display: none !important; }
  .seg-soon { display: flex; flex-wrap: wrap; margin-bottom: 20px; }
  .seg-soon .chip { flex: 1 1 auto; }
  .chip {
    font: inherit; font-size: 0.87rem; font-weight: 500;
    padding: 11px 8px; border-radius: 12px; cursor: pointer;
    background: var(--field-bg); color: var(--ink-soft);
    border: 1px solid var(--glass-edge);
    transition: border-color .2s, color .2s, background .2s;
  }
  .chip:hover { border-color: var(--glass-edge-2); color: var(--ink); }
  .chip[aria-pressed="true"] {
    background: var(--accent-soft); border-color: var(--accent); color: var(--ink);
  }
  .seg-soon .chip { font-size: 0.74rem; padding: 9px 10px; color: var(--ink-faint); }
  .seg-soon .chip:hover { color: var(--ink-soft); }

  /* buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: 'Inter', sans-serif; font-size: 0.92rem; font-weight: 600;
    padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
    cursor: pointer; transition: transform .15s ease, filter .2s ease, border-color .2s ease;
  }
  .btn:active { transform: scale(0.985); }
  .btn[disabled] { opacity: 0.6; cursor: default; }
  .btn-gold {
    color: var(--bg-0);
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    border-color: rgba(201,162,75,0.5);
    box-shadow: 0 8px 24px -8px rgba(201,162,75,0.5), inset 0 1px 1px rgba(255,255,255,0.4);
  }
  .btn-gold:hover:not([disabled]) { filter: brightness(1.08); }
  .btn-ghost { color: var(--ink); border-color: var(--glass-edge-2); background: var(--glass); }
  .btn-ghost:hover:not([disabled]) { border-color: var(--ink); }
  .btn-block { width: 100%; }

  .spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(10,10,15,0.25); border-top-color: rgba(10,10,15,0.9);
    animation: spin .6s linear infinite; display: none;
  }
  .is-busy .spinner { display: block; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* messages */
  .msg {
    font-size: 0.86rem; font-weight: 400; border-radius: 12px;
    padding: 11px 14px; margin-bottom: 16px; display: none;
    white-space: pre-line;   /* several messages list one problem per line */
  }
  .msg.is-shown { display: block; }
  /* Under the button just pressed (app.js show()). */
  .msg.msg-near { margin: 12px 0 4px; }
  .msg { scroll-margin: 16px 0; }
  .msg-error { color: var(--danger); background: rgba(228,114,107,0.09); border: 1px solid rgba(228,114,107,0.28); }
  .msg-ok { color: var(--ok); background: rgba(127,192,138,0.09); border: 1px solid rgba(127,192,138,0.28); }
  .msg-note { color: var(--ink-soft); background: var(--field-bg); border: 1px solid var(--glass-edge); }
  .msg a { color: var(--ink); }
  #register-listener-note { margin: 0 0 16px; }

  /* social */
  .divider { display: flex; align-items: center; gap: 14px; margin: 24px 0 18px; }
  .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--glass-edge); }
  .divider span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
  /* Our own face for Google sign-in, with Google's real button laid over it
     invisibly and stretched to fit, so the click is Google's own
     (see renderSocial). */
  .social { position: relative; }
  .social[hidden], .divider[hidden] { display: none; }
  .g-face { display: flex; align-items: center; justify-content: center; gap: 12px; height: 52px;
    border: 1px solid var(--st-rule); color: var(--st-ink); background: transparent;
    font-family: var(--st-mono); font-size: 13px; font-weight: 500; letter-spacing: .02em;
    transition: border-color .2s, color .2s; }
  .g-face svg { width: 18px; height: 18px; flex: none; }
  .social:hover .g-face { border-color: var(--st-yel); color: var(--st-yel); }
  .social:focus-within .g-face { outline: 2px solid var(--st-yel); outline-offset: 2px; }
  .g-hit { position: absolute; inset: 0; overflow: hidden; opacity: 0; color-scheme: light; }
  .g-hit > div { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

  /* footer links inside card */
  .card-foot { margin-top: 22px; text-align: center; font-size: 0.86rem; color: var(--ink-faint); font-weight: 300; }
  .card-foot a, .linkish {
    color: var(--ink-soft); font-weight: 500; cursor: pointer;
    background: none; border: 0; font: inherit; font-size: inherit; padding: 0;
    border-bottom: 1px solid rgba(244,244,246,0.22); transition: color .2s, border-color .2s;
  }
  .card-foot a:hover, .linkish:hover { color: var(--accent); border-color: var(--accent); }
  .dot { margin: 0 10px; opacity: 0.4; }

  /* ================= SIGNED IN ================= */
  .avatar {
    width: 48px; height: 48px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    color: var(--bg-0); display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 1.1rem;
  }

  /* The verify banner on each home page, standing in for the app's
     EmailVerifyBanner. .verify-body sets no display, so its hidden attribute
     is left to do the hiding. */
  .verify-banner {
    border: 1px solid rgba(201,162,75,0.4); background: var(--accent-soft);
    border-radius: 12px; margin-bottom: 18px; overflow: hidden;
  }
  .verify-head {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px;
    background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  }
  .verify-text { flex: 1; min-width: 0; }
  .verify-text strong { display: block; font-size: 0.88rem; font-weight: 600; }
  .verify-text small {
    display: block; font-size: 0.76rem; color: var(--ink-soft); font-weight: 300;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .verify-cta { flex: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-bright); }
  .verify-body { padding: 0 14px 14px; }
  .verify-entry { display: flex; gap: 8px; }
  .verify-entry input {
    flex: 1; min-width: 0; background: var(--field-bg); border: 1px solid var(--glass-edge);
    border-radius: 9px; padding: 9px 12px; color: var(--ink); font: inherit;
    font-size: 1.05rem; letter-spacing: 0.4em; text-align: center;
  }
  .verify-again { font-size: 0.78rem; color: var(--ink-faint); margin-top: 9px; }
  .verify-note { font-size: 0.78rem; color: var(--ok); margin-top: 6px; min-height: 1em; }
  .verify-note.is-bad { color: var(--danger); }

  /* ================= SETUP (the onboarding hub) ================= */
  .pane { display: none; }
  .pane.is-active { display: block; }

  /* --- the checklist --- */
  .tracks { display: grid; gap: 10px; margin: 24px 0 22px; }
  .track {
    display: flex; align-items: flex-start; gap: 13px; width: 100%;
    text-align: left; font: inherit; cursor: pointer;
    background: var(--field-bg); border: 1px solid var(--glass-edge);
    border-radius: 13px; padding: 15px 16px;
    transition: border-color .2s, background .2s;
  }
  .track:hover { border-color: var(--glass-edge-2); background: var(--glass-2); }
  .track[disabled] { cursor: default; opacity: 1; }
  .track.is-done { border-color: rgba(127,192,138,0.34); background: rgba(127,192,138,0.09); }
  .track-mark {
    flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
    border: 1.5px solid rgba(244,244,246,0.28);
    display: flex; align-items: center; justify-content: center;
    color: var(--bg-0); font-size: 11px; line-height: 1;
  }
  .track.is-done .track-mark { background: var(--ok); border-color: var(--ok); }
  .track-body { min-width: 0; }
  .track-body strong { display: block; font-size: 0.95rem; font-weight: 500; }
  .track-body span { display: block; font-size: 0.8rem; color: var(--ink-faint); font-weight: 300; line-height: 1.5; margin-top: 2px; }

  /* --- paged intro --- */
  .pages { min-height: 260px; }
  .page-title {
    font-family: 'Fraunces', serif; font-weight: 400; letter-spacing: -0.015em;
    font-size: clamp(1.5rem, 4vw, 1.9rem); line-height: 1.14; margin-bottom: 14px;
  }
  .page-body { color: var(--ink-soft); font-weight: 300; white-space: pre-line; font-size: 0.95rem; }
  .dots { display: flex; gap: 6px; justify-content: center; margin: 22px 0 18px; }
  .dot-i { width: 6px; height: 6px; border-radius: 50%; background: rgba(244,244,246,0.22); transition: background .25s, width .25s; }
  .dot-i.is-on { background: var(--accent); width: 18px; border-radius: 3px; }
  .pager { display: flex; gap: 10px; }
  .pager .btn { flex: 1; }

  /* --- plans --- */
  .plans { display: grid; gap: 11px; margin: 22px 0 6px; }
  .plan {
    width: 100%; text-align: left; font: inherit; cursor: pointer;
    background: var(--field-bg); border: 1px solid var(--glass-edge);
    border-radius: 14px; padding: 17px 18px;
    transition: border-color .2s, background .2s;
  }
  .plan:hover { border-color: var(--glass-edge-2); background: var(--glass-2); }
  .plan[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
  .plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .plan-name { font-size: 1.02rem; font-weight: 600; }
  .plan-price { font-size: 0.9rem; color: var(--accent-bright); font-weight: 600; white-space: nowrap; }
  .plan ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
  .plan li {
    font-size: 0.81rem; color: var(--ink-faint); font-weight: 300;
    line-height: 1.5; padding-left: 15px; position: relative;
  }
  .plan li::before {
    content: ""; position: absolute; left: 2px; top: 0.62em;
    width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0.65;
  }

  /* --- chips (roles, genres) --- */
  .chipset { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
  .chip-s {
    font: inherit; font-size: 0.8rem; cursor: pointer;
    padding: 8px 13px; border-radius: 999px;
    background: var(--field-bg); color: var(--ink-soft);
    border: 1px solid var(--glass-edge);
    transition: border-color .2s, color .2s, background .2s;
  }
  .chip-s:hover { border-color: var(--glass-edge-2); color: var(--ink); }
  .chip-s[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
  .group { margin-bottom: 17px; }
  .group-title {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 8px;
  }
  .scroller {
    max-height: 300px; overflow-y: auto; padding-right: 4px; margin-bottom: 18px;
    /* fade the last row so the list reads as scrollable, not clipped */
    mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent);
  }

  /* --- step counter --- */
  .steps-of {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px;
  }

  /* ================= PROFILE ================= */
  .back-link {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 0; cursor: pointer; padding: 0;
    font: inherit; font-size: 0.85rem; color: var(--ink-faint);
    margin-bottom: 18px; transition: color .2s;
  }
  .back-link:hover { color: var(--ink); }
  .back-link svg { width: 14px; height: 14px; }

  select {
    width: 100%;
    background: var(--field-bg);
    border: 1px solid var(--glass-edge);
    border-radius: 12px;
    color: var(--ink);
    font: inherit; font-size: 0.95rem;
    padding: 13px 15px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(244,244,246,0.5) 50%),
                      linear-gradient(135deg, rgba(244,244,246,0.5) 50%, transparent 50%);
    background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  select:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  select option { background: #14141c; color: var(--ink); }

  .section-rule {
    border: 0; border-top: 1px solid var(--glass-edge);
    margin: 30px 0 22px;
  }
  .section-head {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.25rem;
    letter-spacing: -0.01em; margin-bottom: 6px;
  }

  /* ================= ARTIST PAGE EDITOR ================= */
  textarea {
    width: 100%;
    background: var(--field-bg);
    border: 1px solid var(--glass-edge);
    border-radius: 12px;
    color: var(--ink);
    font: inherit; font-size: 0.95rem; line-height: 1.6;
    padding: 13px 15px;
    resize: vertical; min-height: 120px;
    transition: border-color .2s ease, background .2s ease;
  }
  textarea::placeholder { color: rgba(244,244,246,0.28); }
  textarea:focus {
    outline: none; border-color: var(--accent);
    background: rgba(255,255,255,0.05);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .counter { font-size: 0.74rem; color: var(--ink-faint); text-align: right; margin-top: 5px; }

  /* --- images --- */
  .banner-slot {
    position: relative; width: 100%; aspect-ratio: 3 / 1;
    border-radius: 14px; overflow: hidden;
    background: var(--field-bg); border: 1px solid var(--glass-edge);
    display: flex; align-items: center; justify-content: center;
  }
  .avatar-slot {
    position: relative; width: 96px; height: 96px; flex: none;
    border-radius: 50%; overflow: hidden;
    background: var(--field-bg); border: 1px solid var(--glass-edge);
    display: flex; align-items: center; justify-content: center;
  }
  .banner-slot img, .avatar-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .slot-empty { font-size: 0.78rem; color: var(--ink-faint); font-weight: 300; padding: 0 12px; text-align: center; }

  .avatar-row { display: flex; align-items: center; gap: 16px; }
  .image-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
  .image-actions .hint { margin: 0; }

  .btn-small {
    font-size: 0.82rem; font-weight: 500; padding: 9px 16px;
    border-radius: 999px; cursor: pointer; font-family: 'Inter', sans-serif;
    background: var(--glass); color: var(--ink);
    border: 1px solid var(--glass-edge-2);
    transition: border-color .2s, background .2s;
  }
  .btn-small:hover { border-color: var(--ink); }
  .btn-small[disabled] { opacity: 0.55; cursor: default; }

  .uploading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(10,10,15,0.66); font-size: 0.78rem; color: var(--ink-soft);
  }

  .stack-gap { display: grid; gap: 16px; }

  /* ================= MUSIC ================= */
  .dropzone {
    border: 1px dashed var(--glass-edge-2); border-radius: 16px;
    padding: 30px 22px; text-align: center; cursor: pointer;
    background: var(--field-bg); transition: border-color .2s, background .2s;
  }
  .dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
  .dropzone h3 {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.2rem; margin: 0 0 6px;
  }
  .dropzone p { font-size: 0.83rem; color: var(--ink-faint); font-weight: 300; }

  .queue { display: grid; gap: 10px; margin: 20px 0; }
  .qitem {
    background: var(--field-bg); border: 1px solid var(--glass-edge);
    border-radius: 13px; padding: 14px 16px;
  }
  .qhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .qname {
    font-size: 0.9rem; font-weight: 500; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .qstate { font-size: 0.74rem; white-space: nowrap; color: var(--ink-faint); }
  .qstate.ok { color: var(--ok); }
  .qstate.bad { color: var(--danger); }
  .qstate.work { color: var(--accent-bright); }
  .qnote { font-size: 0.79rem; line-height: 1.5; margin-top: 8px; white-space: pre-line; }
  .qnote.bad { color: var(--danger); }
  .qnote.warn { color: var(--ink-soft); }

  .bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,0.09); margin-top: 10px; overflow: hidden; }
  .bar span {
    display: block; height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
    transition: width .2s ease;
  }

  .qfields { display: grid; gap: 10px; margin-top: 12px; }
  .qfields .input-shell input { font-size: 0.88rem; padding: 10px 13px; }
  .qrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  @media (max-width: 520px) { .qrow { grid-template-columns: 1fr; } }

  .check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 0.83rem; color: var(--ink-soft); }
  .check input { width: 16px; height: 16px; accent-color: var(--accent); }

  /* the track list */
  .tracklist { display: grid; gap: 10px; }
  .trk {
    background: var(--field-bg); border: 1px solid var(--glass-edge);
    border-radius: 13px; padding: 14px 16px;
  }
  /* The title, then its tags; on a phone the tags go onto the next line
     rather than pushing the page wider than the screen (2026-10-26). */
  .trk-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 6px; }
  .trk-title { font-size: 0.94rem; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trk-meta { font-size: 0.76rem; color: var(--ink-faint); margin-top: 3px; }
  .pill {
    font-size: 0.64rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--glass-edge); color: var(--ink-faint);
  }
  .pill.live { color: var(--ok); border-color: rgba(127,192,138,0.36); }
  .pill.work { color: var(--accent-bright); border-color: rgba(201,162,75,0.4); }
  .pill.bad { color: var(--danger); border-color: rgba(228,114,107,0.4); }
  .trk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .link-btn {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    font-size: 0.79rem; color: var(--ink-soft);
    border-bottom: 1px solid rgba(244,244,246,0.2);
  }
  .link-btn:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
  .link-btn.danger { color: var(--danger); border-color: rgba(228,114,107,0.35); }

  /* the track editor, opened in place under the row it edits */
  .trk-editor {
    background: var(--field-bg); border: 1px solid var(--accent);
    border-radius: 13px; padding: 16px;
  }
  .trk-editor .qfields { margin-top: 0; }
  /* Grid items grow to fit their widest field unless told they may shrink. */
  .trk-editor, .trk-editor .qrow > *, .trk-editor .input-shell { min-width: 0; }
  .trk-editor input:not([type=checkbox]) { width: 100%; min-width: 0; }
  .cover-edit { display: flex; align-items: center; gap: 14px; }
  .cover-thumb {
    width: 64px; height: 64px; border-radius: 9px; flex: none;
    background: var(--glass) center / cover no-repeat; border: 1px solid var(--glass-edge);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; color: var(--ink-faint);
  }
  .cover-edit .trk-actions { margin-top: 0; }
  .editor-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

  /* an EP or album, with its tracks in order */
  .rel-type { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-bright); }
  .rel-tracks { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--glass-edge); }
  .rel-tracks li {
    display: flex; align-items: baseline; gap: 12px; padding: 9px 0;
    border-bottom: 1px solid var(--glass-edge); font-size: 0.86rem;
  }
  .rel-tracks li:last-child { border-bottom: 0; }
  .rel-no { width: 1.4em; text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; font-size: 0.78rem; }
  .rel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rel-len { color: var(--ink-faint); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
  .rel-tracks li { flex-wrap: wrap; }
  .rel-tools { display: flex; align-items: center; gap: 10px; }
  /* On a phone the controls take a line of their own under the name. */
  @media (max-width: 520px) {
    .rel-tracks li { row-gap: 8px; }
    .rel-tools { flex-basis: 100%; padding-left: calc(1.4em + 12px); }
  }
  .arrow-btn {
    background: none; border: 1px solid var(--glass-edge); border-radius: 7px;
    color: var(--ink-soft); cursor: pointer; font: inherit; font-size: 0.8rem;
    width: 28px; height: 26px; line-height: 1; padding: 0;
  }
  .arrow-btn:hover:not(:disabled) { color: var(--accent-bright); border-color: var(--accent-bright); }
  .arrow-btn:disabled { opacity: 0.3; cursor: default; }
  .rel-head { display: flex; gap: 14px; align-items: center; }
  .rel-head .cover-thumb { width: 56px; height: 56px; }
  .rel-head > div:not(.cover-thumb) { flex: 1; min-width: 0; }
  .pick-list { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
  .pick-list .check { padding: 7px 2px; }

  /* ================= THE PLAY BAR ================= */
  /* Sticky in the page's flow rather than fixed over it. It sits between main
     and the footer, so while there is page below it floats just above the foot
     of the window, and at the end of the page it stops short of the footer —
     clear of its top rule rather than resting on it. Floating on both sides, it
     is a whole card: bordered and rounded all round. */
  .playbar {
    position: sticky; bottom: 12px; margin-bottom: 16px; z-index: 40; align-self: center;
    width: calc(100% - 24px); max-width: 560px;
    background: rgba(18,18,22,0.96); border: 1px solid var(--glass-edge);
    border-radius: 16px;
    padding: 12px 16px 14px;
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    box-shadow: 0 -18px 50px -24px rgba(0,0,0,0.9);
  }

  .pb-info { display: flex; align-items: flex-start; gap: 12px; }
  .pb-text { flex: 1; min-width: 0; }
  .pb-title { font-size: 0.9rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pb-artist { font-size: 0.75rem; color: var(--ink-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pb-times { flex: none; text-align: right; font-size: 0.72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .pb-times div + div { margin-top: 2px; }

  .pb-bar { position: relative; height: 22px; margin: 10px 0 2px; cursor: pointer; touch-action: none; }
  .pb-track { position: absolute; top: 9px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--glass-edge-2); }
  .pb-fill { height: 100%; border-radius: 2px; background: var(--accent); width: 0; }
  .pb-knob {
    position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); margin-left: -7px; left: 0; pointer-events: none;
  }
  .pb-mark {
    position: absolute; top: 3px; width: 2px; height: 16px; margin-left: -1px;
    background: var(--accent-bright); border-radius: 1px; cursor: pointer; opacity: 0.75;
  }
  .pb-mark.is-on { background: var(--ink); opacity: 1; }
  .pb-popup {
    position: absolute; bottom: 26px; max-width: 230px; z-index: 2;
    background: var(--bg-0); border: 1px solid var(--glass-edge-2); border-radius: 10px;
    padding: 9px 11px; cursor: pointer;
  }
  .pb-popup .who-name { font-size: 0.76rem; font-weight: 500; }
  .pb-popup .what { font-size: 0.78rem; color: var(--ink-soft); font-weight: 300; margin-top: 3px; }
  .pb-popup .when { font-size: 0.68rem; color: var(--ink-faint); margin-top: 4px; }

  .pb-controls { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
  .pb-side { flex: 1; display: flex; align-items: center; gap: 4px; }
  .pb-side.right { justify-content: flex-end; }
  .pb-btn {
    background: none; border: 0; padding: 6px; cursor: pointer; color: var(--ink-soft);
    display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  }
  .pb-btn:hover:not(:disabled) { color: var(--ink); }
  .pb-btn:disabled { opacity: 0.32; cursor: default; }
  .pb-btn.is-on { color: var(--accent-bright); }
  .pb-btn svg { width: 19px; height: 19px; }
  /* Volume: the speaker mutes, the slider sets it. Not on a touchscreen,
     where the device's own buttons do it (and iOS ignores it anyway). */
  .pb-vol { position: relative; display: flex; align-items: center; gap: 2px; margin-right: 6px; }
  /* Turned all the way up, it goes to 11 (This Is Spinal Tap). Over the
     slider's far end, where the knob is, for a moment after the turn. */
  .pb-vol-11 {
    position: absolute; right: -3px; bottom: calc(100% - 2px); pointer-events: none;
    font: 700 15px / 1 var(--st-condensed, 'Anton', Impact, sans-serif); color: var(--accent);
    opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
  }
  .pb-vol-11.is-on { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .pb-vol-11 { transition: none; transform: none; } }
  .pb-vol[hidden] { display: none; }
  @media (hover: none) { .pb-vol { display: none; } }
  @media (max-width: 640px) { #pb-volume { display: none; } }   /* a narrow window: the speaker alone */
  #pb-volume {
    --vol: 100%; -webkit-appearance: none; appearance: none; width: 76px; height: 22px;
    margin: 0; background: transparent; cursor: pointer;
  }
  #pb-volume::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px;
    background: linear-gradient(to right, var(--accent) var(--vol), var(--glass-edge-2) var(--vol));
  }
  #pb-volume::-moz-range-track {
    height: 4px; border-radius: 2px;
    background: linear-gradient(to right, var(--accent) var(--vol), var(--glass-edge-2) var(--vol));
  }
  #pb-volume::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px;
    border: 0; border-radius: 50%; background: var(--ink);
  }
  #pb-volume::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); }
  #pb-volume:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pb-transport {
    flex: none; display: flex; align-items: center; gap: 6px;
    border: 1px solid var(--glass-edge); border-radius: 999px; padding: 4px 6px;
  }
  .pb-play {
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--accent); color: var(--bg-0);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pb-play svg { width: 18px; height: 18px; }
  .pb-play:disabled { background: var(--glass-edge-2); color: var(--ink-faint); cursor: default; }

  .pb-compose { display: flex; gap: 8px; margin-top: 10px; }
  .pb-compose input {
    flex: 1; min-width: 0; background: var(--field-bg); border: 1px solid var(--glass-edge);
    border-radius: 10px; padding: 9px 12px; color: var(--ink); font: inherit; font-size: 0.84rem;
  }

  /* the music and video sections, once they can be played */
  .trk-row {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    background: none; border: 0; border-radius: 10px; padding: 9px 10px;
    color: var(--ink); font: inherit; cursor: pointer;
  }
  .trk-row:hover:not(:disabled) { background: rgba(255,255,255,0.04); }
  .trk-row:disabled { cursor: default; opacity: 0.5; }
  .trk-row.is-playing { background: rgba(201,162,75,0.1); }
  .trk-row.is-playing .trk-row-title { color: var(--accent-bright); }
  .trk-icon {
    width: 30px; height: 30px; flex: none; border-radius: 6px; overflow: hidden;
    background: var(--glass); display: flex; align-items: center; justify-content: center;
    color: var(--ink-faint);
  }
  .trk-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .trk-icon svg { width: 13px; height: 13px; }
  .trk-row.is-playing .trk-icon { color: var(--accent-bright); }
  .trk-row-main { flex: 1; min-width: 0; }
  .trk-row-title { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .trk-row-sub { font-size: 0.72rem; color: var(--ink-faint); margin-top: 2px; }

  .vid-player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; background: #000; margin-bottom: 10px; }
  .vid-player iframe { width: 100%; height: 100%; border: 0; display: block; }
  .sec-vids .vid-thumb { cursor: pointer; }
  .sec-vids .vid-thumb.is-on { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* ================= THE FAN PAGE =================
     The app's Fan Home, on a page rather than a phone. The genre row is a
     plain horizontal scroller: the app repeats its list 500 times and snaps
     to centre to fake an endless wheel, which is a way around not having a
     scrollbar. A trackpad already does that, so the trick buys nothing here
     and the repetition would only confuse a screen reader. */
  .fan-row { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; padding: 2px 2px 14px; }
  .fan-row::-webkit-scrollbar { height: 6px; }
  .fan-row::-webkit-scrollbar-thumb { background: var(--glass-edge); border-radius: 999px; }
  .fan-pl {
    position: relative;
    flex: none; width: 96px; background: none; border: 0; padding: 0;
    cursor: pointer; color: var(--ink); font: inherit;
  }
  .fan-pl-art {
    width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
    background: var(--glass); border: 1px solid var(--glass-edge);
    display: flex; align-items: center; justify-content: center; color: var(--ink-faint);
  }
  .fan-pl.is-tile .fan-pl-art { border-radius: 14px; }
  .fan-pl.is-on .fan-pl-art { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .fan-pl-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .fan-pl-art svg { width: 26px; height: 26px; }
  .fan-pl-name { font-size: 0.79rem; margin-top: 9px; text-align: center; line-height: 1.3; }
  .fan-pl.is-on .fan-pl-name { color: var(--accent-bright); }
  .fan-pl-count { display: block; font-size: 0.68rem; color: var(--ink-faint); margin-top: 2px; }
  /* The genre you drilled into stays pinned on the left, as the way back out. */
  .fan-parent { border-right: 1px solid var(--glass-edge); padding-right: 14px; }
  .fan-parent .fan-pl-art { border-style: dashed; }

  .fan-panel { border: 1px solid var(--glass-edge); border-radius: 14px; background: var(--glass); padding: 6px; }
  .fan-panel-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 10px 8px; border-bottom: 1px solid var(--glass-edge); margin-bottom: 4px;
  }
  .fan-panel-title { font-size: 0.98rem; font-weight: 500; flex: 1; min-width: 0; }
  .fan-num {
    width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--glass-edge);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; color: var(--ink-faint);
  }
  .trk-row.is-playing .fan-num { border-color: var(--accent); color: var(--accent-bright); }
  .fan-len { flex: none; font-size: 0.76rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
  .fan-move { display: flex; flex-direction: column; gap: 1px; flex: none; }
  .fan-move button {
    width: 24px; height: 15px; padding: 0; background: none; border: 0; cursor: pointer;
    color: var(--ink-faint); display: flex; align-items: center; justify-content: center;
  }
  .fan-move button:hover:not(:disabled) { color: var(--ink); }
  .fan-move button:disabled { opacity: 0.25; cursor: default; }
  .fan-move svg { width: 13px; height: 13px; }
  .fan-drop {
    flex: none; background: none; border: 0; cursor: pointer; color: var(--ink-faint);
    padding: 4px; display: flex; align-items: center;
  }
  .fan-drop:hover { color: var(--danger); }
  .fan-drop svg { width: 15px; height: 15px; }

  /* Reordering is a mode, not a row you click, so the rows stop offering. */
  .trk-row.is-static { cursor: default; }
  .trk-row.is-static:hover { background: none; }

  /* The app's artist wheels. Both columns sit side by side at every width, as
     they do on the phone: a row is compact enough that stacking buys nothing. */
  .fan-cols {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px;
    border: 1px solid var(--glass-edge); border-radius: 16px; padding: 10px 12px 12px;
  }
  /* Each column measures its own width (cqw), so an artist's picture is
     sized from it: half the column on a desktop or iPad, the whole column
     on a phone, where the three columns each take a third. */
  .fan-col { min-width: 0; container-type: inline-size; }
  .fan-col h2 {
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
    text-align: center; margin-bottom: 6px;
  }
  /* One row showing, and a snap point at the top of each. A row is the
     picture (--pic), the name under it, its padding and border. The wheel is
     exactly one row tall, so the 6px gap and the next row stay out of sight;
     the script measures a row and adds the gap for its step. */
  .fan-wheel {
    --pic: 50cqw;
    height: calc(var(--pic) + 41px); overflow-y: auto; overscroll-behavior: contain;
    scroll-snap-type: y mandatory; scrollbar-width: none; border-radius: 10px;
  }
  .fan-wheel::-webkit-scrollbar { display: none; }
  /* Snapping would pull every frame of the wheel's own glide back to a row. */
  .fan-wheel.is-gliding { scroll-snap-type: none; }
  .fan-wheel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .fan-wheel-row {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    width: 100%; height: calc(var(--pic) + 41px); margin: 0 0 6px; box-sizing: border-box;
    padding: 6px; border-radius: 10px; border: 1.5px solid transparent;
    background: none; color: var(--ink-faint); font: inherit; text-align: left;
    cursor: pointer; scroll-snap-align: start;
  }
  .fan-wheel-row.is-on { border-color: var(--accent); color: var(--ink); }
  .fan-wheel-row.is-on .fan-wheel-name { font-weight: 700; }
  .fan-wheel-row.is-placeholder { cursor: default; }
  .fan-wheel-av {
    width: var(--pic); height: var(--pic); flex: none; border-radius: 50%; overflow: hidden;
    background: var(--glass-edge); display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 700; color: var(--ink-faint);
  }
  .fan-wheel-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .fan-wheel-name { width: 100%; min-width: 0; line-height: 20px; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fan-wheel-hint { font-size: 0.72rem; font-weight: 300; color: var(--ink-faint); text-align: center; margin-top: 4px; }

  /* ================= THE PLAYER PAGE =================
     The fan page keeps one size for a given window, as the app's Fan Home
     does: the header, the genre row, the wheels and the player take what they
     need, and the panel between them has a height of its own — what the window
     has to spare, never less than 240px and never more than 520px — and
     scrolls inside it however long the playlist.

     It used to be the other way round: the card had a fixed height and the
     panel took whatever was left. On a phone, or a laptop window around 800px
     tall, nothing was left — the panel measured 0px, the tracks vanished, and
     the player was pushed out through the bottom of the card. Now the card
     grows to fit its parts, so the player always has the card's padding below
     it. */
  #fan-panel { height: clamp(240px, calc(100dvh - 790px), 520px); overflow-y: auto; overscroll-behavior: contain; }
  #fan-panel .fan-panel-head { position: sticky; top: 0; z-index: 1; background: #1a1a1f; border-radius: 10px 10px 0 0; }

  /* On a phone every pixel the fixed parts take is one the tracks do not get,
     so the header title and the genre circles tighten. */
  @media (max-width: 560px) {
    #view-fan #fan-title { font-size: 1.45rem; }
    #view-fan .page-head { margin-bottom: 12px; }
    .fan-row { gap: 10px; }
    .fan-pl { width: 76px; }
    .fan-pl-art { width: 76px; height: 76px; }
  }

  /* Docked under the wheels, as the app's PlayBar sits under Fan Home: always
     there for a fan who can play, track or no track, and nothing to close. */
  .playbar.is-docked {
    position: static; transform: none; width: 100%; max-width: none; z-index: auto;
    margin-top: 12px; margin-bottom: 0; border-bottom: 1px solid var(--glass-edge); border-radius: 16px;
    background: var(--glass); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .playbar.is-docked #pb-close { display: none; }

  /* A track row has two targets, as in the app: the row plays, the chevron on
     its right opens the artist's page. */
  #fan-panel .trk-row { cursor: default; }
  .fan-play {
    display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0;
    background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
  }
  div.fan-play { cursor: default; }
  .fan-play:disabled { cursor: default; opacity: 0.5; }
  .fan-go {
    flex: none; width: 28px; height: 30px; margin-right: -4px; padding: 0; border: 0; border-radius: 8px;
    background: none; color: var(--ink-faint); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .fan-go:hover { color: var(--ink); background: var(--glass-2); }
  .fan-go svg { width: 14px; height: 14px; }
  .trk-row.is-playing .fan-go { color: var(--accent-bright); }

  /* Another artist's page, as a fan sees it: the same page, nothing to edit. */
  .view-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .view-actions[hidden] { display: none; }
  .fl-box { max-width: 34em; }
  .fl-box .field[hidden], .fl-box .fl-check[hidden], .fl-box button[hidden] { display: none; }
  .fl-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 13px; cursor: pointer; }
  .fl-check input { width: 16px; height: 16px; accent-color: #EAFB17; }
  .fl-box .fl-said { margin-top: 12px; }
  #view-page.is-viewing .head-actions,
  #view-page.is-viewing #page-verify,
  #view-page.is-viewing .page-tabs,
  #view-page.off-page #page-edit { display: none; }

  /* ================= ADMIN ================= */
  .adm-stat b { color: var(--ink); font-weight: 500; }

  .adm-twist svg { width: 14px; height: 14px; transition: transform .15s; }
  .adm-name small { display: block; color: var(--ink-faint); font-size: 0.72rem; margin-top: 2px; }
  .adm-act {
    background: none; border: 0; padding: 5px; cursor: pointer; color: var(--ink-faint);
    display: flex; align-items: center; border-radius: 6px;
  }
  .adm-act:hover { color: var(--ink); background: var(--glass-2); }
  .adm-act.is-danger:hover { color: var(--danger); }
  .adm-act svg { width: 15px; height: 15px; }
  .adm-act:disabled { opacity: 0.25; cursor: default; }
  .adm-act:disabled:hover { color: var(--ink-faint); background: none; }

  /* The genre's cover: what a fan sees on their page, editable in place. */
  .adm-thumb svg { width: 15px; height: 15px; }
  .adm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .adm-add input {
    flex: 1; min-width: 0; background: var(--field-bg); border: 1px solid var(--glass-edge);
    border-radius: 9px; padding: 8px 11px; color: var(--ink); font: inherit; font-size: 0.84rem;
  }

  /* ================= SETTINGS, AND THE HEADERS THAT REACH IT ================= */
  .head-actions { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
  .icon-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border-radius: 999px; cursor: pointer;
    background: var(--glass); color: var(--ink-soft); border: 1px solid var(--glass-edge-2);
    transition: background .2s, color .2s, border-color .2s;
  }
  .icon-btn:hover { border-color: var(--ink); color: var(--ink); }
  .icon-btn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-bright); }
  .icon-btn svg { width: 17px; height: 17px; }

  .act-bar { position: sticky; top: 0; z-index: 40; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
    padding: 10px 16px; background: #EAFB17; color: #0C0D0C; font: 600 13px/1.4 "IBM Plex Mono", ui-monospace, monospace; }
  .act-bar[hidden] { display: none; }
  .act-bar button { background: #0C0D0C; color: #FCF9F5; border: 0; padding: 7px 12px; font: inherit; cursor: pointer; }
  .area-checks { display: grid; gap: 6px; margin: 8px 0 12px; }
  body.newlook .agl-logo-row { display: flex; gap: 16px; align-items: center; margin: 10px 0 18px; }
  body.newlook .agl-logo { width: 88px; height: 88px; flex: none; border: 1px solid var(--rule, rgba(252,249,245,.16)); background: rgba(252,249,245,.04); display: grid; place-items: center; overflow: hidden; }
  body.newlook .agl-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  body.newlook .agl-picked { list-style: decimal; padding-left: 22px; margin: 6px 0 14px; display: grid; gap: 6px; font-size: 14px; }
  body.newlook .agl-picked li { padding: 2px 0; }
  body.newlook .agl-picked .pd-item-acts { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
  body.newlook .agl-pool { display: grid; gap: 4px; max-height: 280px; overflow: auto; margin-bottom: 8px; }
  body.newlook .agd-card { padding: 16px 0; border-bottom: 1px solid rgba(252,249,245,.12); }
  body.newlook .agd-card h3 { font-size: 16px; font-weight: 700; }
  body.newlook .agd-card h3 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
  body.newlook .agd-msg { margin: 8px 0; font-size: 14px; white-space: pre-wrap; }
  body.newlook .agd-track { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
  body.newlook .agd-track audio { width: 100%; max-width: 420px; height: 36px; }
  body.newlook .agd-answer { margin-top: 10px; }
  body.newlook .agd-answer textarea { width: 100%; }
  body.newlook .plan-total { margin-bottom: 28px; }
  .disc-genres { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
  .disc-genres button { padding: 8px 12px; background: transparent; color: inherit; border: 1px solid rgba(252,249,245,.3); font: inherit; font-size: 13px; cursor: pointer; }
  .disc-genres button.is-on { background: #EAFB17; color: #0C0D0C; border-color: #EAFB17; }
  .disc-genres button small { opacity: .6; margin-left: 4px; }
  .disc-picks { display: grid; gap: 0; margin: 10px 0 16px; }
  .disc-pick { display: grid; grid-template-columns: 24px 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(252,249,245,.12); cursor: pointer; }
  .disc-pick img, .disc-pick .disc-av { width: 52px; height: 52px; object-fit: cover; background: rgba(252,249,245,.06); }
  .disc-pick b { display: block; }
  .disc-pick small { display: block; font-size: 12px; opacity: .65; }
  .disc-play { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(252,249,245,.35); background: transparent; color: #FCF9F5; cursor: pointer; }
  .disc-play svg { width: 18px; height: 18px; fill: currentColor; }
  .disc-play:hover, .disc-play.is-playing { background: #EAFB17; border-color: #EAFB17; color: #0C0D0C; }
  body.newlook .fp-addr { display: flex; align-items: center; }
  body.newlook .fp-addr span { padding-left: 14px; color: rgba(252,249,245,.55); white-space: nowrap; }
  body.newlook .fp-addr input { flex: 1; min-width: 0; padding-left: 2px; }
  body.newlook #fp-artists { margin: 4px 0 12px 26px; }
  body.newlook .sync-filters select, body.newlook .sync-filters input[type=search] { width: 100%; }
  body.newlook .sync-tags span { padding: 2px 7px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(252,249,245,.28); }
  body.newlook .sync-thread p { padding: 10px 12px; border: 1px solid rgba(252,249,245,.14); font-size: 14px; white-space: pre-wrap; }
  body.newlook .sync-thread small { display: block; margin-bottom: 4px; font-size: 11px; color: rgba(252,249,245,.55); }
  body.newlook .btn-small.is-pay { background: #EAFB17; color: #0C0D0C; border-color: #EAFB17; }
  body.newlook .ags-wrap { overflow-x: auto; margin-top: 16px; }
  body.newlook #ags-pro .section-head { margin-top: 30px; }
  body.newlook #ags-totals { margin-top: 12px; }
  body.newlook .ags-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
  body.newlook .ags-table th { text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint, rgba(252,249,245,.5)); padding: 8px 10px 8px 0; border-bottom: 1px solid rgba(252,249,245,.16); }
  body.newlook .ags-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid rgba(252,249,245,.1); vertical-align: top; }
  body.newlook .ags-table td.n { font-variant-numeric: tabular-nums; }
  body.newlook .ags-table tr.is-off td { color: rgba(252,249,245,.45); }
  body.newlook .agc-month { margin: 22px 0 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(252,249,245,.6); }
  body.newlook .agc-item { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(252,249,245,.1); }
  body.newlook .agc-day { font-family: var(--condensed, Anton, sans-serif); font-size: 22px; line-height: 1; text-transform: uppercase; }
  body.newlook .agc-day small { display: block; margin-top: 4px; font-family: inherit; font-size: 10px; letter-spacing: .14em; color: rgba(252,249,245,.55); }
  body.newlook .agc-item strong { display: block; }
  body.newlook .agc-tag { display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(252,249,245,.3); vertical-align: 2px; }
  body.newlook .agc-tag.is-coming { border-color: #EAFB17; color: #EAFB17; }
  body.newlook .agc-tag.is-pencil { border-style: dashed; }
  body.newlook .agc-clash { margin-top: 4px; font-size: 12.5px; color: #ffb37a; }
  body.newlook .agl-rel-panel { margin-top: 10px; display: grid; gap: 0; }
  body.newlook .tf-pick-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(252, 249, 245, 0.12); font-size: 14px; }
  body.newlook .tf-pick-row > span:first-child { flex: 1 1 200px; }
  body.newlook .check-row { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; font-size: 14px; }
  body.newlook .tf-link { display: inline-block; margin-top: 12px; padding: 0; background: none; border: 0; color: inherit; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  body.newlook .tf-link.danger { color: #ff8a7a; }
  #register-join-note { display: none; }
  #register-join-note.is-shown { display: block; }
  #view-register.is-joining #role-label, #view-register.is-joining #role-seg, #view-register.is-joining #soon-label,
  #view-register.is-joining #register-adult-row { display: none; }
  #view-register.is-joining .seg-soon, #view-register.is-joining #register-listener-note,
  #view-register.is-joining .divider, #view-register.is-joining .social { display: none !important; }
  .area-checks label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
  .page-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
  .role-switch {
    display: inline-flex; padding: 3px; border-radius: 999px;
    background: var(--glass); border: 1px solid var(--glass-edge-2);
  }
  .role-switch button {
    font: inherit; font-size: 0.75rem; font-weight: 500; cursor: pointer;
    padding: 6px 14px; border-radius: 999px; border: 0; background: none; color: var(--ink-faint);
  }
  .role-switch button.is-on { background: var(--accent); color: var(--bg-0); }

  .set-group { margin-top: 24px; }
  .set-group > h2 {
    font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px;
  }
  .set-rows { border: 1px solid var(--glass-edge); border-radius: 13px; overflow: hidden; background: var(--field-bg); }
  .set-row {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 14px 16px; background: none; border: 0; border-top: 1px solid var(--glass-edge);
    color: var(--ink); font: inherit; font-size: 0.9rem; cursor: pointer;
  }
  .set-row:first-child { border-top: 0; }
  .set-row:hover { background: rgba(255,255,255,0.03); }
  .set-row .set-label { flex: 1; min-width: 0; }
  .set-row .set-right { font-size: 0.76rem; color: var(--ink-faint); flex: none; }
  .set-row.danger { color: var(--danger); }
  .set-row[disabled] { cursor: default; color: var(--ink-faint); }
  .set-row[disabled]:hover { background: none; }

  .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
  .btn-danger:hover { filter: brightness(1.08); }

  .warn-box {
    border: 1px solid rgba(228,114,107,0.35); background: rgba(228,114,107,0.07);
    border-radius: 13px; padding: 16px; margin-bottom: 20px;
  }
  .warn-box h3 { font-size: 0.94rem; font-family: 'Inter', sans-serif; font-weight: 600; color: var(--danger); }
  .warn-box p { font-size: 0.85rem; color: var(--ink-soft); font-weight: 300; margin-top: 8px; }
  .warn-box li { font-size: 0.85rem; color: var(--ink-soft); font-weight: 300; margin-top: 5px; }
  .warn-box ul { padding-left: 18px; margin-top: 8px; }

  .article h3 { font-family: 'Inter', sans-serif; font-size: 0.94rem; font-weight: 600; margin-top: 20px; }
  .article p { font-size: 0.88rem; color: var(--ink-soft); font-weight: 300; margin-top: 6px; white-space: pre-line; }
  .article ul { padding-left: 18px; margin-top: 10px; }
  .article li { font-size: 0.88rem; color: var(--ink-soft); font-weight: 300; margin-top: 6px; }

  .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
  .stat { background: var(--field-bg); border: 1px solid var(--glass-edge); border-radius: 13px; padding: 14px 16px; }
  .stat .n { font-size: 1.5rem; font-weight: 600; }
  .stat .l { font-size: 0.73rem; color: var(--ink-faint); margin-top: 3px; }
  .rank { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-top: 1px solid var(--glass-edge); font-size: 0.88rem; }
  .rank:first-child { border-top: 0; }
  .rank .rank-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rank .rank-n { font-size: 0.78rem; color: var(--ink-faint); flex: none; }

  .empty-note {
    text-align: center; padding: 26px 18px; font-size: 0.86rem;
    color: var(--ink-faint); font-weight: 300;
  }

  /* ================= THE ARTIST PAGE ================= */
  #page-title { font-size: 1.9rem; }
  #fan-title { font-size: 1.9rem; }
  .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
  .edit-toggle {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    font: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer;
    padding: 9px 16px; border-radius: 999px;
    background: var(--glass); color: var(--ink-soft);
    border: 1px solid var(--glass-edge-2);
    transition: background .2s, color .2s, border-color .2s;
  }
  .edit-toggle:hover { border-color: var(--ink); color: var(--ink); }
  .edit-toggle.is-on {
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
    color: var(--bg-0); border-color: var(--accent);
  }
  .edit-toggle svg { width: 15px; height: 15px; }

  .page-banner {
    position: relative; width: 100%; aspect-ratio: 3 / 1;
    border-radius: 16px; overflow: hidden;
    background: var(--field-bg); border: 1px solid var(--glass-edge);
    display: flex; align-items: center; justify-content: center;
  }
  .page-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .banner-hint {
    position: absolute; inset: 0; display: none;
    flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: rgba(10,10,15,0.55); color: #fff; font-size: 0.83rem; cursor: pointer;
  }
  .is-editing .banner-hint { display: flex; }
  .page-avatar { position: relative; }
  .avatar-hint {
    position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: rgba(10,10,15,0.6); color: #fff; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 11px;
  }
  .avatar-hint svg { width: 22px; height: 22px; }
  .is-editing .avatar-hint { display: flex; }
  .banner-hint svg { width: 26px; height: 26px; }

  .page-id { display: flex; align-items: flex-end; gap: 16px; margin: -34px 0 24px 20px; position: relative; z-index: 1; }
  .page-avatar {
    width: 84px; height: 84px; border-radius: 50%; flex: none; overflow: hidden;
    background: var(--bg-0); border: 2px solid var(--bg-0);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-faint); font-size: 0.7rem;
  }
  .page-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .page-name { font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
  .page-where { font-size: 0.84rem; color: var(--ink-faint); margin-top: 2px; }

  .page-section { padding: 22px 0; border-top: 1px solid var(--glass-edge); }
  .page-section:first-of-type { border-top: 0; }
  .sec-title {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.3rem;
    background: none; border: 0; padding: 0; text-align: left; color: var(--ink);
    display: inline-flex; align-items: center; gap: 9px;
  }
  .is-editing .sec-title { color: var(--danger); cursor: pointer; }
  .is-editing .sec-title::after {
    content: "edit"; font-family: 'Inter', sans-serif; font-size: 0.62rem;
    font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    border: 1px solid currentColor; border-radius: 999px; padding: 2px 7px;
  }
  .sec-body { margin-top: 12px; }
  .sec-empty { font-size: 0.85rem; color: var(--ink-faint); font-weight: 300; }
  .sec-list { display: grid; gap: 8px; margin-top: 10px; }
  .sec-item {
    background: var(--field-bg); border: 1px solid var(--glass-edge);
    border-radius: 11px; padding: 11px 14px; font-size: 0.87rem;
  }
  .sec-item small { display: block; color: var(--ink-faint); font-size: 0.76rem; margin-top: 2px; }
  /* A row that opens its entry: the same card, a chevron, and a pointer. */
  button.sec-item {
    display: block; width: 100%; text-align: left; position: relative; padding-right: 36px;
    color: var(--ink); font-family: inherit; line-height: inherit; cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  button.sec-item:hover { border-color: var(--glass-edge-2); background: var(--glass-2); }
  button.sec-item::after {
    content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px;
    border-right: 2px solid var(--ink-faint); border-top: 2px solid var(--ink-faint);
    transform: translateY(-50%) rotate(45deg);
  }

  /* ================= ONE ENTRY: diary, event or merch =================
     The app's DiaryEntryDetail, EventDetail and MerchDetail, as one view. */
  .entry-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 14px; }
  .entry-badge {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #0a0a0f; border-radius: 6px; padding: 3px 8px;
  }
  .entry-date { font-size: 0.84rem; color: var(--ink-faint); }
  .entry-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 2px; }
  .entry-price strong { font-size: 1.4rem; font-weight: 600; color: var(--accent-bright); }
  .entry-price span { font-size: 0.86rem; color: var(--ink-faint); }
  .entry-where { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; color: var(--ink-soft); margin: 2px 0 6px; }
  a.entry-where { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
  .entry-where svg { width: 16px; height: 16px; flex: none; }
  .entry-text { font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); font-weight: 300; white-space: pre-line; margin: 14px 0 20px; }
  .entry-images { display: grid; gap: 10px; }
  .entry-images-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 0 0; }
  .entry-img { width: 100%; display: block; border-radius: 12px; background: var(--glass); }
  .entry-hero { margin: 4px 0 16px; border-radius: 14px; }
  .bio-text { font-size: 0.93rem; color: var(--ink-soft); font-weight: 300; white-space: pre-line; }

  .edit-banner-note {
    display: none; font-size: 0.83rem; color: var(--accent-bright);
    background: var(--accent-soft); border: 1px solid rgba(201,162,75,0.3);
    border-radius: 12px; padding: 11px 14px; margin-bottom: 18px;
  }
  .is-editing .edit-banner-note { display: block; }

  /* ================= COLLECTIONS (diary, events, merch) ================= */
  .coll-form {
    background: var(--field-bg); border: 1px solid var(--glass-edge);
    border-radius: 14px; padding: 18px; margin-bottom: 24px;
  }
  .coll-form h3 {
    font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.15rem; margin-bottom: 14px;
  }
  .coll-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 520px) { .coll-row { grid-template-columns: 1fr; } }

  .thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .thumb {
    position: relative; width: 68px; height: 68px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--glass-edge); background: var(--field-bg);
  }
  .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .thumb button {
    position: absolute; top: 3px; right: 3px; width: 19px; height: 19px;
    border-radius: 50%; border: 0; cursor: pointer; line-height: 1;
    background: rgba(10,10,15,0.8); color: #fff; font-size: 12px;
  }
  .thumb.adding { display: flex; align-items: center; justify-content: center; font-size: 0.68rem; color: var(--ink-faint); }

  .coll-list { display: grid; gap: 10px; }
  .coll-item {
    background: var(--field-bg); border: 1px solid var(--glass-edge);
    border-radius: 13px; padding: 14px 16px;
  }
  .coll-item h4 { font-size: 0.94rem; font-weight: 500; font-family: 'Inter', sans-serif; }
  .coll-item .when { font-size: 0.76rem; color: var(--ink-faint); margin-top: 2px; }
  .coll-item p.body { font-size: 0.85rem; color: var(--ink-soft); font-weight: 300; margin-top: 8px; white-space: pre-line; }
  .coll-item .thumbs { margin-top: 10px; }
  .coll-item .thumb { width: 54px; height: 54px; }

  /* ================= VIDEOS ================= */
  .vid-list { display: grid; gap: 10px; }
  .vid-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    background: var(--field-bg); border: 1px solid var(--glass-edge);
    border-radius: 13px; padding: 12px 14px;
  }
  .vid-thumb {
    width: 88px; height: 50px; flex: none; border-radius: 7px; overflow: hidden;
    background: rgba(255,255,255,0.05); display: flex; align-items: center;
    justify-content: center; font-size: 0.62rem; color: var(--ink-faint);
  }
  .vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .vid-main { flex: 1; min-width: 130px; }
  .vid-title {
    font-size: 0.9rem; font-weight: 500; display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: inherit; text-decoration: none;
  }
  a.vid-title:hover { color: var(--accent-bright); }
  .vid-actions { display: flex; align-items: center; gap: 8px; flex: none; }
  .vid-move {
    background: none; border: 1px solid var(--glass-edge); border-radius: 8px;
    color: var(--ink-soft); width: 28px; height: 28px; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .vid-move:hover:not(:disabled) { color: var(--accent-bright); border-color: var(--accent-bright); }
  .vid-move:disabled { opacity: 0.28; cursor: default; }
  .vid-move svg { width: 15px; height: 15px; }
  .sec-vids { display: flex; flex-wrap: wrap; gap: 8px; }
  .sec-vids .vid-thumb { width: 96px; height: 54px; }

  /* ================= FOOTER ================= */
  footer {
    position: relative; z-index: 1;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 24px 0; font-size: 0.8rem; color: var(--ink-faint); font-weight: 300;
  }
  .foot-inner { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
  .foot-inner a { color: var(--ink-soft); }
  .foot-inner a:hover { color: var(--accent); }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  /* ================= NEW DESIGN — sign in, sign up, password screens =================
     body.auth is set while one of those views is showing (see go()), and
     body[data-view] names which. The signed-in account area keeps the older
     look for now. The old tokens are re-pointed so shared components follow. */
  .st-top, .aside { display: none; }
  .shell { display: flex; justify-content: center; }

  body.auth, body.newlook {
    --st-bg: #0C0D0C;
    --st-ink: #FCF9F5;
    --st-rule: rgba(252, 249, 245, 0.28);
    --st-yel: #EAFB17;
    --st-on-yel: #0C0D0C;
    --u: min(100vw / 1536, 1.25px);
    --st-display: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
    --st-condensed: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
    --st-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

    --ink: var(--st-ink);
    --ink-soft: rgba(252, 249, 245, 0.72);
    --ink-faint: rgba(252, 249, 245, 0.5);
    --glass-edge: var(--st-rule);
    --glass-edge-2: var(--st-ink);
    --glass-2: rgba(252, 249, 245, 0.06);
    --field-bg: rgba(252, 249, 245, 0.04);
    --accent: var(--st-yel);
    --accent-soft: rgba(234, 251, 23, 0.14);
    --danger: #FF8A7A;
    --ok: #A6E3A1;

    background: var(--st-bg);
    font-family: var(--st-mono);
    font-size: 15px;
  }
  body.auth .bg, body.auth > .nav, body.newlook .bg, body.newlook > .nav { display: none; }
  body.auth :focus-visible, body.newlook :focus-visible { outline: 2px solid var(--st-yel); outline-offset: 3px; }
  body.auth input:focus-visible, body.newlook input:focus-visible { outline: none; }
  body.auth .chip:focus-visible { outline-color: var(--st-ink); }

  /* header — the landing page's, drawn on the same 1536 grid */
  body.auth .st-top, body.newlook .st-top { display: block; position: relative; z-index: 2; border-bottom: 1px solid var(--st-rule); }
  .st-inner { position: relative; width: calc(1536 * var(--u)); height: calc(94 * var(--u)); margin-inline: auto; }
  .st-mark { display: block; aspect-ratio: 38 / 108.5; fill: currentColor; }
  .st-arrow { flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .st-brand { position: absolute; inset: 0 auto 0 0; width: calc(470 * var(--u)); }
  .st-brand .st-mark { position: absolute; left: calc(56 * var(--u)); top: calc(15 * var(--u)); height: calc(66 * var(--u)); color: var(--st-yel); }
  .st-word { position: absolute; left: calc(104 * var(--u)); top: calc(16 * var(--u)); font: 400 calc(61 * var(--u)) / 1 var(--st-condensed); }
  .st-tag {
    position: absolute; left: calc(359 * var(--u)); top: calc(34 * var(--u));
    font: 500 max(calc(12 * var(--u)), 8.5px) / max(calc(15 * var(--u)), 11.5px) var(--st-mono);
    letter-spacing: 0.21em; text-transform: uppercase;
  }
  .st-nav a { position: absolute; top: calc(44 * var(--u)); font: 400 max(calc(14 * var(--u)), 12px) / 1 var(--st-mono); transition: color .2s; }
  .st-nav a:hover { color: var(--st-yel); }
  .st-nav .fans { left: calc(1006 * var(--u)); }
  .st-nav .artists { left: calc(1146 * var(--u)); }
  /* Signed out, the top right is the home page's: Sign in and Join free,
     in the same places (Mat, 2026-11-09). */
  .st-nav .signin { display: none; left: calc(1179 * var(--u)); }
  body.auth .st-nav .signin { display: block; }
  body.auth .st-nav .fans, body.auth .st-nav .artists { display: none; }
  .st-nav .wait {
    left: calc(1284 * var(--u)); top: calc(25 * var(--u));
    width: calc(204 * var(--u)); height: calc(47 * var(--u));
    display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u));
    padding-top: calc(2 * var(--u));
    border: max(calc(1.5 * var(--u)), 1px) solid var(--st-ink);
    font-weight: 500; font-size: max(calc(14 * var(--u)), 11.5px);
    transition: background .2s, color .2s;
  }
  .st-nav .wait:hover { background: var(--st-ink); color: var(--st-bg); }
  /* Signed in, the header's button leads back to the artist's own page
     instead of offering a waiting list they're already past. */
  .st-nav .mine { display: none; }
  body.newlook .st-nav .wait:not(.mine) { display: none; }
  body.newlook .st-nav .mine { display: flex; }
  /* Setup is required, so the header offers no way round it. */
  body[data-view="setup"] .st-nav .mine { display: none; }
  .st-nav .wait .st-arrow { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

  /* layout: words on the left, the form on the right */
  body.auth main { align-items: flex-start; padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 100px); }
  body.auth .shell {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 64px; align-items: start;
    width: min(var(--page), 100%); max-width: none; padding: 0 clamp(20px, 4.4vw, 68px);
  }
  body.auth .aside { display: block; padding-top: 4px; }
  .aside > div { display: none; }
  body[data-view="login"] .aside [data-for~="login"],
  body[data-view="register"] .aside [data-for~="register"],
  body[data-view="forgot"] .aside [data-for~="forgot"],
  body[data-view="reset"] .aside [data-for~="reset"] { display: block; }
  .aside .kicker { text-transform: uppercase; letter-spacing: 0.2em; font-size: clamp(11px, 1vw, 15px); line-height: 1.4; }
  .aside h2 {
    margin-top: clamp(18px, 2vw, 28px);
    font: 900 clamp(56px, 8.4vw, 132px) / 0.84 var(--st-display);
    letter-spacing: -0.05em; word-spacing: 0.05em;
  }
  .aside h2 span { display: block; }
  .aside h2 .y { color: var(--st-yel); }
  .aside p.intro { margin-top: clamp(24px, 2.6vw, 38px); max-width: 32em; font-size: clamp(13px, 1.15vw, 17px); line-height: 1.6; color: var(--ink-soft); }
  .aside ul { list-style: none; margin-top: clamp(24px, 2.6vw, 36px); max-width: 36em; border-top: 1px solid var(--st-rule); }
  .aside li { padding: 16px 0; border-bottom: 1px solid var(--st-rule); font-size: clamp(12px, 1vw, 14px); line-height: 1.55; color: var(--ink-soft); }
  .aside li b { display: block; margin-bottom: 3px; color: var(--st-ink); font-size: clamp(13px, 1.1vw, 16px); }
  .aside a { color: var(--st-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--st-rule); transition: color .2s; }
  .aside a:hover { color: var(--st-yel); text-decoration-color: var(--st-yel); }

  /* the form panel */
  body.auth .card {
    max-width: none; border-radius: 0; box-shadow: none;
    background: rgba(252, 249, 245, 0.02); border-color: var(--st-rule);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: clamp(22px, 2.6vw, 38px);
  }
  body.auth .card .eyebrow { display: none; }
  body.auth .card h1 {
    font: 400 clamp(34px, 3.1vw, 46px) / 1 var(--st-condensed);
    text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 10px;
  }
  body.auth .sub { font-size: 13px; line-height: 1.55; font-weight: 400; margin-bottom: 24px; }
  body.auth .field label, body.auth .seg-label {
    font-size: 11px; font-weight: 500; letter-spacing: 0.16em; color: var(--st-ink); margin-bottom: 8px;
  }
  body.auth .input-shell input,
  body.auth input[type="email"], body.auth input[type="password"], body.auth input[type="text"] {
    border-radius: 0; height: 50px; padding: 0 14px;
    font: 400 15px var(--st-mono);
  }
  body.auth .has-eye input { padding-right: 48px; }
  body.auth input::placeholder { color: var(--ink-faint); }
  body.auth input:focus { box-shadow: none; background: var(--field-bg); border-color: var(--st-yel); }
  body.auth .eye { border-radius: 0; }
  body.auth .hint { font-size: 12px; font-weight: 400; margin-top: 8px; }

  body.auth .chip { border-radius: 0; font-family: var(--st-mono); font-size: 13px; letter-spacing: 0.02em; }
  body.auth .chip[aria-pressed="true"] { background: var(--st-yel); border-color: var(--st-yel); color: var(--st-on-yel); }
  body.auth .seg-soon .chip { font-size: 12px; padding: 10px 12px; }
  body.auth #role-seg { margin-bottom: 20px; }

  body.auth .btn { border-radius: 0; font: 700 15px / 1 var(--st-mono); }
  body.auth .btn-gold {
    height: 60px; background: var(--st-yel); color: var(--st-on-yel);
    border-color: var(--st-yel); box-shadow: none;
    transition: background .2s, border-color .2s, transform .15s;
  }
  body.auth .btn-gold:hover:not([disabled]) { filter: none; background: var(--st-ink); border-color: var(--st-ink); }
  body.auth .btn:active { transform: translateY(1px); }

  body.auth .msg { border-radius: 0; font-size: 13px; line-height: 1.5; }
  body.auth .signin-notice { border-left: 3px solid var(--st-yel); }
  .reg-closed p { font-size: 15px; line-height: 1.6; margin-bottom: 20px; }
  #view-register.is-closed #register-form, #view-register.is-closed .divider, #view-register.is-closed .social, #view-register.is-closed .card-foot { display: none !important; }
  .if-reg-paused, body.reg-paused .if-reg-open { display: none; }
  body.reg-paused .if-reg-paused { display: inline; }
  .if-reg-paused a { text-decoration: underline; text-underline-offset: 3px; }
  body.auth .divider span { font-size: 11px; }
  body.auth .card-foot { font-size: 13px; font-weight: 400; }
  /* On phones the two links stack, centred, without the dot between them. */
  @media (max-width: 480px) {
    body.auth .card-foot:has(.dot) { display: flex; flex-direction: column; align-items: center; gap: 14px; }
    body.auth .card-foot .dot { display: none; }
  }
  body.auth .card-foot a, body.auth .linkish { font-weight: 500; border-bottom-color: var(--st-rule); }
  body.auth .card-foot a:hover, body.auth .linkish:hover { color: var(--st-yel); border-color: var(--st-yel); }

  body.auth footer, body.newlook footer { border-top-color: var(--st-rule); font-size: 13px; font-weight: 400; }
  body.auth .foot-inner, body.newlook .foot-inner { width: min(var(--page), 100%); max-width: none; padding: 0 clamp(20px, 4.4vw, 68px); }
  body.auth .foot-inner a:hover, body.newlook .foot-inner a:hover { color: var(--st-yel); }

  @media (max-width: 1023px) {
    .st-inner { width: auto; height: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; }
    .st-brand, .st-brand *, .st-nav a { position: static; }
    .st-brand { display: flex; align-items: center; gap: 10px; width: auto; }
    .st-brand .st-mark { position: static; flex: none; height: 44px; width: calc(44px * 38 / 108.5); }
    .st-word { font-size: 40px; }
    .st-tag { margin-left: 6px; font-size: 9px; line-height: 12px; }
    .st-nav { display: flex; align-items: center; gap: 22px; }
    .st-nav a { font-size: 13px; }
    .st-nav .wait { width: auto; height: auto; padding: 10px 14px; font-size: 13px; gap: 8px; border-width: 1px; }
    .st-nav .wait .st-arrow { width: 12px; height: 12px; }

    body.auth .shell { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .aside h2 { font-size: clamp(48px, 13vw, 96px); }
    .aside ul { display: none; }
  }
  @media (max-width: 560px) {
    .st-nav .fans, .st-nav .artists, .st-tag { display: none; }
    .st-brand .st-mark { height: 38px; width: calc(38px * 38 / 108.5); }
    .st-word { font-size: clamp(26px, 8vw, 34px); }
    .st-nav .wait { white-space: nowrap; padding: 9px 10px; font-size: 12px; }
    .st-inner { gap: 10px; }
    .st-nav { gap: 14px; }
    .st-nav .signin { font-size: 12px; white-space: nowrap; }
  }

  /* ================= CREDITS AND PUBLISHING, NEW DESIGN ================= */
  body.newlook .credit-list { display: grid; gap: 8px; }
  body.newlook .credit-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  body.newlook .credit-row.has-role { grid-template-columns: 130px minmax(0, 1fr) minmax(0, 0.8fr) auto; }
  body.newlook .credit-row .arrow-btn { height: 46px; width: 40px; font-size: 18px; }
  body.newlook .credit-row .input-shell select { width: 100%; }
  /* Linked to their subTotem page, or the way to (2026-10-26). */
  body.newlook .credit-link {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
    margin: -2px 0 4px; font: 400 12px / 1.4 var(--st-mono); color: var(--ink-soft);
  }
  body.newlook .credit-link span { color: var(--st-yel); }
  body.newlook .credit-link .link-btn { font-size: 12px; }
  @media (max-width: 560px) {
    body.newlook .credit-row, body.newlook .credit-row.has-role { grid-template-columns: minmax(0, 1fr) auto; }
    body.newlook .credit-row .input-shell:first-child { grid-column: 1 / -1; }
    body.newlook .credit-row.has-role .input-shell:nth-child(2) { grid-column: 1 / -1; }
    body.newlook .credit-row.has-role .input-shell:nth-child(3) { grid-column: 1; }
  }
  body.newlook label .pill { display: inline-block; margin-left: 10px; vertical-align: 1px; color: var(--st-yel); border-color: var(--st-yel); }
  /* Admin -> Reserved names (2026-10-08) */
  body.newlook .rs-sec h4 { font: 700 15px/1.3 var(--st-mono); }
  body.newlook .rs-sec .hint { margin-top: 6px; }
  body.newlook .rs-chip.is-locked { padding-right: 9px; color: var(--ink-soft); }
  body.newlook .rs-chip button { width: 26px; height: 26px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; font: inherit; font-size: 15px; }
  body.newlook .rs-chip button:hover { color: var(--st-yel); }
  body.newlook .rs-add .input-shell { flex: 1; min-width: 0; }
  body.newlook .pill.state-live { background: var(--st-yel); border-color: var(--st-yel); color: var(--st-on-yel); }
  body.newlook .pill.state-scheduled { color: var(--st-yel); border-color: var(--st-yel); }
  body.newlook .pill.state-draft { color: var(--ink-soft); border-style: dashed; }
  body.newlook .pill.state-free { color: var(--st-ink); border-color: var(--st-ink); }
  body.newlook #pay-card, body.newlook #pay-bacs, body.newlook #plan-body .tracklist { gap: 0; border-top: 1px solid var(--st-rule); }
  body.newlook #plan-body .tracklist > .trk { background: none; border: 0; border-bottom: 1px solid var(--st-rule); border-radius: 0; padding: 16px 0; }
  body.newlook #pay-card > .trk, body.newlook #pay-bacs > .trk { background: none; border: 0; border-bottom: 1px solid var(--st-rule); border-radius: 0; padding: 16px 0; }
  body.newlook #pay-default .chip-s:disabled { opacity: 0.4; cursor: default; }
  /* patronage: the four ways unused streams are shared out */
  /* the admin dry run */
  body.newlook .pat-run { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
  body.newlook .pat-run .field { flex: 0 1 200px; margin: 0; }
  /* go live: an online gig (API routes/live.js) */
  body.newlook .gl-when { font: 500 13px / 1.5 var(--st-mono); color: var(--ink-soft); margin: 0 0 14px; }
  body.newlook .gl-status { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px; border: 1px solid var(--st-rule); }
  body.newlook .gl-pic { flex: 1 1 320px; max-width: 520px; aspect-ratio: 16 / 9; background: #050505; position: relative; }
  body.newlook .gl-pic video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #050505; }
  body.newlook .gl-fans { font: 400 13px / 1.55 var(--st-mono); color: var(--ink-soft); margin: 6px 0 0; }
  body.newlook .gl-size { font: 400 12.5px / 1.5 var(--st-mono); color: var(--ink-soft); margin: 6px 0 0; }
  body.newlook .gl-size.is-wrong { color: var(--st-yel); font-weight: 700; }
  body.newlook .gl-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
  body.newlook .gl-sold { font: 400 13px / 1.5 var(--st-mono); color: var(--ink-soft); margin: 12px 0 0; }
  body.newlook .gl-cover-rows { display: grid; gap: 8px; margin-top: 10px; }
  body.newlook .gl-cover-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  body.newlook .gl-cover-row input { flex: 1 1 180px; min-width: 0; font: 400 14px / 1.3 var(--st-mono); color: var(--st-ink); background: transparent; border: 1px solid var(--st-rule); border-radius: 0; padding: 10px 12px; }
  body.newlook .gl-cover-row input:focus { outline: none; border-color: var(--st-yel); }
  body.newlook .gl-cover-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
  body.newlook .gl-cover-error { font: 400 12.5px / 1.5 var(--st-mono); color: var(--st-yel); margin: 8px 0 0; }
  /* the replay: trim, then who can watch (API routes/replays.js) */
  body.newlook .tr-failed { padding: 14px; border: 1.5px solid var(--st-yel); margin-bottom: 18px; }
  body.newlook .tr-failed p { font: 400 13.5px / 1.55 var(--st-mono); margin: 0 0 10px; }
  body.newlook .tr-video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; background: #050505; }
  body.newlook .tr-trim { display: grid; gap: 14px; }
  body.newlook .tr-line { display: block; width: 100%; height: 96px; background: rgba(252, 249, 245, .04); border: 1px solid var(--st-rule); cursor: pointer; }
  body.newlook .tr-io { display: flex; gap: 10px 28px; flex-wrap: wrap; align-items: baseline; margin-bottom: 12px; font: 400 13px / 1.5 var(--st-mono); }
  body.newlook .tr-skip { display: block; margin-top: 12px; font: 400 13px / 1.5 var(--st-mono); }
  body.newlook .tr-now { font-weight: 700; color: var(--st-yel); }
  body.newlook .tr-sel { padding: 12px; border: 1px solid var(--st-rule); }
  body.newlook .tr-sel-acts { display: flex; gap: 8px 16px; flex-wrap: wrap; }
  body.newlook .tr-cover, body.newlook .tr-cut { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--st-rule); font: 400 13px / 1.5 var(--st-mono); }
  body.newlook .tr-cover-at { color: var(--ink-soft); }
  body.newlook .tr-cover-at.is-todo { color: var(--st-yel); }
  body.newlook .tr-edge { display: inline-flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  body.newlook .tr-foot { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding-top: 14px; border-top: 1px solid var(--st-rule); }
  /* the title card */
  body.newlook .tr-card { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--st-rule); display: grid; gap: 16px; max-width: 760px; }
  body.newlook .tr-card .hint,
  body.newlook .tr-card .field { margin: 0; }
  body.newlook .tr-card-pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #050505; border: 1px solid var(--st-rule); }
  body.newlook .tr-card-label { margin: 0 0 8px; font: 500 11px / 1 var(--st-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
  body.newlook .tr-card .field input { width: 100%; font: 400 14px / 1.3 var(--st-mono); color: var(--st-ink); background: transparent; border: 1px solid var(--st-rule); border-radius: 0; padding: 10px 12px; }
  body.newlook .tr-opts { display: grid; gap: 10px; margin: 4px 0 12px; }
  body.newlook .tr-opt { display: flex; gap: 10px; align-items: baseline; font: 400 13.5px / 1.5 var(--st-mono); cursor: pointer; }
  body.newlook .tr-price { display: flex; gap: 6px; align-items: center; margin: 0 0 12px; font: 400 13.5px / 1.5 var(--st-mono); }
  body.newlook .tr-price input { width: 90px; font: 400 14px / 1.3 var(--st-mono); color: var(--st-ink); background: transparent; border: 1px solid var(--st-rule); border-radius: 0; padding: 8px 10px; }
  body.newlook .lc-pin { border-left: 3px solid var(--st-yel); background: rgba(252, 249, 245, .05); padding: 8px 10px; margin: 8px 0; }
  body.newlook .lc-pin-label { font: 500 10px / 1 var(--st-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 4px; }
  body.newlook .lc-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--st-rule); padding: 6px 10px; margin-top: 8px; }
  body.newlook .lc-name { font-weight: 700; color: var(--ink-soft); }
  body.newlook .lc-tag { margin-left: 6px; font: 500 9.5px / 1 var(--st-mono); letter-spacing: .12em; text-transform: uppercase; background: var(--st-yel); color: var(--st-on-yel); padding: 2px 4px 1px; }
  body.newlook .lc-acts { display: inline-flex; gap: 10px; margin-left: 10px; }
  body.newlook .lc-acts .link-btn { font-size: 11.5px; }
  body.newlook .lc-say { display: flex; gap: 8px; margin-top: 10px; }
  body.newlook .lc-say .btn { height: auto; padding: 0 18px; }
  body.newlook .lc-say input { flex: 1; min-width: 0; font: 400 14px / 1.3 var(--st-mono); color: var(--st-ink); background: transparent; border: 1px solid var(--st-rule); border-radius: 0; padding: 10px 12px; }
  /* A hang-out room's questions and Save the chat (2026-11-02). */
  body.newlook .lc-tag.is-q { background: transparent; color: var(--st-yel); border: 1px solid var(--st-yel); }
  body.newlook .gl-computer summary { cursor: pointer; font: 500 11px / 1 var(--st-mono); letter-spacing: .2em; text-transform: uppercase; }
  body.newlook .gl-key { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--st-rule); }
  body.newlook .gl-key-label { flex: 0 0 110px; font: 500 11px / 1.3 var(--st-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
  body.newlook .gl-key code { flex: 1 1 200px; font: 400 13px / 1.4 var(--st-mono); overflow-wrap: anywhere; }
  /* The settings one under another, Save below (Mat, 2026-11-02). */
  body.newlook .adm-live-form .field { width: 100%; margin: 0; }
  /* Stream space: used and left in big figures, and a bar. */
  body.newlook .adm-fig b { font: 400 clamp(30px, 4vw, 40px) / 1 var(--st-condensed); color: var(--st-ink); }
  body.newlook .adm-fig span { font: 500 10.5px / 1.2 var(--st-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
  body.newlook .adm-bar { height: 10px; margin-top: 14px; max-width: 560px; border: 1px solid var(--st-rule); background: rgba(252, 249, 245, .04); }
  body.newlook .adm-bar span { display: block; height: 100%; background: var(--st-yel); }
  body.newlook .adm-watch b { color: var(--st-ink); font-weight: 700; }
  body.newlook .adm-watch-gigs li { font: 400 13px / 1.6 var(--st-mono); color: var(--ink-soft); overflow-wrap: anywhere; }
  body.newlook .adm-live-row p { margin: 0; flex: 1 1 260px; }
  /* tickets, scanning and door staff */
  body.newlook .tk-card { border: 1px solid var(--st-rule); padding: 18px; margin-top: 8px; }
  body.newlook .tk-card h2 { font: 400 clamp(26px, 6vw, 40px) / 1 var(--st-condensed); text-transform: uppercase; margin: 0 0 8px; }
  body.newlook .tk-card p { font: 400 13.5px / 1.55 var(--st-mono); margin: 4px 0 0; color: var(--ink-soft); overflow-wrap: anywhere; }
  body.newlook .tk-card p b { color: var(--st-ink); }
  body.newlook .tk-card .btn { margin-top: 14px; }
  body.newlook .tk-qr { background: #fff; padding: 14px; width: min(260px, 100%); margin: 16px 0 6px; }
  body.newlook .tk-qr svg { display: block; width: 100%; height: auto; }
  body.newlook .tk-state { font: 700 15px / 1.4 var(--st-mono); margin-top: 14px; padding: 10px 12px; border: 1px solid var(--st-rule); }
  body.newlook .tk-state.is-ok { border-color: var(--st-yel); color: var(--st-yel); }
  body.newlook .tk-state.is-bad { border-color: #ff8a7a; color: #ff8a7a; }
  body.newlook .tk-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
  body.newlook .tk-acts .btn { width: auto; padding: 0 22px; height: 52px; }
  body.newlook .door-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 6px 0 4px; }
  body.newlook .door-tools .field { margin: 0; flex: 1 1 170px; }
  /* gig pages, line-ups and the door */
  body.newlook .gig-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 12px; }
  body.newlook .gig-row .field { margin: 0; flex: 1 1 180px; }
  body.newlook .gig-addr { display: flex; align-items: center; border: 1px solid var(--st-rule); background: var(--field-bg); }
  body.newlook .gig-addr:focus-within { border-color: var(--st-yel); }
  body.newlook .gig-addr span { font: 400 14px var(--st-mono); color: var(--ink-faint); padding: 0 0 0 12px; white-space: nowrap; }
  body.newlook .gig-addr input { padding-left: 1px !important; border: 0 !important; background: transparent !important; min-width: 0; }
  body.newlook #gig-body .section-head { margin-top: 38px; }
  body.newlook .poster-picks .is-on { background: var(--st-yel); border-color: var(--st-yel); color: var(--st-on-yel); }
  body.newlook .poster-canvas { display: block; width: 100%; max-width: 420px; height: auto; margin-top: 16px; border: 1px solid var(--st-rule); background: #0C0D0C; }
  body.newlook .gig-act strong { font: 700 14px var(--st-mono); overflow-wrap: anywhere; }
  body.newlook .gig-act .pill { margin-left: 8px; vertical-align: 2px; }
  body.newlook .gig-act .trk-actions { grid-column: 1 / -1; margin-top: 4px; }
  /* An outside act's link to claim their place, sent by the host (2026-10-25). */
  body.newlook .gig-claim textarea { width: 100%; margin: 10px 0; padding: 10px 12px; resize: vertical; font: 400 13px / 1.5 var(--st-mono); color: var(--st-ink); background: transparent; border: 1px solid var(--st-rule); border-radius: 0; }
  /* An outside act's photo and logo (2026-10-24). */
  body.newlook .gig-pics-ok { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font: 400 12.5px var(--st-mono); color: var(--ink-soft); cursor: pointer; }
  body.newlook .gig-pics-ok input { width: 16px; height: 16px; accent-color: var(--st-yel); }
  body.newlook .gig-pic-frame { width: 56px; height: 56px; flex: none; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--st-rule); background: rgba(252, 249, 245, 0.04); font: 400 10.5px var(--st-mono); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
  body.newlook .gig-pic-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
  body.newlook .gig-hits button { display: block; width: 100%; text-align: left; padding: 10px 12px; background: none; border: 0; border-bottom: 1px solid var(--st-rule); color: var(--st-ink); font: 400 13px var(--st-mono); cursor: pointer; }
  body.newlook .gig-hits button:hover { color: var(--st-yel); }
  body.newlook .invite { border: 1px solid var(--st-yel); padding: 14px 16px; margin: 0 0 14px; }
  body.newlook .invite p { font: 400 13px / 1.5 var(--st-mono); margin: 0; }
  body.newlook .invite .trk-actions { margin-top: 10px; }
  body.newlook .door-sum { font: 900 clamp(30px, 4vw, 44px) / 1 var(--st-display); color: var(--st-yel); margin: 6px 0 4px; }
  body.newlook .door-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 4px; background: none; border: 0; border-bottom: 1px solid var(--st-rule); color: var(--st-ink); cursor: pointer; font: 400 14px var(--st-mono); }
  body.newlook .door-row small { display: block; color: var(--ink-faint); font-size: 12px; margin-top: 2px; }
  body.newlook .pat-row { border-top: 1px solid var(--st-rule); padding: 14px 0; }
  body.newlook .see-all-app { margin-top: 12px; font: 500 12.5px var(--st-mono); letter-spacing: 0.08em; text-transform: uppercase; }
  body.newlook .see-all-app a { color: var(--st-yel); }
  body.newlook .see-all-app a:hover { color: var(--st-ink); }
  /* after the sale: messages, tracking, refunds */
  body.newlook .om-thread { margin: 12px 0 0; display: grid; gap: 10px; }
  body.newlook .om-msg { border-left: 2px solid var(--st-rule); padding: 2px 0 2px 12px; font: 400 13px / 1.55 var(--st-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
  body.newlook .om-msg.om-them { border-left-color: var(--st-yel); }
  body.newlook .om-who { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; white-space: normal; }
  body.newlook .om-msg.om-new .om-who { color: var(--st-yel); }
  body.newlook .om-flag { margin-top: 8px; font: 700 12.5px / 1.5 var(--st-mono); color: #ff8a7a; }
  body.newlook .om-line { margin-top: 6px; font: 400 12.5px / 1.5 var(--st-mono); color: var(--ink-soft); overflow-wrap: anywhere; }
  body.newlook .om-line a { color: var(--st-yel); }
  body.newlook .om-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
  body.newlook .om-row .field { margin: 0; flex: 1 1 160px; max-width: 260px; }
  body.newlook .om-details { margin-top: 10px; }
  body.newlook .om-details > summary { cursor: pointer; font: 400 12.5px var(--st-mono); color: var(--ink-soft); width: max-content; border-bottom: 1px solid var(--st-rule); }
  body.newlook .om-details > summary:hover { color: var(--st-yel); border-color: var(--st-yel); }
  body.newlook .om-details[open] > summary { color: var(--st-ink); }
  body.newlook #order-body .section-head { margin-top: 34px; }
  body.newlook .pat-row-head { font: 700 13px var(--st-mono); }
  body.newlook .pat-row-note { margin-top: 4px; font: 400 12px var(--st-mono); color: var(--ink-soft); }
  body.newlook .pat-row-held { margin-top: 6px; font: 400 12px var(--st-mono); color: var(--st-yel); }
  body.newlook .pat-share { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; font: 400 13px var(--st-mono); color: var(--ink-soft); }
  body.newlook .pat-share b { color: var(--st-ink); }
  /* asking something without leaving the design */
  .ask {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(12, 13, 12, 0.72);
  }
  .ask[hidden] { display: none; }
  .ask-choices {
    display: flex; flex-wrap: wrap; gap: 18px 16px; margin: 18px 0 8px;
    max-height: min(52vh, 420px); overflow-y: auto; padding: 4px 2px;
  }
  .ask-choices .fan-pl { cursor: pointer; }
  .ask-panel {
    width: min(420px, 100%); padding: 24px;
    background: #0C0D0C; border: 1px solid rgba(252, 249, 245, 0.28);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  }
  .ask-panel h2 {
    font: 400 clamp(24px, 3vw, 32px) / 1 'Anton', Impact, sans-serif;
    text-transform: uppercase; color: #FCF9F5;
  }
  .ask-panel p {
    margin-top: 10px; font: 400 13.5px / 1.6 'IBM Plex Mono', ui-monospace, monospace;
    color: rgba(252, 249, 245, 0.72);
  }
  .ask-panel .field { margin-top: 18px; }
  .ask-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
  /* A tick the answer needs first (askDialog's `check`), e.g. agreeing that a
     plan once used isn't refunded. */
  .ask-check { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.45; cursor: pointer; }
  .ask-check[hidden] { display: none; }
  /* Settings -> Plan: a cheaper plan booked for later, in faded yellow. */
  .plan-booked { margin: 18px 0 28px; padding: 14px 16px; border: 1px solid rgba(234, 251, 23, 0.45); background: rgba(234, 251, 23, 0.08); }
  .plan-booked p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
  .plan-booked .plan-booked-head { font-weight: 700; color: #EAFB17; }
  .ask-check input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: #EAFB17; }
  .ask-actions .btn { height: 44px; padding-inline: 22px; }
  .ask-actions .btn-small { padding-inline: 16px; }
  /* A delete or a removal (2026-10-26): the warning red the Delete link that
     opened it has, a square outline that fills when it's pointed at, rather
     than a pink block. */
  .ask-panel.is-danger .btn-gold {
    background: transparent; color: var(--danger, #FF8A7A); border: 1px solid var(--danger, #FF8A7A); border-radius: 0; box-shadow: none;
  }
  .ask-panel.is-danger .btn-gold:hover:not(:disabled) { background: var(--danger, #FF8A7A); color: #0C0D0C; }

  /* Cropping a picture or banner (2026-11-14, app.js cropImage()): the
     dialog's look, wide for a banner. The frame is the shape pages show it
     in, its height set from its width by cropImage(); the banner's has the
     page's fade (src/index.js .banner::after) and, by the view, the name or
     the picture where they sit over it. */
  #crop { z-index: 81; }   /* over any other dialog it was opened from */
  .crop-panel { width: min(760px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
  .crop-panel.is-square, .crop-panel.is-tall { width: min(440px, 100%); }
  .crop-panel.is-tall .crop-frame { margin-inline: auto; }   /* its width from cropLayout() */
  .crop-views { display: flex; margin-top: 16px; border-bottom: 1px solid rgba(252, 249, 245, 0.28); }
  .crop-views[hidden] { display: none; }
  .crop-views button {
    background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px 9px;
    font: 500 11.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(252, 249, 245, 0.72); cursor: pointer;
  }
  .crop-views button:first-child { padding-left: 0; }
  .crop-views button:hover { color: #EAFB17; }
  .crop-views button[aria-pressed="true"] { color: #FCF9F5; border-bottom-color: #EAFB17; }
  .crop-frame {
    position: relative; margin-top: 18px; overflow: hidden; background: #1a1b1a;
    cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
    outline: 1px solid rgba(252, 249, 245, 0.28);
  }
  .crop-frame:active { cursor: grabbing; }
  .crop-frame:focus-visible { outline: 2px solid #EAFB17; outline-offset: 3px; }
  .crop-panel.is-square .crop-frame { width: min(320px, 100%); margin-inline: auto; }
  .crop-panel.is-avatar .crop-frame { outline: 3px solid #EAFB17; }   /* the page's border round the picture; a cover has none */
  .crop-panel.is-avatar .crop-frame:focus-visible { box-shadow: 0 0 0 9px rgba(234, 251, 23, 0.3); }
  .crop-frame img {
    position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0;
    pointer-events: none; user-select: none; -webkit-user-drag: none;
  }
  .crop-guide {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 13, 12, 0.1), rgba(12, 13, 12, 0.92));
  }
  .crop-guide[hidden] { display: none; }
  .crop-name {
    position: absolute; left: 4.4%; top: 84%; white-space: nowrap;
    font: 900 1em / 0.86 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -0.05em; color: #FCF9F5;
  }
  .crop-pic {
    position: absolute; left: 5.1%; top: 60.6%; width: 22.6%; aspect-ratio: 1;
    border: 2px solid #EAFB17; background: #0C0D0C center / cover no-repeat;
  }
  .crop-guide[data-view="wide"] .crop-pic, .crop-guide[data-view="phone"] .crop-name { display: none; }
  .crop-zoom {
    display: flex; align-items: center; gap: 14px; margin-top: 18px;
    font: 500 11px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(252, 249, 245, 0.72);
  }
  .crop-zoom input { flex: 1; min-width: 0; accent-color: #EAFB17; }
  .crop-small { color: #EAFB17 !important; visibility: hidden; }
  .crop-small.is-on { visibility: visible; }
  .crop-panel .crop-other { margin-right: auto; }
  /* Logos and photos kept as they're uploaded: the whole picture, its width
     set by freeLayout(), with a box to trim it to; outside the box dimmed. */
  .crop-shapes[hidden], .crop-zoom[hidden], .crop-box[hidden] { display: none; }
  .crop-shapes { flex-wrap: wrap; column-gap: 20px; }
  .crop-shapes button, .crop-shapes button:first-child { padding-inline: 0; }
  .crop-panel.is-free .crop-frame { margin-inline: auto; cursor: crosshair; background: repeating-conic-gradient(#202120 0 25%, #161716 0 50%) 0 0 / 16px 16px; }
  .crop-panel.is-free .crop-frame:active { cursor: crosshair; }
  .crop-box {
    position: absolute; cursor: move; box-sizing: border-box;
    box-shadow: inset 0 0 0 2px #EAFB17, 0 0 0 100vmax rgba(12, 13, 12, 0.62);
    background:
      linear-gradient(rgba(234, 251, 23, 0.35), rgba(234, 251, 23, 0.35)) 33.333% 0 / 1px 100% no-repeat,
      linear-gradient(rgba(234, 251, 23, 0.35), rgba(234, 251, 23, 0.35)) 66.667% 0 / 1px 100% no-repeat,
      linear-gradient(rgba(234, 251, 23, 0.35), rgba(234, 251, 23, 0.35)) 0 33.333% / 100% 1px no-repeat,
      linear-gradient(rgba(234, 251, 23, 0.35), rgba(234, 251, 23, 0.35)) 0 66.667% / 100% 1px no-repeat;
  }
  /* Handles sit just inside the box, as the frame cuts off anything past
     the picture's edge, where the box starts. */
  .crop-h { position: absolute; width: 16px; height: 16px; background: #EAFB17; border: 2px solid #0C0D0C; box-sizing: border-box; }
  .crop-h::before { content: ""; position: absolute; inset: -10px; }   /* a bigger target than it looks */
  .crop-h[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; }
  .crop-h[data-h="n"] { left: 50%; top: 0; margin-left: -8px; cursor: ns-resize; }
  .crop-h[data-h="ne"] { right: 0; top: 0; cursor: nesw-resize; }
  .crop-h[data-h="e"] { right: 0; top: 50%; margin-top: -8px; cursor: ew-resize; }
  .crop-h[data-h="se"] { right: 0; bottom: 0; cursor: nwse-resize; }
  .crop-h[data-h="s"] { left: 50%; bottom: 0; margin-left: -8px; cursor: ns-resize; }
  .crop-h[data-h="sw"] { left: 0; bottom: 0; cursor: nesw-resize; }
  .crop-h[data-h="w"] { left: 0; top: 50%; margin-top: -8px; cursor: ew-resize; }
  /* With a shape chosen, only the corners: an edge alone would change it. */
  .crop-panel.is-locked .crop-h[data-h="n"], .crop-panel.is-locked .crop-h[data-h="e"],
  .crop-panel.is-locked .crop-h[data-h="s"], .crop-panel.is-locked .crop-h[data-h="w"] { display: none; }
  /* Crop on a gallery picture (beside its Remove) and on a merch photo's
     thumbnail (top left, its × top right): yellow when pointed at, not the
     warning red they'd take from the buttons they sit beside. */
  body.newlook .fan-drop.ph-crop:hover { color: var(--st-yel); }
  .thumb button.thumb-crop { right: auto; left: 3px; display: grid; place-items: center; padding: 0; }
  .thumb button.thumb-crop svg { width: 11px; height: 11px; }
  body.newlook .thumb button.thumb-crop:hover { background: var(--st-yel); color: var(--st-bg); }
  /* The Edit-mode hint over the banner and picture says Change or crop
     with one there, Add with none. */
  .page-banner:has(> img) .if-none, .page-banner:not(:has(> img)) .if-img,
  .page-avatar:has(> img) .if-none, .page-avatar:not(:has(> img)) .if-img { display: none; }

  /* Setting up your page, and Help (2026-10-26, the first onboarding): the
     dialog's look, wider, with a list of rules. */
  .guide-panel { position: relative; width: min(620px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 28px; }
  .guide-panel h2 { padding-right: 40px; }
  .guide-kicker {
    margin: 0 0 8px !important; font: 500 11px 'IBM Plex Mono', ui-monospace, monospace !important;
    letter-spacing: 0.18em; text-transform: uppercase; color: #EAFB17 !important;
  }
  .guide-x {
    position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center;
    background: transparent; border: 1px solid rgba(252, 249, 245, 0.28); border-radius: 0; color: #FCF9F5; cursor: pointer;
  }
  .guide-x svg { width: 16px; height: 16px; }
  .guide-x:hover, .guide-x:focus-visible { border-color: #EAFB17; color: #EAFB17; outline: none; }
  .guide-h {
    margin: 22px 0 0; font: 500 11px 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: 0.18em; text-transform: uppercase; color: rgba(252, 249, 245, 0.6);
  }
  .guide-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid rgba(252, 249, 245, 0.18); }
  .guide-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(252, 249, 245, 0.18); }
  .guide-tick { flex: none; width: 18px; height: 18px; border: 1.5px solid rgba(252, 249, 245, 0.6); }
  .guide-row.is-done .guide-tick {
    background: #EAFB17 no-repeat center / 12px 12px; border-color: #EAFB17;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%230C0D0C' stroke-width='2'/%3E%3C/svg%3E");
  }
  .guide-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .guide-text b { font: 700 14px 'IBM Plex Mono', ui-monospace, monospace; color: #FCF9F5; }
  .guide-text span { font: 400 12.5px / 1.5 'IBM Plex Mono', ui-monospace, monospace; color: rgba(252, 249, 245, 0.65); }
  .guide-row.is-done .guide-text b { color: rgba(252, 249, 245, 0.75); }
  .guide-row > button { flex: none; }
  .guide-actions { align-items: center; flex-wrap: wrap; }
  .guide-actions .link-btn { margin-right: auto; }
  .help-topics { margin-top: 18px; border-top: 1px solid rgba(252, 249, 245, 0.18); }
  .help-topic { border-bottom: 1px solid rgba(252, 249, 245, 0.18); }
  .help-topic summary {
    list-style: none; cursor: pointer; padding: 14px 0; display: flex; justify-content: space-between; gap: 12px;
    font: 700 13px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #FCF9F5;
  }
  .help-topic summary::-webkit-details-marker { display: none; }
  .help-topic summary::after { content: "+"; color: #EAFB17; }
  .help-topic[open] summary::after { content: "\2212"; }
  .help-topic summary:hover, .help-topic summary:focus-visible { color: #EAFB17; outline: none; }
  .help-topic p { margin: 0 0 12px !important; }
  .help-topic p:last-child { margin-bottom: 18px !important; }
  .help-more { margin-top: 16px !important; }
  /* The bar at the top of the artist's own page while it's being set up. */
  .setup-bar {
    display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 10px 0 10px 14px;
    border-left: 3px solid #EAFB17; font: 400 13px / 1.45 'IBM Plex Mono', ui-monospace, monospace; color: #FCF9F5;
  }
  .setup-bar[hidden] { display: none; }
  .setup-bar p { flex: 1; margin: 0; }
  .setup-bar b { color: #EAFB17; font-weight: 700; }
  /* On a screen opened from "Set up your page": the way back to the list,
     in sight however far down the form you've got (Mat, 2026-11-08). */
  .setup-return {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px;
    margin-bottom: 22px; padding: 8px 8px 8px 14px; background: #EAFB17; color: #0C0D0C;
    font: 500 13px / 1.4 'IBM Plex Mono', ui-monospace, monospace;
  }
  .setup-return[hidden] { display: none; }
  .setup-return p { margin: 0; color: #0C0D0C; }
  .setup-return button {
    flex: none; padding: 10px 14px; background: #0C0D0C; color: #FCF9F5; border: 0; border-radius: 0; cursor: pointer;
    font: 700 13px / 1.2 'IBM Plex Mono', ui-monospace, monospace;
  }
  .setup-return button:hover { background: #2B2C2B; }
  /* New on subTotem (2026-11-12, drawNewOn() in app.js): the day's changes at
     the top of each home, a yellow rule down its side, closed with ×. */
  .new-on {
    position: relative; margin: 0 0 24px; padding: 12px 48px 12px 16px; border-left: 3px solid #EAFB17;
    background: rgba(252, 249, 245, 0.04); color: #FCF9F5; font: 400 13px / 1.55 'IBM Plex Mono', ui-monospace, monospace;
  }
  .new-on[hidden] { display: none; }
  .new-on-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; }
  .new-on-head b { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #EAFB17; }
  .new-on-head span { font-size: 12px; color: rgba(252, 249, 245, 0.55); }
  .new-on-lines { margin: 0; padding: 0 0 0 18px; }
  .new-on-lines li { margin: 3px 0; }
  .new-on-all { margin-top: 8px; padding: 0; border: 0; background: none; color: #EAFB17; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .new-on-x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; background: none; color: #FCF9F5; font: 400 22px / 1 'IBM Plex Mono', ui-monospace, monospace; cursor: pointer; }
  .new-on-x:hover, .new-on-x:focus-visible { color: #EAFB17; }
  /* "Saved" beside a photo's caption, instead of a message at the top of the
     screen that scrolled the page up to show it (Mat, 2026-11-08). */
  .cap-said { display: block; min-height: 18px; margin-top: 4px; font: 400 12px / 1.4 'IBM Plex Mono', ui-monospace, monospace; color: #EAFB17; }
  .setup-x {
    flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
    background: transparent; border: 1px solid rgba(252, 249, 245, 0.28); border-radius: 0; color: #FCF9F5; cursor: pointer;
  }
  .setup-x svg { width: 14px; height: 14px; }
  .setup-x:hover, .setup-x:focus-visible { border-color: #EAFB17; color: #EAFB17; outline: none; }
  @media (max-width: 600px) {
    .guide-panel { padding: 22px 18px; }
    .guide-row { flex-wrap: wrap; row-gap: 10px; }
    .guide-text { flex-basis: calc(100% - 32px); }
    .guide-row > button { margin-left: 32px; }
  }
  /* Share (2026-10-26): the link, a code if wanted, and the ways to send it. */
  .share-outs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
  .share-outs .btn { height: 46px; padding-inline: 20px; }
  .share-outs .btn-small { display: inline-flex; align-items: center; height: 46px; padding-inline: 16px; text-decoration: none; }
  #share-link { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; }
  /* Discount codes on Selling and orders. */
  body.newlook .code-list { border-top: 1px solid var(--st-rule); margin-top: 8px; }
  body.newlook .code-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--st-rule); }
  body.newlook .code-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  body.newlook .code-name { font: 700 15px var(--st-mono); letter-spacing: 0.06em; color: var(--st-yel); }
  body.newlook .code-words { font: 400 13.5px var(--st-mono); color: var(--st-ink); }
  body.newlook .code-meta { font: 400 12px var(--st-mono); color: var(--ink-soft); }
  body.newlook .code-row:not(.is-on) .code-name { color: var(--ink-soft); }
  body.newlook .code-form { margin-top: 22px; }
  body.newlook .code-form > .field, body.newlook .code-form > .qrow { margin-top: 14px !important; }

  /* Safety (2026-10-26): help for a fan who may be at risk, and Admin's queue. */
  .safety-help { margin: 12px 0 16px; padding: 14px 16px; border: 1px solid #EAFB17; border-left-width: 4px; background: rgba(234, 251, 23, 0.06); font: 400 13.5px / 1.55 'IBM Plex Mono', ui-monospace, monospace; color: #FCF9F5; }
  .safety-help[hidden] { display: none; }
  .safety-help strong { display: block; margin-bottom: 6px; color: #EAFB17; }
  .safety-help p { margin: 4px 0 0; }
  .safety-help a { color: #FCF9F5; text-decoration: underline; }
  body.newlook .safety-try textarea { width: 100%; margin: 8px 0; background: var(--field-bg); color: var(--st-ink); border: 1px solid var(--st-rule); padding: 10px; font: 400 13px var(--st-mono); }
  body.newlook .safety-msg { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--st-rule); font: 400 13px / 1.5 var(--st-mono); color: var(--ink-soft); white-space: pre-wrap; }
  body.newlook .safety-msg b { color: var(--st-ink); }
  body.newlook .safety-done summary { cursor: pointer; font: 700 13px var(--st-mono); }

  /* Help in the footer: signed in only. */
  .foot-help, .foot-help-sep { display: none; }
  body.newlook .foot-help, body.newlook .foot-help-sep { display: inline; }

  /* The order of the page's sections (2026-10-26): numbered rules, each with
     a handle to drag and two arrows, in a panel that scrolls on a short screen. */
  .order-panel { width: min(520px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
  .order-list {
    list-style: none; margin: 18px 0 0; padding: 0; overflow-y: auto; min-height: 0;
    border-top: 1px solid rgba(252, 249, 245, 0.18); counter-reset: ord;
  }
  .order-row {
    display: flex; align-items: center; gap: 10px; padding: 7px 0;
    border-bottom: 1px solid rgba(252, 249, 245, 0.18); background: #0C0D0C; counter-increment: ord;
  }
  .order-row::before {
    content: counter(ord); flex: none; width: 20px; text-align: right;
    font: 500 12px 'IBM Plex Mono', ui-monospace, monospace; color: rgba(252, 249, 245, 0.5);
  }
  .order-row.is-dragging { position: relative; z-index: 1; outline: 1px solid #EAFB17; outline-offset: -1px; }
  .order-row.is-dragging .order-grip { cursor: grabbing; }
  .order-grip {
    flex: none; width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
    background: transparent; border: 1px solid rgba(252, 249, 245, 0.28); border-radius: 0;
    color: #FCF9F5; cursor: grab; touch-action: none;
  }
  .order-grip svg { width: 18px; height: 18px; }
  .order-grip:hover, .order-grip:focus-visible { border-color: #EAFB17; color: #EAFB17; outline: none; }
  .order-name {
    flex: 1; min-width: 0; font: 700 13px 'IBM Plex Mono', ui-monospace, monospace;
    letter-spacing: 0.08em; text-transform: uppercase; color: #FCF9F5;
  }
  .order-row .arrow-btn { flex: none; width: 34px; height: 34px; }
  /* An EP's or album's tracks, dragged by the dots at the start of the row. */
  .drag-grip {
    flex: none; width: 26px; height: 30px; display: grid; place-items: center; padding: 0; margin-right: -4px;
    background: transparent; border: 0; color: rgba(252, 249, 245, 0.45); cursor: grab; touch-action: none;
  }
  .drag-grip svg { width: 16px; height: 16px; }
  .drag-grip:hover { color: #EAFB17; }
  .rel-tracks li.is-dragging { position: relative; z-index: 1; background: #0C0D0C; outline: 1px solid #EAFB17; outline-offset: -1px; }
  .rel-tracks li.is-dragging .drag-grip { cursor: grabbing; color: #EAFB17; }
  .order-panel .msg { margin-top: 14px; }
  .order-actions { align-items: center; flex-wrap: wrap; }
  .order-actions .link-btn { margin-right: auto; }
  body.newlook .edit-banner-note .link-btn { margin-left: 6px; }
  /* "Your page leads with", on a producer's page (2026-11-05) */
  .is-editing .edit-banner-note[hidden] { display: none; }
  body.newlook .lead-pick {
    margin: 4px 0 0 8px; padding: 6px 12px; border: 1.5px solid var(--st-rule); border-radius: 0;
    background: none; color: var(--st-ink); font: 500 12.5px var(--st-mono); cursor: pointer;
  }
  body.newlook .lead-pick:hover { border-color: var(--st-ink); }
  body.newlook .lead-pick[aria-pressed="true"] { background: var(--st-yel); color: var(--st-on-yel); border-color: var(--st-yel); cursor: default; }

  /* Send feedback (2026-10-12): the box, its list in Settings and Admin. */
  .fb-panel { width: min(600px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
  .fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .fb-kinds button {
    padding: 9px 12px; cursor: pointer; background: none; color: #FCF9F5;
    border: 1px solid rgba(252, 249, 245, 0.28); font: 400 12.5px 'IBM Plex Mono', ui-monospace, monospace;
  }
  .fb-kinds button:hover { border-color: #FCF9F5; }
  .fb-kinds button[aria-checked="true"] { background: #EAFB17; border-color: #EAFB17; color: #0C0D0C; }
  .fb-panel textarea { min-height: 130px; border-radius: 0; }
  .fb-shot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; font: 400 12.5px 'IBM Plex Mono', ui-monospace, monospace; color: rgba(252, 249, 245, 0.72); }
  .fb-shot label.btn-small { cursor: pointer; }
  .fb-auto { margin-top: 18px; padding: 12px 14px; border: 1px solid rgba(252, 249, 245, 0.18); }
  .fb-auto h3 { font: 500 11px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #EAFB17; }
  .fb-auto dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; margin: 10px 0 0; font: 400 12px / 1.45 'IBM Plex Mono', ui-monospace, monospace; }
  .fb-auto dt { color: rgba(252, 249, 245, 0.55); }
  .fb-auto dd { margin: 0; color: #FCF9F5; overflow-wrap: anywhere; }
  .fb-panel .fb-auto p { margin-top: 10px; font-size: 12px; }
  .fb-panel .msg { margin-top: 14px; }
  .fb-tag {
    display: inline-block; padding: 4px 8px 3px; white-space: nowrap;
    font: 500 10.5px / 1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid rgba(252, 249, 245, 0.35); color: #FCF9F5;
  }
  .fb-tag.s-investigating { border-color: #EAFB17; color: #EAFB17; }
  .fb-tag.s-fixed { border-color: #EAFB17; color: #EAFB17; background: rgba(234, 251, 23, 0.12); }
  .fb-tag.s-rolled_out { border-color: #EAFB17; color: #0C0D0C; background: #EAFB17; }
  .fb-tag.s-closed { color: rgba(252, 249, 245, 0.55); border-color: rgba(252, 249, 245, 0.2); }
  .fb-list { border-top: 1px solid var(--st-rule, rgba(252, 249, 245, 0.28)); margin-top: 18px; }
  .fb-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; width: 100%;
    padding: 14px 0; text-align: left; cursor: pointer; background: none; border: 0;
    border-bottom: 1px solid var(--st-rule, rgba(252, 249, 245, 0.28)); color: var(--st-ink, #FCF9F5);
  }
  .fb-row:hover .fb-first { color: var(--st-yel, #EAFB17); }
  .fb-first { font: 700 13.5px / 1.4 var(--st-mono, 'IBM Plex Mono', monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fb-meta { grid-column: 1; font: 400 12px var(--st-mono, 'IBM Plex Mono', monospace); color: var(--ink-faint); }
  .fb-row .fb-tag { grid-column: 2; grid-row: 1 / 3; }
  .fb-one { margin-top: 18px; }
  .fb-one .fb-body { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--st-rule, rgba(252, 249, 245, 0.28)); white-space: pre-wrap; overflow-wrap: anywhere; font: 400 14px / 1.6 var(--st-mono, 'IBM Plex Mono', monospace); }
  .fb-one img.fb-img { display: block; max-width: 100%; max-height: 520px; margin-top: 14px; border: 1px solid var(--st-rule, rgba(252, 249, 245, 0.28)); }
  .fb-note { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(234, 251, 23, 0.45); background: rgba(234, 251, 23, 0.08); font: 400 13.5px / 1.55 var(--st-mono, 'IBM Plex Mono', monospace); }
  .fb-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
  .fb-steps span { font: 500 10.5px var(--st-mono, 'IBM Plex Mono', monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 4px 0; }
  .fb-steps span.is-on { color: var(--st-yel, #EAFB17); }
  .fb-steps span + span::before { content: "\2192"; margin-right: 6px; color: var(--ink-faint); }
  .fb-filter button { padding: 7px 10px; cursor: pointer; background: none; color: var(--st-ink, #FCF9F5); border: 1px solid var(--st-rule, rgba(252, 249, 245, 0.28)); font: 400 12px var(--st-mono, 'IBM Plex Mono', monospace); }
  .fb-filter button.is-on { background: #EAFB17; color: #0C0D0C; border-color: #EAFB17; }
  #feedback-one { margin-top: 14px; }
  .fb-facts button.link { color: var(--st-yel, #EAFB17); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
  .foot-fb { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: #EAFB17; }
  .foot-fb:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* the ⋯ on a saved playlist, and the little menu it opens */
  .fan-pl-more {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12, 13, 12, 0.72); color: var(--st-ink, #FCF9F5);
    font-size: 15px; line-height: 1; cursor: pointer;
    opacity: 0; transition: opacity .15s;
  }
  .fan-pl:hover .fan-pl-more, .fan-pl:focus-within .fan-pl-more, .fan-pl-more:focus { opacity: 1; }
  @media (hover: none) { .fan-pl-more { opacity: 1; } }

  .fan-menu {
    position: absolute; z-index: 60; min-width: 172px;
    display: flex; flex-direction: column;
    background: #0C0D0C; border: 1px solid rgba(252, 249, 245, 0.28);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
  .fan-menu button {
    padding: 12px 16px; text-align: left; cursor: pointer;
    background: none; border: 0; color: #FCF9F5;
    font: 400 13px 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  }
  .fan-menu button:hover, .fan-menu button:focus { background: rgba(252, 249, 245, 0.08); outline: none; }
  .fan-menu button.is-danger { color: #ff8c8c; }

  body.newlook .link-row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid var(--st-rule);
  }
  body.newlook .link-what { min-width: 0; }
  body.newlook .link-title { font: 700 13px var(--st-mono); }
  body.newlook .link-url {
    display: block; margin-top: 4px; font: 400 12.5px var(--st-mono); color: var(--st-yel);
    overflow-wrap: anywhere;
  }
  body.newlook a.link-url { text-decoration: none; }
  body.newlook a.link-url:hover, body.newlook a.link-url:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
  body.newlook .feed { border: 1px solid var(--st-rule); }
  body.newlook .feed-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--st-rule);
  }
  body.newlook .feed-heading { font: 400 clamp(22px, 2.2vw, 30px) / 1 var(--st-condensed); text-transform: uppercase; }
  body.newlook .feed-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--st-rule); cursor: pointer;
  }
  body.newlook .feed-item:hover, body.newlook .feed-item:focus-visible { background: rgba(252, 249, 245, 0.04); outline: none; }
  body.newlook .feed-item.is-pinned { background: rgba(234, 251, 23, 0.06); border-left: 3px solid var(--st-yel); }
  body.newlook .feed-text { flex: 1; min-width: 0; }
  body.newlook .feed-meta {
    font: 500 10.5px var(--st-mono); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  body.newlook .feed-item.is-pinned .feed-meta { color: var(--st-yel); }
  body.newlook .feed-title { margin-top: 4px; font: 700 13.5px / 1.4 var(--st-mono); overflow-wrap: anywhere; }
  body.newlook .feed-body { margin-top: 8px; font: 400 13px / 1.6 var(--st-mono); color: var(--ink-soft); white-space: pre-wrap; }
  body.newlook .feed-x {
    flex: none; width: 28px; height: 28px; margin: -4px -6px 0 0;
    background: none; border: 0; cursor: pointer; color: var(--ink-soft);
    font-size: 18px; line-height: 1;
  }
  body.newlook .feed-x:hover { color: var(--st-ink); }
  body.newlook .feed .sec-empty { padding: 16px; }
  body.newlook .feed-hint { padding: 12px 16px; font: 400 12px var(--st-mono); color: var(--ink-soft); }
  body.newlook .entry-buy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
  body.newlook .entry-size {
    padding: 12px 14px; background: none; color: var(--st-ink);
    border: 1px solid var(--st-rule); font: 400 13px var(--st-mono);
  }
  body.newlook .entry-buy .btn { height: 46px; padding-inline: 22px; }
  body.newlook .entry-soldout {
    padding: 11px 16px; border: 1px solid var(--st-rule);
    font: 500 11px var(--st-mono); letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  body.newlook .entry-basket { flex: 1 0 100%; font: 400 12.5px var(--st-mono); color: var(--ink-soft); }
  body.newlook .basket-line {
    display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--st-rule);
  }
  body.newlook .basket-line-title { font: 700 13px var(--st-mono); }
  body.newlook .basket-line > b { font: 700 14px var(--st-mono); min-width: 64px; text-align: right; }
  body.newlook .basket-qty { display: flex; align-items: center; gap: 8px; font: 400 13px var(--st-mono); }
  body.newlook .basket-qty .btn-small { min-width: 34px; }
  body.newlook .basket-total {
    display: flex; justify-content: space-between; gap: 16px; margin-top: 10px;
    padding-top: 10px; border-top: 1px solid var(--st-rule); font: 700 15px var(--st-mono);
  }
  body.newlook .basket-total b { color: var(--st-yel); }
  /* A discount code (2026-10-26): what it took off, or why not. */
  body.newlook .basket-code { margin-top: 22px; }
  body.newlook #basket-code-said.is-on { color: var(--st-yel); }
  body.newlook #basket-code-said.is-off { color: var(--danger); }
  body.newlook #basket-code-in { text-transform: uppercase; letter-spacing: 0.06em; }
  /* Press kits */
  body.newlook .ew-bar span { display: block; height: 100%; width: 0; background: var(--st-yel); transition: width .25s; }
  body.newlook .kit-picks label, body.newlook .kit-secs label { display: flex; align-items: center; gap: 10px; padding: 8px 0; font: 400 13px var(--st-mono); cursor: pointer; }
  body.newlook .kit-picks input, body.newlook .kit-secs input { accent-color: var(--st-yel); width: 16px; height: 16px; }
  body.newlook .kit-quote input { background: none; border: 1px solid var(--st-rule); border-radius: 0; color: var(--st-ink); padding: 10px 12px; font: 400 13px var(--st-mono); min-width: 0; }
  body.newlook .kit-file a { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--st-ink); }
  body.newlook .kit-file img { width: 44px; height: 44px; object-fit: cover; }
  /* "Outside the UK?" under the Pay button: folded away until asked for. */
  body.newlook .basket-abroad { margin-top: 28px; border-top: 1px solid var(--st-rule); padding-top: 14px; }
  body.newlook .basket-abroad summary { cursor: pointer; font: 700 13px var(--st-mono); list-style: none; }
  body.newlook .basket-abroad summary::-webkit-details-marker { display: none; }
  body.newlook .basket-abroad summary::after { content: " +"; }
  body.newlook .basket-abroad[open] summary::after { content: " \2212"; }
  body.newlook .basket-abroad select { width: 100%; background: transparent; color: inherit; border: 0; font: inherit; padding: 12px 0; }
  body.newlook .basket-abroad select option { color: #0C0D0C; }
  body.newlook #basket-paid-back { margin-top: 24px; text-decoration: none; text-align: center; }
  body.newlook .variant-row { display: grid; grid-template-columns: 1fr 90px auto; gap: 8px; margin-bottom: 6px; }
  body.newlook .variant-row input {
    background: none; border: 1px solid var(--st-rule); color: var(--st-ink);
    padding: 10px 12px; font: 400 13px var(--st-mono);
  }
  body.newlook .variant-row input:focus { outline: 2px solid var(--st-yel); outline-offset: -2px; }
  /* A T-shirt's sizes, ticked, each with how many (Mat, 2026-11-08). */
  body.newlook .size-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 18px; margin: 10px 0; }
  body.newlook .size-tick { display: flex; align-items: center; gap: 10px; min-height: 42px; }
  body.newlook .size-tick .check { flex: 0 0 62px; margin: 0; }
  body.newlook .size-tick input[type="text"] {
    flex: 1; min-width: 0; background: none; border: 1px solid var(--st-rule); color: var(--st-ink);
    padding: 10px 12px; font: 400 13px var(--st-mono);
  }
  body.newlook .size-tick input[type="text"]:focus { outline: 2px solid var(--st-yel); outline-offset: -2px; }
  body.newlook .field-check { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  body.newlook .field-check label { margin: 0; }
  body.newlook .field-check .hint { flex: 1 0 100%; margin: 0; }
  body.newlook .coll-check { width: 18px; height: 18px; accent-color: var(--st-yel); }
  body.newlook .input-prefix { padding-left: 12px; color: var(--ink-soft); font: 400 13px var(--st-mono); }
  body.newlook .pat-modes { display: grid; gap: 10px; margin: 18px 0 8px; }
  body.newlook .pat-mode {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 14px 16px; background: none; color: var(--st-ink);
    border: 1px solid var(--st-rule); font-family: var(--st-mono);
  }
  body.newlook .pat-mode strong { display: block; font: 700 14px var(--st-mono); }
  body.newlook .pat-mode span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
  body.newlook .pat-mode.is-on { border-color: var(--st-yel); background: rgba(234, 251, 23, 0.07); }
  body.newlook .pat-mode.is-on strong { color: var(--st-yel); }
  body.newlook .pat-chosen { display: grid; gap: 6px; margin-bottom: 14px; }
  body.newlook .pat-pick {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; border: 1px solid var(--st-rule); font: 400 13px var(--st-mono);
  }
  body.newlook .pat-results { display: grid; gap: 4px; margin-top: 8px; }
  body.newlook .pat-result {
    text-align: left; padding: 10px 14px; cursor: pointer;
    background: none; color: var(--st-ink); border: 1px solid var(--st-rule);
    font: 400 13px var(--st-mono);
  }
  body.newlook .pat-result:hover:not(:disabled) { border-color: var(--st-yel); color: var(--st-yel); }
  body.newlook .pat-result:disabled { opacity: 0.45; cursor: default; }
  body.newlook .prs { margin: 18px 0 6px; }
  body.newlook .prs-why { margin-top: 12px; line-height: 1.6; }
  body.newlook .original-note { margin-top: 6px; font: 400 12px var(--st-mono); color: var(--ink-soft); }
  body.newlook .pill.hidden-tag { color: var(--ink-soft); border-style: dashed; margin-left: 6px; vertical-align: 2px; }
  body.newlook .vid-row.is-hidden .vid-thumb { opacity: 0.45; }
  body.newlook .vid-main .pill.hidden-tag { margin: 6px 0 0; display: inline-block; }
  body.newlook .tier-note { color: var(--st-ink); border-left: 2px solid var(--st-yel); padding-left: 12px; }
  body.newlook .rel-state { font: 500 10px var(--st-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
  body.newlook .rel-state.is-live { color: var(--st-yel); }
  body.newlook .ready-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 400 13px var(--st-mono); }
  body.newlook .ready-list li::before { content: "\2713  "; color: var(--ok); }
  body.newlook .ready-list li.is-no::before { content: "\00d7  "; color: var(--danger); }
  /* Ticking tracks for an EP or album (2026-10-26): a rule under each, the
     whole row to press. */
  body.newlook .pick-list { border-top: 1px solid var(--st-rule); margin: 8px 0 4px; }
  body.newlook .pick-list .check {
    gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--st-rule);
    font: 400 14px / 1.4 var(--st-mono); color: var(--st-ink); cursor: pointer;
  }
  body.newlook .pick-list .check:hover { color: var(--st-yel); }
  /* A YouTube channel's videos to tick (2026-10-26): the picture, the title
     and the day it went up. */
  body.newlook .yt-pick { max-height: 520px; overflow-y: auto; }
  body.newlook .yt-row { align-items: center; }
  body.newlook .yt-row img { flex: none; width: 96px; aspect-ratio: 16 / 9; object-fit: cover; background: rgba(252, 249, 245, 0.06); }
  body.newlook .yt-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  body.newlook .yt-text b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  body.newlook .yt-text small { font-size: 11.5px; color: var(--ink-soft); }
  body.newlook .yt-row.is-added { opacity: 0.6; cursor: default; }
  body.newlook #vid-pick { margin-top: 16px; }
  body.newlook .ready-list li.is-no { color: var(--ink-soft); }

  /* ================= SHARED PIECES, NEW DESIGN =================
     Used on several signed-in views. */
  body.newlook .card-foot { font: 400 13px var(--st-mono); }
  body.newlook .linkish { font: 500 13px var(--st-mono); border-bottom-color: var(--st-rule); }
  body.newlook .linkish:hover { color: var(--st-yel); border-color: var(--st-yel); }
  body.newlook select { border-radius: 0; font-family: var(--st-mono); }
  body.newlook .spinner { border-radius: 50%; }

  /* The Share box under an open saved playlist. */
  body.newlook .fan-share { display: grid; gap: 10px; padding: 12px 10px 14px; border-bottom: 1px solid var(--st-rule); }
  body.newlook .fan-share-text { font: 400 12.5px / 1.55 var(--st-mono); color: var(--ink-soft); }
  body.newlook .fan-share-link {
    width: 100%; padding: 9px 10px; border: 1px solid var(--st-rule); border-radius: 0; background: none;
    color: var(--st-yel); font: 500 13px var(--st-mono);
  }
  body.newlook .fan-share-acts { display: flex; flex-wrap: wrap; gap: 8px; }
  body.newlook .fan-share .btn-small { justify-self: start; }

  /* ================= MESSAGES, NEW DESIGN =================
     A fan and an artist's conversations: rows on rules for the list; for a
     thread, each message on a rule of its own, yellow for yours. Text only,
     wrapped where it breaks, and nothing in it is ever made a link. */
  body.newlook .convo-list { margin-top: 18px; border-top: 1px solid var(--st-rule); }
  body.newlook .convo-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; width: 100%;
    padding: 14px 2px; border: 0; border-bottom: 1px solid var(--st-rule); border-radius: 0;
    background: none; color: var(--st-ink); text-align: left; cursor: pointer; font: inherit;
  }
  body.newlook .convo-row:hover { background: rgba(252, 249, 245, 0.04); }
  body.newlook .convo-name { font: 700 14px / 1.4 var(--st-mono); }
  body.newlook .convo-row.is-unread .convo-name { color: var(--st-yel); }
  body.newlook .convo-when { font: 400 12px / 1.4 var(--st-mono); color: var(--ink-faint); text-align: right; white-space: nowrap; }
  body.newlook .convo-snippet {
    grid-column: 1 / -1; font: 400 13px / 1.5 var(--st-mono); color: var(--ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.newlook .convo-tag {
    display: inline-block; margin-left: 8px; padding: 2px 6px 1px; vertical-align: 2px;
    border: 1px solid var(--st-rule); font: 500 10px / 1.3 var(--st-mono); letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
  }
  body.newlook .convo-tag.is-yel { border-color: var(--st-yel); color: var(--st-yel); }
  body.newlook .convo-tags .convo-tag:first-child { margin-left: 0; }
  body.newlook .convo-count {
    display: inline-block; min-width: 20px; margin-left: 8px; padding: 2px 6px;
    background: var(--st-yel); color: var(--st-on-yel); font: 700 11px / 1.3 var(--st-mono); text-align: center;
  }
  body.newlook .convo-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 4px; }
  body.newlook .convo-thread { display: grid; gap: 14px; margin-top: 22px; }
  body.newlook .convo-msg { padding: 2px 0 2px 14px; border-left: 2px solid var(--st-rule); }
  body.newlook .convo-msg.is-mine { border-left-color: var(--st-yel); }
  body.newlook .convo-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font: 400 11.5px / 1.4 var(--st-mono); color: var(--ink-faint); }
  body.newlook .convo-meta b { font-weight: 700; color: var(--ink-soft); }
  body.newlook .convo-meta .link-btn { font-size: 11.5px; }
  body.newlook .convo-body { margin-top: 4px; font: 400 14px / 1.6 var(--st-mono); color: var(--st-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
  body.newlook .convo-body.is-removed { font-style: italic; color: var(--ink-faint); }
  /* Jobs between artists and producers (2026-11-05) */
  body.newlook .job-producer input { margin-top: 4px; }
  body.newlook .job-producer-text b { font: 700 15px var(--st-mono); }
  body.newlook .job-page { font: 500 12px var(--st-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--st-yel); text-decoration: none; }
  body.newlook .job-page:hover { color: var(--st-ink); }
  body.newlook .job-facts dt { color: var(--ink-faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding-top: 2px; }
  body.newlook .job-facts dd { margin: 0; color: var(--st-ink); }
  @media (max-width: 560px) {  body.newlook .job-facts dd { margin-bottom: 8px; } }
  /* jobs stage 2 (2026-11-05): how it went, before and afters */
  body.newlook .job-ba-main b { font-size: 14.5px; color: var(--st-ink); }
  /* the service a question was about (2026-11-05) */
  body.newlook .convo-about { margin-top: 4px; font: 500 10.5px / 1.4 var(--st-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--st-yel); }
  body.newlook .convo-compose, body.newlook .convo-dob, body.newlook .convo-cannot { margin-top: 26px; }
  body.newlook #fan-messages { position: relative; }
  body.newlook .msg-badge {
    position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--st-yel); color: var(--st-on-yel); font: 700 10px / 17px var(--st-mono); text-align: center;
  }
  body.newlook .msg-badge[hidden] { display: none; }

  /* ================= ADMIN, NEW DESIGN =================
     #view-admin: four groups (People, Money, Music, Site), each opened by
     a thick yellow rule and its name, with a thin rule between the
     sections inside it. */
  body.newlook #view-admin { max-width: 900px; }
  body.newlook .adm-stat b { font-weight: 700; color: var(--st-yel); }
  body.newlook .adm-stat.is-warn b { color: var(--danger); }

  body.newlook .adm-name small { font: 400 12px var(--st-mono); }
  body.newlook .adm-act { border-radius: 0; }
  body.newlook .adm-act:hover { color: var(--st-yel); background: none; }
  body.newlook .adm-act.is-danger:hover { color: var(--danger); }
  body.newlook .adm-act { border-radius: 0; }
  body.newlook .adm-act:hover:not(:disabled) { color: var(--st-yel); background: none; }
  body.newlook .adm-add input {
    border-radius: 0; border-color: var(--st-rule); font: 400 14px var(--st-mono); height: 42px; padding: 0 12px;
  }
  body.newlook .adm-add input:focus { border-color: var(--st-yel); box-shadow: none; outline: none; }

  /* ================= THE LISTENER HOME AND THE PLAY BAR, NEW DESIGN =================
     #view-fan: genre playlists as a row of tiles, the open playlist's
     tracks, the Supported and Championed wheels, and the play bar docked
     under them. The play bar also floats over other pages while playing. */
  body.newlook #fan-title { font: 400 clamp(34px, 4vw, 60px) / 0.95 var(--st-condensed); text-transform: uppercase; margin: 10px 0 0; }
  body.newlook .fan-row { gap: clamp(12px, 1.4vw, 18px); padding-bottom: 16px; }
  body.newlook .fan-row::-webkit-scrollbar-thumb { background: var(--st-rule); border-radius: 0; }
  body.newlook .fan-pl { width: 104px; }
  body.newlook .fan-pl-art, body.newlook .fan-pl.is-tile .fan-pl-art {
    width: 104px; height: 104px; border-radius: 0; background: rgba(252, 249, 245, 0.04); border-color: var(--st-rule);
  }
  body.newlook .fan-pl:hover .fan-pl-art { border-color: var(--st-ink); }
  body.newlook .fan-pl.is-on .fan-pl-art { border: 2px solid var(--st-yel); box-shadow: none; }
  body.newlook .fan-pl-name { font: 500 12px / 1.3 var(--st-mono); text-align: left; margin-top: 8px; }
  body.newlook .fan-pl.is-on .fan-pl-name { color: var(--st-yel); }
  body.newlook .fan-pl-count { font: 400 11px var(--st-mono); }
  body.newlook .fan-parent { border-right-color: var(--st-rule); }

  /* Search: a single rule-lined row across the panel, like the track lists. */
  .fan-search { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
  .fan-search .input-shell { flex: 1; }
  .fan-search input { width: 100%; }
  .search-head {
    font: 500 11px var(--st-mono); letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-soft); padding: 14px 16px 8px; margin: 0;
  }
  body.newlook #fan-panel .trk-row.search-row {
    width: 100%; text-align: left; background: none; cursor: pointer;
    display: flex; align-items: center; gap: 12px; color: inherit;
  }
  body.newlook #fan-panel .trk-row.search-row:hover:not(:disabled) { background: rgba(252, 249, 245, 0.04); }
  body.newlook #fan-panel .trk-row.search-row:disabled { cursor: default; opacity: 0.55; }
  body.newlook #fan-search-btn.is-on { color: var(--st-yel); }

  .entry-tickets { display: block; }
  .entry-tickets-head { font: 500 11px var(--st-mono); letter-spacing: 0.2em; text-transform: uppercase;
                        color: var(--ink-soft); margin: 0 0 10px; }
  .entry-ticket { display: flex; align-items: center; gap: 12px; padding: 12px 0;
                  border-top: 1px solid var(--st-rule); }
  .entry-ticket:last-of-type { border-bottom: 1px solid var(--st-rule); }
  .entry-ticket-what { flex: 1; min-width: 0; }
  .entry-ticket-name { font-size: 0.92rem; margin: 0; }
  .entry-ticket-note { font: 400 12px var(--st-mono); color: var(--danger); margin: 10px 0 0; }

  .search-line { display: flex; align-items: stretch; }
  .search-line .trk-row { flex: 1; min-width: 0; }
  body.newlook #fan-panel .search-line { border-bottom: 1px solid var(--st-rule); }
  body.newlook #fan-panel .search-line .trk-row { border-bottom: 0; }
  body.newlook .fan-add { align-self: center; }

  /* play stats: one series, so divs rather than a charting library */
  .pst-chart { display: flex; align-items: flex-end; gap: 2px; height: 140px; margin-top: 14px;
               border-bottom: 1px solid var(--st-rule); }
  .pst-col { flex: 1; min-width: 2px; display: flex; align-items: flex-end; height: 100%; }
  .pst-bar { width: 100%; background: var(--st-yel); }
  .pst-bar.is-empty { background: var(--st-rule); }
  .pst-axis { display: flex; justify-content: space-between; margin: 8px 0 0;
              font: 400 11px var(--st-mono); color: var(--ink-faint); }
  .pst-week { display: flex; gap: 8px; align-items: flex-end; height: 130px; margin-top: 14px; }
  .pst-wcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
              align-items: center; height: 100%; }
  .pst-wcol span { font: 400 11px var(--st-mono); color: var(--ink-faint); margin-top: 8px; }
  .pst-track { position: relative; }
  .pst-meter { height: 3px; background: var(--st-rule); margin-top: 8px; }
  .pst-meter div { height: 100%; background: var(--st-yel); }
  .pst-sub { margin: 26px 0 8px; font: 700 12px var(--st-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-yel); }
  /* To do (2026-10-22) */
  body.newlook #view-tasks .role-switch { margin: 18px 0 8px; }
  /* By person (2026-10-26). */
  body.newlook .task-person { margin: 22px 0 6px; font: 700 13px var(--st-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-ink); }
  body.newlook .task-count { color: var(--st-yel); }
  body.newlook .task-top { display: flex; align-items: baseline; gap: 10px; }
  body.newlook .task-top input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 0; transform: translateY(3px); accent-color: var(--st-yel); }
  body.newlook .task-row.is-done strong { text-decoration: line-through; color: var(--ink-faint); }
  body.newlook .task-due { display: block; margin-top: 4px; font: 400 12px var(--st-mono); color: var(--st-yel); }
  body.newlook .task-due.is-late { color: var(--danger); }
  body.newlook .task-note { margin: 6px 0 0; white-space: pre-wrap; }
  body.newlook #tasks-digest-row { margin-top: 28px; }
  body.newlook .task-check { margin: 14px 0 6px; }
  body.newlook .task-check > button { background: none; border: 0; padding: 0; font: 400 12px var(--st-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); text-decoration: underline; cursor: pointer; }
  body.newlook .task-check-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
  body.newlook .task-check-row .input-shell { flex: 1 1 200px; }
  body.newlook .task-check-row .task-check-days { flex: 0 0 76px; }
  body.newlook .task-check-row .hint { margin: 0; }
  /* Admin -> Money -> Turnover for VAT */
  body.newlook .vat-big small { display: block; margin-top: 8px; font: 400 12px var(--st-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

  /* Admin -> Site -> Visits (2026-11-09): one graph, then lists. */
  body.newlook .vis-group .btn-small[aria-pressed="true"],
  body.newlook .vis-group .btn-small[aria-pressed="true"]:hover:not(:disabled) { background: var(--st-yel); border-color: var(--st-yel); color: var(--st-on-yel); position: relative; }
  /* Admin -> Site -> Sign-ups' graphs (2026-11-10): a key, and a colour per
     kind, set by app.js. Text stays in the page's own ink. */
  .su-key span { display: inline-flex; align-items: center; gap: 7px; }
  .vis-tip b { font-size: 16px; font-weight: 700; }
  body.newlook .vis-days summary { cursor: pointer; color: var(--ink-soft); }
  body.newlook .vis-detail td, body.newlook .vis-detail td:first-child { text-align: left; padding: 14px 6px 18px; }
  .vis-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.4em; gap: 4px 12px; align-items: baseline; padding: 7px 0 0; }
  .vis-meter > span { display: block; height: 100%; background: var(--st-yel); }

  .brd-write { margin-top: 14px; }
  .brd-write textarea { width: 100%; }
  .brd-write .btn-small { margin-top: 8px; }

  .past-toggle { margin-top: 10px; }
  body.newlook .sec-item.is-past { color: var(--ink-soft); }

  /* A track the listener has asked not to hear: still listed, plainly out of reach. */
  body.newlook .trk-row.is-blocked { opacity: 0.35; }

  /* More: the artist's own blocks of words and pictures. */
  .more-block { border: 1px solid var(--st-rule); padding: 12px; margin-bottom: 12px; }
  .more-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .more-kind {
    font: 500 11px var(--st-mono); letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--ink-soft); margin-right: auto;
  }
  .more-block textarea { width: 100%; }
  .more-shot { margin-bottom: 10px; }
  .more-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--st-rule); }
  .more-acts { display: flex; flex-wrap: wrap; gap: 8px; }
  .more-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 20px; }
  /* Royalty splits */
  .sp-row { display: grid; grid-template-columns: 2fr 1.2fr 0.8fr auto; gap: 8px; align-items: end; padding: 10px 0; border-top: 1px solid rgba(252, 249, 245, 0.14); }
  .sp-row .field { margin: 0; }
  .sp-row .sp-out { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sp-row .sp-out[hidden] { display: none; }
  .sp-total { font: 500 13px var(--mono, monospace); margin: 10px 0 6px; }
  .sp-total.is-bad { color: #ff8a80; }
  .sp-shares { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
  .sp-shares li { padding: 3px 0; }
  .sp-shares small { opacity: .7; }
  @media (max-width: 560px) { .sp-row { grid-template-columns: 1fr 1fr; } .sp-row .sp-out { grid-template-columns: 1fr; } }
  /* Files (sending between artists) */
  .tf-pick button { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-top: 6px; background: transparent; color: inherit; border: 1px solid rgba(252, 249, 245, 0.28); font: inherit; cursor: pointer; }
  .tf-pick button:hover { border-color: #EAFB17; }
  .tf-pick button:disabled { opacity: .45; cursor: default; border-color: rgba(252, 249, 245, 0.28); }
  .tf-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid rgba(252, 249, 245, 0.14); }
  .tf-file .tf-name { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
  .tf-file .tf-name small { display: block; opacity: .7; font-size: 12.5px; margin-top: 2px; }
  .tf-file select { background: transparent; color: inherit; border: 1px solid rgba(252, 249, 245, 0.28); padding: 6px 8px; font: inherit; font-size: 13px; max-width: 220px; }
  .tf-msg { margin: 6px 0 4px; font-size: 13.5px; opacity: .85; white-space: pre-wrap; }
  .tf-ask { border: 1px solid #EAFB17; padding: 14px; margin: 0 0 18px; }
  .pd-form { margin: 0 0 28px; padding: 18px 0; border-top: 1px solid rgba(252, 249, 245, 0.28); border-bottom: 1px solid rgba(252, 249, 245, 0.28); }
  .pd-form[hidden] { display: none; }
  .pd-form .chipset { margin-bottom: 16px; }
  .pd-row2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .pd-row2 { grid-template-columns: 1fr 2fr; }
  .pd-row2[hidden],
  .pd-form [data-pd][hidden] { display: none; }
  .pd-file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pd-file > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  /* Choosing a preview's 30 seconds (work.js pvCut*, 2026-11-14): the track's
     waveform, the 30 seconds lit on it, and a line moving while it plays. */
  .pv-cut { margin-top: 14px; }
  .pv-wave { position: relative; height: 72px; color: rgba(252, 249, 245, 0.42); border: 1px solid var(--st-rule, rgba(252,249,245,.28)); cursor: pointer; overflow: hidden; }
  .pv-wave canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .pv-win { position: absolute; top: 0; bottom: 0; background: rgba(234, 251, 23, 0.22); border-left: 2px solid var(--st-yel, #EAFB17); border-right: 2px solid var(--st-yel, #EAFB17); pointer-events: none; }
  .pv-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #FCF9F5; pointer-events: none; }
  .pv-start { margin: 12px 0 4px; }
  .pv-start input[type="range"] { width: 100%; accent-color: var(--st-yel, #EAFB17); }
  .pv-cut .hint { margin-bottom: 10px; }
  .pd-item-meta { display: block; font-size: 12.5px; opacity: .7; margin-top: 2px; }
  .pd-item-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
  @media (max-width: 560px) {  .pd-row2 { grid-template-columns: 1fr; } }

  body.newlook .fan-panel { border-radius: 0; border-color: var(--st-rule); background: none; padding: 0; margin-top: 8px; }
  body.newlook .fan-panel-head { padding: 14px 16px; border-bottom-color: var(--st-rule); margin: 0; }
  /* It sticks while the tracks scroll under it, so it stays solid. */
  body.newlook #fan-panel .fan-panel-head { background: var(--st-bg); border-radius: 0; }
  body.newlook .fan-panel-title { font: 400 clamp(22px, 2.2vw, 30px) / 1 var(--st-condensed); text-transform: uppercase; }
  body.newlook #fan-panel .trk-row { border-radius: 0; border-bottom: 1px solid var(--st-rule); padding: 10px 16px; font-family: var(--st-mono); }
  body.newlook #fan-panel .trk-row:last-child { border-bottom: 0; }
  body.newlook #fan-panel .trk-row.is-playing { background: rgba(234, 251, 23, 0.07); }
  body.newlook #fan-panel .trk-row.is-playing .trk-row-title { color: var(--st-yel); }
  body.newlook .trk-row-title { font-family: var(--st-mono); }
  body.newlook .trk-row-sub { font-family: var(--st-mono); }
  body.newlook .fan-num { border-radius: 0; border-color: var(--st-rule); font: 400 11.5px var(--st-mono); }
  body.newlook .trk-row.is-playing .fan-num { border-color: var(--st-yel); color: var(--st-yel); }
  body.newlook .fan-len { font: 400 12px var(--st-mono); }
  body.newlook .fan-go { border-radius: 0; }
  body.newlook .fan-go:hover { color: var(--st-yel); background: none; }
  body.newlook .trk-row.is-playing .fan-go { color: var(--st-yel); }
  body.newlook .fan-move button:hover:not(:disabled) { color: var(--st-yel); }
  body.newlook .fan-drop:hover { color: var(--danger); }

  body.newlook .fan-pl.is-thin { opacity: 0.4; }
  body.newlook .fan-pl.is-thin:hover { opacity: 0.75; }
  body.newlook .adm-genre-min { margin-bottom: 22px; }
  body.newlook #links-list > .sec-empty + .link-row, body.newlook #links-list > .link-row + .sec-empty { margin-top: 12px; }
  body.newlook .own-domain { margin-top: clamp(32px, 3.6vw, 52px); }
  body.newlook #view-lists .is-left .lists-name { color: var(--ink-soft); }
  body.newlook .lists-name { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--st-ink); }
  body.newlook .lists-name:hover { color: var(--st-yel); }
  body.newlook #lists-unconfirmed[hidden], body.newlook #lists-all-wrap[hidden] { display: none; }
  body.newlook #lists-unconfirmed { margin-top: 16px; }
  body.newlook .fm-count { font: 700 15px / 1.5 var(--st-mono); margin: 18px 0 6px; }
  body.newlook #fm-download { margin-top: 12px; }
  body.newlook #view-fanmail h2.section-head { margin-top: 34px; }
  body.newlook #view-fanmail hr + h2.section-head { margin-top: 0; }
  body.newlook #fm-form[hidden], body.newlook #fm-core[hidden], body.newlook #fm-testing[hidden] { display: none; }
  body.newlook #fm-form .own-actions { margin: 0 0 16px; }
  body.newlook .own-block { margin-top: 26px; }
  body.newlook .own-block[hidden] { display: none; }
  body.newlook .own-block h3 { font: 700 13px var(--st-mono); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
  body.newlook .own-block h3 .pill.hidden-tag { margin-left: 8px; }
  /* The link page's buttons in order (Short links, 2026-10-27). */
  body.newlook .lp-order .order-list { margin-top: 10px; }
  body.newlook .lp-order .order-row.is-off .order-name { color: var(--ink-faint); }
  body.newlook .lp-order .order-row .link-btn, body.newlook .lp-order .lp-spacer { flex: none; min-width: 44px; text-align: right; }
  /* Headings and videos in it (2026-10-30): a heading reads as typed, in
     yellow, with Edit under it, as an own YouTube link has Show as a video;
     the × that takes one off sits where Hide does, as wide. */
  body.newlook .lp-order .lp-cell { flex: 1; min-width: 0; }
  body.newlook .lp-order .lp-cell .order-name { display: block; overflow-wrap: anywhere; }
  body.newlook .lp-order .lp-cell .link-btn { min-width: 0; margin-top: 4px; font-size: 12px; text-align: left; }
  body.newlook .lp-order .order-row.is-heading .order-name { color: var(--st-yel); text-transform: none; letter-spacing: 0; font: 900 15px/1.2 var(--st-display); }
  body.newlook .lp-order .order-row .arrow-btn.lp-off { margin-left: 10px; }
  body.newlook .lp-order .order-row .arrow-btn.lp-bin { display: grid; place-items: center; }
  body.newlook .lp-order .order-row .arrow-btn.lp-bin svg { width: 16px; height: 16px; }
  body.newlook .lp-order .lp-adds { margin-top: 10px; }
  body.newlook .own-acts { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
  body.newlook .own-block .field { margin-top: 14px; }
  body.newlook .own-detail { margin-top: 12px; }
  body.newlook .own-detail[hidden] { display: none; }
  body.newlook .own-record-head { margin-top: 22px; }
  body.newlook .own-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  body.newlook .own-msg { margin-top: 10px; font: 400 13px / 1.5 var(--st-mono); color: var(--ink-soft); }
  body.newlook .own-msg[hidden] { display: none; }
  body.newlook .own-msg.is-error { color: var(--danger); }
  body.newlook .own-domain-tips { margin: 14px 0 0 18px; display: grid; gap: 8px; font: 400 13px / 1.6 var(--st-mono); color: var(--ink-soft); }
  body.newlook .fan-cols { border-radius: 0; border-color: var(--st-rule); padding: 14px 16px 16px; gap: 16px; }
  body.newlook .fan-col h2 { font: 500 11px var(--st-mono); letter-spacing: 0.2em; color: var(--ink-soft); text-align: left; }
  body.newlook .fan-wheel { border-radius: 0; }
  body.newlook .fan-wheel:focus-visible { outline-color: var(--st-yel); }
  body.newlook .fan-wheel-row { border-radius: 0; font-family: var(--st-mono); }
  body.newlook .fan-wheel-row.is-on { border-color: var(--st-yel); }
  body.newlook .fan-wheel-av { border-radius: 0; font-family: var(--st-mono); }
  body.newlook .fan-wheel-name { font: 400 15px / 20px var(--st-mono); }
  /* A phone: three columns, a third each, and the picture fills its column
     (less the row's 6px padding and 1.5px border either side). */
  @media (max-width: 560px) {
    body.newlook .fan-cols { gap: 10px; padding: 12px 10px 12px; }
    body.newlook .fan-col h2 { font-size: 10px; letter-spacing: 0.12em; }
    body.newlook .fan-wheel { --pic: calc(100cqw - 15px); }
    body.newlook .fan-wheel-name { font-size: 12px; }
    body.newlook .fan-wheel-hint { font-size: 10.5px; }
  }
  body.newlook .fan-wheel-row.is-on .fan-wheel-name { font-weight: 700; }
  body.newlook .fan-wheel-hint { font: 400 11.5px var(--st-mono); text-align: left; }

  body.newlook .playbar {
    border-radius: 0; background: var(--st-bg); border: 1px solid var(--st-rule);
    box-shadow: 0 -18px 50px -24px rgba(0, 0, 0, 0.9); font-family: var(--st-mono);
  }
  body.newlook .playbar.is-docked { border-radius: 0; background: rgba(252, 249, 245, 0.02); border-color: var(--st-rule); box-shadow: none; }
  body.newlook .pb-title { font: 700 14px var(--st-mono); }
  body.newlook .pb-artist, body.newlook .pb-times { font: 400 12px var(--st-mono); }
  body.newlook .pb-track { border-radius: 0; height: 3px; background: var(--st-rule); }
  body.newlook .pb-fill { border-radius: 0; background: var(--st-yel); }
  body.newlook .pb-knob { border-radius: 0; background: var(--st-yel); width: 10px; height: 14px; margin-left: -5px; }
  body.newlook .pb-mark { border-radius: 0; background: var(--st-ink); }
  body.newlook .pb-mark.is-on { background: var(--st-yel); }
  body.newlook .pb-popup { border-radius: 0; background: var(--st-bg); border-color: var(--st-rule); font-family: var(--st-mono); }
  body.newlook .pb-popup .who-name, body.newlook .pb-popup .what, body.newlook .pb-popup .when { font-family: var(--st-mono); }
  body.newlook .pb-btn { border-radius: 0; }
  body.newlook #pb-volume::-webkit-slider-runnable-track {
    height: 3px; border-radius: 0;
    background: linear-gradient(to right, var(--st-yel) var(--vol), var(--st-rule) var(--vol));
  }
  body.newlook #pb-volume::-moz-range-track {
    height: 3px; border-radius: 0;
    background: linear-gradient(to right, var(--st-yel) var(--vol), var(--st-rule) var(--vol));
  }
  body.newlook #pb-volume::-webkit-slider-thumb { width: 10px; height: 14px; margin-top: -5.5px; border-radius: 0; background: var(--st-yel); }
  body.newlook #pb-volume::-moz-range-thumb { width: 10px; height: 14px; border-radius: 0; background: var(--st-yel); }
  body.newlook #pb-volume:focus-visible { outline-color: var(--st-yel); }
  body.newlook .pb-vol-11 { font: 400 17px / 1 var(--st-condensed); color: var(--st-yel); }
  body.newlook .pb-btn:hover:not(:disabled) { color: var(--st-yel); }
  body.newlook .pb-btn.is-on { color: var(--st-yel); }
  body.newlook .pb-transport { border-radius: 0; border-color: var(--st-rule); }
  body.newlook .pb-play { border-radius: 0; background: var(--st-yel); color: var(--st-on-yel); }
  body.newlook .pb-play:hover:not(:disabled) { background: var(--st-ink); }
  body.newlook .pb-play:disabled { background: var(--st-rule); }
  body.newlook .pb-compose input { border-radius: 0; font: 400 13px var(--st-mono); border-color: var(--st-rule); }
  body.newlook .pb-compose input:focus { border-color: var(--st-yel); box-shadow: none; }

  @media (max-width: 560px) {
    body.newlook #fan-title { font-size: 34px; }
    body.newlook .fan-pl { width: 80px; }
    body.newlook .fan-pl-art, body.newlook .fan-pl.is-tile .fan-pl-art { width: 80px; height: 80px; }
  }

  /* ================= ACCOUNT SCREENS, NEW DESIGN =================
     Settings, profile and password, closing the account, the intro, how
     streams work, listening stats, the supported threshold, and setup.
     A third of the screen, so they grow on a big one, but never under
     560px (the longest settings row needs it) and never wider than the
     page. min/max rather than clamp(), which lets the 560 floor win over
     100% and overflow a phone. */
  body.newlook #view-inbox, body.newlook #view-thread,
  body.newlook #view-settings, body.newlook #view-profile, body.newlook #view-deleteacct, body.newlook #view-payments, body.newlook #view-plan,
  body.newlook #view-intro, body.newlook #view-streams, body.newlook #view-stats,
  body.newlook #view-threshold, body.newlook #view-setup { width: min(100%, max(560px, 33.3vw)); }
  body.newlook .input-shell input[type="password"], body.newlook .input-shell input[type="email"],
  body.newlook .input-shell input[type="number"] { border-radius: 0; font-family: var(--st-mono); }
  body.newlook .eye { border-radius: 0; }
  body.newlook .eye:hover { color: var(--st-yel); }
  body.newlook .btn-ghost { background: none; border: 1.5px solid var(--st-ink); color: var(--st-ink); height: 56px; }
  body.newlook .btn-ghost:hover:not([disabled]) { background: var(--st-ink); color: var(--st-bg); }
  body.newlook .btn-danger { background: var(--danger); border-color: var(--danger); color: var(--st-bg); height: 56px; }
  body.newlook .btn-danger:hover:not([disabled]) { filter: none; background: var(--st-ink); border-color: var(--st-ink); }

  /* settings: groups of rows on rules */
  body.newlook .set-group { margin-top: clamp(26px, 3vw, 40px); }
  body.newlook .set-group > h2 { font: 500 11px var(--st-mono); letter-spacing: 0.2em; color: var(--ink-soft); margin-bottom: 10px; }
  body.newlook .set-rows { border: 0; border-top: 1px solid var(--st-rule); border-radius: 0; background: none; }
  body.newlook .set-row {
    border-top: 0; border-bottom: 1px solid var(--st-rule); padding: 15px 2px;
    font: 400 14px var(--st-mono);
  }
  body.newlook .set-row:hover:not([disabled]) { background: none; color: var(--st-yel); }
  body.newlook .set-row .set-right { font: 400 12px var(--st-mono); }
  body.newlook .set-row.danger { color: var(--danger); }

  body.newlook .warn-box { border-radius: 0; border-color: var(--danger); background: rgba(255, 138, 122, 0.06); margin-top: 22px; }
  body.newlook .warn-box h3 { font: 400 clamp(22px, 2.2vw, 30px) / 1 var(--st-condensed); text-transform: uppercase; color: var(--danger); }
  body.newlook .warn-box p, body.newlook .warn-box li { font: 400 13.5px / 1.6 var(--st-mono); }

  /* the intro, paged */
  body.newlook .page-title { font: 400 clamp(30px, 3.6vw, 52px) / 0.98 var(--st-condensed); text-transform: uppercase; }
  body.newlook .page-body, body.newlook #rintro-body { font: 400 clamp(14px, 1.15vw, 16px) / 1.7 var(--st-mono); color: var(--st-ink); }
  body.newlook .dot-i { border-radius: 0; background: var(--st-rule); }
  body.newlook .dot-i.is-on { background: var(--st-yel); border-radius: 0; }
  body.newlook .steps-of { font: 500 11px var(--st-mono); letter-spacing: 0.2em; color: var(--ink-soft); }

  body.newlook .article h3 { font: 400 clamp(20px, 2vw, 28px) / 1.05 var(--st-condensed); text-transform: uppercase; margin-top: 28px; }
  body.newlook .article p, body.newlook .article li { font: 400 14px / 1.7 var(--st-mono); color: var(--ink-soft); }

  /* stats: big numbers, then ranked rows */
  body.newlook .stat-grid { gap: 0; border-top: 1px solid var(--st-rule); border-left: 1px solid var(--st-rule); }
  body.newlook .stat {
    border: 0; border-right: 1px solid var(--st-rule); border-bottom: 1px solid var(--st-rule);
    border-radius: 0; background: none; padding: 18px 16px;
  }
  body.newlook .stat .n { font: 900 clamp(30px, 3.4vw, 48px) / 0.9 var(--st-display); letter-spacing: -0.04em; color: var(--st-yel); }
  body.newlook .stat .l { font: 400 12px var(--st-mono); color: var(--ink-soft); margin-top: 8px; }
  body.newlook .stat .l.stat-note { margin-top: 4px; font-size: 11px; color: var(--ink-faint); }
  body.newlook #view-plays .section-head { margin-top: clamp(32px, 3.6vw, 52px); }
  body.newlook #view-plays #pst-range { margin-bottom: 16px; }
  /* Plays and earnings, redrawn (Mat, 2026-10-05): figures on rules, not in
     boxes; one big number for what's earned; the way to the next payout. */
  body.newlook #view-plays .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: 0; border-top: 1px solid var(--st-rule); border-bottom: 1px solid var(--st-rule); gap: 0; }
  body.newlook #view-plays .stat { border: 0; border-left: 1px solid var(--st-rule); padding: 18px 18px 20px; background: none; }
  body.newlook #view-plays .stat:first-child { border-left: 0; padding-left: 0; }
  body.newlook #view-plays .stat .n { font-size: clamp(30px, 3.6vw, 46px); }
  body.newlook #view-plays .stat .l { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--ink-soft); margin-top: 10px; }
  body.newlook #view-plays .stat .l.stat-note { text-transform: none; letter-spacing: 0; font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; }
  body.newlook .earn-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 42px; padding: 6px 0 22px; border-bottom: 1px solid var(--st-rule); }
  body.newlook .earn-big .k, body.newlook .earn-side .k { font: 500 11px var(--st-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
  body.newlook .earn-big .v { font: 900 clamp(64px, 10vw, 128px) / 0.86 var(--st-display); letter-spacing: -0.05em; color: var(--st-yel); margin-top: 10px; }
  body.newlook .earn-side { display: flex; gap: 0; padding-bottom: 8px; }
  body.newlook .earn-side > div { padding: 0 22px; border-left: 1px solid var(--st-rule); }
  body.newlook .earn-side > div:first-child { padding-left: 0; border-left: 0; }
  body.newlook .earn-side .v { font: 900 clamp(22px, 2.4vw, 30px) / 1 var(--st-display); letter-spacing: -0.03em; color: var(--st-ink); margin-top: 8px; }
  body.newlook .earn-next { margin: 18px 0 6px; }
  body.newlook .earn-next .bar-line { display: flex; justify-content: space-between; gap: 12px; font: 400 12.5px var(--st-mono); color: var(--ink-soft); }
  body.newlook .earn-next .bar-line b { color: var(--st-ink); font-weight: 500; }
  body.newlook .earn-track { height: 6px; background: var(--st-rule); margin-top: 8px; }
  body.newlook .earn-track div { height: 100%; background: var(--st-yel); min-width: 2px; }
  body.newlook #view-plays #pst-range { border: 0; border-bottom: 1px solid var(--st-rule); display: flex; gap: 22px; margin-top: 18px; }
  body.newlook #view-plays .tier-note { margin-bottom: 0; }
  body.newlook #view-plays #pst-range button { background: none; color: var(--ink-soft); padding: 0 0 10px; height: auto; border-bottom: 2px solid transparent; margin-bottom: -1px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; }
  body.newlook #view-plays #pst-range button.is-on { background: none; color: var(--st-yel); border-bottom-color: var(--st-yel); }
  @media (max-width: 560px) {
    body.newlook #view-plays .stat-grid { grid-template-columns: 1fr 1fr; }
    body.newlook #view-plays .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
    body.newlook #view-plays .stat:nth-child(n+3) { border-top: 1px solid var(--st-rule); }
  }
  body.newlook #earn-pay { margin-top: 14px; }
  body.newlook .rank { border-top-color: var(--st-rule); font: 400 14px var(--st-mono); }
  body.newlook #view-stats .section-head, body.newlook #view-threshold .section-head { margin-top: clamp(32px, 3.6vw, 52px); }
  body.newlook .empty-note { text-align: left; padding: 16px 0; }
  body.newlook .rank .rank-n { font: 400 12px var(--st-mono); }

  /* setup: the checklist and the plans */
  body.newlook .tracks { gap: 0; border-top: 1px solid var(--st-rule); }
  body.newlook .track {
    background: none; border: 0; border-bottom: 1px solid var(--st-rule); border-radius: 0; padding: 16px 2px;
  }
  body.newlook .track:hover:not([disabled]) { background: none; }
  body.newlook .track:hover:not([disabled]) .track-body strong { color: var(--st-yel); }
  body.newlook .track.is-done { background: none; border-color: var(--st-rule); }
  body.newlook .track-mark { border-radius: 0; border-color: var(--st-rule); color: var(--st-on-yel); }
  body.newlook .track.is-done .track-mark { background: var(--st-yel); border-color: var(--st-yel); }
  body.newlook .track-body strong { font: 700 14.5px var(--st-mono); }
  body.newlook .track-body span { font: 400 12.5px / 1.55 var(--st-mono); }
  body.newlook .plan { border-radius: 0; background: none; border-color: var(--st-rule); }
  body.newlook .plan:hover { background: none; border-color: var(--st-ink); }
  body.newlook .plan[aria-pressed="true"] { background: rgba(234, 251, 23, 0.06); border-color: var(--st-yel); }
  body.newlook .plan-name { font: 700 15px var(--st-mono); }
  body.newlook .plan-price { font: 700 14px var(--st-mono); color: var(--st-yel); }
  body.newlook .plan li { font: 400 12.5px / 1.55 var(--st-mono); color: var(--ink-soft); }
  body.newlook .plan li::before { border-radius: 0; background: var(--st-yel); }

  /* ================= MERCH, EVENTS, DIARY AND VIDEOS, NEW DESIGN =================
     #view-coll is one editor for all three collections; #view-videos adds
     YouTube links. Both: a form in a frame, then what's posted on rules. */
  body.newlook #view-coll, body.newlook #view-videos { max-width: 780px; }
  body.newlook .coll-form {
    border-radius: 0; border: 1px solid var(--st-rule); background: rgba(252, 249, 245, 0.02);
    padding: clamp(18px, 2.4vw, 30px); margin-bottom: clamp(30px, 3.4vw, 48px);
  }
  body.newlook .coll-form h3 {
    font: 400 clamp(24px, 2.4vw, 34px) / 1 var(--st-condensed); text-transform: uppercase; margin-bottom: 18px;
  }
  body.newlook .thumb { border-radius: 0; border-color: var(--st-rule); width: 76px; height: 76px; }
  body.newlook .thumb button { border-radius: 0; background: var(--st-bg); border: 1px solid var(--st-rule); }
  body.newlook .thumb button:hover { background: var(--danger); color: var(--st-bg); }
  body.newlook .thumb.adding { font: 400 11px var(--st-mono); }

  body.newlook .coll-list, body.newlook .vid-list { gap: 0; border-top: 1px solid var(--st-rule); margin-top: 14px; }
  body.newlook .coll-item {
    background: none; border: 0; border-bottom: 1px solid var(--st-rule); border-radius: 0; padding: 16px 0;
  }
  body.newlook .coll-item h4 { font: 700 clamp(14px, 1.15vw, 16px) / 1.35 var(--st-mono); }
  body.newlook .coll-item .when { font: 400 12.5px var(--st-mono); color: var(--ink-faint); margin-top: 4px; }
  body.newlook .coll-item p.body { font: 400 13.5px / 1.65 var(--st-mono); color: var(--ink-soft); }
  body.newlook .coll-item .thumb { width: 60px; height: 60px; }

  body.newlook .vid-row { background: none; border: 0; border-bottom: 1px solid var(--st-rule); border-radius: 0; padding: 14px 0; gap: 16px; }
  body.newlook .vid-thumb { border-radius: 0; width: 112px; height: auto; aspect-ratio: 16 / 9; font-family: var(--st-mono); }
  body.newlook .vid-title { font: 700 14px / 1.35 var(--st-mono); }
  body.newlook .ap-write { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
  body.newlook .ap-write .hint { margin: 0; flex: 1 1 220px; }
  body.newlook .ap-write .link-btn { margin-left: 4px; }
  body.newlook .ap-write-how { margin: 8px 0 0; }
  body.newlook .vid-watches { display: block; margin-top: 4px; font: 400 12px var(--st-mono); color: var(--ink-soft); }
  body.newlook a.vid-title:hover { color: var(--st-yel); }
  body.newlook .vid-move { border-radius: 0; border-color: var(--st-rule); }
  body.newlook .vid-move:hover:not(:disabled) { color: var(--st-yel); border-color: var(--st-yel); }
  body.newlook .vid-player { border-radius: 0; }

  /* one merch item, event or diary entry, opened from a page */
  body.newlook #view-entry { max-width: 1100px; }
  /* With a picture: a product page, the picture left and the details
     right. Without one, a single column. */
  body.newlook #entry-body { max-width: 720px; }
  body.newlook #entry-body:has(> .entry-hero) {
    max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(22px, 3vw, 48px); align-items: start;
  }
  body.newlook #entry-body:has(> .entry-hero) > * { grid-column: 2; }
  body.newlook #entry-body:has(> .entry-hero) > .entry-hero { grid-column: 1; grid-row: 1 / span 12; margin: 0; }
  body.newlook .entry-images { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
  body.newlook .entry-images-label { grid-column: 1 / -1; }
  body.newlook .entry-images .entry-img { aspect-ratio: 1; object-fit: cover; border: 1px solid var(--st-rule); }
  @media (max-width: 760px) {
    body.newlook #entry-body:has(> .entry-hero) { display: block; }
    body.newlook #entry-body:has(> .entry-hero) > .entry-hero { margin-bottom: 18px; }
  }
  body.newlook #entry-body h1, body.newlook #entry-title {
    font: 400 clamp(34px, 4.4vw, 64px) / 0.95 var(--st-condensed); text-transform: uppercase; margin: 0 0 12px;
  }
  body.newlook .entry-badge { border-radius: 0; font: 700 10.5px / 1 var(--st-mono); letter-spacing: 0.14em; padding: 5px 8px 4px; }
  body.newlook .entry-date { font: 400 13px var(--st-mono); color: var(--ink-soft); }
  body.newlook .entry-price strong { font: 700 clamp(22px, 2.2vw, 30px) var(--st-mono); color: var(--st-yel); }
  body.newlook .entry-price span { font: 400 13px var(--st-mono); color: var(--ink-faint); }
  body.newlook .entry-where { font: 400 14px var(--st-mono); }
  body.newlook a.entry-where { color: var(--st-yel); text-decoration-color: var(--st-rule); }
  body.newlook .entry-text { font: 400 clamp(14px, 1.15vw, 16px) / 1.7 var(--st-mono); color: var(--st-ink); }
  body.newlook .entry-images-label { font: 500 11px var(--st-mono); letter-spacing: 0.16em; }
  body.newlook .entry-img, body.newlook .entry-hero { border-radius: 0; }

  /* ================= THE PROFILE EDITOR, NEW DESIGN =================
     #view-artistpage: banner, picture, name, bios, links, roles and
     genres. A form reads best in a column, so it keeps to one, with the
     banner preview drawn the shape the public page shows it. */
  body.newlook #view-artistpage { max-width: 780px; }
  body.newlook .field { margin-bottom: 20px; }
  body.newlook .field label, body.newlook .seg-label {
    font: 500 11px var(--st-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-ink); margin-bottom: 8px;
  }
  body.newlook .input-shell input { height: 50px; font-size: 15px; }
  body.newlook .input-shell input::placeholder, body.newlook textarea::placeholder { color: var(--ink-faint); }
  body.newlook textarea {
    border-radius: 0; border-color: var(--st-rule); background: var(--field-bg);
    font: 400 15px / 1.65 var(--st-mono); padding: 13px 14px;
  }
  body.newlook textarea:focus { box-shadow: none; border-color: var(--st-yel); background: var(--field-bg); }
  body.newlook .counter, body.newlook .hint { font: 400 12px var(--st-mono); color: var(--ink-faint); }

  body.newlook .banner-slot {
    border-radius: 0; border-color: var(--st-rule); aspect-ratio: 16 / 5;
    background: rgba(252, 249, 245, 0.04);
  }
  body.newlook .avatar-slot {
    width: 112px; height: 112px; border-radius: 0;
    border: 3px solid var(--st-yel); background: var(--st-bg);
  }
  body.newlook .avatar-row { gap: 20px; }
  body.newlook .image-actions { gap: 10px; }
  body.newlook .uploading { border-radius: 0; font: 500 13px var(--st-mono); }

  body.newlook .chipset { gap: 8px; }
  body.newlook .chip, body.newlook .chip-s {
    border-radius: 0; font: 400 13px var(--st-mono); letter-spacing: 0.02em;
    background: none; border-color: var(--st-rule); color: var(--ink-soft);
  }
  body.newlook .chip:hover, body.newlook .chip-s:hover { border-color: var(--st-ink); color: var(--st-ink); }
  body.newlook .chip[aria-pressed="true"], body.newlook .chip-s[aria-pressed="true"] {
    background: var(--st-yel); border-color: var(--st-yel); color: var(--st-on-yel);
  }
  body.newlook .chip:focus-visible, body.newlook .chip-s:focus-visible { outline-color: var(--st-ink); }
  body.newlook .group-title { font: 500 11px var(--st-mono); letter-spacing: 0.16em; color: var(--ink-faint); }
  body.newlook .scroller { max-height: 340px; }
  body.newlook #ap-save { margin-top: 8px; }

  /* ================= YOUR PAGE, NEW DESIGN =================
     The artist's own page, and another artist's page as a listener sees it
     (#view-page.is-viewing). It mirrors the public artist page: banner,
     yellow-framed picture, a very large name, then sections on rules. */
  body.newlook .page-head { align-items: flex-end; margin-bottom: 20px; }
  body.newlook #page-title { font: 400 clamp(34px, 4vw, 60px) / 0.95 var(--st-condensed); text-transform: uppercase; margin: 10px 0 0; }
  body.newlook .edit-toggle, body.newlook .icon-btn {
    border-radius: 0; border: 1px solid var(--st-ink); color: var(--st-ink); background: none;
    font: 500 13px / 1 var(--st-mono); height: 40px;
  }
  body.newlook .icon-btn { width: 40px; }
  body.newlook .edit-toggle:hover, body.newlook .icon-btn:hover { background: var(--st-ink); color: var(--st-bg); border-color: var(--st-ink); }
  body.newlook .edit-toggle.is-on { background: var(--st-yel); border-color: var(--st-yel); color: var(--st-on-yel); }
  /* A toggle that's on (saved playlists, search) stays yellow, hovered or
     not, until it's pressed again. After the hover rule so it wins over it. */
  body.newlook .icon-btn.is-on,
  body.newlook .icon-btn.is-on:hover { background: var(--st-yel); border-color: var(--st-yel); color: var(--st-on-yel); }
  body.newlook .role-switch { border-radius: 0; border-color: var(--st-rule); padding: 0; background: none; }
  body.newlook .role-switch button { border-radius: 0; font: 500 12.5px var(--st-mono); height: 38px; padding: 0 14px; background: none; color: var(--ink-soft); }
  body.newlook .role-switch button:hover:not(.is-on) { color: var(--st-yel); }
  body.newlook .role-switch button.is-on { background: var(--st-ink); color: var(--st-bg); }

  body.newlook .verify-banner { border-radius: 0; border-color: var(--st-yel); background: rgba(234, 251, 23, 0.05); font-family: var(--st-mono); }
  body.newlook .verify-cta { color: var(--st-yel); }
  body.newlook .verify-entry input { border-radius: 0; font-family: var(--st-mono); }

  /* the edit-mode note: a quiet line with a yellow rule, not a yellow block */
  body.newlook .edit-banner-note {
    border-radius: 0; border: 0; border-left: 3px solid var(--st-yel); background: transparent; color: var(--st-ink);
    font: 400 13px / 1.45 var(--st-mono); padding: 4px 0 4px 14px; margin-bottom: 18px;
  }

  body.newlook .page-banner {
    border-radius: 0; border: 0; aspect-ratio: 16 / 5;
    background: rgba(252, 249, 245, 0.05);
  }
  body.newlook .page-banner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(12,13,12,0.05), rgba(12,13,12,0.85));
  }
  body.newlook .slot-empty { font: 400 12.5px var(--st-mono); color: var(--ink-faint); }
  body.newlook .banner-hint { z-index: 1; background: rgba(12,13,12,0.6); font: 500 13px var(--st-mono); }
  body.newlook .page-id {
    align-items: flex-end; gap: clamp(16px, 2vw, 28px);
    margin: clamp(-110px, -7vw, -56px) 0 clamp(24px, 3vw, 40px) clamp(0px, 1.5vw, 24px);
  }
  body.newlook .page-avatar {
    width: clamp(88px, 11vw, 150px); height: clamp(88px, 11vw, 150px); border-radius: 0;
    border: 3px solid var(--st-yel); background: var(--st-bg); font: 400 11px var(--st-mono);
  }
  body.newlook .page-id > div:last-child { min-width: 0; padding-bottom: 4px; }
  body.newlook .page-name {
    font: 900 clamp(38px, 6.4vw, 104px) / 0.86 var(--st-display); letter-spacing: -0.05em;
    overflow-wrap: anywhere;
  }
  body.newlook .page-where {
    margin-top: 12px; font: 400 clamp(10.5px, 0.9vw, 13px) var(--st-mono);
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
  }

  /* Artist page | Backstage: what fans see, and the tools only the artist does */
  body.newlook .page-tabs {
    display: flex; border-bottom: 1px solid var(--st-rule); margin: 0 0 clamp(22px, 2.6vw, 36px);
  }
  body.newlook .page-tabs button {
    background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: 12px 18px 11px; font: 500 12.5px var(--st-mono); letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-soft); cursor: pointer;
  }
  body.newlook .page-tabs button:first-child { padding-left: 0; }
  body.newlook .page-tabs button:hover { color: var(--st-yel); }
  body.newlook .page-tabs button[aria-selected="true"] { color: var(--st-ink); border-bottom-color: var(--st-yel); }
  body.newlook .page-tabs button:focus-visible { outline: 2px solid var(--st-yel); outline-offset: -2px; }
  /* Four tabs on a phone: tighter, and the row scrolls sideways rather than
     wrapping if it still doesn't fit. */
  body.newlook .page-tabs { overflow-x: auto; scrollbar-width: none; }
  body.newlook .page-tabs::-webkit-scrollbar { display: none; }
  body.newlook .page-tabs button { flex: none; white-space: nowrap; }
  @media (max-width: 560px) {
    body.newlook .page-tabs button { padding: 12px 7px 11px; letter-spacing: 0.06em; font-size: 11.5px; }
  }

  /* The Producer and Promoter tabs: the basic tools (Core and Pro) and the
     add-on's side by side, one under the other on a phone, every line marked
     Coming soon. */
  body.newlook .role-tiers {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px);
  }
  @media (max-width: 720px) { body.newlook .role-tiers { grid-template-columns: 1fr; } }
  /* An artist's Producer tab has three, Core, Encore and Encore+; a
     producer-only account's two. */
  body.newlook .role-tiers.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.newlook.kind-producer .role-tiers.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 980px) { body.newlook .role-tiers.three, body.newlook.kind-producer .role-tiers.three { grid-template-columns: 1fr; } }
  body.newlook .role-tier .section-head { display: flex; align-items: center; gap: 12px; }
  body.newlook .role-yours {
    font: 500 10.5px var(--st-mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--st-bg); background: var(--st-yel); padding: 4px 7px 3px;
  }
  body.newlook .role-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--st-rule); }
  body.newlook .role-list li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 13px 0; border-bottom: 1px solid var(--st-rule);
    font: 400 13.5px / 1.55 var(--st-mono); color: var(--ink-soft);
  }
  body.newlook .role-tier.is-yours .role-list li { color: var(--st-ink); }
  body.newlook .role-list code { font: inherit; color: var(--st-ink); }
  body.newlook .soon {
    flex: none; padding: 3px 6px 2px; border: 1px solid var(--st-rule);
    font: 500 9.5px var(--st-mono); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-faint); white-space: nowrap;
  }
  body.newlook .role-wait { margin-top: clamp(22px, 2.6vw, 34px); }

  body.newlook .bs-row {
    display: grid; grid-template-columns: 1fr auto; column-gap: 16px; width: 100%;
    background: none; border: 0; border-top: 1px solid var(--st-rule); border-radius: 0;
    padding: clamp(22px, 2.6vw, 36px) 0; text-align: left; color: var(--st-ink); cursor: pointer; font: inherit;
  }
  body.newlook .bs-row[hidden] { display: none; }
  body.newlook .bs-row:last-child { border-bottom: 1px solid var(--st-rule); }
  body.newlook .bs-title {
    font: 400 clamp(28px, 3.4vw, 52px) / 1 var(--st-condensed); text-transform: uppercase; letter-spacing: -0.01em;
  }
  body.newlook .bs-row:hover .bs-title,
  body.newlook .bs-row:focus-visible .bs-title { color: var(--st-yel); }
  body.newlook .bs-row:focus-visible { outline: 2px solid var(--st-yel); outline-offset: 2px; }
  body.newlook .bs-desc { margin-top: 12px; max-width: 42em; font: 400 13px / 1.6 var(--st-mono); color: var(--ink-soft); }
  body.newlook .bs-status {
    margin-top: 10px; font: 500 12px var(--st-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  }
  body.newlook .bs-status:empty { display: none; }
  body.newlook .bs-status.is-due { color: var(--st-yel); }
  body.newlook .bs-arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; font: 400 26px var(--st-mono); color: var(--ink-soft); }
  body.newlook .bs-row:hover .bs-arrow { color: var(--st-yel); }
  body.newlook .page-section > .pill.hidden-tag { display: inline-block; margin: 10px 0 0; }

  body.newlook .page-section { padding: clamp(28px, 3.4vw, 52px) 0; border-top: 1px solid var(--st-rule); }
  body.newlook .page-section:first-of-type { border-top: 1px solid var(--st-rule); }
  body.newlook .sec-title {
    font: 400 clamp(28px, 3.4vw, 52px) / 1 var(--st-condensed); text-transform: uppercase;
    letter-spacing: -0.01em; color: var(--st-ink); gap: 12px;
  }
  /* Edit mode keeps the page looking like the page (Mat, 2026-10-06): the
     headings stay white, and only the EDIT tags and what's under the
     pointer go yellow. */
  body.newlook .is-editing .sec-title { color: var(--st-ink); }
  body.newlook .is-editing .sec-title::after { color: var(--st-yel); }
  body.newlook .is-editing .sec-title:hover { color: var(--st-yel); }
  body.newlook .is-editing .sec-title::after {
    font: 500 11px / 1 var(--st-mono); letter-spacing: 0.16em; border-radius: 0; padding: 5px 8px 4px;
  }
  /* Moving and hiding sections from the page itself (2026-10-27): the
     arrows and Hide or Show sit at the heading's right in Edit mode; a
     hidden section is dimmed while editing and gone otherwise, as fans
     never see it. Links sit under the name, as on the public page. */
  body.newlook .page-section { position: relative; }
  body.newlook .sec-tools { display: none; }
  body.newlook .is-editing .sec-tools {
    display: flex; gap: 8px; align-items: center;
    position: absolute; right: 0; top: clamp(28px, 3.4vw, 52px);
  }
  body.newlook .is-editing .sec-tools .link-btn { margin-left: 6px; }
  /* Dragging a section (2026-10-27): the page folds to its headings while
     one moves, and the one moving is outlined. */
  body.newlook .sec-tools .sec-grip { width: 34px; height: 34px; }
  body.newlook #page-sections.is-sorting .page-section > :not(.sec-title):not(.sec-tools) { display: none; }
  body.newlook #page-sections.is-sorting .page-section { padding: 14px 0; }
  body.newlook #page-sections.is-sorting .sec-tools { top: 14px; }
  body.newlook #page-sections.is-sorting .page-section.is-dragging { outline: 1px solid var(--st-yel); outline-offset: -1px; background: var(--st-bg); position: relative; z-index: 1; }
  body.newlook #page-sections.is-sorting { user-select: none; -webkit-user-select: none; }
  body.newlook #view-page:not(.is-editing) .page-section.is-hidden { display: none; }
  body.newlook .page-section.is-hidden > .sec-body,
  body.newlook .page-section.is-hidden > .sec-title { opacity: .45; }
  body.newlook .page-links-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font: 500 12.5px / 1.4 var(--st-mono); }
  body.newlook .page-links-row[hidden] { display: none; }
  body.newlook .page-links-row a { color: var(--st-ink); text-decoration: underline; text-underline-offset: 3px; }
  body.newlook .page-links-row a:hover, body.newlook .page-links-row a:focus-visible { color: var(--st-yel); }
  body.newlook #view-page:not(.is-editing) .page-links-edit { display: none; }
  @media (max-width: 600px) {
    body.newlook .is-editing .sec-tools { position: static; margin-top: 12px; }
  }
  body.newlook .sec-body { margin-top: clamp(14px, 1.6vw, 22px); }
  body.newlook .sec-empty { font: 400 13px var(--st-mono); color: var(--ink-faint); }
  body.newlook .bio-text { max-width: none; font: 400 clamp(14px, 1.15vw, 17px) / 1.7 var(--st-mono); color: var(--st-ink); }
  body.newlook .bio-text + .bio-text { margin-top: 1em; }
  /* The full width of the section, so the link sits at the page's right
     edge rather than at the end of the bio's shorter reading line. */
  body.newlook .bio-more {
    max-width: none; margin-top: 16px; display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  }
  body.newlook .bio-more .pill.hidden-tag { margin: 0; }
  body.newlook .bio-more.is-empty { display: none; }
  body.newlook .is-editing .bio-more.is-empty { display: flex; }
  body.newlook .bio-more-link {
    background: none; border: 0; padding: 4px 0; cursor: pointer;
    font: 500 13px var(--st-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-yel);
  }
  body.newlook .bio-more-link:hover { color: var(--st-ink); }
  /* Edit mode only: the way to the profile form, where the name, links,
     roles and genres chosen at sign-up are changed (Mat, 2026-10-06). */
  body.newlook .page-profile-link { display: none; margin-top: 12px; }
  body.newlook .is-editing .page-profile-link { display: inline-block; }
  body.newlook .is-editing .bio-more-link::after {
    content: "edit"; margin-left: 10px; font: 500 11px / 1 var(--st-mono); letter-spacing: 0.16em;
    border: 1px solid currentColor; padding: 5px 8px 4px; vertical-align: 1px;
  }
  body.newlook #view-xbio .xbio { max-width: 46em; display: grid; gap: 20px; margin-top: clamp(20px, 2.4vw, 34px); }
  body.newlook #view-xbio .xbio p { font: 400 clamp(14px, 1.15vw, 17px) / 1.75 var(--st-mono); color: var(--st-ink); white-space: pre-line; }
  body.newlook #view-xbio .xbio figure { margin: 0; }
  body.newlook #view-xbio .xbio img { width: 100%; display: block; border: 1px solid var(--st-rule); }

  /* music rows, as the public tracklist */
  body.newlook #view-page .trk-row {
    border-radius: 0; border-bottom: 1px solid var(--st-rule); padding: 11px 4px; font-family: var(--st-mono);
  }
  body.newlook #view-page .sec-body > .trk-row:first-child,
  body.newlook #view-page .sec-body > div > .trk-row:first-child { border-top: 1px solid var(--st-rule); }
  body.newlook #view-page .trk-row:hover:not(:disabled) { background: rgba(252, 249, 245, 0.04); }
  body.newlook #view-page .trk-row.is-playing { background: rgba(234, 251, 23, 0.07); }
  body.newlook #view-page .trk-row.is-playing .trk-row-title,
  body.newlook #view-page .trk-row.is-playing .trk-icon { color: var(--st-yel); }
  body.newlook #view-page .trk-icon { border-radius: 0; }
  body.newlook #view-page .trk-row-title { font: 400 clamp(13px, 1.05vw, 15px) var(--st-mono); }
  body.newlook #view-page .trk-row-sub { font: 400 12px var(--st-mono); }
  /* Photos, covers, videos and merch sit in tiles of one size, centred, as
     on the public page (Mat, 2026-10-24). */
  body.newlook .sec-vids { gap: 12px; justify-content: center; }
  body.newlook .sec-photos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 180px)); justify-content: center;
    gap: clamp(10px, 1.4vw, 18px);
  }
  @media (max-width: 640px) { body.newlook .sec-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  body.newlook .sec-merch {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 280px)); justify-content: center;
    gap: clamp(14px, 1.6vw, 24px);
  }
  @media (max-width: 560px) { body.newlook .sec-merch { grid-template-columns: minmax(0, 1fr); } }
  body.newlook .mc-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0; background: none; border: 0; color: var(--st-ink); text-align: left; cursor: pointer; }
  body.newlook .mc-art { aspect-ratio: 1; margin-bottom: 8px; overflow: hidden; border: 1px solid var(--st-rule); background: rgba(252, 249, 245, 0.06); }
  body.newlook .mc-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
  body.newlook .mc-tile:hover .mc-art img { transform: scale(1.03); }
  body.newlook .mc-tile:focus-visible { outline: 2px solid var(--st-yel); outline-offset: 3px; }
  body.newlook .mc-name { font: 700 clamp(13.5px, 1.1vw, 16px) / 1.35 var(--st-mono); overflow-wrap: anywhere; }
  body.newlook .mc-price { font: 700 clamp(14px, 1.2vw, 17px) var(--st-mono); color: var(--st-yel); }
  body.newlook .mc-price span { font-size: 12px; font-weight: 400; color: var(--ink-faint); }

  /* Albums and EPs: covers in a row, the open one above them with its tracks */
  body.newlook .rel-shelf { margin-bottom: clamp(22px, 2.6vw, 34px); }
  body.newlook .rel-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 200px)); justify-content: center;
    gap: clamp(12px, 1.6vw, 20px);
  }
  @media (max-width: 560px) { body.newlook .rel-grid { grid-template-columns: repeat(auto-fit, minmax(0, calc(50% - 12px))); } }
  body.newlook .rel-tile {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0;
    background: none; border: 0; color: var(--st-ink); text-align: left; cursor: pointer;
  }
  body.newlook .rel-cover {
    aspect-ratio: 1; width: 100%; margin-bottom: 6px; overflow: hidden;
    border: 1px solid var(--st-rule); background: rgba(252, 249, 245, 0.06);
  }
  body.newlook .rel-cover img, body.newlook .rel-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
  body.newlook .rel-tile:hover .rel-cover img { transform: scale(1.03); }
  body.newlook .rel-tile.is-on .rel-cover { outline: 2px solid var(--st-yel); outline-offset: 2px; }
  body.newlook .rel-tile:focus-visible { outline: 2px solid var(--st-yel); outline-offset: 4px; }
  body.newlook .rel-name { font: 700 13.5px var(--st-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.newlook .rel-tile:hover .rel-name, body.newlook .rel-tile.is-on .rel-name { color: var(--st-yel); }
  body.newlook .rel-sub { font: 400 11.5px var(--st-mono); letter-spacing: 0.06em; color: var(--ink-soft); }
  body.newlook .rel-stage { margin-bottom: clamp(18px, 2vw, 28px); border: 1px solid var(--st-rule); }
  body.newlook .rel-head { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); padding: clamp(12px, 1.6vw, 18px); }
  body.newlook .rel-art { flex: none; width: clamp(88px, 12vw, 150px); aspect-ratio: 1; overflow: hidden; border: 1px solid var(--st-rule); background: rgba(252, 249, 245, 0.06); }
  body.newlook .rel-text { flex: 1; min-width: 0; }
  body.newlook .rel-kind { font: 500 11px var(--st-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
  body.newlook .rel-title { margin-top: 6px; font: 400 clamp(26px, 3vw, 44px) / 1 var(--st-condensed); text-transform: uppercase; overflow-wrap: anywhere; }
  body.newlook .rel-meta { margin-top: 8px; font: 400 12.5px var(--st-mono); color: var(--ink-soft); }
  body.newlook .rel-close {
    align-self: flex-start; flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--st-rule); color: var(--ink-soft); cursor: pointer;
  }
  body.newlook .rel-close:hover { color: var(--st-yel); border-color: var(--st-yel); }
  body.newlook .rel-close svg { width: 16px; height: 16px; }
  body.newlook .rel-tracks { border-top: 1px solid var(--st-rule); }
  body.newlook #view-page .rel-tracks .trk-row { border-bottom: 1px solid var(--st-rule); }
  body.newlook #view-page .rel-tracks .trk-row:last-child { border-bottom: 0; }
  body.newlook .trk-icon.trk-num { font: 500 12px var(--st-mono); color: var(--ink-soft); background: none; }
  body.newlook #view-page .trk-cols { border-top: 1px solid var(--st-rule); }
  /* Tracks in two columns on a wider screen (Mat, 2026-10-24), as the public
     page; --rows is half the list, rounded up. */
  @media (min-width: 761px) {
    body.newlook #view-page .trk-cols, body.newlook #view-page .rel-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 1), auto); grid-auto-flow: column; column-gap: clamp(24px, 3vw, 48px); }
    body.newlook #view-page .rel-tracks .trk-row.col-end, body.newlook #view-page .rel-tracks .trk-line.col-end { border-bottom: 0; }
    body.newlook #view-page .trk-cols > .trk-line, body.newlook #view-page .rel-tracks > .trk-line { align-self: start; }
  }
  /* A track with credits (2026-10-26): the row that plays, a Credits button
     at its end, and its credits under it when that's pressed. */
  body.newlook #view-page .trk-line { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--st-rule); }
  body.newlook #view-page .trk-line > .trk-row { flex: 1; min-width: 0; border-bottom: 0; }
  body.newlook #view-page .rel-tracks .trk-line > .trk-row { border-bottom: 0; }
  body.newlook #view-page .rel-tracks .trk-line:last-child { border-bottom: 0; }
  body.newlook .trk-info {
    flex: none; margin-left: 8px; padding: 6px 8px; background: none; border: 1px solid var(--st-rule); border-radius: 0;
    color: var(--ink-soft); font: 500 10.5px var(--st-mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  }
  body.newlook .trk-info:hover, body.newlook .trk-info[aria-expanded="true"] { color: var(--st-yel); border-color: var(--st-yel); }
  body.newlook .trk-line > .trk-more { flex-basis: 100%; }
  body.newlook .trk-more {
    display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 12px; padding: 0 4px 0 52px;
    font: 400 12px / 1.5 var(--st-mono); color: var(--ink-soft);
  }
  body.newlook .trk-more[hidden] { display: none; }
  body.newlook .trk-more dt { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; padding-top: 1px; }
  body.newlook .trk-more dd { margin: 0; }
  body.newlook .trk-more a { color: var(--st-ink); text-decoration: underline; text-underline-offset: 2px; }
  body.newlook .trk-more a:hover { color: var(--st-yel); }
  /* Credits naming you (Backstage -> Credits). */
  body.newlook .crd-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--st-rule); }
  body.newlook #crd-list { border-top: 1px solid var(--st-rule); margin-top: 8px; }
  body.newlook .crd-art { flex: none; width: 52px; height: 52px; background: rgba(252, 249, 245, 0.06); }
  body.newlook .crd-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
  body.newlook .crd-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font: 400 12.5px / 1.45 var(--st-mono); color: var(--ink-soft); }
  body.newlook .crd-text b { font: 700 14px var(--st-mono); color: var(--st-ink); }
  body.newlook .crd-text a { color: var(--st-ink); }
  body.newlook .crd-state { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
  body.newlook .crd-row.is-new .crd-state { color: var(--st-yel); }
  body.newlook .crd-acts { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: flex-end; }
  @media (max-width: 600px) {
    body.newlook .crd-row { flex-wrap: wrap; }
    body.newlook .crd-acts { flex-basis: 100%; justify-content: flex-start; padding-left: 66px; }
    body.newlook .trk-more { padding-left: 4px; }
  }
  /* Bring your links over (2026-10-27): a pasted Linktree or website, read
     for links (Links, and setup's step 2). */
  body.newlook .li-row, body.auth .li-row { display: flex; gap: 10px; align-items: stretch; margin: 8px 0 12px; }
  body.newlook .li-row .input-shell, body.auth .li-row .input-shell { flex: 1; min-width: 0; margin: 0; }
  body.newlook .li-row .btn-small, body.auth .li-row .btn-small { flex: none; }
  body.newlook #li-found[hidden] { display: none; }
  body.newlook .li-list { border-top: 1px solid var(--st-rule); margin: 6px 0 16px; }
  body.newlook .li-item { align-items: flex-start; padding: 10px 2px; border-bottom: 1px solid var(--st-rule); color: var(--st-ink); }
  body.newlook .li-item input { margin-top: 3px; flex: none; }
  body.newlook .li-item span { min-width: 0; overflow-wrap: anywhere; font: 400 12.5px / 1.45 var(--st-mono); }
  body.newlook .li-item b { font-weight: 700; margin-right: 6px; }
  body.newlook .li-item small { display: block; color: var(--ink-faint); font-size: 11.5px; }
  body.newlook .li-item.is-there { opacity: .55; cursor: default; }
  /* Paste a list of links, on Links (Mat, 2026-11-08). */
  body.newlook .pl-paste { margin: 2px 0 26px; }
  body.newlook .pl-paste .field { margin: 14px 0 10px; }
  body.newlook #pl-paste-found { margin-top: 18px; }
  body.newlook .pl-check { border-top: 1px solid var(--st-rule); margin: 10px 0 16px; }
  body.newlook .pl-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(0, 2fr); gap: 6px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--st-rule); }
  body.newlook .pl-row .input-shell { margin: 0; min-width: 0; }
  body.newlook .pl-row .pl-tick { margin: 0; }
  body.newlook .pl-name-fixed { font: 700 13px var(--st-mono); color: var(--st-ink); }
  body.newlook .pl-row small { grid-column: 2 / -1; color: var(--ink-faint); font: 400 11.5px / 1.4 var(--st-mono); }
  body.newlook .pl-row.is-there { opacity: .55; }
  body.newlook #pl-paste-save { margin-top: 16px; }
  body.newlook .pl-paste-cancel { margin-top: 10px; }
  @media (max-width: 560px) {
    body.newlook .pl-row { grid-template-columns: 20px minmax(0, 1fr); }
    body.newlook .pl-row .pl-addr { grid-column: 2; }
  }
  body.auth .li-setup { margin-top: 4px; }
  @media (max-width: 520px) {
    body.newlook .li-row, body.auth .li-row { flex-direction: column; }
  }
  /* Daily clips (2026-10-27): the artist's Backstage screen, and Admin's. */
  body.newlook .dc-status { margin: 0 0 14px; font: 400 13px / 1.5 var(--st-mono); color: var(--st-yel); }
  body.newlook .dc-status[hidden] { display: none; }
  body.newlook #dc-clips { margin-bottom: 8px; }
  body.newlook .dc-clip { display: flex; gap: 16px; align-items: flex-end; padding: 14px 0; border-bottom: 1px solid var(--st-rule); }
  body.newlook .dc-clip:first-child { border-top: 1px solid var(--st-rule); }
  body.newlook .dc-clip video { flex: none; width: 135px; height: 240px; background: #000; display: block; }
  body.newlook .dc-clip-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font: 400 12.5px / 1.45 var(--st-mono); }
  body.newlook .dc-clip-text b { font: 700 14px var(--st-mono); }
  body.newlook #dc-start { width: 100%; accent-color: var(--st-yel); margin: 6px 0 4px; }
  body.newlook .dc-when { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; font: 600 13px var(--st-mono); }
  body.newlook .trk-all-head { margin-bottom: 10px; font: 500 11px var(--st-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
  /* The inner circle on an artist's page (2026-11-11, fillInner in app.js). */
  body.newlook .page-section[data-key="inner"] .sec-body > * + .trk-all-head { margin-top: 22px; }
  body.newlook .ic-what { margin-bottom: 8px; font-size: 15px; line-height: 1.5; color: var(--st-ink); }
  body.newlook .ic-what + .sec-empty { line-height: 1.55; }
  body.newlook .ic-room { padding: 12px 0; border-top: 1px solid var(--st-rule); }
  body.newlook .ic-room .sec-empty { line-height: 1.55; margin-top: 4px; }
  body.newlook .ic-room-title { font-weight: 700; font-size: 15px; color: var(--st-ink); }
  body.newlook .ic-done { margin-top: 8px; font: 500 12px var(--st-mono); color: var(--st-yel); }
  body.newlook .ic-room .fs-acts input[type="text"] { width: min(260px, 100%); padding: 8px 10px; background-color: var(--field-bg); color: var(--st-ink); border: 1px solid var(--st-rule); border-radius: 0; font: inherit; }
  /* Champions' reviews and photos under an open release (2026-10-16). */
  body.newlook .fs-box, body.newlook .fs-mine { padding: clamp(14px, 1.8vw, 20px); border-top: 1px solid var(--st-rule); }
  body.newlook .fs-head { margin-bottom: 12px; font: 500 11px var(--st-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
  body.newlook .fs-head-2 { margin-top: 22px; }
  body.newlook .fs-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 14px; }
  body.newlook .fs-photo { margin: 0; min-width: 0; }
  body.newlook .fs-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--st-rule); }
  body.newlook .fs-photo > a { display: block; cursor: zoom-in; }
  body.newlook .fs-photo > a.is-on { outline: 2px solid var(--st-yel); outline-offset: 2px; cursor: zoom-out; }
  body.newlook .fs-photo figcaption { display: grid; gap: 6px; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
  body.newlook .fs-photo figcaption a, body.newlook .fs-by a { color: var(--st-ink); text-decoration: underline; text-underline-offset: 3px; }
  body.newlook .fs-review { margin: 0 0 12px; padding: 12px 14px; border-left: 3px solid var(--st-yel); background: rgba(252, 249, 245, 0.05); }
  body.newlook .fs-review p { font-size: 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
  body.newlook .fs-review .fs-by { margin-top: 8px; font: 400 12px var(--st-mono); color: var(--ink-soft); white-space: normal; }
  body.newlook .fs-note { margin-bottom: 12px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
  body.newlook .fs-text { width: 100%; min-height: 110px; }
  body.newlook .fs-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
  body.newlook .fs-acts input[type="date"], body.newlook .fs-acts .st-face { width: auto; padding: 8px 10px; background-color: var(--field-bg); color: var(--st-ink); border: 1px solid var(--st-rule); border-radius: 0; font: inherit; color-scheme: dark; }
  body.newlook .fs-cap { width: 100%; border-radius: 0; padding: 7px 9px; background: var(--field-bg); color: var(--st-ink); border: 1px solid var(--st-rule); font: 400 12.5px var(--st-mono); }
  body.newlook .fs-cap:focus { outline: none; border-color: var(--st-yel); }
  body.newlook .fs-st { font: 500 10.5px var(--st-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
  body.newlook .fs-st.is-shown { color: var(--st-yel); }
  body.newlook .fs-add { display: grid; gap: 10px; max-width: 320px; }
  body.newlook .fs-add .btn-small { justify-self: start; }
  body.newlook .fs-prev { width: 160px; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--st-rule); }
  body.newlook .rvw-photo { margin: 10px 0 0; }
  body.newlook .rvw-photo img { display: block; width: min(100%, 320px); border: 1px solid var(--st-rule); }
  body.newlook .rvw-photo figcaption { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }
  /* Reviews, stage 1 (2026-10-17): the line and the whole review, the guide,
     and a review as its line on the page and in Backstage. */
  body.newlook .fs-label { display: block; margin: 14px 0 8px; font: 500 11px var(--st-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-ink); }
  body.newlook .fs-line { width: 100%; height: 46px; padding: 0 12px; border-radius: 0; border: 1px solid var(--st-rule); background: var(--field-bg); color: var(--st-ink); font: 400 14.5px var(--st-mono); }
  body.newlook .fs-line:focus { outline: none; border-color: var(--st-yel); }
  body.newlook .fs-count { margin-top: 6px; text-align: right; font: 400 11px var(--st-mono); color: var(--ink-faint); }
  body.newlook .fs-hint { margin-top: 2px; font: 400 12px / 1.5 var(--st-mono); color: var(--ink-faint); }
  body.newlook .fs-knows { margin-top: 12px; }
  body.newlook .fs-guide { margin-top: 14px; border: 1px solid var(--st-rule); padding: 10px 14px; }
  body.newlook .fs-guide summary { cursor: pointer; font: 700 12.5px var(--st-mono); color: var(--st-yel); }
  body.newlook .fs-guide ol { margin: 10px 0 8px; padding-left: 22px; font: 400 13px / 1.6 var(--st-mono); color: var(--st-ink); }
  body.newlook .fs-guide li::marker { color: var(--st-yel); font-weight: 700; }
  body.newlook .fs-see { display: inline-block; margin-top: 12px; font: 700 12.5px var(--st-mono); color: var(--st-yel); }
  body.newlook .rv-card { padding: 14px 0; border-top: 1px solid var(--st-rule); }
  body.newlook .fs-box .rv-card:first-of-type { border-top: 0; padding-top: 4px; }
  body.newlook .rv-on { font: 500 11px var(--st-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
  body.newlook .rv-line { margin-top: 6px; font: 800 17px / 1.3 var(--st-display); letter-spacing: -0.01em; color: var(--st-ink); }
  body.newlook .rv-by { margin-top: 6px; font: 400 12px var(--st-mono); color: var(--ink-soft); }
  body.newlook .rv-by a { color: var(--st-ink); text-decoration: underline; text-underline-offset: 3px; }
  body.newlook .rv-read { display: inline-block; margin-top: 8px; font: 700 12.5px var(--st-mono); color: var(--st-yel); }
  body.newlook .rv-full { margin-top: 8px; }
  body.newlook .rv-full summary { cursor: pointer; font: 700 12.5px var(--st-mono); color: var(--st-yel); }
  body.newlook .rv-full p { margin-top: 8px; font: 400 13.5px / 1.65 var(--st-mono); white-space: pre-line; color: var(--st-ink); }
  body.newlook .rv-list-app .rv-card:first-child { border-top: 0; padding-top: 0; }
  body.newlook .rvw-item .rv-line { margin: 10px 0 0; }
  body.newlook .rvw-item .rv-read { margin-bottom: 4px; }
  body.newlook .rv-report-form { display: grid; gap: 10px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--st-rule); }
  body.newlook .rv-report-form .btn-small { justify-self: start; }
  body.newlook .cp-row { padding: 16px 0; border-top: 1px solid var(--st-rule); }
  body.newlook .cp-top { display: flex; gap: 14px; }
  body.newlook .cp-cover { flex: none; width: 64px; height: 64px; overflow: hidden; border: 1px solid var(--st-rule); background: rgba(252, 249, 245, 0.06); }
  body.newlook .cp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
  body.newlook .cp-text { min-width: 0; }
  body.newlook .cp-row .more-add { margin-top: 12px; }
  body.newlook .cp-row a.btn-small { display: inline-flex; align-items: center; text-decoration: none; }
  body.newlook .cp-row .fs-mine { margin-top: 12px; border: 1px solid var(--st-rule); }
  body.newlook .sc-rv input { margin-top: 3px; accent-color: var(--st-yel); }
  body.newlook .sc-rv-text small { font: 400 12px var(--st-mono); color: var(--ink-soft); }
  body.newlook #disc-reviews { margin-top: 28px; }
  body.newlook .disc-rv { padding: 0 0 10px; border-top: 0; }
  body.newlook #disc-following { margin-top: 28px; }
  body.newlook .rv-follow { margin-left: 10px; padding: 3px 8px; border: 1px solid var(--st-rule); background: none; color: var(--st-ink); font: 500 11px var(--st-mono); letter-spacing: 0.06em; cursor: pointer; }
  body.newlook .rv-follow[aria-pressed="true"] { border-color: var(--st-yel); color: var(--st-yel); }
  body.newlook .rv-follow:hover:not(:disabled) { border-color: var(--st-yel); }
  body.newlook .ph-tile {
    display: block; padding: 0; aspect-ratio: 1; overflow: hidden; cursor: zoom-in;
    background: none; border: 1px solid var(--st-rule); border-radius: 0;
  }
  body.newlook .ph-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
  body.newlook .ph-tile:hover img { transform: scale(1.03); }
  body.newlook .ph-tile.is-on { outline: 2px solid var(--st-yel); outline-offset: 2px; cursor: zoom-out; }
  body.newlook .ph-tile:focus-visible { outline: 2px solid var(--st-yel); outline-offset: 2px; }
  body.newlook .ph-stage { position: relative; margin-bottom: clamp(14px, 1.6vw, 22px); border: 1px solid var(--st-rule); background: #000; outline: none; }
  /* The picture at its own size (2026-10-27), its controls outside it (Mat,
     2026-11-01): < and > beside its sides and X beside its top right
     corner, in black kept for them, and on a phone, which hasn't the room,
     in the bar under it, as on the public page. */
  body.newlook .ph-view { display: flex; justify-content: center; padding: 12px 70px; }
  body.newlook .ph-pic { position: relative; max-width: 100%; min-width: 160px; min-height: 160px; }
  body.newlook .ph-pic img { display: block; max-width: 100%; max-height: 78vh; }
  body.newlook .ph-pic button {
    position: absolute; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
    color: var(--st-ink); background: rgba(12, 13, 12, 0.6); border: 1px solid rgba(252, 249, 245, 0.3); border-radius: 0;
    cursor: pointer; transition: color .15s, border-color .15s, background .15s;
  }
  body.newlook .ph-pic button:hover, body.newlook .ph-pic button:focus-visible { color: var(--st-yel); border-color: var(--st-yel); background: rgba(12, 13, 12, 0.85); outline: none; }
  body.newlook .ph-pic button[hidden] { display: none; }
  body.newlook .ph-pic button svg { width: 22px; height: 22px; }
  body.newlook .ph-prev, body.newlook .ph-next { top: 50%; transform: translateY(-50%); }
  body.newlook .ph-prev { left: -58px; }
  body.newlook .ph-next { right: -58px; }
  body.newlook .ph-close { top: 0; right: -58px; }
  /* Full screen (2026-11-01), under X, where the browser allows it. */
  body.newlook .ph-full { top: 58px; right: -58px; }
  body.newlook .ph-full svg { display: block; }
  body.newlook .ph-full .ph-back, body.newlook .ph-stage.is-full .ph-full .ph-go { display: none; }
  body.newlook .ph-stage.is-full .ph-full .ph-back { display: block; }
  body.newlook .ph-stage.is-full { display: flex; flex-direction: column; margin: 0; border: 0; }
  body.newlook .ph-stage.is-full .ph-view { flex: 1; min-height: 0; align-items: center; }
  body.newlook .ph-stage.is-full .ph-pic img { width: auto; height: calc(100vh - 72px); max-width: 100%; max-height: none; object-fit: contain; }
  @media (max-width: 640px) {
    body.newlook .ph-view { padding: 0; }
    body.newlook .ph-pic { position: static; }
    body.newlook .ph-pic button { width: 40px; height: 40px; top: auto; bottom: 10px; transform: none; }
    body.newlook .ph-close { right: 10px; }
    body.newlook .ph-next { right: 56px; }
    body.newlook .ph-prev { left: auto; right: 102px; }
    body.newlook .ph-full { right: 56px; }
    body.newlook .can-full .ph-next { right: 102px; }
    body.newlook .can-full .ph-prev { right: 148px; }
    body.newlook .ph-stage.is-full .ph-pic img { height: calc(100vh - 62px); }
  }
  body.newlook .ph-stage-bar {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-top: 1px solid var(--st-rule); background: var(--st-bg);
  }
  body.newlook .ph-cap { flex: 1; min-width: 0; font: 400 12.5px var(--st-mono); color: var(--ink-soft); overflow-wrap: anywhere; }
  @media (max-width: 640px) {
    body.newlook .ph-stage-bar { min-height: 60px; padding-right: 152px; }
    body.newlook .can-full .ph-stage-bar { padding-right: 198px; }
  }
  /* Constrain (Mat, 2026-11-14, the default): every picture in one box of
     one size, so the page doesn't move as they change; Original is the
     picture at its own size. A phone's box is square, with no switch. */
  body.newlook .ph-stage.is-fit:not(.is-full) .ph-view { height: min(70vh, 720px); }
  body.newlook .ph-stage.is-fit:not(.is-full) .ph-pic { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
  body.newlook .ph-stage.is-fit:not(.is-full) .ph-pic img { max-width: 100%; max-height: 100%; }
  body.newlook .ph-size { display: flex; gap: 16px; flex: none; }
  body.newlook .ph-size button {
    padding: 0 0 2px; font: 400 12px var(--st-mono); letter-spacing: 0.04em; color: var(--ink-soft);
    background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; cursor: pointer;
  }
  body.newlook .ph-size button[aria-pressed="true"] { color: var(--st-ink); border-bottom-color: var(--st-yel); }
  body.newlook .ph-size button:hover, body.newlook .ph-size button:focus-visible { color: var(--st-yel); outline: none; }
  body.newlook .ph-stage.is-full .ph-size { display: none; }
  @media (max-width: 640px) {
    body.newlook .ph-stage.is-fit:not(.is-full) .ph-view { height: min(60vh, 100vw); }
    body.newlook .ph-size { display: none; }
  }
  body.newlook .sec-vids .vid-thumb { width: clamp(120px, 14vw, 200px); height: auto; aspect-ratio: 16 / 9; border-radius: 0; border-color: var(--st-rule); }
  body.newlook .sec-vids .vid-thumb.is-on { outline-color: var(--st-yel); }

  /* merch, events, diary: rows on rules, not boxes */
  body.newlook .sec-list { gap: 0; margin-top: 0; border-top: 1px solid var(--st-rule); }
  body.newlook .sec-item {
    border: 0; border-bottom: 1px solid var(--st-rule); border-radius: 0; background: none;
    padding: 13px 36px 13px 0; font: 700 clamp(13.5px, 1.1vw, 16px) / 1.35 var(--st-mono);
  }
  body.newlook .sec-item small { font: 400 12.5px var(--st-mono); color: var(--ink-faint); margin-top: 4px; }
  body.newlook button.sec-item:hover { background: none; color: var(--st-yel); border-color: var(--st-rule); }
  body.newlook button.sec-item::after { border-color: var(--ink-faint); right: 6px; }
  body.newlook button.sec-item:hover::after { border-color: var(--st-yel); }

  @media (max-width: 560px) {
    body.newlook .page-head { flex-wrap: wrap; }
    body.newlook .page-id { margin-left: 0; }
  }

  /* ================= THE MUSIC PAGE, NEW DESIGN =================
     body.newlook is set on every signed-in view (see go()).
     It mirrors the public artist page's music section, so an artist sees
     their music laid out the way fans will. Behaviour is unchanged: this
     block only restyles the elements the Music page already builds. */
  body.newlook main { align-items: flex-start; padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 100px); }
  /* The page widens with the screen, the same as every page (--page). */
  body.newlook .shell { display: block; width: min(var(--page), 100%); max-width: none; margin-inline: auto; padding: 0 clamp(20px, 4.4vw, 68px); }
  body.newlook .card {
    max-width: none; width: 100%; padding: 0; border: 0; border-radius: 0;
    background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  body.newlook .view.is-active { animation: none; }

  body.newlook .back-link { font: 400 13px var(--st-mono); color: var(--ink-soft); margin-bottom: 26px; }
  body.newlook .back-link:hover { color: var(--st-yel); }
  body.newlook .eyebrow {
    font: 400 clamp(10.5px, 0.9vw, 13px) var(--st-mono); letter-spacing: 0.2em;
    color: var(--ink-soft); margin-bottom: 0;
  }
  body.newlook h1 {
    margin: 10px 0 12px; font: 400 clamp(44px, 6.4vw, 104px) / 0.9 var(--st-condensed);
    text-transform: uppercase; letter-spacing: -0.01em;
  }
  body.newlook .sub { font: 400 13px / 1.6 var(--st-mono); color: var(--ink-soft); margin-bottom: 22px; }
  body.newlook .msg { border-radius: 0; font: 400 13px / 1.5 var(--st-mono); }

  /* upload */
  body.newlook .dropzone {
    border-radius: 0; border: 1px dashed var(--st-rule); background: rgba(252, 249, 245, 0.02);
    padding: clamp(26px, 3.4vw, 44px) 20px;
  }
  body.newlook .dropzone:hover, body.newlook .dropzone.drag { border-color: var(--st-yel); background: rgba(234, 251, 23, 0.04); }
  body.newlook .dropzone h3 { font: 400 clamp(26px, 2.6vw, 36px) / 1 var(--st-condensed); text-transform: uppercase; color: var(--st-ink); }
  body.newlook .dropzone p { font: 400 12.5px var(--st-mono); color: var(--ink-faint); margin-top: 8px; }
  body.newlook .qitem { border-radius: 0; background: rgba(252, 249, 245, 0.02); border-color: var(--st-rule); }
  body.newlook .qname { font: 700 14px var(--st-mono); }
  body.newlook .qstate, body.newlook .qnote { font-family: var(--st-mono); }
  body.newlook .bar, body.newlook .bar span { border-radius: 0; }
  body.newlook .bar span { background: var(--st-yel); }
  body.newlook .btn { border-radius: 0; font: 700 15px / 1 var(--st-mono); }
  body.newlook .btn-gold {
    height: 56px; background: var(--st-yel); color: var(--st-on-yel);
    border-color: var(--st-yel); box-shadow: none;
  }
  body.newlook .btn-gold:hover:not([disabled]) { filter: none; background: var(--st-ink); border-color: var(--st-ink); }

  /* section heads: a rule, then the condensed title */
  body.newlook .section-rule { border-top-color: var(--st-rule); margin: clamp(34px, 4vw, 60px) 0 clamp(20px, 2.4vw, 32px); }
  body.newlook .section-head {
    font: 400 clamp(28px, 3.4vw, 52px) / 1 var(--st-condensed);
    text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 8px;
  }
  body.newlook .empty-note { font: 400 13px var(--st-mono); color: var(--ink-faint); }

  /* tracks and singles: rows on rules, not boxes */
  body.newlook #mu-tracks, body.newlook #mu-singles, body.newlook #mu-section-covers { gap: 0; border-top: 1px solid var(--st-rule); }
  body.newlook #mu-tracks > .trk, body.newlook #mu-singles > .trk, body.newlook #mu-section-covers > .trk {
    background: none; border: 0; border-bottom: 1px solid var(--st-rule); border-radius: 0; padding: 16px 0;
  }
  body.newlook .trk-title { font: 700 clamp(14px, 1.15vw, 16px) / 1.3 var(--st-mono); }
  body.newlook .trk-meta { font: 400 12.5px / 1.5 var(--st-mono); color: var(--ink-faint); margin-top: 5px; }
  body.newlook .pill {
    border-radius: 0; font: 500 10px / 1 var(--st-mono); letter-spacing: 0.14em;
    padding: 5px 8px 4px; border-color: var(--st-rule); color: var(--ink-soft);
  }
  body.newlook .pill.live { color: var(--st-yel); border-color: var(--st-yel); }
  body.newlook .pill.work { color: var(--st-ink); border-color: var(--st-ink); }
  body.newlook .pill.bad { color: var(--danger); border-color: var(--danger); }
  body.newlook .trk-actions { gap: 8px 18px; margin-top: 10px; }
  body.newlook .link-btn {
    font: 400 12.5px var(--st-mono); color: var(--ink-soft);
    border-bottom: 1px solid var(--st-rule); padding-bottom: 1px;
  }
  body.newlook .link-btn:hover { color: var(--st-yel); border-color: var(--st-yel); }
  body.newlook .link-btn.danger { color: var(--danger); border-color: rgba(255, 138, 122, 0.4); }

  /* EPs and albums: the public page's layout, cover left, list right */
  body.newlook .btn-small {
    border-radius: 0; font: 500 13px / 1 var(--st-mono); padding: 11px 16px;
    background: none; border: 1px solid var(--st-ink); color: var(--st-ink);
  }
  body.newlook .btn-small:hover:not(:disabled) { background: var(--st-ink); color: var(--st-bg); }
  body.newlook #mu-new-album { border-color: var(--st-yel); color: var(--st-yel); }
  body.newlook #mu-new-album:hover { background: var(--st-yel); color: var(--st-on-yel); }
  body.newlook #mu-albums { gap: clamp(28px, 3vw, 44px); }
  body.newlook #mu-albums > .trk {
    display: grid; grid-template-columns: clamp(140px, 18vw, 260px) minmax(0, 1fr);
    column-gap: clamp(18px, 2.4vw, 36px); align-content: start;
    background: none; border: 0; border-radius: 0; padding: 0;
  }
  body.newlook #mu-albums .rel-head { display: contents; }
  body.newlook #mu-albums .rel-head .cover-thumb {
    grid-column: 1; grid-row: 1 / span 3; width: 100%; height: auto; aspect-ratio: 1;
    border-radius: 0; border-color: var(--st-rule); font: 400 12px var(--st-mono);
  }
  body.newlook #mu-albums .rel-head > div:not(.cover-thumb),
  body.newlook #mu-albums > .trk > .trk-actions,
  body.newlook #mu-albums .rel-tracks { grid-column: 2; }
  body.newlook .rel-type { font: 500 11px var(--st-mono); letter-spacing: 0.2em; color: var(--st-yel); }
  body.newlook #mu-albums .trk-title { margin-top: 6px; font-size: clamp(17px, 1.5vw, 23px); white-space: normal; }
  body.newlook .rel-tracks { margin-top: 16px; border-top: 1px solid var(--st-rule); }
  body.newlook .rel-tracks li {
    display: grid; grid-template-columns: 2.4em minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center;
    padding-block: 10px; border-bottom: 1px solid var(--st-rule); font: 400 clamp(13px, 1.05vw, 15px) var(--st-mono);
  }
  body.newlook .rel-tracks li:last-child { border-bottom: 1px solid var(--st-rule); }
  body.newlook .rel-no, body.newlook .rel-len { font: 400 12.5px var(--st-mono); color: var(--ink-faint); text-align: left; width: auto; }
  body.newlook .rel-tools { gap: 12px; }
  body.newlook .arrow-btn { border-radius: 0; border-color: var(--st-rule); font-family: var(--st-mono); }
  body.newlook .arrow-btn:hover:not(:disabled) { color: var(--st-yel); border-color: var(--st-yel); }

  /* in-place forms */
  body.newlook .trk-editor { border-radius: 0; border-color: var(--st-yel); background: rgba(252, 249, 245, 0.03); padding: clamp(16px, 2vw, 24px); }
  body.newlook #mu-albums .trk-editor { grid-column: auto; }
  /* link page extras: colours and taps */
  body.newlook .lp-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
  body.newlook .lp-preset { width: 40px; height: 40px; border: 1px solid var(--st-rule); cursor: pointer; padding: 0; }
  body.newlook .lp-preset:hover, body.newlook .lp-preset:focus-visible { border-color: var(--st-yel); }
  body.newlook .lp-pick { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
  body.newlook .lp-colour { display: flex; align-items: center; gap: 10px; font: 500 12px var(--st-mono); letter-spacing: 0.08em; cursor: pointer; }
  body.newlook .lp-colour input { width: 44px; height: 36px; padding: 0; border: 1px solid var(--st-rule); background: none; cursor: pointer; }
  body.newlook .lp-preview { margin-top: 14px; max-width: 320px; border: 1px solid; padding: 16px; display: grid; gap: 8px; text-align: center; font: 400 12px var(--st-mono); }
  body.newlook .lp-p-name { font: 900 20px/1 var(--st-display, inherit); margin-bottom: 4px; }
  body.newlook .lp-p-row { display: block; padding: 10px; border: 1px solid; font-weight: 700; }
  body.newlook .lp-p-main { border-color: transparent !important; }
  body.newlook .lp-acts { flex-wrap: wrap; }
  body.newlook .lp-status { margin: 10px 0 0; font: 400 13px / 1.5 var(--st-mono); color: var(--ink-faint); }
  body.newlook .lp-status:empty { display: none; }
  body.newlook .lp-status.lp-warn { color: #ff8a7a; }
  body.newlook .lp-status.lp-done { color: var(--st-yel); }
  body.newlook .lp-table { width: 100%; border-collapse: collapse; margin-top: 10px; font: 400 13px var(--st-mono); }
  body.newlook .lp-table th, body.newlook .lp-table td { text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--st-rule); }
  body.newlook .lp-table th:first-child, body.newlook .lp-table td:first-child { text-align: left; overflow-wrap: anywhere; }
  body.newlook .lp-table th { font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
  /* where else a release is out (smart links) */
  /* Coming up: the release planner */
  body.newlook #mu-plans { border-top: 1px solid var(--st-rule); }
  body.newlook .rp-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 18px; padding: 18px 0; border-bottom: 1px solid var(--st-rule); }
  body.newlook .rp-cover { width: 72px; height: 72px; object-fit: cover; display: block; background: rgba(252, 249, 245, 0.05); }
  body.newlook .rp-card .trk-head { flex-wrap: wrap; gap: 8px; }
  body.newlook .rp-card .trk-title { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  body.newlook .rp-date { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 14px 0 12px; }
  body.newlook .rp-date .field { flex: 0 1 220px; }
  body.newlook .rp-card .ready-list { line-height: 1.5; }
  body.newlook .rp-card .ready-list a { color: var(--st-yel); overflow-wrap: anywhere; }
  body.newlook .ready-list li.is-pro::before { content: "\2192  "; color: var(--ink-faint); }
  body.newlook .ready-list li.is-pro { color: var(--ink-soft); }
  body.newlook .rp-card .check { margin-top: 12px; }
  @media (max-width: 560px) {
    body.newlook .rp-card { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; }
    body.newlook .rp-cover { width: 52px; height: 52px; }
    body.newlook .rp-card .trk-title { flex-basis: 100%; }
  }
  body.newlook .sl-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--st-rule); }
  body.newlook .sl-head { font: 700 12px var(--st-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-yel); margin: 0; }
  body.newlook .sl-note { margin: 6px 0 12px; }
  body.newlook .sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }
  body.newlook .sl-clicks { float: right; letter-spacing: 0.04em; color: var(--st-yel); font-weight: 400; }
  body.newlook .sl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
  body.newlook .sl-said { margin: 0; }
  body.newlook .field label { font: 500 11px var(--st-mono); letter-spacing: 0.16em; color: var(--st-ink); }
  body.newlook .input-shell input, body.newlook .input-shell select {
    border-radius: 0; height: 46px; padding: 0 12px; font: 400 14px var(--st-mono);
    background: var(--field-bg); border-color: var(--st-rule);
  }
  /* A dropdown shows it is one: a small chevron at the right, in the ink. */
  body.newlook select, body.newlook .input-shell select {
    -webkit-appearance: none; appearance: none; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FCF9F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px;
  }
  body.newlook input:focus, body.newlook select:focus { box-shadow: none; border-color: var(--st-yel); }
  body.newlook .check { font: 400 13px var(--st-mono); }
  body.newlook .check input { accent-color: var(--st-yel); }
  body.newlook .cover-thumb { border-radius: 0; border-color: var(--st-rule); font-family: var(--st-mono); }
  body.newlook .editor-actions .btn-small:last-child { background: var(--st-yel); border-color: var(--st-yel); color: var(--st-on-yel); }
  body.newlook .editor-actions .btn-small:last-child:hover:not(:disabled) { background: var(--st-ink); border-color: var(--st-ink); }

  @media (max-width: 700px) {
    body.newlook #mu-albums > .trk { grid-template-columns: 96px minmax(0, 1fr); }
    body.newlook #mu-albums .rel-head .cover-thumb { grid-row: 1; }
    body.newlook #mu-albums > .trk > .trk-actions, body.newlook #mu-albums .rel-tracks { grid-column: 1 / -1; }
    body.newlook .rel-tracks li { grid-template-columns: 2em minmax(0, 1fr) auto auto; row-gap: 8px; }
    body.newlook .rel-tools { grid-column: 2 / -1; padding-left: 0; }
  }

  /* iPhone Safari zooms the page in when a text box under 16px is tapped,
     and stays zoomed, so the screen looks wider than the phone and is cut
     off at the right (Mat, 2026-10-04). On touch screens every box is 16px. */
  @media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select, textarea { font-size: 16px !important; }
  }

/* A genre that isn't listed: the box and its Add button side by side
   (sign-up and the artist page editor, 2026-10-26). */
.genre-add { display: flex; gap: 8px; align-items: stretch; }
.genre-add .input-shell { flex: 1; min-width: 0; }
.genre-add .btn-small { flex: none; }

/* The Music page's four steps (2026-10-26). */
.mu-steps { margin: 14px 0 22px; padding: 0; list-style: none; counter-reset: mu; display: grid; gap: 6px; }
.mu-steps li { counter-increment: mu; position: relative; padding-left: 30px; font: 400 13px/1.55 var(--st-mono, monospace); color: var(--ink-soft, inherit); }
.mu-steps li::before { content: counter(mu); position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center;
  font: 700 11px var(--st-mono, monospace); color: var(--st-ink-dark, #0C0D0C); background: var(--st-yel, #EAFB17); }
.mu-steps b { color: var(--st-ink, inherit); font-weight: 700; }

/* "subTotem has been updated" (2026-11-12; checkAppVersion() in app.js): a bar
   across the top when a newer /app has gone live, with Reload and Later. */
.upd-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  padding: 10px 16px; background: #EAFB17; color: #0C0D0C; font: 500 13px/1.4 var(--st-mono, 'IBM Plex Mono', monospace); }
.upd-bar[hidden] { display: none; }
.upd-bar button { border: 1px solid #0C0D0C; border-radius: 0; padding: 6px 14px; font: 700 12px var(--st-mono, 'IBM Plex Mono', monospace); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.upd-bar .upd-reload { background: #0C0D0C; color: #EAFB17; }
.upd-bar .upd-later { background: transparent; color: #0C0D0C; }
.upd-bar button:focus-visible { outline: 2px solid #0C0D0C; outline-offset: 2px; }