:root {
    --bg:#0d0d0f; --panel:#161618; --panel-2:#1f1f23; --line:#27272a;
    --ink:#f5f5f5; --ink-dim:#b4bac2; --ink-faint:#6a7081;
    --accent:#3b82f6; --accent-ink:#ffffff;     /* Chain blue accent on dark */
    --green:#22c55e; --amber:#f59e0b;            /* functional status signals only */
    --avatar:#2a2d38;                          /* neutral avatar */
    --radius:16px; --radius-lg:24px;
    /* Native system font per platform: SF on iOS/macOS, Segoe UI on Windows,
       Roboto on Android. */
    --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body {
    background:#05060a; color:var(--ink); font-family:var(--font);
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  .phone {
    width:380px; height:760px; max-height:100dvh; background:var(--bg);
    border:1px solid var(--line); border-radius:34px; overflow:hidden;
    position:relative; box-shadow:0 18px 60px rgba(0,0,0,.6);
    display:flex; flex-direction:column;
  }
  /* On real phones (narrow or short viewports) fill the screen so the bottom
     nav is always visible without scrolling the page. dvh tracks the mobile
     address bar. Desktop keeps the centered phone-frame mockup. */
  @media (max-width:440px), (max-height:800px) {
    body { padding:0; align-items:stretch; }
    .phone {
      width:100%; height:100vh; height:100dvh; max-height:none;
      border:none; border-radius:0; box-shadow:none;
    }
  }
  .screen { display:none; flex-direction:column; height:100%; }
  .screen.active { display:flex; }
  .scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .topbar {
    padding:16px 18px 12px; border-bottom:1px solid var(--line);
    display:flex; align-items:center; gap:10px; flex:none;
  }
  .topbar .app { font-weight:800; font-size:18px; letter-spacing:.5px; color:var(--ink); }
  .topbar .sub { font-size:11px; color:var(--ink-dim); }
  .back { background:none; border:none; color:var(--ink-dim); font-size:20px; cursor:pointer; }
  .spacer { flex:1; }
  .btn { border:none; border-radius:22px; padding:9px 16px; font-weight:700;
    font-size:13px; cursor:pointer; font-family:var(--font); }
  .btn-primary { background:var(--accent); color:var(--accent-ink); }
  .btn-ghost { background:var(--panel-2); color:var(--ink); }
  .btn-hot { background:var(--accent); color:var(--accent-ink); }
  /* bottom tab bar */
  .tabs { display:flex; border-top:1px solid var(--line); flex:none;
    padding-bottom:env(safe-area-inset-bottom); background:var(--bg); }
  .tab { position:relative; flex:1; text-align:center; padding:9px 0 11px; font-size:11px;
    color:var(--ink-dim); cursor:pointer; text-transform:lowercase; }
  .tab .ic { display:block; height:22px; margin:0 auto 3px; }
  .tab .ic svg { width:22px; height:22px; stroke:var(--ink-dim); }
  .tab.on { color:var(--accent); }
  .tab.on .ic svg { stroke:var(--accent); }
  .tab .tab-badge { position:absolute; top:4px; left:calc(50% + 6px); min-width:16px; height:16px;
    padding:0 4px; border-radius:8px; background:#e1483a; color:#fff; font-size:10px; font-weight:800;
    line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--bg); }
  /* test panel */
  #testout { font-family:ui-monospace,monospace; font-size:12px; padding:16px;
    color:var(--ink); white-space:pre-wrap; }
  .ok { color:var(--green); } .fail { color:var(--amber); font-weight:700; }
  .band-hdr { font-size:11px; text-transform:uppercase; letter-spacing:.9px;
    color:var(--ink-faint); margin:16px 16px 8px; display:flex; align-items:center; gap:8px; }
  .dot { height:8px; width:8px; border-radius:50%; }
  .d-green{background:var(--green);} .d-amber{background:var(--amber);}
  .band-hdr .count { margin-left:auto; }
  /* unified My Tribe page (#7) */
  .tribe-page { padding-bottom:20px; }
  .tribe-pin { position:sticky; top:0; z-index:3; background:var(--bg); }
  .tribe-search { padding:0 14px 4px; }
  .tribe-search input { width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
    padding:9px 12px; color:var(--ink); font-size:16px; font-family:var(--font); outline:none; }
  .tribe-search input::placeholder { color:var(--ink-faint); }
  .band { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-faint);
    margin:12px 16px 8px; display:flex; align-items:center; gap:7px; }
  .band.req { color:var(--amber); }
  .band-add { margin-left:auto; color:var(--accent); font-weight:700; text-transform:none; letter-spacing:0; font-size:11px; cursor:pointer; }
  .tribe-gstrip { display:flex; gap:10px; overflow-x:auto; padding:0 14px 8px; scrollbar-width:none; }
  .tribe-gstrip::-webkit-scrollbar { display:none; }
  .tribe-gchip { flex:none; width:66px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }
  .tribe-gchip .tg-av { width:52px; height:52px; border-radius:16px; background:#26314a; display:flex;
    align-items:center; justify-content:center; font-size:22px; position:relative; }
  .tribe-gchip .tg-vdot { position:absolute; top:-2px; right:-2px; width:14px; height:14px; border-radius:50%;
    background:var(--green); border:2px solid var(--bg); }
  .tribe-gchip .tg-n { font-size:10.5px; color:var(--ink-dim); max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tribe-gchip.new .tg-av { background:var(--panel-2); border:1px dashed var(--line); color:var(--accent); font-size:20px; }
  .tribe-gchip.new .tg-n { color:var(--accent); }
  .conv-prev.sayhi { color:var(--accent); }
  .gsheet-acts { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0 2px; }
  .gsheet-act { background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:12px;
    text-align:center; font-size:13px; font-weight:700; color:var(--ink); cursor:pointer; font-family:var(--font); }
  .gsheet-act .e { font-size:18px; display:block; margin-bottom:4px; }
  .gsheet-act.p { border-color:#2b4a6b; color:var(--accent); }
  .gsheet-act.v { border-color:#1f5740; color:var(--green); }
  .pcard { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:13px; margin:0 14px 10px; cursor:pointer; }
  .pcard .r1 { display:flex; justify-content:space-between; align-items:baseline; }
  .pcard .nick { font-weight:800; }
  .pcard .dist { font-size:11px; color:var(--ink-dim); }
  .pcard .place { color:#c7ccd8; margin:6px 0 10px; font-size:14px; }
  .pcard .r3 { display:flex; justify-content:space-between; align-items:center; }
  .slots { font-size:11px; color:var(--ink-dim); }
  .slots b { color:var(--green); }
  /* host tile — smaller plan, location chip on its own line, compact icon action */
  .pcard.hosttile { padding:13px 15px; }
  .pcard .pmeta { display:flex; align-items:center; gap:6px; font-size:12px; }
  .pcard .pwho { color:var(--ink-dim); font-weight:700; text-transform:lowercase;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
  .pcard .pdot { color:var(--ink-faint); flex:none; }
  .pcard .phost { flex:none; color:var(--accent); font-weight:800; text-transform:lowercase;
    font-size:10px; letter-spacing:.03em; padding:2px 7px; border-radius:7px;
    background:rgba(59,130,246,.16); transform:rotate(-4deg); }
  .pcard .pmeta .pslots { margin-left:auto; flex:none; color:var(--ink-faint); font-size:11px; text-transform:lowercase; }
  .pcard .pmeta .pslots b { color:var(--green); font-weight:800; }
  .pcard .ppend { flex:none; font-size:10px; font-weight:700; text-transform:lowercase;
    color:var(--amber); background:rgba(245,158,11,.14); padding:2px 7px; border-radius:7px; }
  .reqbtns { display:flex; gap:6px; margin-left:auto; }
  .pcard .pbody { display:flex; align-items:center; gap:12px; margin-top:9px; }
  .pcard .pleft { flex:1; min-width:0; }
  .pcard .pplan { font-size:16px; line-height:1.3; font-weight:700; color:var(--ink); text-transform:lowercase; }
  .pcard .ploc-line { margin-top:6px; font-size:13px; }
  .pcard .loc-chip { display:inline-block; font-size:12px; color:#8ab4f8; background:var(--panel-2);
    border:1px solid var(--line); padding:3px 9px; border-radius:999px; text-transform:lowercase; font-weight:600; vertical-align:middle; }
  .pcard .iconbtn { flex:none; display:inline-flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; cursor:pointer; padding:0; font-family:var(--font); }
  .pcard .iconbtn .ic { width:44px; height:44px; border-radius:13px; display:flex; align-items:center;
    justify-content:center; font-size:20px; background:var(--accent); color:#fff; }
  .pcard .iconbtn.ghost .ic { background:var(--panel-2); border:1px solid var(--line); }
  .pcard .iconbtn.full .ic { background:var(--panel-2); opacity:.55; }
  .pcard .iconbtn.pending .ic { background:rgba(245,158,11,.16); border:1px solid var(--amber); }
  .pcard .iconbtn.pending .cap { color:var(--amber); }
  .pcard .iconbtn.going { cursor:default; }
  .pcard .iconbtn.going .ic { background:rgba(34,197,94,.16); border:1px solid var(--green); color:var(--green); }
  .pcard .iconbtn.going .cap { color:var(--green); }
  .pcard .iconbtn .cap { font-size:10px; color:var(--ink-dim); text-transform:lowercase; letter-spacing:.02em;
    font-weight:600; max-width:64px; text-align:center; line-height:1.15; }
  .prow { display:flex; align-items:center; gap:11px; padding:9px 16px; cursor:pointer; }
  .av { height:34px; width:34px; border-radius:50%; flex:none; display:flex;
    align-items:center; justify-content:center; font-weight:800; color:var(--ink); font-size:14px;
    background:var(--avatar); position:relative; overflow:hidden; }
  /* chosen illustrated avatar overlays the initials; on load error it removes
     itself (onerror) and the initials underneath show through. */
  .av-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    background:var(--avatar); border-radius:50%; }
  .av-anon { background:#2a2630; color:#c9a8ff; }
  .prow .nm { font-weight:700; }
  .prow .sub { font-size:11px; color:var(--ink-dim); }
  .prow .tag { margin-left:auto; font-size:11px; padding:3px 10px; border-radius:14px;
    background:var(--panel-2); }
  .tag.invite { color:var(--amber); }
  .fab { position:absolute; right:18px; bottom:calc(74px + env(safe-area-inset-bottom)); height:54px; width:54px; border-radius:50%;
    font-size:30px; line-height:1; font-weight:400; color:var(--accent-ink); border:none; cursor:pointer;
    background:var(--accent); box-shadow:0 8px 24px rgba(0,0,0,.45);
    display:flex; align-items:center; justify-content:center; padding-bottom:3px; }
  .empty { text-align:center; color:var(--ink-dim); font-size:13px; padding:30px 24px; line-height:1.6; }
  .hero { padding:16px; border-bottom:1px solid #1a1c24; }
  .hero .who { display:flex; align-items:center; gap:11px; }
  .hero .nick { font-weight:800; } .hero .meta { font-size:11px; color:var(--ink-dim); }
  .badge { margin-left:auto; font-size:10px; background:#13311f; color:var(--green);
    padding:3px 10px; border-radius:14px; font-weight:700; }
  .hplace { margin:14px 0 4px; font-size:17px; font-weight:700; }
  .pill { font-size:10px; color:var(--ink-dim); background:var(--panel-2); padding:2px 9px; border-radius:12px; }
  .stat { flex:1; background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:10px; text-align:center; }
  .stat b { display:block; font-size:18px; color:var(--green); }
  .stat span { font-size:9.5px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.5px; }
  .cta-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
  .cta-row .btn { flex:1 1 calc(50% - 4px); }
  /* bottom-sheet picker (e.g. host handoff) */
  .sheet-bg { position:absolute; inset:0; background:rgba(0,0,0,.55); z-index:60;
    display:flex; align-items:flex-end; }
  .sheet { width:100%; background:var(--panel); border-top:1px solid var(--line);
    border-radius:18px 18px 0 0; padding:18px 16px;
    padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  .sheet h4 { font-size:15px; font-weight:800; margin:0 0 4px; }
  .sheet-sub { font-size:12px; color:var(--ink-dim); margin-bottom:12px; }
  .sheet-row { display:flex; align-items:center; gap:11px; padding:8px 2px; }
  .sheet-row .nm { font-weight:700; }
  /* in-app dialogs (replace native alert/confirm/prompt) */
  .modal-bg { position:absolute; inset:0; background:rgba(0,0,0,.6); z-index:70;
    display:flex; align-items:center; justify-content:center; padding:24px; }
  .modal { width:100%; max-width:320px; background:var(--panel); border:1px solid var(--line);
    border-radius:16px; padding:18px; box-shadow:0 20px 50px rgba(0,0,0,.6); }
  .modal h4 { font-size:15px; font-weight:800; margin:0 0 8px; text-transform:lowercase; }
  .modal-msg { font-size:14px; color:var(--ink-dim); line-height:1.45; margin-bottom:16px; }
  .modal-input { margin-bottom:16px; }
  .modal-actions { display:flex; gap:8px; }
  .modal-actions .btn { flex:1; text-transform:lowercase; }
  .btn-danger { background:#e1483a; color:#fff; }
  .toast { position:absolute; left:50%; bottom:calc(80px + env(safe-area-inset-bottom));
    transform:translate(-50%,18px); max-width:86%; background:#23252e; color:var(--ink);
    font-size:13px; font-weight:600; text-align:center; padding:11px 16px; border-radius:12px;
    border:1px solid var(--line); box-shadow:0 12px 30px rgba(0,0,0,.5); z-index:90;
    opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; }
  .toast.show { opacity:1; transform:translate(-50%,0); }
  .toast.toast-err { border-color:var(--amber); }
  /* ? help button in the home header */
  .help-btn { flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
    background:var(--panel-2); color:var(--ink-dim); font-size:15px; font-weight:800; cursor:pointer;
    font-family:var(--font); line-height:1; }
  /* text-label header action (e.g. "＋ add humans") — pill variant of .help-btn */
  .help-btn.help-btn-text { width:auto; height:28px; border-radius:14px; padding:0 10px;
    font-size:12px; font-weight:700; white-space:nowrap; }
  /* coachmark walkthrough */
  .coach-block { position:absolute; inset:0; z-index:100; }
  .coach-block.dim { background:rgba(0,0,0,.72); }
  .coach-spot { position:absolute; z-index:101; pointer-events:none; border-radius:14px;
    box-shadow:0 0 0 9999px rgba(0,0,0,.72), 0 0 0 3px var(--accent); }
  .coach-card { position:absolute; left:16px; right:16px; z-index:102; background:var(--panel);
    border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:0 16px 40px rgba(0,0,0,.6); color:var(--ink); }
  .coach-card h4 { font-size:15px; font-weight:800; margin:0 0 6px; text-transform:lowercase; }
  .coach-card p { font-size:13.5px; color:var(--ink-dim); line-height:1.5; margin:0 0 14px; white-space:pre-line; }
  .coach-actions { display:flex; align-items:center; gap:12px; }
  .coach-actions .dots { font-size:11px; color:var(--ink-faint); }
  .coach-actions .spacer { flex:1; }
  .coach-skip { background:none; border:none; color:var(--ink-faint); font-size:12px; cursor:pointer; font-family:var(--font); }
  .tl-hdr { padding:14px 16px 6px; font-size:11px; text-transform:uppercase;
    letter-spacing:.9px; color:var(--ink-faint); }
  .tl { padding:0 16px 16px; }
  .ev { display:flex; gap:11px; padding:10px 0; border-bottom:1px solid #15171d; }
  .ev .node { height:9px; width:9px; border-radius:50%; background:var(--ink-faint); margin-top:5px; flex:none; }
  .ev .node.amber{background:var(--amber);} .ev .node.green{background:var(--green);}
  .ev .line { font-size:13px; } .ev .nm { font-weight:700; }
  .ev .t { font-size:10px; color:var(--ink-faint); margin-left:6px; }
  .ev .photo { margin-top:7px; height:96px; border-radius:10px; display:flex;
    align-items:center; justify-content:center; color:#cdd3e6; font-size:11px; }
  .ev .tl-photo { margin-top:7px; display:block; max-width:220px; max-height:220px;
    width:auto; height:auto; border-radius:10px; object-fit:cover; background:var(--panel-2); }
  .ev .sys { font-size:12px; color:#9aa0b0; font-style:italic; }
  .composer { display:flex; align-items:center; gap:9px; padding:12px 14px; border-top:1px solid var(--line); flex:none; }
  .composer .inp { flex:1; background:var(--panel); border:1px solid var(--line);
    border-radius:18px; padding:8px 13px; color:var(--ink-dim); font-size:12px; }
  .composer .ic { height:32px; width:32px; border-radius:50%; background:var(--panel-2);
    display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; }
  .field { margin:14px 16px; }
  .field label { font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--ink-faint); display:block; margin-bottom:7px; }
  /* input with an action button on the right */
  .inrow { display:flex; gap:8px; align-items:stretch; }
  .inrow .ta { flex:1; min-width:0; }
  .inrow .btn { flex:none; text-transform:lowercase; padding-left:18px; padding-right:18px; }
  .seg2 { display:flex; gap:8px; }
  .seg2 button { flex:1; padding:11px; border-radius:12px; border:1px solid var(--line);
    background:var(--panel); color:var(--ink); font-weight:700; cursor:pointer; font-family:var(--font); }
  .seg2 button.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  /* font-size must be >=16px or iOS Safari zooms the page in on focus. */
  .ta { width:100%; background:var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:11px; color:var(--ink); font-family:var(--font); font-size:16px; resize:none; }
  /* native date/time controls render wide inline fields + a picker icon; at 16px they
     overflow a narrow sheet (the box fits but the native content doesn't). Shrink the
     content (smaller font + tighter horizontal padding) so it fits. Covers the planner
     add-time AND the hang reschedule pickers (both .ta[type=datetime-local]). */
  .ta[type="datetime-local"] { font-size:13px; padding:10px 8px; width:100%; max-width:100%;
    min-width:0; box-sizing:border-box; }
  .ta[type="date"] { font-size:13px; padding:10px 8px; width:100%; max-width:100%;
    min-width:0; box-sizing:border-box; }
  /* iOS Safari auto-zooms any text input/textarea with font-size <16px on focus and never
     zooms back out. Enforce a 16px floor on ALL text-entry controls so it never happens
     anywhere. Native date/time inputs are excluded on purpose — they're deliberately shrunk
     to fit a narrow sheet (see .ta[type=date] above) and open a wheel, not a text caret. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="date"]):not([type="datetime-local"]):not([type="time"]):not([type="month"]):not([type="week"]),
  textarea, select { font-size: 16px !important; }
  .chips { display:flex; flex-wrap:wrap; gap:8px; }
  .chip { padding:7px 13px; border-radius:16px; border:1px solid var(--line); background:var(--panel);
    color:var(--ink); font-size:12px; cursor:pointer; }
  .chip.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  /* Home "smart chip" filter row: one horizontal swipeable row, first chip aligned
     with the cards (14px), sticky under the topbar. Add future chips here. */
  .homefilter { display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding:10px 14px 6px;
    position:sticky; top:0; z-index:5; background:var(--bg); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .homefilter::-webkit-scrollbar { display:none; }
  .homefilter .chip { flex:0 0 auto; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
  .stepper { display:flex; align-items:center; gap:14px; }
  .stepper button { height:34px; width:34px; border-radius:50%; border:1px solid var(--line);
    background:var(--panel); color:var(--ink); font-size:18px; cursor:pointer; }
  .host-only.hide { display:none; }
  /* avatar picker grid (bottom sheet) */
  .avatar-cat { font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-faint); margin:12px 0 6px; }
  .avatar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .avatar-grid .pick { aspect-ratio:1; border-radius:50%; overflow:hidden; padding:0; cursor:pointer;
    background:var(--avatar); border:2px solid transparent; }
  .avatar-grid .pick img { width:100%; height:100%; object-fit:cover; display:block; }
  .avatar-grid .pick.sel { border-color:var(--accent); }
  .prow-set { display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid #15171d; }
  .prow-set .lbl { flex:1; } .prow-set .lbl small { display:block; color:var(--ink-dim); font-size:11px; }
  .toggle { height:26px; width:46px; border-radius:14px; background:var(--panel-2); position:relative; cursor:pointer; border:1px solid var(--line); }
  .toggle.on { background:var(--green); }
  .toggle .knob { position:absolute; top:2px; left:2px; height:20px; width:20px; border-radius:50%; background:#fff; transition:left .15s; }
  .toggle.on .knob { left:22px; }
  .itag { display:inline-block; padding:6px 12px; border-radius:14px; background:var(--panel-2);
    font-size:12px; margin:0 6px 8px 0; }
.invite-card { margin:14px 16px; padding:18px; border-radius:var(--radius-lg);
  background:var(--panel); border:1px solid var(--line); text-align:center; }
.invite-card .code { font-size:24px; font-weight:800; letter-spacing:2px;
  color:var(--ink); margin:6px 0 10px; }
  .suggest { margin-top:4px; }
  .suggest .s { padding:8px 11px; border:1px solid var(--line); border-top:none;
    background:var(--panel); font-size:13px; cursor:pointer; }
  .suggest .s:first-child { border-top:1px solid var(--line); border-radius:8px 8px 0 0; }
  .suggest .s:last-child { border-radius:0 0 8px 8px; }
  .suggest .s small { color:var(--ink-dim); }
  .suggest .s-typed { background:rgba(59,130,246,.10); border-color:rgba(59,130,246,.45); font-weight:600; }
  .composer-actions { display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px; border-top:1px solid var(--line); }
  .btn.mini { padding:6px 11px; font-size:12px; }

  /* =====================================================================
     YOU / PROFILE page (SP1.0) — cozy "MySpace nostalgia" look.
     The customization vars live ON the .pf container (not :root) so a
     friend's stored prefs only ever restyle the profile, never the app.
     Fonts are LOCAL/web-safe only (CSP font-src 'self' — no Google Fonts).
     ===================================================================== */
  .pf {
    --pf-display:var(--font);     /* big display headers (name/section) */
    --pf-hand:var(--font);        /* casual body/bio/notes */
    --pf-head-scale:1;            /* S .88 / M 1 / L 1.12 */
    --pf-body-scale:1;            /* S .9  / M 1 / L 1.1  */
    --pf-bg:var(--bg);            /* per-profile background */
    background:var(--pf-bg);
    min-height:100%;
    padding-bottom:24px;
  }
  /* ---- font vibes (mapped from prefs.font via whitelisted CLASSES) ---- */
  .pf.pf-font-system  { --pf-display:var(--font); --pf-hand:var(--font); }
  .pf.pf-font-cozy    { --pf-display:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;
                        --pf-hand:'Segoe Print','Bradley Hand','Comic Sans MS',cursive; }
  .pf.pf-font-classic { --pf-display:Georgia,'Times New Roman',serif;
                        --pf-hand:Georgia,'Times New Roman',serif; }
  .pf.pf-font-clean   { --pf-display:'Segoe UI',Helvetica,Arial,sans-serif;
                        --pf-hand:'Segoe UI',Helvetica,Arial,sans-serif; }
  .pf.pf-font-rounded { --pf-display:'Trebuchet MS','Segoe UI',Verdana,sans-serif;
                        --pf-hand:'Trebuchet MS','Segoe UI',Verdana,sans-serif; }
  .pf.pf-font-type    { --pf-display:ui-monospace,'Cascadia Code','Courier New',monospace;
                        --pf-hand:ui-monospace,'Cascadia Code','Courier New',monospace; }
  /* ---- header sizes (mapped from prefs.head via whitelisted CLASSES) ---- */
  .pf.pf-head-s { --pf-head-scale:.88; } .pf.pf-head-m { --pf-head-scale:1; } .pf.pf-head-l { --pf-head-scale:1.12; }
  /* ---- body sizes (mapped from prefs.body via whitelisted CLASSES) ---- */
  .pf.pf-body-s { --pf-body-scale:.9; } .pf.pf-body-m { --pf-body-scale:1; } .pf.pf-body-l { --pf-body-scale:1.1; }
  /* ---- backgrounds (mapped from prefs.bg via whitelisted CLASSES) ---- */
  .pf.pf-bg-dark     { --pf-bg:var(--bg); }
  .pf.pf-bg-plum     { --pf-bg:#1c1320; }
  .pf.pf-bg-midnight { --pf-bg:#0f1626; }
  .pf.pf-bg-forest   { --pf-bg:#101c16; }
  .pf.pf-bg-charcoal { --pf-bg:#161618; }
  .pf.pf-bg-brown    { --pf-bg:#1d1611; }
  .pf.pf-bg-grad1    { --pf-bg:linear-gradient(180deg,#1a1228,#0c0d14); }
  .pf.pf-bg-grad2    { --pf-bg:linear-gradient(180deg,#0f1f2a,#0a0d14); }
  .pf.pf-bg-grad3    { --pf-bg:linear-gradient(180deg,#241318,#100c0e); }
  .pf.pf-bg-rose     { --pf-bg:#221318; }
  .pf.pf-bg-wine     { --pf-bg:#20121a; }
  .pf.pf-bg-teal     { --pf-bg:#0e1f1f; }
  .pf.pf-bg-ocean    { --pf-bg:#0d1822; }
  .pf.pf-bg-sand     { --pf-bg:#1e1a12; }
  .pf.pf-bg-slate    { --pf-bg:#14181f; }
  .pf.pf-bg-olive    { --pf-bg:#181a10; }
  .pf.pf-bg-grad4    { --pf-bg:linear-gradient(180deg,#10241f,#0a0f0d); }
  .pf.pf-bg-grad5    { --pf-bg:linear-gradient(180deg,#231a10,#100c08); }
  .pf.pf-bg-grad6    { --pf-bg:linear-gradient(180deg,#1e1226,#241320); }
  .pf .pf-now-name   { font-weight:800; font-size:calc(15px * var(--pf-body-scale,1)); margin:3px 0 1px; color:var(--ink); }

  /* ---- profile top bar (sticky) ---- */
  .pf-top { position:sticky; top:0; z-index:8; display:flex; align-items:center; gap:8px;
    padding:12px 14px; background:rgba(13,13,15,.82); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line); }
  .pf-top .pf-handle { font-weight:800; font-size:15px; color:var(--ink); }
  .pf-top .spacer { flex:1; }
  .pf-live { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
    background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.4); color:#7ef0a6;
    font-size:11px; font-weight:700; letter-spacing:.3px; }
  .pf-live .ld { width:7px; height:7px; border-radius:50%; background:var(--green);
    animation:pf-pulse 1.8s infinite; }
  @keyframes pf-pulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}
    70%{box-shadow:0 0 0 6px rgba(34,197,94,0);} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0);} }
  .pf-iconbtn { width:38px; height:38px; border-radius:50%; display:flex; align-items:center;
    justify-content:center; background:var(--panel-2); border:1px solid var(--line);
    color:var(--ink-dim); font-size:16px; cursor:pointer; line-height:1; padding:0; }
  .pf-editbtn { display:inline-flex; align-items:center; gap:5px; height:38px; padding:0 14px;
    border-radius:999px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink-dim);
    font-family:var(--font); font-size:13px; font-weight:700; cursor:pointer; line-height:1; white-space:nowrap; }
  .pf.editing .pf-editbtn { background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
    box-shadow:0 4px 14px rgba(59,130,246,.4); }

  /* ---- header ---- */
  .pf-header { display:flex; gap:15px; align-items:flex-start; padding:18px 16px 6px; }
  .pf-bigav { flex:0 0 auto; width:88px; height:88px; border-radius:20px; background:var(--avatar);
    border:2px solid var(--line); position:relative; overflow:hidden; display:flex; align-items:center;
    justify-content:center; font-weight:800; font-size:30px; color:var(--ink);
    box-shadow:0 8px 22px rgba(0,0,0,.45); }
  .pf-bigav.tappable { cursor:pointer; }
  .pf-bigav .av-img { border-radius:0; }
  .pf-bigav .pf-avedit { position:absolute; right:-2px; bottom:-2px; width:26px; height:26px; border-radius:50%;
    background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center;
    font-size:13px; border:2px solid var(--bg); z-index:2; }
  .pf-id { flex:1; min-width:0; padding-top:2px; }
  .pf-name { font-family:var(--pf-display); font-size:calc(30px * var(--pf-head-scale)); line-height:1;
    font-weight:800; color:var(--ink); margin:0 0 3px; letter-spacing:.3px; word-break:break-word; }
  .pf-sub { font-size:12px; color:var(--ink-faint); margin:0 0 8px; }
  .pf-bio { font-family:var(--pf-hand); font-size:calc(18px * var(--pf-body-scale)); line-height:1.2;
    color:var(--ink-dim); margin:0 0 6px; word-break:break-word; min-height:1.2em; }
  .pf-bioedit { display:none; }
  .pf.editing .pf-bio { display:none; }
  .pf.editing .pf-bioedit { display:block; }
  .pf-bioinput { width:100%; font-family:var(--pf-hand); font-size:16px; line-height:1.2; color:var(--ink);
    background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:8px 11px; outline:none; }
  .pf-bioinput:focus { border-color:var(--accent); }
  .pf-biocount { display:block; font-size:10px; color:var(--ink-faint); text-align:right; margin-top:3px; }

  /* ---- now card (status) ---- */
  /* prefs.now = "off" hides the live status card (self + friends, via .pf class) */
  .pf.pf-shownow-off .pf-now-wrap { display:none; }
  .pf.pf-shownow-off .pf-live { display:none; }   /* keep the self "live" pill consistent with the hidden card */
  .pf-section { padding:16px 16px 0; }
  .pf-now { position:relative; border-radius:var(--radius); padding:15px 16px; border:1px solid var(--line);
    background:var(--panel); box-shadow:0 8px 22px rgba(0,0,0,.4); overflow:hidden; }
  .pf-now::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--green); }
  .pf-now-head { font-size:14px; font-weight:800; letter-spacing:.2px; color:#a8f0c2; margin:0 0 5px;
    display:flex; align-items:center; gap:6px; }
  .pf-now-line { font-family:var(--pf-hand); font-size:calc(17px * var(--pf-body-scale)); line-height:1.2; color:var(--ink-dim); }
  .pf-now.is-hosting { background:linear-gradient(180deg, rgba(34,197,94,.16), rgba(34,197,94,.05));
    border-color:rgba(34,197,94,.45); box-shadow:0 8px 24px rgba(34,197,94,.18); }
  /* now-card skins (mapped from prefs.post via whitelisted CLASSES) */
  .pf-now.skin-bubble { border-radius:26px; border:4px solid #5ce08f;
    box-shadow:0 6px 0 rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.4); }
  .pf-now.skin-bubble::before { display:none; }
  .pf-now.skin-bubble .pf-now-head { font-weight:900; }
  .pf-now.skin-vapor { border:1px solid rgba(255,255,255,.18); border-radius:14px;
    background:linear-gradient(135deg,#5b2a86,#1f7a8c); color:#fff; }
  .pf-now.skin-vapor::before { display:none; }
  .pf-now.skin-vapor .pf-now-head, .pf-now.skin-vapor .pf-now-line { font-style:italic; color:#fff;
    text-shadow:1px 1px 0 rgba(0,0,0,.25), 0 0 8px rgba(255,180,255,.6); }
  .pf-now.skin-vapor::after { content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
    background:linear-gradient(90deg,#ff6ad5,#ffb86c,#ffe46b); }
  .pf-now.skin-geo { border:3px dashed #39ff14; border-radius:6px; background:#120016;
    box-shadow:0 0 0 2px #ff00ff inset; }
  .pf-now.skin-geo::before { display:none; }
  .pf-now.skin-geo .pf-now-head { color:#39ff14; text-shadow:1px 1px 0 #ff00ff; }
  .pf-now.skin-geo .pf-now-head::before { content:"✦ "; }
  .pf-now.skin-geo .pf-now-line { color:#ffe46b; }
  .pf-now.skin-mixtape { border:1px solid #0c0a08; border-radius:10px;
    background:linear-gradient(180deg,#2a2118,#1a1410); overflow:hidden; padding:40px 16px 16px;
    box-shadow:0 8px 22px rgba(0,0,0,.5); }
  .pf-now.skin-mixtape::before { content:""; position:absolute; left:12px; right:12px; top:34px; bottom:12px;
    width:auto; border-radius:6px;
    background:repeating-linear-gradient(180deg, transparent 0 23px, rgba(58,44,24,.14) 23px 24px),
      linear-gradient(180deg,#f3e7c9,#e6d4a8);
    box-shadow:inset 0 0 0 1px rgba(58,44,24,.25); z-index:0; }
  .pf-now.skin-mixtape::after { content:""; position:absolute; top:11px; left:54px; right:54px; height:16px;
    border-radius:9px; background:#0e0b08; z-index:1; }
  .pf-now.skin-mixtape .pf-now-head { position:relative; z-index:2;
    font-family:ui-monospace,monospace; color:#1f5c34; font-weight:700; }
  .pf-now.skin-mixtape .pf-now-line { position:relative; z-index:2; font-family:var(--pf-hand); color:#5a4424; }
  .pf-now.skin-neon { border:2px solid #ff2bd6; border-radius:14px; background:#0a0712;
    box-shadow:0 0 12px rgba(255,43,214,.55), 0 0 22px rgba(0,229,255,.3) inset; }
  .pf-now.skin-neon::before { display:none; }
  .pf-now.skin-neon .pf-now-head { color:#00e5ff; text-shadow:0 0 8px rgba(0,229,255,.9); }
  .pf-now.skin-neon .pf-now-line { color:#ff8fe6; text-shadow:0 0 6px rgba(255,43,214,.8); }

  /* ---- edit panels (self, edit-mode only) ---- */
  .pf-edit-panel { display:none; margin:12px 16px 0;
    background:linear-gradient(180deg, rgba(59,130,246,.07), rgba(59,130,246,.02));
    border:1px dashed rgba(59,130,246,.4); border-radius:14px; padding:12px 12px 14px; }
  .pf.editing .pf-edit-panel { display:block; }
  .pf-ep-title { display:flex; align-items:center; gap:6px; font-family:var(--font); font-size:11px;
    font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:#9cc2ff; margin:0 0 10px; }
  .pf-ep-row { margin-bottom:12px; } .pf-ep-row:last-child { margin-bottom:0; }
  .pf-ep-label { font-family:var(--font); font-size:11px; font-weight:700; color:var(--ink-faint);
    letter-spacing:.3px; display:block; margin:0 0 6px; text-transform:uppercase; }
  /* segmented control */
  .pf-seg { display:inline-flex; background:var(--panel-2); border:1px solid var(--line);
    border-radius:10px; padding:3px; gap:3px; flex-wrap:wrap; }
  .pf-seg button { font-family:var(--font); font-size:12px; font-weight:600; color:var(--ink-dim);
    background:transparent; border:none; padding:7px 11px; border-radius:8px; cursor:pointer; line-height:1; }
  .pf-seg button.on { background:var(--accent); color:var(--accent-ink); }
  /* font / skin chips */
  .pf-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .pf-chip { font-size:14px; font-weight:600; color:var(--ink-dim); background:var(--panel-2);
    border:1px solid var(--line); border-radius:10px; padding:8px 12px; cursor:pointer; line-height:1.1; }
  .pf-chip small { display:block; font-size:9px; letter-spacing:.5px; text-transform:uppercase;
    color:var(--ink-faint); font-family:var(--font); margin-top:2px; }
  .pf-chip.on { border-color:var(--accent); color:var(--ink); box-shadow:0 0 0 2px rgba(59,130,246,.3) inset; }
  .pf-chip.fc-cozy{font-family:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;}
  .pf-chip.fc-classic{font-family:Georgia,serif;}
  .pf-chip.fc-clean{font-family:'Segoe UI',Arial,sans-serif;}
  .pf-chip.fc-rounded{font-family:'Trebuchet MS',sans-serif;}
  .pf-chip.fc-type{font-family:ui-monospace,monospace; font-size:12px;}
  /* background swatches */
  .pf-swatches { display:flex; flex-wrap:wrap; gap:9px; }
  .pf-swatch { width:32px; height:32px; border-radius:9px; border:1px solid var(--line); cursor:pointer;
    padding:0; position:relative; flex:0 0 auto; }
  .pf-swatch.on { box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
  .pf-swatch.on::after { content:"✓"; position:absolute; inset:0; display:flex; align-items:center;
    justify-content:center; color:#fff; font-size:13px; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.7); }
  .pf-sw-dark{background:#0d0d0f;} .pf-sw-plum{background:#1c1320;} .pf-sw-midnight{background:#0f1626;}
  .pf-sw-forest{background:#101c16;} .pf-sw-charcoal{background:#161618;} .pf-sw-brown{background:#1d1611;}
  .pf-sw-grad1{background:linear-gradient(180deg,#1a1228,#0c0d14);}
  .pf-sw-grad2{background:linear-gradient(180deg,#0f1f2a,#0a0d14);}
  .pf-sw-grad3{background:linear-gradient(180deg,#241318,#100c0e);}
  .pf-sw-rose{background:#221318;} .pf-sw-wine{background:#20121a;} .pf-sw-teal{background:#0e1f1f;}
  .pf-sw-ocean{background:#0d1822;} .pf-sw-sand{background:#1e1a12;} .pf-sw-slate{background:#14181f;}
  .pf-sw-olive{background:#181a10;}
  .pf-sw-grad4{background:linear-gradient(180deg,#10241f,#0a0f0d);}
  .pf-sw-grad5{background:linear-gradient(180deg,#231a10,#100c08);}
  .pf-sw-grad6{background:linear-gradient(180deg,#1e1226,#241320);}
  /* skin preview card inside the post-style panel */
  .pf-ps-preview { margin-top:8px; }
  .pf-ps-preview .pf-now { margin:0; }

  /* ===================================================================
     PROFILE · shared section header (handwritten-style banner + rule)
     =================================================================== */
  .pf-sec-head { font-family:var(--pf-display); font-size:calc(24px * var(--pf-head-scale));
    font-weight:800; color:var(--ink); margin:0 0 12px; line-height:1;
    display:flex; align-items:center; gap:10px; }
  .pf-sec-rule { flex:1; height:2px; border-radius:2px; opacity:.7;
    background:repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }

  /* ===================================================================
     PROFILE · "on repeat" (single embedded YouTube video)
     =================================================================== */
  .pf-yt-wrap { position:relative; width:100%; aspect-ratio:16/9; border-radius:14px;
    overflow:hidden; border:1px solid var(--line); background:#000;
    box-shadow:0 6px 16px rgba(0,0,0,.45); }
  .pf-yt { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
  /* edit-only controls (revealed by .pf.editing, like the other edit affordances) */
  .pf-yt-edit { display:none; margin-top:10px; }
  .pf.editing .pf-yt-edit { display:block; }
  /* whole "on repeat" section is edit-only when NO video is set (header + add
     control), so live/non-edit self + friends see nothing for that section. */
  .pf-ytedit-only { display:none; }
  .pf.editing .pf-ytedit-only { display:block; }
  .pf-yt-row { display:flex; gap:8px; align-items:center; }
  .pf-yt-input { flex:1; min-width:0; font-family:var(--font); font-size:14px; color:var(--ink);
    background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:9px 11px; }
  .pf-yt-input::placeholder { color:var(--ink-faint); }
  .pf-yt-remove { margin-top:8px; font-family:var(--font); font-size:12px; font-weight:700;
    color:#e5848a; background:transparent; border:1px solid rgba(229,72,77,.5);
    border-radius:9px; padding:7px 12px; cursor:pointer; }

  /* ===================================================================
     PROFILE · TOP HUMANS (grid of avatar tiles; 6 = 2x3, 9 = 3x3)
     =================================================================== */
  .pf-banner { display:inline-block; font-family:var(--pf-display);
    font-size:calc(22px * var(--pf-head-scale)); font-weight:800; color:#0d0d0f;
    background:linear-gradient(180deg,#ffd56b,#f5a623); padding:4px 16px 6px;
    border-radius:10px; transform:rotate(-2deg); box-shadow:0 4px 10px rgba(0,0,0,.35);
    margin-bottom:14px; }
  .pf-th-controls { display:none; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
  .pf.editing .pf-th-controls { display:flex; }
  .pf-th-choose { font-family:var(--font); font-size:12px; font-weight:700; color:var(--accent-ink);
    background:var(--accent); border:none; border-radius:9px; padding:9px 12px; cursor:pointer; }
  .pf-th-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px 8px; }
  .pf.pf-grid-6 .pf-th-grid { grid-template-columns:repeat(2,1fr); }
  .pf-th { display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; cursor:pointer; }
  .pf-th-av { width:74px; height:74px; border-radius:16px; background:var(--avatar);
    border:1px solid var(--line); position:relative; overflow:hidden; display:flex;
    align-items:center; justify-content:center; font-weight:800; font-size:24px; color:var(--ink);
    box-shadow:0 4px 12px rgba(0,0,0,.35); }
  .pf-th-av .av-img { border-radius:0; width:100%; height:100%; }
  .pf-th:nth-child(2n) .pf-th-av { transform:rotate(-2deg); }
  .pf-th:nth-child(3n) .pf-th-av { transform:rotate(2deg); }
  .pf-th-h { font-family:var(--pf-hand); font-size:calc(14px * var(--pf-body-scale));
    color:var(--ink-dim); line-height:1; max-width:84px; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }
  .pf-th-empty { font-family:var(--pf-hand); font-size:calc(15px * var(--pf-body-scale));
    color:var(--ink-dim); line-height:1.3; padding:6px 2px; }
  .pf-th-empty b { color:var(--ink); }

  /* ---- choose-humans modal ---- */
  .pf-cf-modal { width:380px; max-width:calc(100% - 24px); max-height:86vh; display:flex;
    flex-direction:column; background:var(--panel); border:1px solid var(--line);
    border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.6); }
  .pf-cf-head { display:flex; align-items:baseline; justify-content:space-between; padding:16px 16px 10px; }
  .pf-cf-head h4 { font-size:16px; margin:0; color:var(--ink); }
  .pf-cf-count { font-size:12px; color:var(--ink-faint); font-weight:700; }
  .pf-cf-groups { display:flex; gap:7px; flex-wrap:wrap; padding:0 16px 12px; border-bottom:1px solid var(--line); }
  .pf-cf-group { font-family:var(--font); font-size:12px; font-weight:600; color:var(--ink-dim);
    background:var(--panel-2); border:1px solid var(--line); border-radius:999px;
    padding:6px 12px; cursor:pointer; line-height:1; }
  .pf-cf-group.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .pf-cf-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px 8px;
    padding:14px 16px; overflow-y:auto; flex:1; }
  .pf-cf-friend { display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
    position:relative; background:none; border:none; padding:0; }
  .pf-cf-av { width:60px; height:60px; border-radius:14px; background:var(--avatar);
    border:1px solid var(--line); position:relative; overflow:hidden; display:flex;
    align-items:center; justify-content:center; font-weight:800; font-size:20px; color:var(--ink); }
  .pf-cf-av .av-img { border-radius:0; width:100%; height:100%; }
  .pf-cf-friend.sel .pf-cf-av { outline:2px solid var(--accent); outline-offset:2px; }
  .pf-cf-h { font-family:var(--font); font-size:11px; color:var(--ink-dim); line-height:1;
    max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pf-cf-badge { display:none; position:absolute; top:-6px; right:6px; min-width:20px; height:20px;
    padding:0 5px; border-radius:999px; background:var(--accent); color:#fff; font-size:11px;
    font-weight:800; line-height:20px; text-align:center; border:2px solid var(--panel); }
  .pf-cf-friend.sel .pf-cf-badge { display:block; }
  .pf-cf-check { display:none; position:absolute; top:-6px; left:6px; width:20px; height:20px;
    border-radius:50%; background:var(--green); color:#06240f; font-size:12px; font-weight:800;
    line-height:20px; text-align:center; border:2px solid var(--panel); }
  .pf-cf-friend.sel .pf-cf-check { display:block; }
  .pf-cf-bar { display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--line); background:var(--panel); }
  .pf-cf-bar .btn { flex:1; }

  /* ===================================================================
     PROFILE · WARM & FUZZIES (corkboard of post-it notes)
     =================================================================== */
  .pf-board { background:radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px), var(--panel);
    background-size:14px 14px; border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 14px 14px; box-shadow:inset 0 0 30px rgba(0,0,0,.4); position:relative; }
  .pf-notes { columns:2; column-gap:10px; }
  .pf-note { break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 14px;
    padding:14px 12px 12px; border-radius:4px; position:relative;
    box-shadow:0 6px 14px rgba(0,0,0,.45); font-family:var(--pf-hand); color:rgba(255,255,255,.92); }
  .pf-note-msg { margin:0 0 8px; font-size:calc(15px * var(--pf-body-scale)); line-height:1.25; word-break:break-word; }
  .pf-note-sig { display:block; text-align:right; font-family:var(--pf-display);
    font-size:calc(18px * var(--pf-body-scale)); font-weight:600; color:rgba(255,255,255,.78); word-break:break-word; }
  .pf-note::before { content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%) rotate(-4deg);
    width:42px; height:16px; background:rgba(255,255,255,.22); box-shadow:0 1px 2px rgba(0,0,0,.3); }
  .pf-note[data-style="1"] { background:#3a3320; transform:rotate(-2.2deg); }
  .pf-note[data-style="2"] { background:#2a2030; transform:rotate(1.8deg); }
  .pf-note[data-style="3"] { background:#1f3026; transform:rotate(-1.4deg); }
  .pf-note[data-style="4"] { background:#2c2530; transform:rotate(2.4deg); }
  .pf-note[data-style="0"] { background:#33252a; transform:rotate(-1.8deg); }
  /* owner per-note delete (✕) — EDIT-ONLY: hidden in live/non-edit view, shown
     only under .pf.editing (like the places ✕). No archive/pin button anymore. */
  .pf-note-tools { position:absolute; top:-9px; right:-7px; display:none; gap:4px; z-index:6; }
  .pf.editing .pf-note-tools { display:flex; }
  .pf-note-del { width:24px; height:24px; border-radius:50%; background:var(--panel-2);
    border:1px solid var(--line); font-size:12px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0;
    color:#ffb3b6; border-color:rgba(229,72,77,.4); }
  /* "✎ choose what shows" — EDIT-ONLY, mirrors the choose-humans control */
  .pf-fz-manage { display:none; margin:0 0 12px; }
  .pf.editing .pf-fz-manage { display:block; }
  .pf-fz-managebtn { font-family:var(--font); font-size:12px; font-weight:700; color:var(--accent-ink);
    background:var(--accent); border:none; border-radius:9px; padding:9px 12px; cursor:pointer; }
  .pf-fz-empty { font-family:var(--pf-hand); font-size:calc(15px * var(--pf-body-scale));
    color:var(--ink-dim); text-align:center; padding:8px 4px 12px; }
  .pf-fz-hint { text-align:center; font-size:11px; color:var(--ink-faint); margin:8px 0 0; font-family:var(--font); }
  /* composer (friend leaves a fuzzy) */
  .pf-fz-composer { margin-top:8px; }
  .pf-fz-text { width:100%; min-height:70px; resize:vertical; font-family:var(--pf-hand);
    font-size:calc(16px * var(--pf-body-scale)); line-height:1.3; color:var(--ink);
    background:#1f3026; border:1px solid var(--line); border-radius:10px; padding:12px; outline:none; }
  .pf-fz-text:focus { border-color:var(--green); }
  .pf-fz-warn { display:none; margin:8px 0 0; font-family:var(--font); font-size:13px; font-weight:600;
    color:#ffb3b6; background:rgba(229,72,77,.12); border:1px solid rgba(229,72,77,.4);
    border-radius:10px; padding:9px 11px; line-height:1.3; }
  .pf-fz-warn.show { display:block; }
  .pf-fz-actions { display:flex; align-items:center; gap:10px; margin-top:8px; }
  .pf-fz-count { font-family:var(--font); font-size:11px; color:var(--ink-faint); }
  .pf-fz-actions .btn { margin-left:auto; }
  .btn.mini { padding:9px 14px; font-size:13px; }
  /* ---- "choose what shows" manage modal (reuses .pf-cf-* shell) ---- */
  /* one selectable note card (full-width rows, not the 4-col avatar grid) */
  .pf-fz-mgrid { grid-template-columns:1fr; gap:10px; }
  .pf-fz-card { position:relative; display:flex; flex-direction:column; gap:3px; text-align:left;
    background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
    padding:11px 12px 10px; cursor:pointer; font-family:var(--pf-hand); width:100%; }
  .pf-fz-card.sel { outline:2px solid var(--accent); outline-offset:1px; background:var(--panel); }
  .pf-fz-card-msg { font-size:calc(15px * var(--pf-body-scale)); line-height:1.25; color:var(--ink);
    word-break:break-word; }
  .pf-fz-card-sig { font-family:var(--pf-display); font-size:14px; color:var(--ink-faint); }
  .pf-fz-card .pf-cf-check { top:8px; right:8px; left:auto; }
  .pf-fz-card.sel .pf-cf-check { display:block; }

  /* ===================================================================
     PROFILE · PLACES (polaroid frames + lightbox; UI only)
     =================================================================== */
  .pf-places-copy { font-family:var(--pf-hand); font-size:calc(15px * var(--pf-body-scale));
    color:var(--ink-dim); margin:-6px 0 12px; line-height:1.2; }
  .pf-polas { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 12px; }
  /* the polaroid frame is the wrapper; the inner button is the tap target */
  .pf-pola { position:relative; background:#f4f1e8;
    padding:8px 8px 0; border-radius:3px; box-shadow:0 6px 16px rgba(0,0,0,.5); }
  .pf-pola-tap { display:block; width:100%; text-decoration:none; background:none;
    border:none; padding:0; cursor:pointer; }
  .pf-pola-img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:1px; display:block; background:#e9e4d6; }
  .pf-pola-cap { display:block; text-align:center; color:#2a2620; font-family:var(--pf-hand);
    font-size:15px; line-height:1; padding:7px 2px 9px; word-break:break-word; }
  .pf-pola:nth-child(1) { transform:rotate(-2.5deg); }
  .pf-pola:nth-child(2) { transform:rotate(2deg); }
  .pf-pola:nth-child(3) { transform:rotate(1.5deg); }
  .pf-pola:nth-child(4) { transform:rotate(-1.5deg); }
  /* remove ✕ — only revealed on your own profile in edit mode */
  .pf-pola-x { display:none; position:absolute; top:-9px; right:-9px; width:26px; height:26px;
    border-radius:50%; background:#e5484d; border:2px solid #f4f1e8; color:#fff; font-size:12px;
    line-height:1; cursor:pointer; z-index:2; align-items:center; justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,.5); }
  .pf.editing .pf-pola-x { display:flex; }
  /* add-a-spot tile — only shown in edit mode (self) */
  .pf-pola-add { display:none; flex-direction:column; align-items:center; justify-content:center;
    width:100%; aspect-ratio:.86; border:2px dashed rgba(59,130,246,.5); border-radius:6px;
    background:rgba(59,130,246,.06); color:#9cc2ff; font-size:26px; cursor:pointer; }
  .pf.editing .pf-pola-add { display:flex; }
  .pf-pola-add small { font-size:11px; font-family:var(--font); font-weight:700; margin-top:4px; letter-spacing:.3px; }
  /* lightbox */
  .pf-lb { position:relative; max-width:calc(100% - 48px); width:330px; }
  .pf-lb-pola { background:#f4f1e8; padding:14px 14px 0; border-radius:4px;
    box-shadow:0 24px 60px rgba(0,0,0,.7); transform:rotate(-1.5deg); }
  .pf-lb-img { width:100%; aspect-ratio:1; object-fit:cover; display:block; border-radius:1px; background:#e9e4d6; }
  .pf-lb-cap { display:block; text-align:center; color:#2a2620; font-family:var(--pf-hand);
    font-size:24px; padding:14px 4px 20px; line-height:1; }
  .pf-lb-close { position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:50%;
    background:var(--panel-2); border:1px solid var(--line); color:var(--ink); font-size:15px;
    cursor:pointer; z-index:2; display:flex; align-items:center; justify-content:center; }

  /* muted settings row */
  .sheet .srow { width:100%; text-align:left; font-family:var(--font); font-size:14px; font-weight:600;
    color:var(--ink); background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
    padding:13px 14px; margin-bottom:10px; cursor:pointer; display:flex; align-items:center; gap:10px; }
  .sheet .srow.muted { color:var(--ink-faint); cursor:default; }
  .sheet .srow.danger { color:#ffb3b6; }
  .sheet .srow:last-child { margin-bottom:0; }

  /* =====================================================================
     MESSAGING — DMs + group chats + GIFs, inside the My Tribe tab.
     Chat list (.conv-row), the thread (.chat-hdr/.chat-scroll/.bubble), the
     composer, the GIF picker grid + bottom-sheet, and the tab unread badge.
     Per-chat fonts REUSE the profile .pf.pf-font-* classes (see below) — we
     do NOT redefine them here.
     ===================================================================== */
  /* conversation list rows */
  .conv-row { display:flex; align-items:center; gap:11px; padding:11px 16px; cursor:pointer;
    border-bottom:1px solid #15171d; }
  .conv-row .gicon { height:34px; width:34px; border-radius:50%; flex:none; display:flex;
    align-items:center; justify-content:center; font-size:17px; background:var(--panel-2);
    border:1px solid var(--line); }
  .conv-mid { flex:1; min-width:0; }
  .conv-top { display:flex; align-items:baseline; gap:8px; }
  .conv-name { font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; flex:1; min-width:0; }
  .conv-time { font-size:10.5px; color:var(--ink-faint); flex:none; }
  .conv-prev { font-size:12px; color:var(--ink-dim); white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; margin-top:2px; }
  .conv-prev.unread { color:var(--ink); font-weight:600; }
  .conv-badge { flex:none; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
    background:var(--accent); color:var(--accent-ink); font-size:10.5px; font-weight:800;
    line-height:18px; text-align:center; margin-left:4px; }
  .conv-muted { font-size:11px; color:var(--ink-faint); flex:none; margin-left:4px; }

  /* while a thread is open, the tribe scroll becomes a non-scrolling flex column
     (header + composer fixed, the inner .chat-scroll does the scrolling). */
  .scroll.chat-mode { display:flex; flex-direction:column; overflow:hidden; }
  /* thread header (back · avatar · name · ⚙) */
  .chat-hdr { display:flex; align-items:center; gap:10px; padding:12px 14px;
    border-bottom:1px solid var(--line); flex:none; }
  .chat-hdr .back { font-size:22px; padding:0 2px; }
  .chat-hdr .gicon { height:32px; width:32px; border-radius:50%; flex:none; display:flex;
    align-items:center; justify-content:center; font-size:16px; background:var(--panel-2);
    border:1px solid var(--line); }
  .chat-hdr .chat-name { font-weight:800; font-size:15px; flex:1; min-width:0; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .chat-hdr .chat-sub { font-size:11px; color:var(--ink-dim); font-weight:500; }
  .chat-hdr .pf-iconbtn, .chat-cog { flex:none; width:32px; height:32px; border-radius:50%;
    border:1px solid var(--line); background:var(--panel-2); color:var(--ink-dim); font-size:15px;
    cursor:pointer; font-family:var(--font); }

  /* scrolling bubble list — carries .pf + pf-font-<font> for the per-chat font */
  .chat-scroll { flex:1; overflow-y:auto; padding:14px 12px 16px; display:flex;
    flex-direction:column; gap:3px; -webkit-overflow-scrolling:touch; }
  /* neutralize the .pf base cosmetics (min-height/padding) so reusing the pf-font-*
     classes here doesn't drag in the profile layout — but KEEP the per-chat
     background: read --pf-bg (set by the pf-bg-* classes) so the chat background
     swatches theme this area. --pf-bg defaults to var(--bg) and pf-bg-dark maps to
     var(--bg) too, so the default "dark" looks exactly like the current chat. */
  .chat-scroll.pf { background:var(--pf-bg); min-height:0; padding:14px 12px 16px; }
  .msg-row { display:flex; flex-direction:column; align-items:flex-start; max-width:78%; }
  .msg-row.me { align-self:flex-end; align-items:flex-end; }
  .msg-sender { font-size:10.5px; color:var(--ink-faint); margin:6px 4px 2px; font-weight:700; }
  .bubble { padding:8px 12px; border-radius:16px; font-size:14px; line-height:1.35;
    word-wrap:break-word; overflow-wrap:anywhere; white-space:pre-wrap; font-family:var(--pf-hand); }
  .bubble.them { background:var(--panel-2); color:var(--ink); border:1px solid var(--line);
    border-bottom-left-radius:5px; }
  .bubble.me { background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:5px; }
  .bubble.gif { padding:3px; background:none; border:none; }
  .bubble.gif img { display:block; max-width:200px; width:100%; border-radius:12px; }
  .chat-empty { text-align:center; color:var(--ink-dim); font-size:13px; padding:40px 24px; line-height:1.6;
    margin:auto; }

  /* chat composer — reuses the global .ta input (the post .composer uses .inp, so
     these don't collide); pill-shaped to match the mockup. */
  .composer .ta { flex:1; min-width:0; margin:0; border-radius:18px; padding:9px 14px; }
  .gifbtn { flex:none; height:34px; padding:0 11px; border-radius:17px; border:1px solid var(--line);
    background:var(--panel-2); color:var(--ink-dim); font-size:11px; font-weight:800; cursor:pointer;
    font-family:var(--font); letter-spacing:.04em; }
  .sendbtn { flex:none; height:34px; width:34px; border-radius:50%; border:none; background:var(--accent);
    color:var(--accent-ink); font-size:16px; cursor:pointer; display:flex; align-items:center;
    justify-content:center; }
  .sendbtn:disabled { opacity:.4; cursor:default; }

  /* GIF picker bottom sheet */
  .gif-search { width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
    padding:10px 12px; color:var(--ink); font-family:var(--font); font-size:16px; margin-bottom:10px; }
  .gif-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:46vh; overflow-y:auto;
    -webkit-overflow-scrolling:touch; }
  .gif-grid button { padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden;
    background:var(--panel-2); cursor:pointer; aspect-ratio:1/1; }
  .gif-grid img { width:100%; height:100%; object-fit:cover; display:block; }
  .gif-grid .gif-empty { grid-column:1/-1; text-align:center; color:var(--ink-dim); font-size:12px;
    padding:24px; }

  /* chat-settings: member list + font chips reuse profile chips */
  .chat-members { display:flex; flex-direction:column; gap:2px; margin:4px 0 12px; }
  .chat-mrow { display:flex; align-items:center; gap:10px; padding:6px 2px; }
  .chat-mrow .nm { font-weight:600; font-size:13px; }
  .chat-mrow .you-tag { margin-left:auto; font-size:10px; color:var(--ink-faint); }
  .chat-set-label { font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--ink-faint);
    margin:14px 0 8px; }
  .chat-set-row { display:flex; align-items:center; gap:10px; padding:4px 0; }
  .chat-set-row .lbl { font-size:14px; font-weight:600; }

  /* slash menu (shown above composer when typing /) */
  .slashmenu { border:1px solid var(--line); background:var(--panel-2); border-radius:12px; padding:6px;
    margin:0 12px 6px; }
  .slashrow { display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:9px; cursor:pointer; }
  .slashrow:hover, .slashrow.on { background:rgba(59,130,246,.12); }
  .slashrow .cmd { color:var(--accent); font-weight:800; font-size:13px; }
  .slashrow .d { color:var(--ink-dim); font-size:11px; }

  /* ---- Plan card (inline in chat thread) --------------------------------- */
  .plan-row { max-width:100%; width:100%; align-items:stretch; }
  .plan-loading { color:var(--ink-dim); font-size:13px; padding:10px 14px; }
  .plan { border:1px solid #1e3a5f; background:#0f1c2e; border-radius:15px; padding:12px;
    margin:4px 0; width:100%; box-sizing:border-box; }
  .plan-t { color:var(--ink); font-weight:800; font-size:15px; }
  .plan-t-row { display:flex; align-items:center; gap:6px; font-size:15px; }
  .plan-t-edit { flex:1; min-width:0; background:transparent; border:none; border-bottom:1px dashed var(--line);
    color:var(--ink); font-weight:800; font-size:16px; font-family:var(--font); padding:2px 0; }   /* 16px: iOS Safari zooms inputs <16px on focus */
  .plan-t-edit:focus { outline:none; border-bottom-color:var(--accent); }
  .plan-t-edit::placeholder { color:var(--ink-dim); font-weight:600; }
  .plan-s { color:#8aa0bd; font-size:11px; margin-top:2px; }
  .plan .sec { margin-top:12px; }
  .plan .sec-h { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
    color:#7eb0ff; margin-bottom:6px; }
  .opt { display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:11px; padding:8px 10px; margin-bottom:6px; cursor:pointer; user-select:none; }
  .opt.lead { border-color:var(--green); background:rgba(34,197,94,.08); }
  .opt.voted { border-color:var(--accent); }
  .opt.lead.voted { border-color:var(--green); }
  .opt-main { flex:1; min-width:0; }
  .opt-name { color:var(--ink); font-size:13px; font-weight:600; }
  .opt-meta { color:var(--ink-dim); font-size:10.5px; margin-top:1px; }
  .opt-empty { color:var(--ink-faint); font-size:12px; padding:4px 0; }
  .tally { display:flex; align-items:center; gap:5px; flex:none; }
  .tally .avs { display:flex; }
  .tally .avs .av { width:22px; height:22px; font-size:10px; margin-left:-7px; border:2px solid var(--panel-2); }
  .tally .n { font-size:12px; font-weight:800; color:#9fd9b4; }
  .heart { font-size:12px; color:#ff7aa0; font-weight:800; }
  .plan .add { display:inline-flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
  .plan .add button { background:none; border:1px dashed #2a3a52; color:#8aa0bd;
    border-radius:9px; padding:5px 9px; font-size:11px; cursor:pointer; font-family:var(--font); }
  .plan .add button:hover { border-color:var(--accent); color:var(--accent); }
  .lockbtn { display:block; width:100%; margin-top:12px; background:var(--green); color:#06210f;
    font-weight:800; border:none; border-radius:11px; padding:10px; font-size:13px; cursor:pointer;
    font-family:var(--font); }
  .lockbtn:hover { opacity:.9; }
  .plan-cancel { display:block; width:100%; margin-top:6px; background:none; border:1px solid var(--line);
    color:var(--ink-faint); border-radius:11px; padding:7px; font-size:11px; cursor:pointer;
    font-family:var(--font); }
  .plan-cancel:hover { border-color:#ff7070; color:#ff7070; }
  /* locked state */
  .locked-plan { border:1px solid #1e5f37; background:#10241a; border-radius:15px; padding:13px;
    text-align:center; }
  .lp-big { color:#eafff1; font-weight:800; font-size:15px; margin-bottom:4px; }
  .lp-det { color:#bfe6cd; font-size:12px; margin-bottom:10px; }
  .locked-plan .btn { display:inline-block; }
  /* trip detail screen — .plan .* is scoped to the chat card; the trip screen uses
     .trip-body, so mirror the plan card's section/add styling here + the new classes. */
  .trip-body { padding:12px 16px 28px; }
  .trip-body .sec { margin-top:14px; }
  .trip-body .sec-h { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
    color:#7eb0ff; margin-bottom:6px; }
  .trip-body .add { display:inline-flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
  .trip-body .add button { display:inline-flex; align-items:center; gap:6px; background:none;
    border:1px dashed #2a3a52; color:#8aa0bd;
    border-radius:9px; padding:5px 9px; font-size:11px; cursor:pointer; font-family:var(--font); }
  .trip-body .add button:hover { border-color:var(--accent); color:var(--accent); }
  .trip-body .add button .ic { display:inline-flex; align-items:center; color:var(--accent); }
  .trip-body .add button .ic.heart { color:#ff7aa0; }
  .trip-body .add button .ic.plus { font-size:13px; line-height:1; }
  .trip-body .add button svg { width:13px; height:13px; }
  .trip-people { display:flex; align-items:center; gap:8px; padding-bottom:12px; }
  .trip-people .avs { display:flex; }
  .trip-people .avs .av { width:26px; height:26px; font-size:11px; margin-left:-7px; border:2px solid #11151c; }
  .trip-cover { font-size:20px; flex:none; cursor:default; }
  /* owner: emoji reads as a tappable chip; name reads as an editable field with a ✎ */
  .trip-cover.editable { cursor:pointer; background:var(--panel-2); border:1px solid var(--line);
    border-radius:10px; padding:3px 8px; line-height:1; }
  .trip-name-field { flex:1; min-width:0; display:flex; align-items:center; gap:6px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:5px 9px; }
  .trip-name-field:focus-within { border-color:var(--accent); }
  .trip-name-field .plan-t-edit { border-bottom:none; padding:0; }
  .trip-name-pen { color:var(--accent); flex:none; display:inline-flex; pointer-events:none; }
  .trip-name-pen svg { width:14px; height:14px; }
  .trip-when { color:var(--ink); font-size:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .trip-when-sub { color:var(--ink-dim); font-weight:600; }
  /* My Spots → trip stop picker (segments + tap-to-add spot rows).
     NOTE: own class names (tps-*) — .ms-seg already exists as the Spots-tab segment CONTAINER. */
  .tps-segs { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
  .tps-seg { font-size:12px; color:var(--ink-dim); border:1px solid var(--line); border-radius:999px;
    padding:5px 11px; background:var(--panel-2); cursor:pointer; font-family:var(--font); }
  .tps-seg.on { color:var(--ink); border-color:var(--accent); background:rgba(59,130,246,.14); }
  .ms-pick-list { max-height:46vh; overflow-y:auto; }
  .ms-pick-row { display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:11px; padding:9px 11px; margin-bottom:7px; cursor:pointer; }
  .ms-pick-row .e { font-size:18px; flex:none; }
  .ms-pick-row .nm { font-weight:600; font-size:13.5px; flex:1; min-width:0; }
  .ms-pick-row .add { font-size:12px; color:var(--accent); font-weight:700; flex:none; }
  .ms-pick-row.added { border-color:#1f5740; }
  .ms-pick-row.added .add { color:var(--green); }
  /* share-trip-to-chat sheet (avatar + name only, compact) */
  .share-search { display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:10px; padding:8px 11px; margin-bottom:12px; }
  .share-search .ic { color:var(--ink-faint); display:inline-flex; }
  .share-search .ic svg { width:16px; height:16px; }
  .share-search input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--ink);
    font-size:16px; font-family:var(--font); }   /* 16px: avoid iOS focus-zoom */
  .share-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-faint); margin:2px 2px 8px; }
  .share-list { max-height:46vh; overflow-y:auto; }
  .share-row { display:flex; align-items:center; gap:11px; padding:8px 4px; cursor:pointer; }
  .share-row .gicon { height:34px; width:34px; border-radius:50%; flex:none; display:flex; align-items:center;
    justify-content:center; background:#26314a; font-size:17px; }
  .share-name { font-weight:700; font-size:14px; }
  /* trip overview band (when · stops · to-do) */
  .trip-ov { display:flex; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:11px 12px; margin:0 0 8px; }
  .trip-ov-cell { flex:1; display:flex; align-items:center; gap:7px; min-width:0; }
  .trip-ov-ic { color:var(--accent); display:inline-flex; flex:none; }
  .trip-ov-ic svg { width:15px; height:15px; }
  .trip-ov-ic.ok { color:var(--green); }
  .trip-ov-k { color:var(--ink-faint); font-size:10px; text-transform:uppercase; letter-spacing:.4px; }
  .trip-ov-v { font-weight:700; font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* going: member chips, horizontal scroll */
  .who-scroll { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
  .who-scroll::-webkit-scrollbar { display:none; }
  .who-chip { flex:none; display:flex; flex-direction:column; align-items:center; gap:5px; width:60px; }
  .who-chip .av { width:42px; height:42px; font-size:15px; }
  .who-chip .nm { font-size:11px; color:var(--ink-dim); max-width:58px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .who-chip.viewall { cursor:pointer; }
  .who-chip.viewall .va-av { width:42px; height:42px; border-radius:50%; background:var(--panel-2); border:1px dashed var(--line);
    color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:18px; }
  .who-chip.viewall .nm { color:var(--accent); }
  .who-host { font-size:9px; font-weight:800; color:var(--green); background:#10261d; border:1px solid #1f5740;
    border-radius:999px; padding:1px 7px; text-transform:lowercase; letter-spacing:.3px; }
  /* date-option lock-in button (own class — .lockbtn already exists for the full-width plan-lock) */
  .opt-lock { flex:none; font-size:10.5px; color:var(--green); border:1px solid #1f5740; background:rgba(34,197,94,.08);
    border-radius:8px; padding:4px 8px; cursor:pointer; white-space:nowrap; font-family:var(--font); margin-left:6px; }
  /* to-do rows */
  .todo { display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:9px 11px; margin-bottom:7px; }
  .todo-box { width:19px; height:19px; border-radius:6px; border:2px solid var(--ink-faint); flex:none; display:flex; align-items:center;
    justify-content:center; font-size:12px; font-weight:800; color:#06210f; cursor:pointer; }
  .todo-box.on { background:var(--green); border-color:var(--green); }
  .todo-tx { flex:1; min-width:0; font-size:13.5px; color:var(--ink); }
  .todo.done .todo-tx { color:var(--ink-faint); text-decoration:line-through; }
  .todo-owner { flex:none; cursor:pointer; }
  .ownerchip { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--ink-dim); border:1px solid var(--line);
    border-radius:999px; padding:3px 8px 3px 4px; }
  .ownerchip .av { width:18px; height:18px; font-size:9px; }
  .ownm { display:inline-block; max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
  .ownerchip.unassigned { color:var(--ink-faint); border-style:dashed; padding:4px 9px; }
  /* assign / members / change-dates sheet rows */
  .assign-list { max-height:42vh; overflow-y:auto; }
  .arow { display:flex; align-items:center; gap:10px; padding:9px 4px; cursor:pointer; }
  .arow .av { width:32px; height:32px; font-size:12px; }
  .arow .nm { font-weight:600; font-size:13.5px; flex:1; min-width:0; }
  .arow.sel .nm { color:var(--accent); }
  .arow-check { color:var(--accent); font-weight:800; flex:none; }
  .arow-x { width:32px; text-align:center; color:var(--ink-faint); font-size:15px; flex:none; }
  .arow.del .nm { color:#ff7aa0; }
  .arow.menu { padding:11px 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); margin-bottom:7px; }
  .mem-role { font-size:10px; color:var(--green); background:#10261d; border:1px solid #1f5740; border-radius:999px; padding:2px 8px; flex:none; }
  /* trip cards in the Spots > trips segment (mockup look: cover + name + meta) */
  .trip-card { display:flex; align-items:center; gap:12px; padding:12px; background:var(--panel-2);
    border:1px solid var(--line); border-radius:14px; margin:0 14px 9px; cursor:pointer; }
  .trip-card:active { opacity:.85; }
  .trip-card-cover { width:46px; height:46px; border-radius:12px; flex:none; display:flex;
    align-items:center; justify-content:center; font-size:22px; background:linear-gradient(135deg,#26405e,#3a2b52); }
  .trip-card-body { flex:1; min-width:0; }
  .trip-card-name { font-weight:700; font-size:15px; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .trip-card-meta { font-size:12px; color:var(--ink-faint); margin-top:3px; }
  .trip-card-who { display:flex; margin-top:7px; }
  .trip-card-who .av { width:22px; height:22px; font-size:10px; margin-left:-6px; border:2px solid var(--panel-2); }
  .trip-card-who .av:first-child { margin-left:0; }
  .trip-card-who .av.more { background:#3a4150; color:var(--ink-faint); font-weight:700; }
  /* tombstone */
  .plan.tombstone { background:none; border-color:var(--line); color:var(--ink-faint);
    font-size:12px; text-align:center; padding:10px; border-radius:11px; }

  /* ---- /trip inline card (rides the .plan card language) ------------------ */
  .plan.tc { position:relative; }
  .tc-head { display:flex; align-items:center; gap:7px; padding-right:48px; }   /* clear air between the ✎ and the ⋯ */
  .tc-emoji { background:var(--panel-2); border:1px solid var(--line); border-radius:9px;
    padding:2px 7px; font-size:16px; line-height:1.4; flex:none; cursor:pointer; }
  .tc-emoji.plain { cursor:default; background:transparent; border-color:transparent; padding:2px 2px; }
  .tc-head .plan-t-edit { font-size:16px; }
  .tc-head .trip-name-pen { pointer-events:none; }
  .card-dots { position:absolute; top:10px; right:8px; background:none; border:none;
    color:var(--ink-dim); font-size:19px; font-weight:800; letter-spacing:1px; cursor:pointer;
    padding:4px 8px; font-family:var(--font); line-height:1; }
  /* the card's add buttons: same compact icon pills as the trip screen (the svg sizing
     was scoped to .trip-body only — unsized icons blew the .plan buttons up huge) */
  .plan .add button { display:inline-flex; align-items:center; gap:6px; }
  .plan .add button .ic { display:inline-flex; align-items:center; color:var(--accent); }
  .plan .add button .ic.heart { color:#ff7aa0; }
  .plan .add button .ic.plus { font-size:13px; line-height:1; }
  .plan .add button svg { width:13px; height:13px; }
  .trip-open { display:block; width:100%; margin-top:12px; background:transparent;
    border:1px solid #2b4a6b; color:var(--accent); border-radius:10px; padding:10px;
    font-weight:800; font-size:13px; cursor:pointer; font-family:var(--font); text-align:center; }
  .plan .opt-lock { margin-left:6px; }
  /* 🧳 sheet: section headers + bordered rows (trips get the green edge, per mockup) */
  .sheet-shead { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
    color:var(--ink-faint); margin:8px 2px 6px; }
  .tsheet-row { display:flex; align-items:center; gap:10px; background:var(--panel-2);
    border:1px solid var(--line); border-radius:11px; padding:9px 11px; margin-bottom:7px; cursor:pointer; }
  .tsheet-row.trip { border-color:#1f5740; }
  .tsheet-row .nm { flex:1; min-width:0; font-weight:600; font-size:13.5px; }
  .tsheet-row .you-tag { margin-left:auto; font-size:10px; color:var(--ink-faint); flex:none; }
  /* 🧳 header button: green ring while a trip's date-vote is open (keeps the circle shape) */
  .chat-cog.vote-open { box-shadow:0 0 0 2px var(--green); }

  /* ---- "free for…" sheet (duration chips + preview + commit-on-done) ---- */
  .fu-now { color:var(--ink-faint); font-size:11.5px; margin:2px 0 11px; }
  .fu-chips { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:7px; }
  .fu-chip { flex:1; text-align:center; font-size:13px; color:var(--ink-dim); border:1px solid var(--line);
    border-radius:999px; padding:9px 10px; background:var(--panel-2); cursor:pointer; white-space:nowrap;
    font-family:var(--font); }
  .fu-chip.on { color:#fff; background:var(--accent); border-color:var(--accent); font-weight:700; }
  .fu-chip.fu-x { color:var(--ink); border-color:#2b4a6b; }
  .fu-preview { text-align:center; color:#9fd9b4; font-size:14px; font-weight:800; margin:12px 0 2px; }
  .fu-acts { display:flex; gap:8px; margin-top:12px; }
  .fu-cancel { flex:1; background:none; border:1px solid var(--line); color:var(--ink-dim);
    border-radius:10px; padding:10px; font-size:13px; cursor:pointer; font-family:var(--font); }
  .fu-done { flex:1.4; background:var(--green); color:#06210f; border:none; border-radius:10px;
    padding:10px; font-weight:800; font-size:13px; cursor:pointer; font-family:var(--font); }
  /* 🛡 audience sheet */
  .fa-sub { display:block; font-weight:400; font-size:11px; color:var(--ink-faint); margin-top:1px; }
  .fa-list { max-height:44vh; overflow-y:auto; }
  .fa-check { margin-left:auto; width:22px; height:22px; border-radius:7px; border:2px solid var(--ink-faint);
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#06210f; flex:none; }
  .fa-check.on { background:var(--green); border-color:var(--green); }
  .fa-shead { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px;
    color:var(--ink-faint); margin:8px 2px 6px; }
  .fa-gav { width:34px; height:34px; border-radius:50%; background:#26314a; display:flex;
    align-items:center; justify-content:center; font-size:15px; flex:none; }
  /* edit-screen spots stepper: capacity hint + floored − */
  .step-hint { font-size:11.5px; color:var(--ink-faint); margin-top:6px; }
  .stepper button:disabled { opacity:.35; cursor:default; }

  /* ---- #15 plus-ones: who's-going roster + the who's-coming sheet ---- */
  .pj-roster { display:flex; gap:10px; flex-wrap:wrap; padding:2px 16px 4px; }
  .pj-chip { display:flex; flex-direction:column; align-items:center; gap:4px; width:62px; position:relative; }
  .pj-chip .av { width:38px; height:38px; font-size:14px; }
  .pj-nm { font-size:10.5px; color:var(--ink-dim); max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pj-plusn { position:absolute; top:-4px; right:4px; background:var(--accent); color:#fff; font-size:10px;
    font-weight:800; border-radius:999px; padding:1px 6px; border:2px solid var(--bg); }
  .pj-host { font-size:9px; font-weight:800; color:var(--green); background:#10261d; border:1px solid #1f5740;
    border-radius:999px; padding:0 6px; }
  .pj-count { color:var(--ink-dim); text-transform:none; letter-spacing:0; font-weight:600; }
  .pj-gnames { padding:2px 16px 4px; font-size:11.5px; color:var(--ink-faint); }
  .pj-grow { display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:11px; padding:9px 11px; margin-bottom:8px; }
  .pj-grow input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--ink);
    font-size:16px; font-family:var(--font); }
  .pj-grow input::placeholder { color:var(--ink-faint); }
  .pj-x { color:var(--ink-faint); font-size:15px; flex:none; padding:0 3px; cursor:pointer; }
  .pj-addg { display:inline-flex; align-items:center; gap:6px; background:none; border:1px dashed var(--line);
    color:var(--ink-dim); border-radius:999px; padding:7px 13px; font-size:12.5px; cursor:pointer; font-family:var(--font); }
  .pj-hint { text-align:center; color:#9fd9b4; font-size:12px; font-weight:700; margin-top:10px; min-height:15px; }
  .pj-acts { display:flex; gap:8px; margin-top:12px; }
  .pj-leave { display:block; width:100%; margin-top:10px; background:none; border:none; color:#ff7aa0;
    font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); text-align:center; }
  .pj-friendline { font-size:11px; color:var(--ink-faint); margin-top:9px; text-align:center; }
  /* #9 attendee invites: roster provenance + the sheet's invite row + ⌕ picker */
  .pj-via { font-size:9px; color:var(--ink-faint); }
  .pj-invhdr { font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin:12px 0 8px; }
  .pj-invsub { text-transform:none; letter-spacing:0; opacity:.8; }
  .pj-invrow { display:flex; gap:10px; align-items:flex-start; overflow-x:auto; padding-bottom:2px; }
  .pj-invitem { display:flex; flex-direction:column; align-items:center; gap:4px; width:52px; flex:none; cursor:pointer; }
  .pj-invitem .nm { font-size:10px; color:var(--ink-dim); max-width:52px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pj-invok { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(34,197,94,.15); border:1px solid var(--green,#22c55e); color:#7be0a4; font-weight:800; }
  .pj-invmore { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:none; border:1px dashed var(--line); color:var(--ink-dim); font-size:15px; }
  .pjm-list { overflow-y:auto; margin:10px -4px; flex:1; min-height:120px; }
  .pjm-row { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:12px; cursor:pointer; }
  .pjm-row.on { background:var(--panel-2); }
  .pjm-row .nm { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pjm-chk { margin-left:auto; color:var(--accent); font-weight:800; width:18px; text-align:center; }
  .pjm-empty { color:var(--ink-faint); font-size:12.5px; text-align:center; padding:16px 0; }
  /* free-band chooser rows (mock: invite = green edge, plan = blue edge) */
  .ms-list-row.ftr-g, .ms-list-row.ftr-p { border:1px solid var(--line); border-radius:11px;
    background:var(--panel-2); padding:10px 11px; margin-bottom:7px; }
  .ms-list-row.ftr-g { border-color:#1f5740; }
  .ms-list-row.ftr-p { border-color:#2b4a6b; }

  /* =====================================================================
     MY SPOTS — full-screen view + profile teaser
     ===================================================================== */

  /* --- header + segment row --- */
  .ms-header { padding:14px 16px 0; border-bottom:1px solid var(--line); flex:none; }
  .ms-toprow { display:flex; align-items:center; gap:8px; padding-bottom:10px; }
  .ms-title { font-weight:800; font-size:18px; color:var(--ink); }

  /* segment: Nearby | Favorites | Bucketlist */
  .ms-seg { display:flex; gap:8px; padding-bottom:10px; }
  .ms-seg-btn { flex:1; padding:9px; border-radius:12px; border:1px solid var(--line);
    background:var(--panel); color:var(--ink-dim); font-weight:700; font-size:13px; cursor:pointer;
    font-family:var(--font); text-transform:lowercase; }
  .ms-seg-btn.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

  /* chip row: all + categories + custom lists + new list (horizontal scroll) */
  .ms-chips { display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding:0 0 10px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .ms-chips::-webkit-scrollbar { display:none; }
  .ms-chip { flex:0 0 auto; padding:7px 13px; border-radius:16px; border:1px solid var(--line);
    background:var(--panel); color:var(--ink); font-size:12px; font-weight:700; cursor:pointer;
    font-family:var(--font); white-space:nowrap; }
  .ms-chip.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .ms-chip.dim { background:var(--panel-2); color:var(--ink-dim); }
  .ms-chip-div { flex:0 0 1px; height:22px; background:var(--line); margin:0 4px; align-self:center; }

  /* area label line — info (tappable) on the left, refresh anchored right */
  .ms-area-line { display:flex; align-items:center; gap:8px; padding:10px 16px 2px;
    font-size:12px; color:var(--ink-dim); }
  .ms-area-info { flex:1 1 auto; cursor:pointer; min-width:0; }
  .ms-area-change { color:var(--accent); font-weight:700; }
  .ms-refresh { flex:0 0 auto; width:30px; height:30px; border-radius:15px; border:1px solid var(--line);
    background:var(--panel); color:var(--ink); font-size:15px; line-height:1; cursor:pointer;
    font-family:var(--font); display:flex; align-items:center; justify-content:center; }
  .ms-refresh:active { background:var(--panel-2); }

  /* contextual sub-filter row (under the chip row, nearby view only) */
  .ms-subchips { display:flex; flex-wrap:nowrap; gap:7px; overflow-x:auto; padding:2px 0 10px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .ms-subchips::-webkit-scrollbar { display:none; }
  .ms-subchip { flex:0 0 auto; padding:5px 11px; border-radius:14px; border:1px solid var(--line);
    background:var(--panel-2); color:var(--ink-dim); font-size:11.5px; font-weight:600; cursor:pointer;
    font-family:var(--font); white-space:nowrap; }
  .ms-subchip.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

  /* add-a-spot pinned to the top + nearby search bar (aligned with cards' 14px inset) */
  .ms-addtop { display:block; box-sizing:border-box; width:calc(100% - 28px); margin:8px 14px; }
  .ms-nearby-q { display:block; box-sizing:border-box; width:calc(100% - 28px); margin:0 14px 12px; }

  /* "find a new spot" results region */
  .ms-found-hdr { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-dim);
    font-weight:700; margin:16px 16px 6px; }
  .ms-found-note { text-align:center; padding:14px 0; color:var(--ink-dim); font-size:12.5px; }

  /* delete-this-list (custom list view) */
  .ms-dellist { color:#e1483a; }

  /* spot card (emoji + name/sub + ♥ + ⋯) */
  .ms-card { display:flex; align-items:center; gap:11px; background:var(--panel);
    border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px;
    margin:8px 14px 0; }
  .ms-card-emoji { font-size:22px; flex:none; }
  .ms-card-mid { flex:1; min-width:0; }
  .ms-card-name { font-weight:700; font-size:15px; color:var(--ink);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ms-card-sub { font-size:12px; color:var(--ink-dim); margin-top:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ms-card-icon { flex:none; width:34px; height:34px; display:flex; align-items:center;
    justify-content:center; background:none; border:none; cursor:pointer; font-size:22px;
    font-family:var(--font); }
  .ms-heart { color:var(--ink-faint); }
  .ms-heart.on { color:#e1483a; }
  .ms-more { color:var(--ink-dim); font-weight:800; }

  /* set-area CTA (when no area stored) */
  .ms-cta { margin:18px 14px 0; background:var(--panel); border:1px solid var(--line);
    border-radius:var(--radius); padding:18px; }
  .ms-cta-title { font-size:15px; font-weight:800; color:var(--ink); margin-bottom:6px; }
  .ms-cta-sub { font-size:12.5px; color:var(--ink-dim); line-height:1.5; margin-bottom:12px; }

  /* scanning / error */
  .ms-scan-busy { text-align:center; padding:30px 0; color:var(--ink-dim); font-size:13px; }
  .ms-scan-err { text-align:center; color:var(--ink-dim); font-size:13px;
    padding:18px 28px; line-height:1.6; }

  /* footer buttons (expand area / add manually) */
  .ms-footer { display:flex; flex-direction:column; gap:10px; margin:14px 14px 30px; }

  /* spot detail sheet — header + full address + favorite/bucketlist + open-in-maps */
  .ms-sheet-head { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
  .ms-sheet-emoji { font-size:26px; flex:none; }
  .ms-sheet-headmid { min-width:0; }
  .ms-sheet-name { font-size:17px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ms-sheet-sub2 { font-size:12.5px; color:var(--ink-dim); margin-top:2px; }
  .ms-sheet-addr { font-size:13px; color:var(--ink-dim); background:var(--panel-2); border-radius:11px;
    padding:9px 11px; margin-bottom:12px; line-height:1.4; }
  .ms-sheet-togs { display:flex; gap:9px; margin-bottom:6px; }
  .ms-tog { flex:1; text-align:center; padding:10px 0; border:1px solid var(--line); border-radius:12px;
    font-weight:700; font-size:13px; color:var(--ink); background:none; cursor:pointer; font-family:var(--font); }
  .ms-tog.on-fav { border-color:#e1483a; color:#e1483a; background:rgba(225,72,58,.10); }
  .ms-tog.on-buck { border-color:var(--amber); color:var(--amber); background:rgba(245,158,11,.10); }
  .ms-maps-btn { width:100%; margin-top:14px; padding:11px 0; border:1px solid #2a3a5f; border-radius:12px;
    color:#9fc1ff; font-weight:700; font-size:13.5px; background:none; cursor:pointer; font-family:var(--font); }

  /* save sheet (⋯ → list toggles + nickname) */
  .ms-list-row { display:flex; align-items:center; gap:11px; padding:10px 0;
    border-bottom:1px solid var(--line); cursor:pointer; }
  .ms-list-emoji { font-size:18px; width:24px; text-align:center; flex:none; }
  .ms-list-name { font-size:15px; font-weight:600; color:var(--ink); flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ms-list-tag { font-size:12px; color:var(--ink-faint); font-weight:700; flex:none; }
  .ms-list-tag.on { color:var(--green); }
  .ms-field-label { font-size:11px; text-transform:uppercase; letter-spacing:.7px;
    color:var(--ink-faint); font-weight:700; margin:14px 0 8px; }

  /* area search results (inside sheet) */
  .ms-area-results { border:1px solid var(--line); border-radius:12px; background:var(--panel-2);
    margin-top:8px; overflow:hidden; }
  .ms-area-row { padding:11px 12px; border-bottom:1px solid var(--line); cursor:pointer; font-size:14px;
    font-weight:600; color:var(--ink); }
  .ms-area-row:last-child { border-bottom:none; }
  .ms-area-empty { text-align:center; color:var(--ink-dim); font-size:13px; padding:18px; }

  /* manual add: search results + picked place */
  .ms-ma-results { border:1px solid var(--line); border-radius:12px; background:var(--panel-2);
    margin-top:8px; overflow:hidden; max-height:160px; overflow-y:auto; }
  .ms-ma-row { padding:11px 12px; border-bottom:1px solid var(--line); cursor:pointer; font-size:14px;
    font-weight:600; color:var(--ink); }
  .ms-ma-row:last-child { border-bottom:none; }
  .ms-ma-picked { font-size:12.5px; color:var(--green); font-weight:600; margin-top:8px; }

  /* cat/list chip row inside sheets (wrap) */
  .ms-cat-row { display:flex; flex-wrap:wrap; gap:8px; }

  /* new-list modal inline row (emoji + name) */
  .ms-modal-row { display:flex; gap:8px; }
  .ms-emoji-field { width:56px; text-align:center; }

  /* --- Profile teaser: 📍 my spots --- */
  .ms-teaser { margin:18px 0 4px; }
  .ms-teaser-head { display:flex; align-items:center; margin-bottom:10px; cursor:pointer; }
  .ms-teaser-seeall { font-size:12px; font-weight:700; color:var(--accent); }
  /* horizontal scroll of spot mini-cards */
  .ms-teaser-scroll { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .ms-teaser-scroll::-webkit-scrollbar { display:none; }
  .ms-spot-card { flex:0 0 auto; width:88px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:12px; padding:10px 8px; text-align:center; cursor:pointer; }
  .ms-spot-emoji { font-size:22px; display:block; margin-bottom:4px; }
  .ms-spot-name { font-size:11px; font-weight:700; color:var(--ink); display:-webkit-box;
    -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; }
  .ms-spot-dist { font-size:10px; color:var(--ink-dim); margin-top:3px; }
  /* teaser empty state */
  .ms-teaser-empty { padding:10px 14px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:var(--radius); display:inline-block; cursor:pointer; }
  .ms-teaser-empty-text { font-size:13px; color:var(--ink-dim); }
  /* friend-view featured shelves (SP3): a list/trip = a labelled row of spot boxes */
  .ms-shelf { margin:14px 0 4px; }
  .ms-shelf-head { font-size:12px; font-weight:800; color:var(--ink); text-transform:lowercase;
    letter-spacing:.3px; margin-bottom:8px; }
  .ms-spot-card.ms-viewall { display:flex; flex-direction:column; align-items:center;
    justify-content:center; color:var(--accent); font-weight:700; }
  .ms-shelf-more { margin-top:8px; font-size:12px; font-weight:700; color:var(--accent);
    cursor:pointer; }
  /* shelf-head + picker kind tag (list/trip) — mirrors the mockup */
  .ms-kind { font-size:9px; font-weight:700; padding:1px 6px; border-radius:999px; margin-left:6px;
    vertical-align:middle; letter-spacing:.2px; text-transform:none; }
  .ms-kind-f { background:#3a2230; color:#ff9fb3; }
  .ms-kind-b { background:#2a2340; color:#c9a0ff; }
  .ms-kind-c { background:#22303f; color:var(--accent); }
  .ms-kind-t { background:#10261d; color:var(--green); }
  /* trip stop boxes get a green edge to read as a trip (vs a list) */
  .ms-spot-card-trip { border-color:#1f5740; }

  /* edit-mode feature picker rows (SP3): emoji · name+kind+count · pick/↑↓/toggle */
  .pf-pick-hint { font-size:11px; color:var(--ink-faint); line-height:1.5; margin:0 2px 12px; }
  .pf-prow { display:flex; align-items:center; gap:10px; background:var(--panel);
    border:1px solid var(--line); border-radius:12px; padding:10px 11px; margin-bottom:8px; }
  .pf-prow.off { opacity:.55; }
  .pf-prow-em { font-size:17px; flex:none; }
  .pf-prow-main { min-width:0; flex:1; }
  .pf-prow-nm { font-weight:600; font-size:13.5px; color:var(--ink); white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .pf-prow-sub { color:var(--ink-faint); font-size:10.5px; margin-top:1px; }
  .pf-prow-right { margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }
  .pf-pick { font-size:10.5px; color:var(--accent); background:transparent; border:1px solid #2b4a6b;
    border-radius:8px; padding:4px 8px; cursor:pointer; white-space:nowrap; }
  .pf-arrows { display:flex; gap:3px; }
  .pf-arrow { font-size:11px; color:var(--ink-dim); background:transparent; border:1px solid var(--line);
    border-radius:6px; padding:2px 7px; cursor:pointer; }
  .pf-arrow:disabled { opacity:.3; cursor:default; }
  .pf-tog { width:42px; height:24px; border-radius:999px; position:relative; flex:none; cursor:pointer;
    background:#283042; border:1px solid var(--line); padding:0; transition:background .15s; }
  .pf-tog.on { background:var(--green); border-color:var(--green); }
  .pf-tog::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
    border-radius:50%; background:#0a0b0e; transition:left .15s; }
  .pf-tog.on::after { left:20px; background:#062012; }

  /* =====================================================================
     VIBES — compose vibe chip + picker rows (Task 3)
     .vibetag/.vibetag-row added in Task 5; .homefilter/.hf-div in Task 6
     ===================================================================== */
  .vibechip{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim);border-radius:12px;padding:9px 12px;font-size:14px;cursor:pointer}
  .vibechip.set{border-color:var(--accent);color:var(--ink)}
  .lopt{color:var(--ink-faint);font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-left:6px}
  .vp-list{display:flex;flex-direction:column;gap:2px;margin:4px 0}
  .vp-row{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:11px;cursor:pointer}
  .vp-row:active,.vp-row.on{background:var(--panel-2)}
  .vp-emoji{font-size:18px;width:22px;text-align:center}
  .vp-label{flex:1;color:var(--ink)}
  .vp-check{color:var(--accent);font-weight:800;width:18px;text-align:center}
  .vibetag{display:inline-block;font-size:11px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim);border-radius:8px;padding:2px 8px}
  .vibetag-row{margin:8px 0}
  .hf-div{width:1px;height:18px;background:var(--line);flex:none;margin:0 2px}

  /* =====================================================================
     I'M FREE — pill toggle + free-now friends strip (Task 3 / Phase 2)
     ===================================================================== */
  /* OFF: a tappable card + on/off switch so it reads as "flip me free". */
  .freepill{margin:8px 0;border-radius:14px;border:1px solid var(--line);background:var(--panel);cursor:pointer;width:100%;box-sizing:border-box}
  .freepill.off{display:flex;align-items:center;gap:12px;padding:12px 14px}
  .fp-l{flex:1}
  .fp-t{color:var(--ink);font-weight:800;font-size:15px}
  .fp-s{color:var(--ink-dim);font-size:11.5px;margin-top:2px}
  .fp-switch{flex:none;width:42px;height:25px;border-radius:13px;background:var(--panel-2,#2b3340);position:relative}
  .fp-knob{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--ink-faint,#8a93a3);transition:all .15s}
  .fp-switch.on{background:var(--green,#22c55e);cursor:pointer}
  .fp-switch.on .fp-knob{left:20px;background:#fff}
  /* add-humans / accept tier toggle row */
  .addtier{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);margin-bottom:12px}
  .addtier>div{flex:1}
  .at-t{color:var(--ink);font-weight:700;font-size:14px}
  .at-s{color:var(--ink-dim);font-size:11.5px;margin-top:2px}
  /* ON: a green status pill — one line + adjustable duration chips + vibe. */
  .freepill.on{border-color:var(--green,#22c55e);background:rgba(34,197,94,.10);padding:11px 13px}
  .fp-row{display:flex;align-items:center;gap:8px}
  .fp-dot{width:9px;height:9px;border-radius:50%;background:var(--green,#22c55e);box-shadow:0 0 7px var(--green,#22c55e);flex:none}
  .fp-txt{flex:1;color:#d6ffe9;font-weight:700;font-size:14px}
  .fp-vibe{display:inline-block;margin-top:10px;background:rgba(34,197,94,.12);border:1px solid var(--green,#22c55e);color:#bff0d6;border-radius:11px;padding:6px 10px;font-size:12.5px;cursor:pointer}

  /* free pill — until-time line + optional note + vibe/until row */
  .fp-until{color:#bfe6cd;font-size:12px;margin-top:6px}
  .fp-note{display:flex;align-items:center;gap:8px;margin-top:9px;background:rgba(255,255,255,.05);border-radius:10px;padding:7px 10px;color:var(--ink);font-size:13px;cursor:pointer}
  .fp-note-ed{margin-left:auto;color:var(--ink-dim);display:inline-flex}
  .fp-note-ed svg,.hp-edit svg{width:13px;height:13px}
  .fp-note-add{display:inline-block;margin-top:9px;background:none;border:1px dashed var(--line);color:var(--ink-dim);border-radius:10px;padding:7px 10px;font-size:12.5px;cursor:pointer;font-family:var(--font)}
  .fp-row2{display:flex;align-items:center;gap:8px;margin-top:11px}
  .fp-row2 .fp-vibe{margin-top:0;flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fp-until-btn{flex:none;background:rgba(34,197,94,.10);border:1px solid var(--green,#22c55e);color:#bff0d6;border-radius:11px;padding:6px 11px;font-size:12px;cursor:pointer;font-family:var(--font)}
  .fp-until-btn svg{width:13px;height:13px;vertical-align:-2px}

  /* Home top slot — hosting card (blue) replaces the free pill while live/upcoming */
  .hostpill{margin:8px 0;border-radius:16px;border:1px solid #1e3a5f;background:rgba(59,130,246,.10);padding:13px 14px;width:100%;box-sizing:border-box}
  .hp-title{color:var(--ink);font-weight:800;font-size:17px;display:flex;align-items:center;gap:8px;min-width:0}
  .hp-meta{display:flex;align-items:center;gap:7px;color:var(--ink-dim);font-size:12.5px;margin-top:7px;flex-wrap:wrap}
  .hp-livedot{width:7px;height:7px;border-radius:50%;background:var(--green,#22c55e);flex:none}
  .hp-chip{color:#8fb6ff;font-weight:800;text-transform:lowercase;font-size:10px;letter-spacing:.03em;padding:2px 7px;border-radius:7px;background:rgba(59,130,246,.20);transform:rotate(-4deg);flex:none}
  .hp-up{color:#f0c14b;font-weight:800;text-transform:lowercase;font-size:10px;letter-spacing:.03em;padding:2px 7px;border-radius:7px;background:rgba(245,158,11,.18);transform:rotate(-4deg);flex:none}
  .hp-status{display:flex;align-items:center;gap:8px;margin-top:10px;background:rgba(255,255,255,.05);border-radius:10px;padding:7px 10px;color:var(--ink);font-size:13px;cursor:pointer}
  .hp-status-add{display:inline-block;margin-top:10px;background:none;border:1px dashed var(--line);color:var(--ink-dim);border-radius:10px;padding:7px 10px;font-size:12.5px;cursor:pointer;font-family:var(--font)}
  .hp-edit{margin-left:auto;color:var(--ink-dim);display:inline-flex;flex:none}
  .hp-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
  .hp-vibe{background:rgba(255,255,255,.08);border:none;color:var(--ink);border-radius:13px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:var(--font);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hp-icons{display:flex;gap:9px;flex:none}
  .hp-ic{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:none;display:flex;align-items:center;justify-content:center;color:#dbe7f5;cursor:pointer}
  .hp-ic svg{width:20px;height:20px}
  .hp-ic.red{color:#ff7a6c;background:rgba(255,80,60,.12)}
  /* slim host hero on the open-hang screen (host's own view = just the tilted chip) */
  .who-host{display:flex;align-items:center;gap:8px}

  /* ── in-app voice ─────────────────────────────────────────────────── */
  .btn-voice { background:rgba(59,130,246,.14); border:1px solid var(--accent); color:#bcd6ff; }
  .voicebar { position:absolute; left:8px; right:8px; bottom:calc(70px + env(safe-area-inset-bottom));
    z-index:60; display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:14px;
    background:#0c1426; border:1px solid #1e3a5f; box-shadow:0 8px 24px rgba(0,0,0,.45); }
  .vb-left { display:flex; align-items:center; gap:9px; flex:1; min-width:0; }
  .vb-dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); flex:none; }
  .vb-meta { min-width:0; }
  .vb-room { color:#eaf2fb; font-weight:700; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .vb-ppl { display:flex; gap:6px; margin-top:3px; align-items:center; flex-wrap:wrap; }
  .vb-who { display:flex; align-items:center; gap:2px; font-size:11px; color:#9fb6d4; }
  .vb-av { width:22px; height:22px; border-radius:50%; background:#22304a; display:flex; align-items:center;
    justify-content:center; font-size:10px; font-weight:700; color:#cfe; border:2px solid transparent; }
  .vb-who.speaking .vb-av { border-color:var(--green); }
  .vb-solo { font-size:11px; color:#6f86a6; }
  .vb-acts { display:flex; gap:8px; flex:none; }
  .vb-btn { width:38px; height:38px; border-radius:10px; border:none; background:#1c2433; color:#dbe7f5; font-size:16px; cursor:pointer; }
  .vb-btn.on { background:#3a2f12; color:#f0c14b; }
  .vb-btn.leave { background:#3a1f22; color:#ff8a7d; }

  /* ── free-right-now band (below the filter chips) ─────────────────── */
  .freenow { display:flex; flex-direction:column; gap:7px; margin:0 16px 6px; }
  .fn-card { display:flex; align-items:center; gap:11px; border:1px solid #1e5f37;
    background:rgba(34,197,94,.06); border-radius:13px; padding:9px 11px; cursor:pointer; }
  .fn-av { position:relative; width:40px; height:40px; flex:none; }
  .fn-av .av { width:40px; height:40px; border:2px solid var(--green,#22c55e); border-radius:50%; }
  .fn-vibe { position:absolute; bottom:-3px; right:-3px; font-size:13px; background:var(--bg); border-radius:50%; }
  .fn-mid { flex:1; min-width:0; }
  .fn-nm { color:var(--ink); font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fn-vibetxt { color:#9fd9b4; font-weight:600; }
  .fn-note { color:#bcd; font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .fn-note.dim { color:var(--ink-dim); }
  .fn-time { flex:none; color:#7c9; font-size:11px; font-weight:700; }

  /* tappable hang emoji (home card + details title) + voice icon variant */
  .hp-emoji { cursor:pointer; border-radius:8px; padding:0 2px; }
  .hp-emoji:active { background:rgba(255,255,255,.12); }
  .hp-ic.voice { color:#7be0a4; background:rgba(34,197,94,.12); }

  /* emoji picker grid */
  .emoji-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; max-height:260px; overflow-y:auto; }
  .em-cell { font-size:20px; line-height:1; padding:8px 0; border:1px solid transparent; border-radius:10px;
    background:var(--panel-2); cursor:pointer; }
  .em-cell.on { border-color:var(--accent); background:rgba(59,130,246,.18); }

  /* ── compose flow fixes: collision dialog + edit when-row + spot-picker chips ── */
  .clash { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; width:320px; max-width:92vw; }
  .clash h4 { margin:0 0 4px; font-size:15px; }
  .clash-sub { color:var(--ink-dim); font-size:12.5px; }
  .clash-hang { display:flex; flex-direction:column; gap:2px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:12px; padding:10px 12px; margin:10px 0 12px; font-weight:700; }
  .clash-hang small { font-weight:400; color:var(--ink-dim); }
  .clash-acts { display:flex; flex-direction:column; gap:8px; }
  .clash-acts .btn { width:100%; }
  /* destructive option separated from the primaries (standing placement rule) */
  .clash-replace { display:block; width:100%; margin-top:14px; background:none; border:1px solid rgba(239,68,68,.35);
    color:#f87171; border-radius:10px; padding:11px; font-size:13px; font-weight:700; }
  .whenrow { display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:11px; padding:10px 12px; }
  .when-chg { margin-left:auto; color:#7eb0ff; font-size:12.5px; font-weight:700; cursor:pointer; }
  .when-st { margin-left:auto; color:var(--ink-faint); font-size:12px; }
  .s-savedtag { font-size:10px; border:1px solid var(--line); border-radius:999px; padding:1px 7px; color:var(--ink-dim); margin-left:6px; }
  .spotchips { margin-top:8px; }

  /* ── details page: tight meta line + in-voice block + labeled icon row ── */
  .dp-note { margin:2px 0 0; font-size:13.5px; color:#c7ccd8; line-height:1.45; }  /* the host's "say it" text */
  .dp-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:var(--ink-dim); font-size:12.5px; margin:8px 0 0; }
  .dp-dot { width:7px; height:7px; border-radius:50%; background:var(--green,#22c55e); flex:none; }
  .dp-dot.up { background:#f59e0b; }
  .dp-sep { color:var(--ink-dim); opacity:.55; }
  .dp-when { color:var(--ink-dim); }
  .dp-when-edit { color:#7eb0ff; cursor:pointer; }
  .dp-voice { display:flex; align-items:center; gap:9px; margin-top:12px; background:rgba(34,197,94,.08);
    border:1px solid rgba(34,197,94,.28); border-radius:12px; padding:8px 11px; }
  .dp-voice:not(.in) { cursor:pointer; }
  .dpv-lab { font-size:12px; color:#9fd9b4; font-weight:700; }
  .dpv-join { margin-left:auto; font-size:11px; color:#7be0a4; }
  .dpv-avs { display:flex; gap:4px; }
  .dpv-av { width:26px; height:26px; border-radius:50%; background:#22304a; display:flex; align-items:center;
    justify-content:center; font-size:11px; font-weight:700; color:#cfe; border:2px solid transparent; }
  .dpv-av.spk { border-color:var(--green,#22c55e); }
  .dpv-solo { font-size:11px; color:#6f86a6; }
  .dp-acts { display:flex; gap:8px; margin-top:13px; }
  .dp-act { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08); border-radius:11px; padding:9px 0; cursor:pointer; color:#dbe7f5; font-family:var(--font); }
  .dp-act svg { width:20px; height:20px; }
  .dp-act .t { font-size:10px; color:var(--ink-dim); text-transform:lowercase; }
  .dp-act.red { color:#ff7a6c; } .dp-act.red .t { color:#ff7a6c; }
  .dp-act.voice { color:#7be0a4; } .dp-act.voice .t { color:#7be0a4; }

  /* =====================================================================
     SPEED-DIAL + QUICK-HANG SHEET (Phase 3 / Task 2)
     ===================================================================== */
  .cm-sheet{position:absolute;right:18px;bottom:calc(140px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
  .cm-act{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 14px;cursor:pointer;text-align:left;min-width:190px}
  .cm-act .cm-ic{font-size:20px}.cm-act b{display:block;color:var(--ink)}.cm-act small{color:var(--ink-dim);font-size:11px}
  /* TOP-anchored (approved): the iOS keyboard opens UNDER the sheet instead of
     shoving a bottom sheet up mid-screen while typing */
  .qh-sheet{position:absolute;left:8px;right:8px;top:12px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;
    max-height:calc(100% - 32px);overflow-y:auto}   /* floating card w/ top gap; growing downward must never push "post" off-screen */
  .qh-sheet .suggest{max-height:190px;overflow-y:auto}   /* long result lists scroll; the buttons stay reachable */
  .qh-tawrap{position:relative}
  .qh-tawrap .qh-line{padding-right:38px}
  .qh-dice{position:absolute;right:8px;top:8px;background:none;border:none;font-size:18px;cursor:pointer;opacity:.85;padding:0}
  .qh-place{margin-top:8px}
  .qh-vibedd{display:block;width:100%;margin-top:8px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-dim);
    border-radius:11px;padding:9px 11px;font-size:12.5px;text-align:left;font-family:var(--font);cursor:pointer}
  .qh-vibedd.set{border-color:var(--accent);color:var(--ink)}
  /* the when-menu (now / remaining day-parts / pick) */
  .qw-menu{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px;width:290px;max-width:88vw;
    box-shadow:0 18px 50px rgba(0,0,0,.6)}
  .qw-row{display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:11px;font-size:14px;cursor:pointer}
  .qw-row.on{background:var(--panel-2)}
  .qw-row small{color:var(--ink-faint);margin-left:auto}
  .qw-chk{margin-left:auto;color:var(--accent);font-weight:800}
  .qh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .qh-title{margin:0;color:var(--ink)}
  .qh-expand{background:var(--panel-2,#222a38);border:1px solid var(--line);color:var(--ink-dim);border-radius:9px;width:32px;height:32px;font-size:15px;cursor:pointer;flex:none}
  .qh-line{width:100%;margin-bottom:10px;box-sizing:border-box}
  .qh-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
  .qh-post{width:100%;padding:13px;margin-top:4px}

  /* =====================================================================
     NUDGE CARD (Phase 4)
     ===================================================================== */
  .nudge-card{position:relative;margin:8px 14px;padding:13px 14px;border-radius:15px;background:linear-gradient(135deg,#1b2233,#191c27);border:1px solid #36507f}
  .nudge-x{position:absolute;top:8px;right:10px;background:none;border:none;color:#7c879b;font-size:13px;cursor:pointer}
  .nudge-k{color:#8fb4ff;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
  .nudge-msg{color:#eaf0fb;font-size:14px;font-weight:700;margin:5px 0 10px}
  .nudge-acts{display:flex;gap:8px;align-items:center}
  .nudge-refresh{background:#222a38;border:1px solid #2b3340;color:#cdd5e2;border-radius:9px;padding:7px 11px;cursor:pointer}

  /* =====================================================================
     PROFILE PRIVACY — "who can see me" manager + per-profile tier toggle
     ===================================================================== */
  /* summary line at the top of the manager screen */
  .wcs-sum { padding:12px 16px 8px; font-size:13px; color:var(--ink-dim); }
  .wcs-sum b { color:var(--ink); font-weight:800; }
  /* one friend row in the manager list */
  .wcs-row { display:flex; align-items:center; gap:11px; padding:10px 16px;
    border-bottom:1px solid #15171d; }
  /* friend name in the manager */
  .wcs-nm { flex:1; font-weight:700; font-size:14px; color:var(--ink); }
  /* per-profile tier row (inside a friend's profile view) */
  .wcs-row-pf { border:1px solid var(--line); border-radius:12px; margin:0;
    background:var(--panel); padding:11px 14px; }
  .wcs-nm-pf { font-size:13px; font-weight:500; color:var(--ink-dim); }
  .wcs-nm-pf b { color:var(--ink); font-weight:700; }

  /* =====================================================================
     DATE / TIME PICKER  (src/datePicker.js -> window.openDatePicker)
     Ported from .superpowers/brainstorm/.../date-picker.html. Lives inside
     the standard .sheet-bg / .sheet bottom-sheet overlay; the time keypad is
     a POPOVER absolutely-positioned over .dp-sheet (adds zero sheet height).
     ===================================================================== */
  .dp-sheet { position:relative; }
  .dp-title { font-size:16px; font-weight:800; margin:0 0 12px; }
  /* quick chips — one line, no wrap, horizontally scrollable if tight */
  .dp-quick { display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto;
    margin-bottom:14px; scrollbar-width:none; }
  .dp-quick::-webkit-scrollbar { display:none; }
  .dp-qchip { flex:0 0 auto; font-size:11.5px; padding:6px 10px; border-radius:999px;
    background:var(--panel-2); border:1px solid var(--line); color:var(--ink-dim);
    white-space:nowrap; cursor:pointer; }
  .dp-qchip.on { background:var(--accent); color:var(--accent-ink); font-weight:700;
    border-color:var(--accent); }
  /* month header + nav */
  .dp-cal-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .dp-mlabel { font-weight:800; font-size:14px; }
  .dp-nav { color:var(--ink-dim); font-size:16px; padding:2px 10px; line-height:1;
    border:1px solid var(--line); border-radius:8px; background:var(--panel-2);
    cursor:pointer; font-family:var(--font); }
  .dp-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:5px; }
  .dp-dow span { text-align:center; font-size:10px; color:var(--ink-faint); font-weight:700; }
  .dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
  .dp-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    font-size:13px; border-radius:9px; color:var(--ink); cursor:pointer; }
  .dp-cell.mut { color:var(--ink-faint); opacity:.45; }
  .dp-cell.dis { color:var(--ink-faint); opacity:.3; cursor:default; }
  .dp-cell.today { box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent); font-weight:700; }
  .dp-cell.inrange { background:rgba(59,130,246,.18); border-radius:0; }
  .dp-cell.sel { background:var(--accent); color:var(--accent-ink); font-weight:800;
    border-radius:9px; box-shadow:none; }
  /* dates-multi chips */
  .dp-multi { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
  .dp-multi-empty { font-size:12px; color:var(--ink-faint); }
  .dp-multi-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px;
    font-weight:700; padding:5px 6px 5px 10px; border-radius:999px;
    background:var(--panel-2); border:1px solid var(--line); color:var(--ink); }
  .dp-multi-chip button { background:none; border:none; color:var(--ink-faint);
    font-size:12px; cursor:pointer; line-height:1; padding:0 2px; }
  /* time row (datetime) */
  .dp-sec-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--ink-faint); font-weight:700; margin:15px 0 8px; }
  .dp-tfields { display:flex; gap:8px; }
  .dp-tfield { flex:1; padding:9px 10px; border-radius:12px; border:1px solid var(--line);
    background:var(--panel-2); display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; }
  .dp-tfield.active { border-color:var(--accent); background:rgba(59,130,246,.12); }
  .dp-lab { font-size:9.5px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--ink-faint); font-weight:700; }
  .dp-val { font-size:15px; font-weight:800; }
  .dp-tfield.empty .dp-val { color:var(--ink-faint); font-weight:600; }
  .dp-car { color:var(--ink-faint); font-size:11px; margin-left:6px; }
  /* actions */
  .dp-acts { display:flex; gap:8px; margin-top:16px; }
  .dp-acts .btn { flex:1; text-align:center; border-radius:11px; padding:11px;
    font-size:13px; font-weight:700; border:1px solid var(--line); cursor:pointer;
    font-family:var(--font); }
  .dp-ghost { background:var(--panel-2); color:var(--ink-dim); }
  .dp-primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .dp-primary.dis { opacity:.5; }
  /* the time keypad POPOVER (floats over .dp-sheet) */
  .dp-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45);
    border-radius:18px 18px 0 0; z-index:1; }
  .dp-pop { position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
    background:var(--panel-2); border:1px solid var(--accent); border-radius:16px;
    padding:13px; box-shadow:0 18px 40px rgba(0,0,0,.6); }
  .dp-pop-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .dp-pop-ttl { font-size:12px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--accent); font-weight:800; }
  .dp-pop-x { font-size:13px; color:var(--ink-faint); font-weight:700; cursor:pointer; padding:2px 6px; }
  .dp-hourgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
  .dp-hbtn { padding:9px 0; border-radius:9px; background:var(--panel); border:1px solid var(--line);
    text-align:center; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; }
  .dp-hbtn.on { background:var(--accent); color:var(--accent-ink); font-weight:800; border-color:var(--accent); }
  .dp-hbtn.dis { opacity:.3; cursor:default; }
  .dp-seg2 { display:flex; gap:6px; margin-top:8px; }
  .dp-s { flex:1; text-align:center; padding:8px; border-radius:9px; background:var(--panel);
    border:1px solid var(--line); font-size:12.5px; font-weight:700; color:var(--ink-dim); cursor:pointer; }
  .dp-s.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .dp-s.dis { opacity:.3; cursor:default; }
  .dp-pop-done { flex:1.5; text-align:center; padding:8px; border-radius:9px;
    background:var(--green); color:#06210f; font-weight:800; font-size:12.5px;
    border:1px solid var(--green); cursor:pointer; }