:root{
    /* NEOES brand colors, sampled from official logo */
    --neoes-1:#1A3A60;   /* deep navy from "EYE SURGEONS" wordmark */
    --neoes-2:#2C5685;   /* mid blue */
    --neoes-3:#5683B5;   /* lighter accent */
    --neoes-4:#DCE6F2;   /* pale background blue */
    --mvp-1:#6B7280;     /* MVP italic gray */
    --bg:#F4F6FA; --card:#FFFFFF; --ink:#0E2236; --ink-2:#42566A;
    --line:#E2EAF1; --danger:#B23A48; --good:#1F8A4C; --warn:#C68B17;
    --r:14px;
    --shadow:0 1px 2px rgba(14,34,54,.06), 0 6px 18px rgba(14,34,54,.08);
    --shadow-sm:0 1px 3px rgba(14,34,54,.10);
    --safe-top:env(safe-area-inset-top);
    --safe-bot:env(safe-area-inset-bottom);
  }
  
    html.dark{
      --bg:#0A1A2A; --card:#142A40; --ink:#EAF2F8; --ink-2:#9CB3C4;
      --line:#1E3A55; --neoes-4:#1C3A58;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.45);
      --shadow-sm:0 1px 3px rgba(0,0,0,.4);
    }
  
  /* Phone-frame preview on wider screens */
  .app{position:relative;min-height:100vh;width:100%;background:var(--bg);overflow-x:hidden}
  /* No transform on mobile — let position:fixed sheets stay glued to the viewport.
     Transform-containment is only applied inside the desktop phone-frame below. */
  @media (min-width: 700px){
    body{background:linear-gradient(135deg,#0E1F33 0%,#1A3A60 50%,#2C5685 100%);
      min-height:100vh;margin:0;display:flex;align-items:flex-start;justify-content:center;padding:28px 16px}
    .app{
      width:412px;height:880px;min-height:0;
      border-radius:44px;
      border:11px solid #0A1219;
      box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1.5px #2A3B50, inset 0 0 0 1.5px #1A2A3C;
      overflow-y:auto;overflow-x:hidden;
      isolation:isolate;
      scrollbar-width:none;
      /* Desktop only: contain position:fixed children inside the phone-frame */
      transform:translateZ(0);
    }
    .app::-webkit-scrollbar{display:none}
    .app::before{ /* phone notch (desktop preview only) */
      content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
      width:110px;height:24px;background:#0A1219;border-radius:0 0 16px 16px;z-index:100;
    }
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
    font:15px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
    overscroll-behavior:none;overscroll-behavior-y:none;}
  html{overscroll-behavior:none}
  /* When the detail sheet is visible, lock the body underneath so it can't pull-to-refresh */
  body.detail-locked{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;width:100%}
  /* Arena is fully immersive — lock the page behind it so you can't scroll to the directory mid-game. */
  body.arena-locked{position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;width:100%}
  /* Hide the directory behind the overlay (kills the desktop phone-frame sliver; harmless on mobile). */
  body.arena-locked #list, body.arena-locked #comingUp, body.arena-locked #connectCard,
  body.arena-locked #icebreaker, body.arena-locked #arenaTeaser{visibility:hidden}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  input,textarea,select{font:inherit;color:inherit}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:10;
    padding:calc(var(--safe-top) + 8px) 12px 8px;
    background:linear-gradient(180deg,var(--neoes-1) 0%, var(--neoes-2) 100%);
    color:#fff;box-shadow:0 2px 14px rgba(14,59,94,.18);
  }
  .brand{display:flex;align-items:center;gap:12px;justify-content:flex-start;padding-right:90px}
  .logo-link{display:inline-block;line-height:0;flex-shrink:0;cursor:pointer;
    transition:transform .12s ease, filter .15s ease}
  .logo-link:hover{transform:scale(1.03);filter:brightness(1.05)}
  .logo-link:active{transform:scale(.97)}
  .logo-mark{
    height:46px;width:auto;flex-shrink:0;display:block;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.4));
  }
  .brand h1{
    margin:0;color:#fff;
    font-family:'Trajan Pro Bold','Trajan Pro','TrajanPro-Bold','Trajan','Cinzel','Optima','Palatino',Georgia,serif;
    font-size:24px;font-weight:700;letter-spacing:3.5px;
    text-transform:uppercase;line-height:1;
    text-shadow:0 3px 6px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
  }
  .brand h1 .accent{font-style:italic;font-weight:500;letter-spacing:1.2px;
    font-family:'EB Garamond','Garamond',Georgia,serif;font-size:21px;
    color:#CDEBFF;text-transform:none;margin-left:2px}
  .top-actions{position:absolute;top:calc(var(--safe-top) + 12px);right:8px;display:flex;gap:4px}
  /* Narrow phones (~360px): step the wordmark down a notch so it clears the gear icon */
  @media (max-width:370px){
    .brand h1{font-size:21px;letter-spacing:2.6px}
    .brand h1 .accent{font-size:18px}
  }
  .icon-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.10)}
  .icon-btn:active{background:rgba(255,255,255,.22)}
  .icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  .search-wrap{margin-top:10px;position:relative}
  .search-wrap input{
    width:100%;padding:11px 14px 11px 38px;border-radius:11px;border:0;
    background:#fff;color:#0B2235;font-size:15px;outline:none;
    -webkit-text-fill-color:#0B2235;
  }
  .search-wrap input::placeholder{color:#6B7C8D;opacity:1}
  .search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
    width:18px;height:18px;color:var(--ink-2);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .clear-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);
    background:#e3eaf0;color:var(--ink-2);width:24px;height:24px;border-radius:50%;display:none}
  .clear-btn.show{display:grid;place-items:center}

  /* Filter bar — single line always; overflow visible so dropdowns can escape. */
  .filter-bar{display:flex;gap:6px;padding:8px 0 4px;align-items:center;position:relative;flex-wrap:nowrap;overflow:visible}
  /* Compact frosted pill, no chevron, small icon badge */
  .fp{
    position:relative;
    display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;
    border-radius:999px;flex-shrink:0;
    background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    color:#fff;font-size:11.5px;font-weight:600;
    letter-spacing:.1px;line-height:1;
    border:1px solid rgba(255,255,255,.26);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
    box-shadow:0 1px 3px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.15);
  }
  .fp:active{transform:scale(.96)}
  .fp .fp-ico{
    width:18px;height:18px;flex-shrink:0;display:grid;place-items:center;
    border-radius:50%;background:rgba(255,255,255,.20);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  }
  .fp .fp-ico svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  /* No special active styling — pill label changes to show selection; tap pill again to change. */
  .fp.active{
    background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.07));
    color:#fff;border-color:rgba(255,255,255,.26);
    box-shadow:0 1px 3px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.15);
  }
  .fp.active .fp-ico{background:rgba(255,255,255,.20);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
  /* Labels truncate with ellipsis so the three pills always stay on one line */
  .fp{min-width:0}
  .fp .fp-val{min-width:0;max-width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Hide the legacy × clear button entirely — tap pill to change instead */
  .fp .fp-clear{display:none !important}
  /* Dropdown panel */
  .fp-drop{
    position:absolute;top:calc(100% + 4px);left:0;z-index:25;
    background:var(--card);color:var(--ink);border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px var(--line);
    min-width:240px;max-width:300px;max-height:60vh;overflow-y:auto;
    display:none;
  }
  .fp-drop.open{display:block;animation:dropIn .15s ease}
  @keyframes dropIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
  .fp-drop .item{
    display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:14px;
    border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink);
  }
  .fp-drop .item:last-child{border-bottom:0}
  .fp-drop .item:active{background:var(--neoes-4)}
  html.dark .fp-drop .item:active{background:#1B3A55}
  .fp-drop .item .nm{flex:1}
  .fp-drop .item .ct{font-size:12px;color:var(--ink-2);font-weight:600;
    background:var(--bg);padding:2px 8px;border-radius:99px}
  html.dark .fp-drop .item .ct{background:#0A1F2E}
  .fp-drop .item .tk{width:16px;height:16px;color:var(--neoes-2);display:grid;place-items:center}
  .fp-drop .item .tk svg{display:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
  .fp-drop .item.selected{background:var(--neoes-4);color:var(--neoes-1);font-weight:700}
  html.dark .fp-drop .item.selected{background:rgba(42,143,190,.25);color:#CDEBFF}
  .fp-drop .item.selected .tk svg{display:block}
/* Location and Sort dropdowns are right-side pills — anchor their right edge */
  #fpLocDrop, #fpSortDrop{left:auto;right:0}
  /* Sort dropdown narrower since labels are short */
  #fpSortDrop{min-width:220px}
  .fp-drop .item .ic{font-size:18px;line-height:1;width:22px;text-align:center;flex-shrink:0}

  /* === Compatibility pair grid: two tiles per row with arrow between === */
  .grid.compat-grid{
    display:grid;grid-template-columns:1fr 76px 1fr;
    gap:1px 0;background:var(--line);margin:0 -6px;padding:1px 0;
    align-items:stretch;
  }
  html.dark .grid.compat-grid{background:#0A1A2A}
  .grid.compat-grid .tile{aspect-ratio:3/4}
  /* Connector cell between two paired tiles */
  .pair-link{
    background:var(--card);position:relative;display:grid;place-items:center;
    overflow:visible;
  }
  html.dark .pair-link{background:#0E2236}
  .pair-link::before{
    content:"";position:absolute;left:4px;right:4px;top:50%;height:4px;
    transform:translateY(-50%);
    background:linear-gradient(90deg, #C99A1A 0%, #F2D274 50%, #C99A1A 100%);
    border-radius:3px;box-shadow:0 0 10px rgba(212,175,55,.6);
  }
  .pair-link .arrow{
    position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px;
    background:var(--card);padding:5px 6px;border-radius:99px;
  }
  html.dark .pair-link .arrow{background:#0E2236}
  .pair-link .arrow svg{width:54px;height:22px;color:#B8942E;display:block;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
  .pair-link .score{
    font-size:16px;font-weight:900;color:#8A6510;letter-spacing:.3px;line-height:1;
    background:#FFF6DA;padding:4px 9px;border-radius:99px;
    box-shadow:0 2px 4px rgba(0,0,0,.18), inset 0 0 0 1.2px rgba(184,148,46,.35);
  }
  html.dark .pair-link .score{background:#3B2E10;color:#F2D274}
  /* Solo / triangle tile in compat mode */
  .pair-link.triangle::before{
    background:linear-gradient(90deg, rgba(212,175,55,.55) 0%, rgba(242,210,116,.55) 100%);
    height:2px;border-style:dashed;
  }
  .pair-link.triangle .arrow svg{color:#9A7E2C;opacity:.85}
  .pair-link.triangle .score{font-size:10px;background:transparent;color:#9A7E2C;box-shadow:none;font-weight:700}
  html.dark .pair-link.triangle .score{color:#E5C25E}

  /* === Sort info badge on TOP of each tile (Birthday/Years/Kids/Pets sort) === */
  .tile .sort-badge{
    position:absolute;top:0;left:0;right:0;z-index:5;
    padding:4px 6px;
    background:linear-gradient(to bottom, rgba(8,22,38,.78) 0%, rgba(8,22,38,.55) 70%, rgba(8,22,38,0) 100%);
    color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;
    text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.55);
    pointer-events:none;line-height:1.1;
  }
  .tile .sort-badge .sb-big{font-size:13px;font-weight:800;display:inline-block;margin-right:3px;letter-spacing:.2px}
  .tile .sort-badge .sb-lbl{font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;opacity:.92}

  /* === Birthday cake centered on the border between two same-bday tiles ===
     Tiles are wrapped in .tile-wrap which has overflow:visible so a single
     cake emblem can be centered ON the grid gap between two tiles. The .grid
     container clips the emblems at its outer edges, so cross-row pairs render
     as two half-cakes (one hanging off end of row 1, one at start of row 2). */
  .tile-wrap{position:relative;display:block;width:100%;height:100%}
  .tile-wrap > .tile{width:100%;height:100%}
  .cake-emblem{
    position:absolute;top:50%;z-index:8;
    width:36px;height:36px;
    display:grid;place-items:center;
    font-size:24px;line-height:1;
    background:#fff;border-radius:50%;
    box-shadow:0 2px 10px rgba(255,140,170,.55), 0 0 0 1.5px #FF7AB6 inset;
    pointer-events:none;
  }
  .cake-emblem.cake-right{right:0;transform:translate(50%, -50%)}
  .cake-emblem.cake-left{left:0;transform:translate(-50%, -50%)}
  html.dark .cake-emblem{background:#FFE6F0}

  /* === Birthday TODAY decoration — translucent outline + radial overlay + "Today" banner === */
  .tile.bday-today{
    z-index:3;
    box-shadow:
      inset 0 0 0 3px #FFD24A,
      inset 0 0 0 6px rgba(255,255,255,.35),
      0 0 14px rgba(255,210,74,.5);
    animation:bdayPulse 2.4s ease-in-out infinite;
  }
  /* Radial color wash: 0 opacity at center → 80% at the outer rim */
  .tile.bday-today::before{
    content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
    background:radial-gradient(
      ellipse 95% 85% at 50% 28%,
      rgba(255,220,120,0)   0%,
      rgba(255,200,140,.25) 45%,
      rgba(255,150,180,.55) 80%,
      rgba(255,110,160,.80) 100%
    );
  }
  @keyframes bdayPulse{
    0%,100%{box-shadow:inset 0 0 0 3px #FFD24A, inset 0 0 0 6px rgba(255,255,255,.35), 0 0 14px rgba(255,210,74,.55)}
    50%    {box-shadow:inset 0 0 0 3px #FF7AB6, inset 0 0 0 6px rgba(255,255,255,.45), 0 0 22px rgba(255,140,180,.7)}
  }
  .tile .bday-today-badge{
    position:absolute;top:6px;right:6px;z-index:8;
    font-size:22px;line-height:1;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
    animation:bdayBob 1.8s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes bdayBob{
    0%,100%{transform:translateY(0) rotate(-10deg)}
    50%    {transform:translateY(-4px) rotate(10deg)}
  }
  /* Top banner — "BIRTHDAY" everywhere except inside the Birthday-sorted list,
     where it reads "TODAY" since the list's own context already implies bday. */
  .tile.bday-today::after{
    content:"BIRTHDAY";position:absolute;left:0;right:0;top:0;z-index:6;
    padding:3px 0 5px;text-align:center;
    background:linear-gradient(to bottom, rgba(255,210,74,.32) 0%, rgba(255,140,180,.16) 70%, rgba(255,140,180,0) 100%);
    color:#fff;font-weight:800;font-size:10px;letter-spacing:1.4px;
    text-shadow:0 1px 2px rgba(0,0,0,.75), 0 0 6px rgba(0,0,0,.4);
    pointer-events:none;
  }
  .tile.bday-today.in-bday-list::after{content:"TODAY"}
  /* Multi-select: don't close the dropdown after each tap */
  .fp-drop .item.multi .tk svg{display:none}
  .fp-drop .item.multi.selected .tk svg{display:block}

  /* Picker sheet */

  /* ---------- Events banner ---------- */
  .events{background:linear-gradient(135deg, var(--neoes-4), #fff);
    border:1px solid var(--neoes-3);border-radius:12px;padding:10px 12px;display:flex;gap:10px;align-items:flex-start}
  html.dark .events{background:linear-gradient(135deg, rgba(42,143,190,.18), rgba(42,143,190,.05));border-color:rgba(42,143,190,.4)}
  .events .ico{font-size:18px}
  .events .h{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--neoes-1);font-weight:700;margin-bottom:2px}
  html.dark .events .h{color:#CDEBFF}
  .events ul{margin:0;padding:0;list-style:none;font-size:13px;color:var(--ink)}
  .events li{padding:1px 0;cursor:pointer}
  .events li b{color:var(--neoes-2)}

  /* ---------- View bar (group + layout) ---------- */
  .p{padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;color:var(--ink-2);min-width:34px;display:grid;place-items:center}
  .p.active{background:var(--neoes-1);color:#fff}
  .p svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* ---------- Coming-up strip (v136) — birthdays + anniversaries, next 7 days ---------- */
  #comingUp{padding:8px 8px 0}
  #comingUp:empty{display:none;padding:0}
  .up-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 1px}
  .up-strip::-webkit-scrollbar{display:none}
  .up-chip{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
    padding:7px 12px;border-radius:99px;cursor:pointer;user-select:none;
    background:linear-gradient(135deg,#FFF6DA,#FFEDBE);
    border:1px solid rgba(184,148,46,.45);
    box-shadow:0 1px 3px rgba(0,0,0,.10);
    font-size:12.5px;color:#5C430F;font-weight:600;white-space:nowrap;
    transition:transform .12s ease;
  }
  .up-chip .em{font-size:15px;line-height:1}
  .up-chip b{color:#3A2D08;font-weight:800}
  .up-chip .wh{opacity:.85}
  .up-chip:active{transform:scale(.95)}
  
    html.dark .up-chip{background:linear-gradient(135deg,#3B2E10,#2B220B);border-color:rgba(242,210,116,.35);color:#E8CD82}
    html.dark .up-chip b{color:#F2D274}
  

  /* ---------- Today's connection (v140) — cross-office pair with a shared spark ---------- */
  #connectCard{padding:8px 8px 0}
  #connectCard:empty{display:none;padding:0}
  /* Today's connection — three top-aligned columns: face+stacked-name | title+spark | face.
     Faces top-justify with the title (which fills the roomy centre lane); each name
     stacks first-over-last under its centred face; the spark+text is the divider. */
  .cc-card{background:var(--card);border-radius:13px;box-shadow:var(--shadow-sm);padding:5px 14px 7px}
  .cc-body{display:flex;align-items:flex-start;gap:8px}
  .cc-p{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;max-width:96px}
  .cc-p .photo{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
    color:#fff;font-weight:700;font-size:17px;overflow:hidden;position:relative;
    background:linear-gradient(135deg,var(--g1,#2A8FBE),var(--g2,#175D8E));
    box-shadow:0 0 0 2px var(--neoes-3),0 2px 6px rgba(0,0,0,.2)}
  .cc-p .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
  .cc-p:active{transform:scale(.95)}
  .cc-nm{display:flex;flex-direction:column;align-items:center;line-height:1.04;max-width:100%}
  .cc-fn,.cc-ln{max-width:100%;font-size:13px;font-weight:700;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cc-mid{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}
  .cc-title{text-align:center;font-size:14px;font-weight:800;letter-spacing:.5px;
    text-transform:uppercase;color:var(--neoes-1);line-height:1.1}
  html.dark .cc-title{color:#8FC3EA}
  .cc-conn{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
  .cc-badge{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:25px;line-height:1;
    background:var(--neoes-4);box-shadow:inset 0 0 0 1px var(--line)}
  html.dark .cc-badge{background:rgba(42,143,190,.18)}
  .cc-text{font-size:14px;font-weight:600;color:var(--ink);line-height:1.2;text-align:center}

  /* ---------- Icebreaker of the week (v141) ---------- */
  #icebreaker{padding:8px 8px 0}
  #icebreaker:empty{display:none;padding:0}
  .ib-bar{
    width:100%;display:flex;align-items:center;gap:8px;
    padding:9px 12px;border-radius:12px;border:0;cursor:pointer;
    background:var(--card);box-shadow:var(--shadow-sm);
    font-size:12.5px;color:var(--ink);text-align:left;
  }
  .ib-bar:active{transform:scale(.985)}
  .ib-bar .ib-em{font-size:15px;line-height:1;flex-shrink:0}
  .ib-bar .ib-q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ib-bar .ib-q b{color:var(--neoes-1)}
  html.dark .ib-bar .ib-q b{color:#9DD3EE}
  .ib-bar .ib-ct{flex-shrink:0;font-size:11px;font-weight:700;color:var(--neoes-2);letter-spacing:.2px}
  .ib-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
  .ib-col{background:var(--bg);border-radius:12px;padding:10px}
  html.dark .ib-col{background:#0A1F2E}
  .ib-opt{
    font-size:13.5px;font-weight:800;color:var(--neoes-1);margin-bottom:8px;
    display:flex;align-items:center;gap:6px;
  }
  html.dark .ib-opt{color:#9DD3EE}
  .ib-opt .ib-n{font-size:11px;font-weight:700;color:var(--ink-2);background:var(--card);padding:1px 7px;border-radius:99px}
  .ib-chips{display:flex;flex-direction:column;gap:5px}
  .ib-chip{
    display:flex;align-items:center;gap:7px;cursor:pointer;
    padding:3px 6px 3px 3px;border-radius:99px;background:var(--card);
  }
  .ib-chip:active{transform:scale(.97);background:var(--neoes-4)}
  .ib-chip .photo{
    width:28px;height:28px;border-radius:50%;flex-shrink:0;overflow:hidden;position:relative;
    display:grid;place-items:center;color:#fff;font-weight:700;font-size:10px;
    background:linear-gradient(135deg,var(--g1,#2A8FBE),var(--g2,#175D8E));
  }
  .ib-chip .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
  .ib-chip-nm{font-size:12px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ib-none{font-size:12px;color:var(--ink-2);font-style:italic;padding:4px}

  /* ---------- Main / List / Grid ---------- */
  main{padding:0 6px calc(80px + var(--safe-bot))}
  .section-label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-2);
    padding:14px 4px 6px;font-weight:700}

  /* GRID — 4 per row, photos touching with 1px hairline separators.
     overflow:hidden so cross-row birthday cakes get clipped at the grid edge
     (giving the "half-cake hangs off the row break" visual). */
  .grid{
    display:grid;grid-template-columns:repeat(4, 1fr);
    gap:1px;background:var(--line);
    margin:0 -6px;padding:1px 0;
    overflow:hidden;
  }
  html.dark .grid{background:#0A1A2A}
  .tile{
    position:relative;background:var(--card);border-radius:0;overflow:hidden;
    padding:0;aspect-ratio:3/4;
    transition:transform .12s ease, filter .12s ease;
    cursor:pointer;isolation:isolate;
  }
  .tile:active{transform:scale(.98);z-index:3}
  .tile .photo{
    width:100%;height:100%;border-radius:0;
    display:grid;place-items:center;color:#fff;font-weight:700;font-size:30px;
    background:linear-gradient(135deg,var(--g1,#2A8FBE),var(--g2,#175D8E));
    position:relative;overflow:hidden;
  }
  .tile .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block;background:transparent}
  .tile::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 70% at 50% 0%, transparent 60%, rgba(0,0,0,.10) 100%);
  }
  /* Slim bottom caption */
  .tile-cap{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:14px 4px 4px;color:#fff;pointer-events:none;
    background:linear-gradient(to top, rgba(8,22,38,.93) 0%, rgba(8,22,38,.72) 55%, rgba(8,22,38,0) 100%);
    text-align:left;
  }
  .tile-cap .nm{
    font-weight:700;font-size:11px;line-height:1.15;margin:0;color:#fff;
    letter-spacing:.05px;text-shadow:0 1px 2px rgba(0,0,0,.6);
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .tile-cap .rl{
    /* 8px + minimal tracking so OPHTHALMOLOGIST fits a 4-col tile down to 360px wide */
    font-size:8px;font-weight:600;color:rgba(255,255,255,.85);
    margin-top:1px;text-shadow:0 1px 2px rgba(0,0,0,.55);letter-spacing:.1px;
    overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-transform:uppercase;
  }
  /* v138: completion nudge — shown only in edit mode, dismissible */
  .nudge{
    display:flex;align-items:center;gap:8px;margin:0 6px 12px;padding:9px 12px;
    border-radius:10px;background:rgba(86,131,181,.12);border:1px dashed var(--neoes-3);
    font-size:12.5px;color:var(--ink);line-height:1.35;
  }
  .nudge b{color:var(--neoes-1)}
  .nudge .nudge-x{
    flex-shrink:0;width:22px;height:22px;border-radius:50%;margin-left:auto;
    background:rgba(0,0,0,.08);color:var(--ink-2);border:0;cursor:pointer;
    display:grid;place-items:center;font-size:14px;line-height:1;
  }
  .nudge .nudge-x:active{transform:scale(.9)}
  
    html.dark .nudge{background:rgba(42,143,190,.14);border-color:#3A5C7A}
    html.dark .nudge b{color:#9DD3EE}
    html.dark .nudge .nudge-x{background:rgba(255,255,255,.08)}
  

  /* New-hire spotlight (v137): gold NEW ribbon on tiles + welcome pill on the hero */
  .tile .new-ribbon{
    position:absolute;top:6px;left:6px;z-index:6;
    padding:2.5px 8px;border-radius:99px;
    background:linear-gradient(135deg,#F2D274,#C99A1A);color:#3A2D08;
    font-size:8.5px;font-weight:900;letter-spacing:1.1px;
    box-shadow:0 1px 4px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
    pointer-events:none;
  }
  .hero-name .new-pill{
    display:inline-block;font-size:11px;font-weight:800;letter-spacing:.3px;
    background:linear-gradient(135deg,#F2D274,#DDB43C);color:#3A2D08;
    padding:3px 10px;border-radius:99px;margin-top:6px;
    box-shadow:0 1px 4px rgba(0,0,0,.3);
  }
  /* retired: just a subtle text indicator in detail view, no special tile treatment */

  /* LIST layout */
  .sim-tile .photo{position:relative}
  .sim-tile .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}

  .empty{text-align:center;padding:60px 20px;color:var(--ink-2)}
  .empty svg{width:54px;height:54px;opacity:.4;margin-bottom:10px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

  /* === INLINE EDIT MODE — editable text fields right on the detail page === */
  body.in-edit-mode .inline-edit{
    background:rgba(86,131,181,0.10);
    border-bottom:1.5px dotted var(--neoes-3);
    border-radius:4px;
    padding:2px 5px;
    outline:none;
    transition:background .12s;
  }
  body.in-edit-mode .inline-edit:focus{
    background:rgba(86,131,181,0.22);
    border-bottom-color:var(--neoes-1);
  }
  body.in-edit-mode .inline-edit::placeholder{color:var(--ink-2);opacity:.6;font-style:italic}
  .inline-edit{
    font:inherit;color:inherit;
    background:transparent;border:0;
    width:100%;min-width:0;padding:0;margin:0;
    /* iOS Safari auto-zooms inputs with font-size < 16px, which causes the
       "page jumps up and down" on tap. 16px keeps the viewport stable. */
    font-size:16px;
  }
  .inline-edit-textarea{min-height:64px;resize:none;overflow:hidden;font-family:inherit;width:100%;line-height:1.45;font-size:16px}
  /* Also keep the favs/tags input + edu inputs at 16px to prevent zoom-on-focus. */
  .ff-tag-input, .edu-search-input{font-size:16px !important}
  /* When editing, prevent native scroll-into-view jumps by giving the html element a stable layout. */
  body.in-edit-mode{scroll-behavior:auto}
  /* Inline multi-picker (locations, roles) — checkbox-style toggle pills */
  .multi-picker{display:flex;flex-wrap:wrap;gap:5px;padding:8px 12px 12px}
  /* Doctor MD/OD inline tags */

  /* Edit toggle pill at top of detail info pane */

  /* ---------- FAB ---------- */

  /* ---------- Sheet / Modal ---------- */
  .scrim{position:fixed;inset:0;background:rgba(11,34,53,.55);z-index:30;
    opacity:0;pointer-events:none;transition:opacity .18s ease;backdrop-filter:blur(2px)}
  .scrim.show{opacity:1;pointer-events:auto}
  .sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;
    background:var(--card);border-radius:18px 18px 0 0;
    transform:translateY(100%);
    transition:transform .25s cubic-bezier(.2,.8,.25,1), visibility 0s linear .25s;
    max-height:92vh;display:flex;flex-direction:column;padding-bottom:var(--safe-bot);
    /* Hard hide when not .show so a scroll-time paint glitch can't reveal it.
       The slide-up sheets on desktop sit inside the transformed .app frame; if any
       browser hiccup paints them above their translated position, visibility kills it. */
    visibility:hidden;pointer-events:none;
  }
  .sheet.show{
    transform:translateY(0);
    visibility:visible;pointer-events:auto;
    transition:transform .25s cubic-bezier(.2,.8,.25,1), visibility 0s linear 0s;
  }
  .grip{width:42px;height:4px;border-radius:2px;background:#cfd8e0;margin:8px auto 4px}
  html.dark .grip{background:#3a546b}
  .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:6px 12px 8px;border-bottom:1px solid var(--line)}
  .sheet-head h2{margin:0;font-size:16px;font-weight:700}
  .sheet-body{overflow-y:auto;padding:14px 16px 24px;-webkit-overflow-scrolling:touch}
  .btn{flex:1;padding:12px;border-radius:11px;font-weight:600;font-size:14.5px;
    background:var(--neoes-1);color:#fff;display:inline-flex;justify-content:center;align-items:center;gap:6px}
  .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
  .btn.danger{background:var(--danger);color:#fff}
  .btn.small{padding:8px 12px;font-size:13px;flex:0 0 auto}

  /* Detail — fullscreen. Anchor top:0 AND bottom:0 so the sheet
     auto-fits the current visible viewport (immune to Chrome Android
     URL-bar collapse and iOS Safari's 100vh quirk). */
  #detailSheet.sheet{
    max-height:none;
    top:0;bottom:0;height:auto;
    border-radius:0;padding-bottom:0;background:var(--card);
    display:block;
  }
  /* Hero & body — height is dynamic via --hero-h so the photo can be swiped up/down. */
  #detailSheet{ --hero-h:56%; }
  #detailHero{
    position:absolute;top:0;left:0;right:0;
    height:var(--hero-h);
    z-index:2;
    transition:height .22s cubic-bezier(.22,.7,.34,1);
    touch-action:none;
    will-change:height;
  }
  #detailSheet .sheet-body{
    position:absolute;top:var(--hero-h);left:0;right:0;bottom:0;
    padding:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    transition:top .22s cubic-bezier(.22,.7,.34,1);
  }
  #detailHero.dragging, #detailHero.dragging + .sheet-body{transition:none !important}
  #detailHero .hero-back, #detailHero .hero-actions,
  #detailHero .hero-back *, #detailHero .hero-actions *{touch-action:auto}
  #detailHero .hero-name{transition:opacity .2s ease}
  #detailHero .hero-icons-row,
  #detailHero .hero-name .sub,
  #detailHero .hero-name .ret{transition:opacity .2s ease}
  /* When the hero collapses, drop the kids/pets icon strip and the role subline,
     keep only the person's name as the last thing above the photo's bottom edge. */
  #detailHero.hero-collapsed .hero-icons-row,
  #detailHero.hero-collapsed .hero-name .sub,
  #detailHero.hero-collapsed .hero-name .ret{opacity:0;pointer-events:none}
  #detailHero::after{
    content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
    width:46px;height:4px;border-radius:2px;
    background:rgba(255,255,255,.55);
    box-shadow:0 1px 2px rgba(0,0,0,.35);
    pointer-events:none;z-index:5;
  }
  .hero{
    position:relative;width:100%;height:100%;
    background:linear-gradient(135deg,var(--g1,#2A8FBE),var(--g2,#175D8E));
    display:grid;place-items:center;color:#fff;font-weight:700;font-size:84px;
    overflow:hidden;
  }
  /* Outside the detail hero (e.g., a fallback) revert to aspect-ratio so it still has a size */
  :not(#detailHero) > .hero{aspect-ratio:1/1;height:auto}
  .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 33%;display:block}
  /* Back arrow — top-left of hero */
  .hero-back{
    position:absolute;top:14px;left:12px;z-index:4;
    width:38px;height:38px;border-radius:50%;
    background:rgba(0,0,0,.40);color:#fff;display:grid;place-items:center;
    backdrop-filter:blur(8px);border:0;cursor:pointer;
  }
  .hero-back:active{background:rgba(0,0,0,.6)}
  .hero-back svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  /* Name at BOTTOM of photo with dark fade */
  .hero-name{
    position:absolute;left:0;right:0;bottom:0;z-index:3;
    padding:96px 16px 14px;color:#fff;pointer-events:none;
    background:linear-gradient(to top, rgba(8,22,38,.95) 0%, rgba(8,22,38,.78) 55%, rgba(8,22,38,0) 100%);
  }
  .hero-name h2{
    margin:0;font-size:24px;font-weight:700;letter-spacing:.15px;line-height:1.15;
    text-shadow:0 1px 3px rgba(0,0,0,.55);
  }
  .hero-name .sub{font-size:16px;font-weight:600;color:rgba(255,255,255,.96);
    margin-top:4px;text-shadow:0 1px 3px rgba(0,0,0,.55);letter-spacing:.2px}
  .hero-name .ret{display:inline-block;font-size:9.5px;background:rgba(255,200,120,.92);
    color:#3A2410;padding:2px 7px;border-radius:5px;font-weight:700;
    margin-top:6px;letter-spacing:.4px;vertical-align:1px}
  .hero-actions{
    position:absolute;top:14px;right:12px;z-index:4;display:flex;gap:6px;pointer-events:auto;
  }
  .hero-actions button,.hero-actions a{
    width:36px;height:36px;border-radius:50%;
    background:rgba(0,0,0,.40);color:#fff;display:grid;place-items:center;
    backdrop-filter:blur(8px);text-decoration:none;cursor:pointer;
  }
  .hero-actions button:active,.hero-actions a:active{background:rgba(0,0,0,.6)}
  .hero-actions svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  .detail-info{padding:10px 12px 24px}

  /* Compact info layout — iOS-Contacts style */
  .info-section{margin-bottom:12px}
  .info-section:last-child{margin-bottom:0}
  .info-title{font-size:19px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:700;padding:8px 12px 8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .info-card{background:var(--bg);border-radius:12px;overflow:hidden}
  html.dark .info-card{background:#0A1F2E}
  .row-line{display:flex;align-items:center;padding:9px 14px;border-top:1px solid var(--line);
    text-decoration:none;color:var(--ink);cursor:pointer}
  .row-line:first-child{border-top:0}
  .row-line:active{background:var(--neoes-4)}
  html.dark .row-line:active{background:rgba(42,143,190,.18)}
  .row-line .lbl{font-size:10.5px;font-weight:700;color:var(--ink-2);width:48px;flex-shrink:0;
    text-transform:uppercase;letter-spacing:.4px}
  .row-line .val{flex:1;font-size:14.5px;color:var(--ink);font-weight:500;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
  .row-line.tap .val{color:var(--neoes-2)}
  .row-line .arrow{flex-shrink:0;color:var(--ink-2);margin-left:6px;opacity:.45}
  .row-line .arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  /* Education list */
  .edu-card{padding:0;overflow:visible !important}
  .info-card.edu-card{overflow:visible !important}
  .edu-row,.edu-row.edit-row{overflow:visible}
  .edu-row.edit-row .edu-search-wrap{overflow:visible}
  .edu-row{display:flex;align-items:center;padding:7px 14px;border-top:1px solid var(--line);font-size:14px;color:var(--ink);gap:6px;min-width:0}
  .edu-row:first-child{border-top:0}
  .edu-cred-display{font-weight:700;color:var(--neoes-1);min-width:46px}
  html.dark .edu-cred-display{color:#9DD3EE}
  .edu-sub{color:var(--ink-2);font-weight:500;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
  .edu-row.edit-row{padding:6px 10px;gap:5px}
  /* Three search-wrap inputs in edit row: credential / field / school */
  .edu-row.edit-row .edu-search-wrap{position:relative;min-width:0}
  .edu-row.edit-row .edu-cred-wrap{flex:0 0 80px}
  .edu-row.edit-row .edu-field-wrap{flex:0 0 30%}
  .edu-row.edit-row .edu-school-wrap{flex:1}
  .edu-row.edit-row .edu-search-input{
    width:100%;padding:5px 8px;font-size:13px;
    border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);
  }
  .edu-row.edit-row .edu-cred-input{font-weight:600}
  .edu-row.edit-row .edu-search-input:focus{outline:none;border-color:var(--neoes-3)}
  /* Filtered dropdown for any edu search input */
  .edu-search-drop{
    position:absolute;left:0;top:calc(100% + 3px);z-index:50;
    background:var(--card);border:1px solid var(--line);border-radius:8px;
    box-shadow:0 8px 22px rgba(0,0,0,.30);
    max-height:280px;overflow-y:auto;display:none;
    min-width:240px;width:max-content;max-width:min(360px,90vw);
  }
  .edu-search-drop.open{display:block}
  .edu-search-drop .grp{padding:6px 12px 2px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-2);background:var(--bg);position:sticky;top:0}
  html.dark .edu-search-drop .grp{background:#0A1F2E}
  .edu-search-drop .it{padding:7px 14px;font-size:13px;cursor:pointer;border-top:1px solid var(--line)}
  .edu-search-drop .it:hover,.edu-search-drop .it.kbd{background:var(--neoes-4);color:var(--neoes-1)}
  html.dark .edu-search-drop .it:hover, html.dark .edu-search-drop .it.kbd{background:rgba(42,143,190,.22);color:#9DD3EE}
  .edu-row.edit-row .edu-field{flex:0 0 22%}
  .edu-row.edit-row .edu-school{flex:1}
  .edu-row.edit-row .edu-del{
    flex-shrink:0;width:24px;height:24px;border-radius:50%;
    background:var(--danger);color:#fff;border:0;
    display:grid;place-items:center;padding:0;cursor:pointer;
  }
  .edu-row.edit-row .edu-del svg{width:14px;height:14px}
  .edu-empty{padding:14px;text-align:center;color:var(--ink-2);font-size:12.5px;font-style:italic}
  .edu-add-btn{
    width:30px;height:30px;border-radius:50%;
    background:var(--neoes-4);color:var(--neoes-1);
    border:0;cursor:pointer;display:grid;place-items:center;padding:0;
  }
  .edu-add-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .edu-add-btn:active{transform:scale(.92);background:var(--neoes-3);color:#fff}
  html.dark .edu-add-btn{background:rgba(42,143,190,.28);color:#9DD3EE}

  /* Side-by-side row — birthday + hire date */
  .row-pair{display:flex;border-top:1px solid var(--line)}
  .row-pair:first-child{border-top:0}
  .row-pair > .cell{flex:1;display:flex;align-items:center;padding:9px 13px;gap:7px;min-width:0}
  .row-pair > .cell + .cell{border-left:1px solid var(--line)}
  .row-pair .lbl{font-size:10.5px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}
  .row-pair .val{font-size:14px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Inline short link */
  /* Locations row inline pills */
  .info-locs{display:flex;flex-wrap:wrap;gap:4px;padding:2px 4px 4px}
  .info-locs span{font-size:14px;font-weight:600;color:var(--neoes-1);
    background:var(--neoes-4);padding:4px 11px;border-radius:99px;letter-spacing:.2px}
  html.dark .info-locs span{background:rgba(42,143,190,.22);color:#9DD3EE}
  /* Bio paragraph block */
  .info-bio{font-size:14px;line-height:1.45;color:var(--ink);padding:11px 14px;
    background:var(--bg);border-radius:12px;white-space:pre-wrap}
  html.dark .info-bio{background:#0A1F2E}

  /* Years-at-NEOES badge on bottom-right of hero photo */

  .row{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--bg);border-radius:10px}
  .row.tap:active{background:var(--neoes-4)}
  html.dark .row{background:#0A1F2E}html.dark .row.tap:active{background:#1B3A55}
  .row .icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
    background:var(--neoes-4);color:var(--neoes-1);flex-shrink:0}
  html.dark .row .icon{background:rgba(42,143,190,.22);color:#9DD3EE}
  .row .icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .row .label{font-size:11.5px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
  .row .value{font-size:14.5px;color:var(--ink);margin-top:1px;word-break:break-word}
  .row .value a{color:var(--neoes-2);text-decoration:none;font-weight:600}
  .loc-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
  .loc-pills span{font-size:11.5px;background:var(--neoes-4);color:var(--neoes-1);
    padding:2px 8px;border-radius:6px;font-weight:600}
  html.dark .loc-pills span{background:rgba(42,143,190,.25);color:#9DD3EE}
  /* Editable pills row — same size as read-mode pills, with on/off states */
  .info-locs.editable-pills{gap:6px}
  .info-locs .loc-pill{
    font-size:14px;font-weight:600;letter-spacing:.2px;
    padding:4px 11px;border-radius:99px;cursor:pointer;
    transition:background .12s, color .12s, border-color .12s;
    user-select:none;
  }
  .info-locs .loc-pill.on{background:var(--neoes-4);color:var(--neoes-1);border:1px solid transparent}
  .info-locs .loc-pill.off{background:transparent;color:var(--ink-2);border:1px dashed var(--line)}
  .info-locs .loc-pill:active{transform:scale(.95)}
  
    html.dark .info-locs .loc-pill.on{background:rgba(42,143,190,.25);color:#9DD3EE}
    html.dark .info-locs .loc-pill.off{color:var(--ink-2);border-color:var(--line)}
  
  /* Doctor pill with inline MD / OD tags — sized to match the small pill */
  .bio{padding:14px;background:var(--bg);border-radius:11px;margin-top:10px;font-size:14px;color:var(--ink);white-space:pre-wrap}
  html.dark .bio{background:#0A1F2E}

  /* Fun facts pretty grid */
  .ff{background:var(--card);border-radius:10px;padding:10px;box-shadow:var(--shadow-sm)}
  .ff .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-2);font-weight:700}
  .ff .v{font-size:13.5px;color:var(--ink);margin-top:3px;font-weight:500;word-break:break-word}
  .ff.full{grid-column:1/-1}

  /* Similar people row */
  .info-card .sim-row{padding:10px 12px 12px}
  .sim-row{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 4px;scrollbar-width:none}
  .sim-row::-webkit-scrollbar{display:none}
  .sim-tile{flex:0 0 86px;text-align:center}
  .sim-tile .photo{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:20px;overflow:hidden;margin:0 auto;
    background:linear-gradient(135deg,var(--g1,#2A8FBE),var(--g2,#175D8E))}
  .sim-tile .photo img{width:100%;height:100%;object-fit:cover}
  .sim-tile .nm{font-size:11px;font-weight:600;color:var(--ink);margin-top:4px;line-height:1.15;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:26px}
  .sim-tile .sc{font-size:13px;color:var(--neoes-2);font-weight:800;margin-top:3px;letter-spacing:-.3px}

  /* ---------- Edit form ---------- */
  .field{display:block;margin-bottom:10px}
  .field label{display:block;font-size:11px;font-weight:600;color:var(--ink-2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
  /* Inline field — iOS-Contacts style: label left, value right, no box, subtle separator */
  /* Select arrow on the right */
  .field input,.field select,.field textarea{
    width:100%;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:14.5px;}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--neoes-3)}
  .field textarea{min-height:74px;resize:vertical;font-family:inherit}
  .field .hint{font-size:11px;color:var(--ink-2);margin-top:3px}

  /* Edit-form top row: large circle photo button (left) + change PIN button (right).
     Tap photo opens camera/file picker; tap PIN scrolls/focuses the PIN field below. */
  .edit-top-row{display:flex;align-items:flex-start;justify-content:space-between;
    gap:12px;margin:4px 6px 16px;padding:0}
  .edit-top-row > .col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto}
  .edit-top-row .pic-btn, .edit-top-row .pin-btn{
    background:transparent;border:0;padding:0;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:6px;
    -webkit-tap-highlight-color:transparent;
  }
  .edit-top-row .photo-wrap{position:relative;width:68px;height:68px}
  .edit-top-row .photo-wrap .photo{
    width:68px;height:68px;border-radius:50%;display:grid;place-items:center;
    color:#fff;font-weight:700;font-size:24px;overflow:hidden;position:relative;
    background:linear-gradient(135deg,var(--g1,#2A8FBE),var(--g2,#175D8E));
    box-shadow:0 3px 10px rgba(14,34,54,.28), inset 0 0 0 2px rgba(255,255,255,.20);
    transition:transform .15s ease;
  }
  .edit-top-row .photo-wrap .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
  .edit-top-row .pic-btn:active .photo{transform:scale(.96)}
  .edit-top-row .pin-btn:active .icon-circle{transform:scale(.96)}
  .edit-top-row .camera-badge{
    position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;
    background:#fff;color:var(--neoes-1);display:grid;place-items:center;pointer-events:none;
    box-shadow:0 2px 5px rgba(0,0,0,.32), 0 0 0 2px var(--bg);
  }
  .edit-top-row .camera-badge svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
    .edit-top-row .icon-circle{
    width:68px;height:68px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,#C68B17,#8B5E0F);color:#fff;
    box-shadow:0 3px 10px rgba(198,139,23,.40), inset 0 0 0 2px rgba(255,255,255,.20);
    transition:transform .15s ease;
  }
  .edit-top-row .icon-circle svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .edit-top-row .lbl{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.2px}
  /* Fingerprint enabled: green circle instead of the gold PIN/photo circle. */
  .edit-top-row .pin-btn.fp-on .icon-circle{background:linear-gradient(135deg,#3E9B63,#2E7D52);box-shadow:0 3px 10px rgba(46,125,82,.40), inset 0 0 0 2px rgba(255,255,255,.20)}
  .edit-top-row .pin-btn.busy{opacity:.55;pointer-events:none}
  .edit-top-row .remove-link{
    font-size:11px;font-weight:600;color:var(--danger);background:transparent;border:0;
    padding:2px 6px;border-radius:6px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
  }
  .edit-top-row .remove-link:active{background:rgba(178,58,72,.12)}
  
    html.dark .edit-top-row .remove-link{color:#FBA9B0}
    html.dark .edit-top-row .lbl{color:var(--ink)}
  
  /* Legacy edit sheet — hidden in v78+ (replaced by inline detail-view editing).
     HTML kept in place so existing script-load handler bindings don't crash. */

  /* Person silhouette used as fallback when no photo and no name */
  .person-silhouette{width:100%;height:100%;color:#fff;display:block}
  /* PIN modal — simple prompt-style overlay */
  .pin-modal-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000;
    display:flex;align-items:center;justify-content:center;padding:24px}
  /* Personal-PIN card — the .pin-modal inside the JS-built .pin-modal-scrim. Scoped
     so it doesn't collide with the #pinModal superuser OVERLAY below (which also uses
     the class .pin-modal). Without this scope the overlay rule leaked position:fixed +
     display:none onto this card and hid it. */
  .pin-modal-scrim .pin-modal{background:var(--card);color:var(--ink);border-radius:14px;padding:18px 18px 14px;
    max-width:320px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .pin-modal-scrim .pin-modal h3{margin:0 0 6px;font-size:18px;font-weight:700}
  .pin-modal-scrim .pin-modal p{margin:0 0 12px;color:var(--ink-2);font-size:13px}
  .pin-modal-scrim .pin-modal input{width:100%;padding:12px 14px;border-radius:10px;border:2px solid var(--line);
    font-size:22px;letter-spacing:8px;text-align:center;background:var(--bg);color:var(--ink);
    font-weight:700;-webkit-text-security:disc;text-security:disc}
  .pin-modal-scrim .pin-modal input:focus{outline:none;border-color:var(--neoes-2)}
  .pin-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
  .pin-modal-actions .btn{padding:9px 14px;border-radius:9px;background:var(--neoes-2);color:#fff;font-weight:700;font-size:14px;border:0}
  .pin-modal-actions .btn.ghost{background:transparent;color:var(--ink-2);border:1.5px solid var(--line)}
  .pin-modal-actions .btn.danger{background:var(--danger);color:#fff}
  /* Unlock dialog: "Use fingerprint" button + first-time "also fingerprint" checkbox. */
  .pin-modal-scrim .pin-bio-btn{
    width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
    background:var(--neoes-1);color:#fff;border:0;border-radius:11px;padding:12px;
    font-size:15px;font-weight:700;cursor:pointer;margin-bottom:12px;
  }
  .pin-modal-scrim .pin-bio-btn:active{filter:brightness(.92)}
  .pin-modal-scrim .ul-bio-opt{
    display:flex;align-items:center;gap:8px;margin-top:11px;
    font-size:12.5px;color:var(--ink-2);cursor:pointer;line-height:1.3;
  }
  .pin-modal-scrim .ul-bio-opt svg{flex-shrink:0;color:var(--neoes-1)}
  .pin-modal-scrim .pin-modal input[type="checkbox"]{
    width:18px;height:18px;padding:0;margin:0;flex-shrink:0;letter-spacing:normal;font-size:inherit;
    -webkit-text-security:none;text-security:none;accent-color:var(--neoes-1);
  }

  /* Highlight pulse when PIN field is jumped-to */
  /* .field sets display:block, which overrides the [hidden] attribute — force it off */

  /* Pill-grid: pick tiles that highlight on selection — no checkboxes */
  .pill{
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:9px 10px;border:1.5px solid var(--line);border-radius:9px;
    font-size:13.5px;font-weight:500;cursor:pointer;
    background:var(--card);color:var(--ink);
    user-select:none;line-height:1.15;min-width:0;text-align:center;
    transition:background .12s ease, border-color .12s ease, color .12s ease;
  }
  .pill > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pill.on{
    background:var(--neoes-2);border-color:var(--neoes-2);
    color:#fff;font-weight:700;
  }
  .pill:active{transform:scale(.97)}
  
    html.dark .pill.on{background:var(--neoes-3);border-color:var(--neoes-3);color:#fff}
  
  /* Doctor pill with inline MD / OD tags */

  /* Tags input (countries) */
  .tags{display:flex;flex-wrap:wrap;gap:5px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--card);min-height:44px;align-items:center}
  .tag{font-size:12.5px;background:var(--neoes-4);color:var(--neoes-1);padding:3px 8px 3px 10px;border-radius:6px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
  .tag button{color:var(--neoes-1);font-size:14px;line-height:1;padding:0 2px}
  html.dark .tag{background:rgba(42,143,190,.25);color:#9DD3EE}html.dark .tag button{color:#9DD3EE}
  .tags input{flex:1;min-width:80px;border:0;background:transparent;outline:none;padding:4px;font-size:14px;color:var(--ink)}

  /* Superuser PIN overlay — the standalone #pinModal (full-screen scrim centering .pin-card).
     Id-scoped so it stops sharing the bare .pin-modal selector with the personal-PIN card above. */
  #pinModal{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;
    background:rgba(11,34,53,.65);padding:24px;backdrop-filter:blur(3px)}
  #pinModal.show{display:flex}
  .pin-card{background:var(--card);border-radius:16px;padding:22px;max-width:340px;width:100%;text-align:center}
  .pin-card h3{margin:0 0 4px;font-size:17px}
  .pin-card p{margin:0 0 14px;font-size:13.5px;color:var(--ink-2)}
  .pin-input{letter-spacing:14px;text-align:center;font-size:22px;font-weight:700;
    padding:14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
  .pin-msg{font-size:12.5px;color:var(--danger);margin-top:8px;min-height:16px}

  .toast{position:fixed;left:50%;bottom:calc(90px + var(--safe-bot));transform:translate(-50%,40px);
    background:#0B2235;color:#fff;padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:500;
    opacity:0;transition:all .2s ease;z-index:1300;pointer-events:none;max-width:88%;text-align:center}
  .toast.show{opacity:1;transform:translate(-50%,0)}

  .setting-row{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line);gap:10px}
  .setting-row:last-child{border-bottom:0}
  .setting-row .t{font-weight:600;font-size:14.5px}
  .setting-row .d{font-size:12px;color:var(--ink-2);margin-top:2px}
  /* admin-only rows hidden until superuser is signed in */
  #settingsSheet:not(.is-su) .su-only{display:none}

  /* Stats / vibes */

  .hidden{display:none !important}
  .grow{flex:1}

  /* === Fun Facts questionnaire === */

  /* Questionnaire sheet (full-screen, fixed positioning) */

  /* Binary pair — two big pill buttons */
  .ff-binary{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ff-binary button{padding:13px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font-size:14.5px;font-weight:600;cursor:pointer;transition:all .12s ease}
  .ff-binary button:active{transform:scale(.96)}
  .ff-binary button.on{border-color:var(--neoes-2);background:var(--neoes-4);color:var(--neoes-1)}
  
    html.dark .ff-binary button{background:#0A1F2E}
    html.dark .ff-binary button.on{background:rgba(42,143,190,.25);color:#CDEBFF}
  

  /* Chip picker (multi or single) */


  /* Compact binary — 3 per row */
  /* === FF editor: category icon bar === */

  /* === Favs / Travel: inline manual entry fields === */

  /* === Color section === */

  /* === Carousel for ranks and tastes === */

  /* === Tighter rank list === */
  /* Rank 'em — draggable rows (gap-based reorder). v148 redesign. */
  .ff-rank-tight{display:flex;flex-direction:column;gap:7px;margin-top:3px;position:relative}
  .ff-rank-tight .opt{
    display:flex;align-items:center;gap:9px;
    padding:8px 11px;border-radius:10px;
    background:var(--bg);border:1px solid var(--line);
    cursor:grab;font-size:13.5px;color:var(--ink);user-select:none;
    touch-action:none;line-height:1.2;
    transition:transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .15s, background .12s;
  }
  html.dark .ff-rank-tight .opt{background:#0A1F2E}
  .ff-rank-tight .opt .rk-num{flex-shrink:0;width:21px;height:21px;border-radius:50%;
    background:var(--neoes-1);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
  .ff-rank-tight .opt .rk-icon{flex-shrink:0;font-size:17px;line-height:1}
  .ff-rank-tight .opt .label{flex:1;line-height:1.2}
  .ff-rank-tight .opt .grip{flex-shrink:0;display:grid;place-items:center;color:var(--ink-2);opacity:.5;margin-left:auto}
  .ff-rank-tight .opt .grip svg{width:17px;height:17px;display:block}
  .ff-rank-tight .opt:active{cursor:grabbing}
  .ff-rank-tight .opt.pl-lift{            /* the row being dragged: lifted, follows finger */
    cursor:grabbing;background:var(--neoes-4);border-color:var(--neoes-3);
    box-shadow:0 10px 26px rgba(14,34,54,.30);z-index:5;position:relative;
  }
  
    html.dark .ff-rank-tight .opt.pl-lift{background:#123A57;border-color:var(--neoes-3)}
    html.dark .ff-rank-tight .opt .grip{opacity:.6}
  
  .ff-rank-display .rk-body ol li .rk-icon{display:inline-block;margin-right:3px;font-size:14px}

  /* Drag-to-reorder rank list — slim, no box/border, 6-dot grip left */
  .ff-rank{display:flex;flex-direction:column;gap:0;margin-top:4px}
  .ff-rank .opt{
    display:flex;align-items:center;gap:8px;padding:4px 2px 4px 0;
    background:transparent;border:0;border-radius:0;
    cursor:grab;font-size:13.5px;color:var(--ink);user-select:none;
    touch-action:none;transition:transform .1s, opacity .1s;
  }
  .ff-rank .opt.dragging{cursor:grabbing;opacity:.85;background:var(--neoes-4);border-radius:6px;transition:none;z-index:5;position:relative}
  html.dark .ff-rank .opt.dragging{background:rgba(42,143,190,.18)}
  .ff-rank .opt .grip{
    flex-shrink:0;width:14px;height:20px;color:var(--ink-2);opacity:.55;
    display:grid;grid-template-columns:1fr 1fr;gap:2px;align-content:center;justify-items:center;
  }
  .ff-rank .opt .grip .dot{width:3px;height:3px;border-radius:50%;background:currentColor}
  .ff-rank .opt .label{flex:1;line-height:1.25}

  /* Two rank questions side by side */


  /* Fun-facts sub-section title emoji prefix — slightly larger emoji only, same overall size */
  .info-title .ff-em{font-size:18px;margin-right:4px;line-height:1}

  /* Allow dropdown to spill out of the favs card */
  .info-section .info-card.ff-favs-card,
  .info-section .info-card.ff-favs-card .ff-favs-row{overflow:visible}
  .info-card.ff-favs-card{overflow:visible !important}
  /* Favs tag input (movies, actors, music, hobbies) */
  .ff-tags-wrap{
    display:flex;flex-wrap:wrap;gap:5px;align-items:center;
    padding:4px;border-radius:8px;background:rgba(86,131,181,0.06);
    position:relative;width:100%;
  }
  .ff-tag{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 4px 3px 10px;border-radius:99px;
    background:var(--neoes-4);color:var(--neoes-1);font-size:12.5px;font-weight:600;
  }
  html.dark .ff-tag{background:rgba(42,143,190,.28);color:#9DD3EE}
  .ff-tag-x{
    width:16px;height:16px;border-radius:50%;
    background:rgba(0,0,0,.18);color:#fff;border:0;cursor:pointer;
    display:grid;place-items:center;line-height:1;
    font-size:13px;font-weight:700;padding:0;
  }
  .ff-tag-x:hover{background:var(--danger)}
  .ff-tag-input{
    flex:1;min-width:60px;border:0;background:transparent;outline:none;
    padding:3px 6px;font-size:13.5px;color:var(--ink);
  }
  .ff-tag-input::placeholder{color:var(--ink-2);opacity:.55;font-style:italic}
  /* Inline instruction line inside the favorites separator bar (edit mode). */
  .ff-section-bar-note{
    margin-top:6px;font-size:12.5px;font-weight:500;font-style:italic;
    color:rgba(255,255,255,.92);letter-spacing:.2px;line-height:1.35;
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
    text-shadow:0 1px 1px rgba(0,0,0,.35);
  }
    /* Instruction note shown under the favorites separator bar in edit mode only. */
    /* "Tell Us About Yourself" separator bar between core info and fun-facts sections */
  .ff-section-bar{
    margin:22px 0 14px;padding:14px 16px;border-radius:14px;
    background:linear-gradient(135deg,var(--neoes-1),var(--neoes-2));
    color:#fff;text-align:center;
    box-shadow:0 4px 14px rgba(14,59,94,.30);
  }
  .ff-section-bar span{
    font-size:28px;font-weight:700;letter-spacing:.4px;
    font-family:'Cinzel','Optima','Palatino',Georgia,serif;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
    line-height:1.15;
  }

  .ff-portal-drop .ff-portal-it:first-child{border-top:0}
  .ff-portal-drop .ff-portal-it:hover, .ff-portal-drop .ff-portal-it.kbd{background:var(--neoes-4);color:var(--neoes-1)}
  html.dark .ff-portal-drop .ff-portal-it:hover, html.dark .ff-portal-drop .ff-portal-it.kbd{background:rgba(42,143,190,.22);color:#9DD3EE}

  .ff-tag-drop{
    left:0;right:auto;
  }
  .ff-tags-val{flex:1;text-align:left !important;min-width:0}
  .ff-tags-row{align-items:flex-start !important}
  .ff-tags-row .lbl{padding-top:6px}

  /* Favs — read mode shows label : value tight rows; edit mode replaces value with inline-edit */
  .ff-favs-row{display:flex;align-items:baseline;gap:8px;padding:9px 12px;border-top:1px solid var(--line);font-size:14px;color:var(--ink)}
  .ff-favs-row:first-child{border-top:0}
  .ff-favs-row .lbl{flex:0 0 auto;font-weight:600;color:var(--ink-2);font-size:13px}
  .ff-favs-row .val{flex:1;min-width:0;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
  .ff-favs-row .val .inline-edit{text-align:right}
  /* Crazy fact gets a multi-line layout */
  .ff-favs-row.full{flex-direction:column;align-items:stretch;gap:4px}
  .ff-favs-row.full .val{white-space:normal;text-align:left}
  .ff-favs-row.full .val .inline-edit,
  .ff-favs-row.full .val .inline-edit-textarea{text-align:left}

  /* You chose — info-card wraps a 2-column grid; each column is its own rounded box */
  .ff-chose-card{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
  .ff-chose-col{
    background:var(--card);border-radius:10px;padding:5px 4px;
    display:flex;flex-direction:column;gap:1px;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  html.dark .ff-chose-col{background:#142A40}
  .ff-binary-row{
    display:flex;align-items:center;justify-content:center;gap:0;
    padding:3px 4px;font-size:13px;color:var(--ink);
    background:transparent;border-radius:0;box-shadow:none;
  }
  .ff-binary-row .ff-bin-side{
    flex:0 0 auto;padding:2px 8px;border-radius:99px;cursor:default;
    color:var(--ink-2);font-weight:500;letter-spacing:.1px;
    transition:background .12s, color .12s, transform .12s;
  }
  .ff-binary-row .ff-bin-side.on{
    background:var(--neoes-4);color:var(--neoes-1);font-weight:700;
  }
  html.dark .ff-binary-row .ff-bin-side.on{background:rgba(42,143,190,.28);color:#9DD3EE}
  body.in-edit-mode .ff-binary-row .ff-bin-side{cursor:pointer}
  body.in-edit-mode .ff-binary-row .ff-bin-side:hover{background:rgba(86,131,181,0.10);color:var(--ink)}
  body.in-edit-mode .ff-binary-row .ff-bin-side.on:hover{background:var(--neoes-4)}
  .ff-binary-row .ff-bin-sep{
    color:var(--ink-2);opacity:.75;font-weight:700;
    font-size:18px;line-height:1;padding:0 1px;margin:0 -1px;
  }

  /* Read-only display of fun facts in detail view */

  /* Tap-to-expand fun fact item (rankings only one open at a time) */
  .ff-rank-display{display:flex;flex-direction:column;gap:0;margin-top:6px}
  .ff-rank-display .rk-item{border-top:1px solid var(--line);background:transparent}
  .ff-rank-display .rk-item:first-child{border-top:0}
  .ff-rank-display .rk-head{display:flex;align-items:center;justify-content:space-between;
    padding:9px 2px;cursor:pointer;font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:.1px}
  .ff-rank-display .rk-head .chev{color:var(--ink-2);transition:transform .15s ease;flex-shrink:0}
  .ff-rank-display .rk-head .chev svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .ff-rank-display .rk-item.open .rk-head .chev{transform:rotate(90deg)}
  .ff-rank-display .rk-body{display:none;padding:0 2px 10px;font-size:13px;color:var(--ink-2);line-height:1.6}
  .ff-rank-display .rk-instr{font-size:12px;color:var(--ink-2);font-style:italic;letter-spacing:.2px;margin:2px 0 8px;opacity:.85}
  .ff-rank-display .rk-item.open .rk-body{display:block}
  .ff-rank-display .rk-body ol{margin:0;padding-left:22px}
  .ff-rank-display .rk-body li{padding:1px 0}

  /* Favorite color: a centered colored circle with the color name inside.
     Card background stays neutral; the circle carries the color. */
  .info-card.ff-color-card{
    padding:18px 12px 16px;
    display:flex;flex-direction:column;align-items:center;gap:14px;
    overflow:visible !important;
  }
  .ff-color-circle{
    width:140px;height:140px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    padding:12px;box-sizing:border-box;text-align:center;
    box-shadow:0 4px 18px rgba(0,0,0,.30), inset 0 0 0 3px rgba(255,255,255,.20);
    transition:background .2s ease, color .2s ease;
  }
  .ff-color-circle .ff-color-name{
    font-size:18px;font-weight:700;letter-spacing:.3px;line-height:1.15;
    text-shadow:0 1px 2px rgba(0,0,0,.30);
    max-width:108px;
    hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;
    word-break:break-word;overflow-wrap:break-word;
  }
  /* Slightly tighter type when the name has many characters */
  .ff-color-circle.long .ff-color-name{font-size:15px}
  .ff-color-circle.xlong .ff-color-name{font-size:13px;line-height:1.18}
  .ff-color-wheel-inline{
    width:140px;height:140px;border-radius:50%;
    background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.1), 0 4px 14px rgba(0,0,0,.25);
    position:relative;cursor:crosshair;touch-action:none;
  }
  .ff-color-wheel-inline::after{
    content:"";position:absolute;inset:18%;border-radius:50%;
    background:radial-gradient(circle,#fff 0%, rgba(255,255,255,0) 70%);
    pointer-events:none;
  }
  .ff-color-wheel-inline .cw-dot{
    position:absolute;width:20px;height:20px;border-radius:50%;
    border:3px solid #000;
    box-shadow:0 2px 6px rgba(0,0,0,.3);
    transform:translate(-50%,-50%);pointer-events:none;left:50%;top:50%;
  }
  .ff-color-name{
    font-size:19px;font-weight:700;letter-spacing:.3px;line-height:1.1;
    text-shadow:0 1px 2px rgba(0,0,0,.18);
  }


  /* Edit / Check toggle button on color + personality titles.
     Pencil when locked → tap to unlock for editing → becomes a check; tap again to finalize. */
  .title-edit-btn{
    background:transparent;border:0;cursor:pointer;
    width:34px;height:34px;border-radius:50%;
    display:grid;place-items:center;color:var(--neoes-2);
    margin-left:auto;flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
  }
  .title-edit-btn:active{background:rgba(86,131,181,.18)}
  .title-edit-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .title-edit-btn.unlocked{color:var(--good,#1F8A4C);background:rgba(31,138,76,.12)}
  .title-edit-btn.unlocked:active{background:rgba(31,138,76,.25)}
  
    html.dark .title-edit-btn{color:#9DD3EE}
    html.dark .title-edit-btn.unlocked{color:#7AD896;background:rgba(122,216,150,.16)}
  

  /* Double-tap-to-edit gate for the color wheel. */
  .ff-cw-stack.cw-locked .ff-color-wheel-inline,
  .ff-cw-stack.cw-locked .cw-lightness-wrap{
    pointer-events:none;filter:saturate(.85) brightness(.95);opacity:.92;
  }
  .ff-cw-stack{position:relative}

  /* Your Tastes — collapsible per-question blocks + icon prefix on pills. */
  .taste-q{padding:6px 0;border-top:1px solid var(--line)}
  .taste-q:first-child{border-top:0;padding-top:2px}
  .taste-q-head{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:4px 2px;cursor:pointer;user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .taste-q-lbl{font-size:15.5px;color:var(--ink);font-weight:700;line-height:1.25;letter-spacing:.1px;display:inline-flex;align-items:center;gap:7px}
  .taste-q-lbl .taste-q-ic{font-size:17px;line-height:1;flex-shrink:0}
  .taste-q-chev{font-size:14px;color:var(--ink-2);transition:transform .18s ease;flex-shrink:0;line-height:1}
  .taste-q.collapsed .taste-q-chev{transform:rotate(-90deg)}
  .taste-q-body{margin-top:6px;transition:max-height .22s ease,opacity .18s ease;overflow:hidden}
  .taste-q.collapsed .taste-q-body{max-height:0;opacity:0;margin-top:0;pointer-events:none}
  .pill-ic{font-size:13px;line-height:1;margin-right:2px;vertical-align:-1px}
  .loc-pill .pill-ic{font-size:12.5px}

  /* Lightness slider — vertical, sits to the right of the color wheel.
     Top = lighter (100), bottom = darker (0), matching the gradient track. */
  .ff-cw-stack{display:flex;flex-direction:row;align-items:center;gap:14px;justify-content:center;width:100%}
  /* Lightness slider: a horizontal range input rotated -90deg so the track runs vertically.
     The gradient lives on the track pseudo-element via the --cw-track-bg CSS variable,
     because mobile browsers ignore `background` set on a vertical-appearance range input. */
  .cw-lightness-wrap{
    width:50px;height:150px;position:relative;flex-shrink:0;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.15);
    overflow:hidden;
    touch-action:none;            /* don't let the browser scroll the page while dragging */
    -ms-touch-action:none;
  }
  .cw-lightness{
    -webkit-appearance:none;appearance:none;
    position:absolute;left:50%;top:50%;
    width:150px;height:50px;
    transform:translate(-50%,-50%) rotate(-90deg);
    transform-origin:center;
    background:transparent;border:0;outline:none;cursor:pointer;
    padding:0;margin:0;
    touch-action:none;
    -ms-touch-action:none;
  }
  /* Track pseudo carries the gradient — set via --cw-track-bg JS variable. */
  .cw-lightness::-webkit-slider-runnable-track{
    width:100%;height:50px;border-radius:8px;
    background:var(--cw-track-bg, linear-gradient(to right, #000 0%, #888 50%, #fff 100%));
  }
  .cw-lightness::-moz-range-track{
    width:100%;height:50px;border-radius:8px;
    background:var(--cw-track-bg, linear-gradient(to right, #000 0%, #888 50%, #fff 100%));
  }
  /* Thumb: pure black bar across the vertical track. No white border, no halo. */
  .cw-lightness::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:6px;height:50px;
    margin-top:0;border-radius:2px;
    background:#000;border:0;cursor:pointer;
    box-shadow:none;
  }
  .cw-lightness::-moz-range-thumb{
    width:6px;height:50px;border-radius:2px;
    background:#000;border:0;cursor:pointer;
    box-shadow:none;
  }
  /* Lightness overlay inside the wheel — tints toward black or white visually */
  .cw-light-overlay{position:absolute;inset:0;border-radius:50%;pointer-events:none;
    mix-blend-mode:normal;transition:background .05s linear}

  /* Color wheel widget (favorite color picker) */

  /* Country autocomplete dropdown */

  /* Collapsible bio sections (Basics/Contact/Fun facts toggle bars) */

  /* Pets / Kids editor — larger sub-section headers, cleaner layout */

  /* Doctor stacked (MD on top, OD on bottom) cbox */

  /* Contact rows with action icons (call/text/email) */
  .row-line .contact-acts{display:flex;gap:4px;margin-left:6px;flex-shrink:0}
  .row-line .contact-acts a{
    width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
    background:var(--neoes-4);color:var(--neoes-1);text-decoration:none;
  }
  .row-line .contact-acts a:active{background:var(--neoes-3);color:#fff}
  .row-line .contact-acts a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  html.dark .row-line .contact-acts a{background:rgba(42,143,190,.22);color:#9DD3EE}
  .row-line.with-acts{padding:7px 12px}
  .row-line.with-acts .arrow{display:none}

  /* Family card — kids + pets as icon rows */
  .family-icons{display:flex;flex-wrap:wrap;gap:10px 14px;padding:10px 12px;background:var(--bg);border-radius:12px}
  html.dark .family-icons{background:#0A1F2E}
  .family-icons .fi{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:36px}
  .family-icons .fi .ic{font-size:24px;line-height:1}
  .family-icons .fi .nm{font-size:10.5px;color:var(--ink-2);font-weight:600;max-width:60px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Edit-mode family — single horizontal scrolling row, with right-edge fade affordance */
  .family-icons-edit{
    gap:14px;padding:10px 12px 12px;
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .family-icons-edit::-webkit-scrollbar{display:none}
  .family-icons-edit .fi-edit,.family-icons-edit .fi-add-tile{flex:0 0 auto;scroll-snap-align:start}
  .family-icons-edit .fi-edit{
    display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:36px;position:relative;
  }
  .family-icons-edit .ic{
    font-size:24px;line-height:1;background:transparent;border:0;padding:0;cursor:pointer;
  }
  .family-icons-edit .ic-toggle:active{transform:scale(.92)}
  /* "+ kid/pet" tile inline at end of row — same footprint as fi-edit */
  .family-icons-edit .fi-add-tile{
    width:36px;height:36px;border-radius:50%;
    background:transparent;border:2px dashed var(--neoes-3);color:var(--neoes-1);
    display:grid;place-items:center;cursor:pointer;align-self:flex-start;padding:0;
    margin-top:0;
  }
  .family-icons-edit .fi-add-tile svg{width:16px;height:16px}
  .family-icons-edit .fi-add-tile:active{transform:scale(.92);background:var(--neoes-4)}
  html.dark .family-icons-edit .fi-add-tile{color:#9DD3EE}
  /* Subtle hint text next to section titles in edit mode */
  .info-title .title-hint{
    font-size:11px;font-weight:500;color:var(--ink-2);
    font-style:italic;letter-spacing:0;
    opacity:.7;
    text-align:right;line-height:1.05;
  }
  /* Two-line variant: smaller font keeps total height ≤ single-line at 11px */
  .info-title .title-hint.two-line{
    font-size:10px;line-height:1.05;
    display:inline-block;white-space:normal;max-width:170px;
  }
  .family-icons-edit .fi-name-edit{
    width:60px;text-align:center;padding:1px 4px;border-radius:4px;
    border:0;background:rgba(86,131,181,0.10);color:var(--ink);
    font-size:10.5px;font-weight:600;outline:none;
  }
  .family-icons-edit .fi-name-edit::placeholder{color:var(--ink-2);opacity:.55;font-style:italic}
  .family-icons-edit .fi-name-edit:focus{background:rgba(86,131,181,0.24)}
  .family-icons-edit .fi-del-below{
    margin-top:2px;width:22px;height:22px;border-radius:50%;
    background:var(--danger);color:#fff;border:0;
    cursor:pointer;display:grid;place-items:center;padding:0;
  }
  .family-icons-edit .fi-del-below svg{width:14px;height:14px}
  .family-icons-edit .fi-del-below:active{transform:scale(.88)}

  /* Hero overlay — family icons in a wrapping row above the name. NAME above icon. */
  .hero-icons-row{
    position:absolute;left:0;right:0;bottom:78px;z-index:4;
    display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;
    gap:10px 14px;padding:0 16px;pointer-events:none;
  }
  .hero-icons-row .hi-item{
    display:inline-flex;flex-direction:column;align-items:center;gap:3px;min-width:46px;
  }
  .hero-icons-row .hi-lbl{
    font-size:12px;font-weight:700;color:#fff;
    -webkit-text-stroke:0.4px rgba(0,0,0,0.65);
    paint-order:stroke fill;
    text-shadow:0 1px 2px rgba(0,0,0,0.7);
    max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    text-align:center;letter-spacing:.2px;line-height:1.05;
    position:relative;z-index:1;
  }
  .hero-icons-row .hi{
    width:37px;height:37px;display:grid;place-items:center;
    background:#0E2236;
    border-radius:50%;font-size:22px;line-height:1;
    box-shadow:0 1px 5px rgba(0,0,0,.45);border:1.3px solid rgba(255,255,255,.45);
    position:relative;z-index:2;
  }
  .hero-icons-row .hi.big{width:41px;height:41px;font-size:25px}

  /* Compact 2-up row in edit form (cell+office, bday+hire) */

  /* Edit-mode-only inline editor for fun facts on detail page */ /* legacy CTA removed; fun facts now edit-mode only */

  /* === Photo source action sheet === */
  .photo-source-overlay{
    position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);
    display:flex;align-items:flex-end;justify-content:center;padding:14px;
    animation:psrcFade .15s ease;
  }
  @keyframes psrcFade{from{opacity:0}to{opacity:1}}
  .photo-source-sheet{
    width:100%;max-width:420px;background:var(--card,#fff);border-radius:18px;
    padding:8px;display:flex;flex-direction:column;gap:6px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    animation:psrcSlide .18s cubic-bezier(.22,.7,.34,1);
  }
  html.dark .photo-source-sheet{background:#152436}
  @keyframes psrcSlide{from{transform:translateY(20px);opacity:.6}to{transform:translateY(0);opacity:1}}
  .photo-source-sheet .psrc-title{
    text-align:center;font-size:13px;color:var(--ink-2);
    padding:10px 8px 6px;font-weight:600;letter-spacing:.2px;
  }
  .photo-source-sheet .psrc-btn{
    display:flex;align-items:center;gap:12px;justify-content:flex-start;
    padding:14px 16px;border:0;border-radius:12px;background:rgba(0,0,0,.04);
    color:var(--ink);font-size:16px;font-weight:600;cursor:pointer;text-align:left;
  }
  html.dark .photo-source-sheet .psrc-btn{background:rgba(255,255,255,.05);color:var(--ink)}
  .photo-source-sheet .psrc-btn:active{transform:scale(.985);background:rgba(0,0,0,.08)}
  .photo-source-sheet .psrc-ic{font-size:22px;line-height:1;width:28px;text-align:center}
  .photo-source-sheet .psrc-cancel{
    justify-content:center;margin-top:4px;font-weight:700;color:var(--neoes-1);
    background:transparent;
  }

  /* === Square zoom/crop dialog === */
  .crop-overlay{
    position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,.78);
    display:flex;align-items:center;justify-content:center;padding:14px;
    animation:psrcFade .15s ease;
  }
  .crop-sheet{
    width:100%;max-width:420px;background:var(--card,#fff);border-radius:18px;
    padding:14px 14px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.45);
  }
  html.dark .crop-sheet{background:#152436}
  .crop-title{font-size:14px;color:var(--ink-2);font-weight:600;letter-spacing:.2px}
  .crop-stage{
    position:relative;overflow:hidden;border-radius:6px;background:#000;
    touch-action:none;user-select:none;-webkit-user-select:none;
  }
  .crop-canvas{display:block;width:100%;height:100%}
  /* Square crop frame with rule-of-thirds guides — full viewport IS the crop region */
  .crop-mask{
    position:absolute;inset:0;pointer-events:none;
    border:1.5px dashed rgba(255,255,255,.85);
    box-sizing:border-box;border-radius:4px;
    box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
  }
  .crop-mask::before,.crop-mask::after{
    content:"";position:absolute;background:rgba(255,255,255,.18);pointer-events:none;
  }
  .crop-mask::before{left:33.33%;top:0;bottom:0;width:1px;
    box-shadow:calc(33.33% + 1px) 0 0 rgba(255,255,255,.18)}
  .crop-mask::after{top:33.33%;left:0;right:0;height:1px;
    box-shadow:0 calc(33.33% + 1px) 0 rgba(255,255,255,.18)}
  .crop-zoom{display:flex;align-items:center;gap:10px;width:100%;padding:0 6px}
  .crop-zoom-ic{font-size:18px;color:var(--ink-2);font-weight:700;width:18px;text-align:center}
  .crop-zoom-range{flex:1;accent-color:var(--neoes-1)}
  .crop-actions{display:flex;gap:8px;width:100%;margin-top:2px}
  .crop-btn{
    flex:1;padding:13px 0;border:0;border-radius:12px;cursor:pointer;
    font-size:15px;font-weight:700;letter-spacing:.2px;
  }
  .crop-cancel{background:rgba(0,0,0,.06);color:var(--ink)}
  html.dark .crop-cancel{background:rgba(255,255,255,.07);color:var(--ink)}
  .crop-ok{background:var(--neoes-1);color:#fff}
  .crop-btn:active{transform:scale(.985)}

  /* === Circular variant of crop mask (kid/pet photos) === */
  .crop-overlay.circle-crop .crop-mask{
    border:0;background:transparent;border-radius:0;box-shadow:none;
  }
  .crop-overlay.circle-crop .crop-mask::before,
  .crop-overlay.circle-crop .crop-mask::after{
    content:"";position:absolute;background:transparent;box-shadow:none;
    left:0;top:0;right:0;bottom:0;width:auto;height:auto;
  }
  .crop-overlay.circle-crop .crop-mask::before{
    background:radial-gradient(circle at 50% 50%, transparent 0, transparent calc(50% - 1px), rgba(0,0,0,.55) calc(50% + 1px));
  }
  .crop-overlay.circle-crop .crop-mask::after{
    border:2px solid rgba(255,255,255,.9);
    border-radius:50%;box-sizing:border-box;
    box-shadow:0 0 0 1px rgba(0,0,0,.35);
    width:auto;height:auto;
  }
  /* === Kid / Pet photo features (v100) === */
  .family-icons-edit .fi-cam{
    margin-top:2px;width:22px;height:22px;border-radius:50%;
    background:var(--neoes-1);color:#fff;border:0;
    cursor:pointer;display:grid;place-items:center;padding:0;
  }
  .family-icons-edit .fi-cam svg{
    width:13px;height:13px;stroke:currentColor;fill:none;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  }
  .family-icons-edit .fi-cam:active{transform:scale(.88)}
  html.dark .family-icons-edit .fi-cam{background:var(--neoes-2)}
  .family-icons .fi.has-photo .ic,
  .family-icons-edit .fi-edit.has-photo .ic{
    box-shadow:
      0 0 0 3px #FFD451,
      0 0 0 5px var(--neoes-3),
      0 0 14px 5px rgba(255,212,81,.85);
    border-radius:50%;
    animation:kpPulse 1.8s ease-in-out infinite;
  }
  .family-icons .fi.has-photo{cursor:pointer}
  .family-icons .fi.has-photo .nm{color:var(--neoes-1);font-weight:700}
  html.dark .family-icons .fi.has-photo .nm{color:#9DD3EE}
  .hero-icons-row .hi-item.has-photo{pointer-events:auto;cursor:pointer}
  .hero-icons-row .hi-item.has-photo .hi{
    box-shadow:
      0 0 0 3px #FFD451,
      0 0 0 6px var(--neoes-3),
      0 0 18px 5px rgba(255,212,81,.9),
      0 1px 5px rgba(0,0,0,.45);
    animation:kpPulse 1.8s ease-in-out infinite;
  }
  @keyframes kpPulse{
    0%, 100%{ filter:brightness(1) }
    50%{ filter:brightness(1.25) }
  }

  .kp-light{
    position:fixed;inset:0;z-index:9050;
    background:rgba(7,18,30,.32);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    display:none;align-items:center;justify-content:center;padding:18px;
    cursor:pointer;touch-action:pan-y;
  }
  .kp-light.show{display:flex;animation:psrcFade .15s ease}
  /* Layout stack: only the photo is clickable for close-on-tap, the rest is pass-through */
  .kp-stack{display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none}
  /* Bare floating circular photo — no card chrome */
  .kp-photo{
    /* Diameter ≈ full screen width. The px cap matches the phone-frame inner width so
       desktop preview mirrors the phone (where vw measures the monitor, not the frame). */
    width:min(94vw, 372px);
    height:min(94vw, 372px);
    border-radius:50%;overflow:hidden;
    background:linear-gradient(135deg,var(--neoes-2),var(--neoes-3));
    box-shadow:
      0 0 0 4px #FFD451,
      0 0 0 7px var(--neoes-3),
      0 14px 44px rgba(0,0,0,.6),
      0 0 28px 8px rgba(255,212,81,.5);
    display:grid;place-items:center;cursor:pointer;pointer-events:auto;
    transition:transform .26s ease, opacity .26s ease;
    will-change:transform, opacity;
    touch-action:pan-y;
  }
  .kp-photo img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
  /* Slide animations for navigation */
  /* Ribbon-slide:
       swipe-left  (dir=+1)  → current exits LEFT,  new enters from RIGHT
       swipe-right (dir=-1) → current exits RIGHT, new enters from LEFT */
  .kp-photo.slide-out-left{transform:translateX(-110vw);opacity:0}
  .kp-photo.slide-out-right{transform:translateX(110vw);opacity:0}
  .kp-photo.slide-in-from-right{transform:translateX(110vw);opacity:0;transition:none}
  .kp-photo.slide-in-from-left{transform:translateX(-110vw);opacity:0;transition:none}
  .kp-photo.settled{transform:translateX(0);opacity:1}

  /* Swipe-affordance arrows — visible only when ≥2 photos. */
  .kp-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:46px;height:46px;border-radius:50%;
    background:rgba(255,255,255,.18);color:#fff;border:0;cursor:pointer;
    display:none;align-items:center;justify-content:center;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    box-shadow:0 4px 12px rgba(0,0,0,.45);
    pointer-events:auto;z-index:2;
    animation:kpArrowNudge 1.8s ease-in-out infinite;
  }
  .kp-arrow svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .kp-arrow.kp-arrow-l{left:14px}
  .kp-arrow.kp-arrow-r{right:14px;animation-delay:.9s}
  .kp-light.has-multi .kp-arrow{display:flex}
  .kp-arrow:active{transform:translateY(-50%) scale(.92);background:rgba(255,255,255,.28)}
  @keyframes kpArrowNudge{
    0%, 100%{ opacity:.55 }
    50%{ opacity:1 }
  }
  /* Move arrows inward slightly on small screens */
  @media (max-width:380px){
    .kp-arrow{width:40px;height:40px}
    .kp-arrow.kp-arrow-l{left:8px}
    .kp-arrow.kp-arrow-r{right:8px}
  }
  /* Floating name caption under the circle (no card) */
  .kp-meta{
    display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px;
    text-shadow:0 1px 4px rgba(0,0,0,.65);
  }
  .kp-meta .kp-name{font-size:18px;font-weight:700;color:#fff}
  .kp-meta .kp-sub{font-size:13px;color:rgba(255,255,255,.85)}
  /* Dot indicators (one per kid/pet) — only show when ≥2 items */
  .kp-dots{
    display:flex;gap:6px;margin-top:8px;justify-content:center;
  }
  .kp-dots span{
    width:6px;height:6px;border-radius:50%;
    background:rgba(255,255,255,.45);
    box-shadow:0 0 4px rgba(0,0,0,.5);
    transition:background .15s ease, transform .15s ease;
  }
  .kp-dots span.on{background:#FFD451;transform:scale(1.3)}

  /* === v111 Superuser tooling === */
  /* Shared manage-list sheet (locations + roles) */
  .ml-sheet{display:none}
  .ml-sheet.show{display:flex;flex-direction:column}
  .ml-list{display:flex;flex-direction:column;gap:4px;padding:4px 0}
  .ml-row{display:flex;align-items:center;gap:8px;padding:5px 10px;background:var(--card);border:1px solid var(--line);border-radius:8px}
  .ml-row .nm{flex:1;font-size:13.5px;color:var(--ink)}
  .ml-row.protected{opacity:.7}
  .ml-row.protected .nm::after{content:" \1F512";font-size:11px;margin-left:6px;opacity:.7}
  .ml-row .ml-rm{
    width:24px;height:24px;border-radius:50%;border:0;background:#fdecee;color:var(--danger);
    cursor:pointer;display:grid;place-items:center;
  }
  .ml-row .ml-rm svg{width:11px;height:11px}
  .ml-row .ml-ed{
    width:24px;height:24px;border-radius:50%;border:0;
    background:var(--neoes-4);color:var(--neoes-1);
    cursor:pointer;display:grid;place-items:center;margin-right:4px;
  }
  html.dark .ml-row .ml-ed{background:rgba(42,143,190,.22);color:#9DD3EE}
  .ml-row .ml-ed svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .ml-row .ml-ed:active,.ml-row .ml-rm:active{transform:scale(.9)}
  .ml-row .ml-edit-inp{
    flex:1;border:1.5px solid var(--neoes-2);background:var(--card);color:var(--ink);
    border-radius:6px;padding:3px 9px;font-size:13.5px;outline:none;font:inherit;
  }
  .ml-row .ml-edit-inp:focus{border-color:var(--neoes-1)}
  .ml-row.editing .nm{display:none}
  .ml-row .ml-rm svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round}
  .ml-row .ml-rm:active{transform:scale(.92)}
  html.dark .ml-row .ml-rm{background:#3A2026}
  .ml-add{
    display:flex;gap:6px;align-items:center;margin:12px 0 4px;padding:8px 8px;
    background:var(--neoes-4);border-radius:10px;
  }
  html.dark .ml-add{background:rgba(42,143,190,.14)}
  .ml-add input{
    flex:1;border:1px solid var(--line);background:var(--card);color:var(--ink);
    border-radius:8px;padding:9px 11px;font-size:14px;outline:none;
  }
  .ml-add input:focus{border-color:var(--neoes-2)}
  .ml-add button{
    padding:9px 14px;border-radius:8px;border:0;background:var(--neoes-1);color:#fff;
    font-size:14px;font-weight:700;cursor:pointer;
  }
  .ml-add button:active{transform:scale(.96)}
  .ml-hint{font-size:12px;color:var(--ink-2);font-style:italic;padding:4px 4px 8px}
  .ml-empty{padding:18px;text-align:center;color:var(--ink-2);font-style:italic;font-size:13px}

  /* Person-picker (reset PIN + completeness) */
  .pp-sheet{display:none}
  .pp-sheet.show{display:flex;flex-direction:column}
  .pp-list{display:flex;flex-direction:column;gap:6px;padding:4px 0}
  .pp-row{
    display:flex;align-items:center;gap:10px;padding:8px 10px;
    background:var(--card);border:1px solid var(--line);border-radius:10px;cursor:pointer;
  }
  .pp-row:active{background:var(--neoes-4)}
  html.dark .pp-row:active{background:rgba(42,143,190,.14)}
  .pp-row .photo{width:38px;height:38px;border-radius:50%;flex-shrink:0;font-size:13px}
  .pp-row .pp-name{font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pp-row .pp-pin-chip{
    font-size:11px;font-weight:700;padding:3px 7px;border-radius:9px;
    background:var(--neoes-4);color:var(--neoes-1);
  }
  html.dark .pp-row .pp-pin-chip{background:rgba(42,143,190,.22);color:#9DD3EE}
  .pp-row .pp-pin-chip.none{background:#F1F4F8;color:var(--ink-2)}
  html.dark .pp-row .pp-pin-chip.none{background:rgba(255,255,255,.06)}
  .pp-row.pp-name-only{padding:11px 14px}
  .pp-row.pp-name-only .pp-name{flex:1;font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Directory completeness */
  .dc-row{
    display:flex;align-items:center;gap:10px;padding:8px 10px;
    background:var(--card);border:1px solid var(--line);border-radius:10px;cursor:pointer;
  }
  .dc-row:active{background:var(--neoes-4)}
  html.dark .dc-row:active{background:rgba(42,143,190,.14)}
  .dc-row .photo{width:38px;height:38px;border-radius:50%;flex-shrink:0;font-size:13px}
  .dc-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .dc-name{font-size:14px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dc-bar{
    height:6px;border-radius:99px;background:#E2EAF1;overflow:hidden;
  }
  html.dark .dc-bar{background:#1E3A55}
  .dc-bar > span{display:block;height:100%;border-radius:99px;transition:width .2s ease}
  .dc-pct{font-size:11px;font-weight:700;letter-spacing:.2px;flex-shrink:0;min-width:42px;text-align:right}
  .dc-bar > span.lvl-low{background:var(--danger)}
  .dc-bar > span.lvl-mid{background:var(--warn)}
  .dc-bar > span.lvl-hi{background:var(--good)}
  .dc-missing{font-size:11px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dc-summary{
    padding:10px 12px;margin:0 0 10px;border-radius:10px;
    background:var(--neoes-4);color:var(--neoes-1);font-size:13px;font-weight:600;
    display:flex;justify-content:space-between;align-items:center;
  }
  html.dark .dc-summary{background:rgba(42,143,190,.18);color:#9DD3EE}

  /* Retire button in EP — sibling of Delete (red→amber color) */

  /* Footer in Settings sheet — version + last update */
  .sp-footer{
    padding:14px 4px 4px;text-align:center;font-size:11.5px;color:var(--ink-2);
    border-top:1px solid var(--line);margin-top:12px;line-height:1.4;
  }
  .sp-footer .sp-v{font-weight:700;color:var(--ink);letter-spacing:.3px}

  /* === v114 Manage Users === */
  .mu-toolbar{
    display:flex;gap:8px;align-items:center;
    position:sticky;top:0;z-index:5;
    background:var(--card);
    margin:0 -2px 6px;padding:6px 2px 8px;
    border-bottom:1px solid var(--line);
  }
  html.dark .mu-toolbar{background:var(--card)}
  .mu-toolbar input{
    flex:1;border:1px solid var(--line);background:var(--card);color:var(--ink);
    border-radius:8px;padding:8px 11px;font-size:13.5px;outline:none;
  }
  .mu-toolbar input:focus{border-color:var(--neoes-2)}
  .mu-toolbar .mu-add-btn{
    padding:8px 12px;border-radius:8px;border:0;background:var(--neoes-1);color:#fff;
    font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  }
  .mu-toolbar .mu-add-btn:active{transform:scale(.96)}
  .mu-list{display:flex;flex-direction:column;gap:3px;padding:4px 0}
  .mu-row{
    background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  }
  .mu-row.is-hidden{opacity:.65}
  .mu-row .mu-head{
    display:flex;align-items:center;gap:10px;padding:7px 12px;cursor:pointer;
  }
  .mu-row:active .mu-head{background:var(--neoes-4)}
  html.dark .mu-row:active .mu-head{background:rgba(42,143,190,.14)}
  .mu-row .mu-name{flex:1;font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mu-row .mu-chev{font-size:13px;color:var(--ink-2);width:14px;text-align:center;transition:transform .15s ease}
  .mu-row.open .mu-chev{transform:rotate(90deg)}
  .mu-actions{
    display:flex;gap:5px;padding:5px 10px 7px;flex-wrap:wrap;align-items:center;
    border-top:1px solid var(--line);background:rgba(86,131,181,0.05);
  }
  html.dark .mu-actions{background:rgba(42,143,190,.06)}
  .mu-actions button{
    flex:0 0 auto;padding:4px 11px;border-radius:99px;border:0;
    font-size:11.5px;font-weight:600;cursor:pointer;letter-spacing:.2px;
    background:var(--neoes-4);color:var(--neoes-1);
    line-height:1.5;
  }
  html.dark .mu-actions button{background:rgba(42,143,190,.22);color:#9DD3EE}
  .mu-actions button.danger{background:#fdecee;color:var(--danger)}
  html.dark .mu-actions button.danger{background:#3A2026;color:#FF8B96}
  .mu-actions button:active{transform:scale(.94)}
  /* Hidden-users section divider */
  .mu-section{
    padding:10px 4px 4px;font-size:11px;font-weight:700;letter-spacing:.5px;
    text-transform:uppercase;color:var(--ink-2);margin-top:6px;
    border-top:1px solid var(--line);
  }
  .mu-empty{padding:18px;text-align:center;color:var(--ink-2);font-style:italic;font-size:13px}

  /* v120: SU admin sheets fill the screen so the home roster doesn't peek
     at the top through the scrim's blur. Border-radius removed; sheet covers
     the whole viewport. */
  #muSheet, #mlSheet, #ppSheet, #dcSheet, #settingsSheet{
    max-height:100vh !important;
    top:0;
    border-radius:0 !important;
  }
  #muSheet .sheet-body, #mlSheet .sheet-body, #ppSheet .sheet-body, #dcSheet .sheet-body, #settingsSheet .sheet-body{
    /* let sticky toolbars work cleanly inside a normal scroll container */
    overscroll-behavior:contain;
  }

  /* === v123 Type-to-confirm delete === */
  .cd-scrim{
    position:fixed;inset:0;z-index:9300;display:none;
    background:rgba(7,18,30,.55);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    align-items:center;justify-content:center;padding:18px;
  }
  .cd-scrim.show{display:flex}
  .cd-card{
    width:min(360px,100%);background:var(--card);color:var(--ink);
    border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.45);
    padding:18px 18px 14px;display:flex;flex-direction:column;gap:10px;
  }
  .cd-title{font-size:16px;font-weight:700;line-height:1.25}
  .cd-msg{font-size:13.5px;color:var(--ink-2);line-height:1.4}
  .cd-msg b{color:var(--ink)}
  .cd-instr{font-size:12.5px;color:var(--ink-2);margin-top:2px}
  .cd-instr code{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-weight:700;color:var(--danger);background:#fdecee;
    padding:1px 6px;border-radius:5px;letter-spacing:.5px;
  }
  html.dark .cd-instr code{background:#3A2026;color:#FF8B96}
  .cd-input{
    border:1.5px solid var(--line);background:var(--card);color:var(--ink);
    border-radius:9px;padding:10px 12px;font-size:15px;font-weight:600;
    letter-spacing:1.5px;text-align:center;outline:none;text-transform:uppercase;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  .cd-input:focus{border-color:var(--neoes-2)}
  .cd-input.match{border-color:var(--danger)}
  .cd-actions{display:flex;gap:8px;margin-top:4px}
  .cd-actions button{flex:1;padding:11px 0;border-radius:9px;border:0;cursor:pointer;font-size:14px;font-weight:700}
  .cd-cancel{background:rgba(0,0,0,.06);color:var(--ink)}
  html.dark .cd-cancel{background:rgba(255,255,255,.07)}
  .cd-ok{background:#fdecee;color:var(--danger);opacity:.45;cursor:not-allowed}
  html.dark .cd-ok{background:#3A2026;color:#FF8B96}
  .cd-ok.enabled{background:var(--danger);color:#fff;opacity:1;cursor:pointer}
  .cd-actions button:active{transform:scale(.98)}

  /* v126: inline SVG marks for car brands in the rank list. Color inherits
     from the surrounding text via stroke=currentColor. */
  .rk-icon .rk-svg{
    height:14px;width:auto;max-width:46px;display:inline-block;vertical-align:middle;
    color:var(--ink);opacity:.9;
  }
  .ff-rank-display .rk-body ol li .rk-icon .rk-svg{height:13px}

  /* === v128 Add-to-Contacts button on hero === */
  /* Make hero-name flex so the button sits to the right of the title block,
     vertically centered on the h2. Existing layout (h2 + sub + ret) becomes
     a flex column inside .hero-name-text. */
  .hero-name{display:flex;align-items:flex-end;gap:10px}
  .hero-name .hero-name-text{flex:1;min-width:0}
  /* Match the .hero-actions icon style (dark circle, blurred backdrop) */
  .hero-name .hero-add-contact{
    pointer-events:auto;
    align-self:center;
    margin-bottom:8px;
    width:36px;height:36px;border-radius:50%;
    background:rgba(0,0,0,.40);color:#fff;
    display:grid;place-items:center;border:0;cursor:pointer;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    flex-shrink:0;
  }
  .hero-name .hero-add-contact:active{background:rgba(0,0,0,.6)}
  .hero-name .hero-add-contact svg{
    width:18px;height:18px;stroke:currentColor;fill:none;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  }

  /* ============ PERSONALITY LAB (v146) ============ */
  /* --- results section (inside the profile detail sheet) --- */
  .pl-flower{display:block;margin:0 auto 2px}
  .pl-lens-prompt{text-align:center;font-size:11px;font-weight:700;color:var(--ink-2);
    text-transform:uppercase;letter-spacing:.6px;margin:2px 0 7px}
  .pl-lens-row{display:flex;gap:5px;justify-content:center;margin:0 0 10px;flex-wrap:wrap}
  .pl-lens{padding:6px 12px;border-radius:99px;font-size:12px;font-weight:700;cursor:pointer;
    background:var(--bg);color:var(--ink-2);border:1.5px solid var(--line)}
  .pl-lens.on{background:var(--neoes-1);color:#fff;border-color:var(--neoes-1)}
  .pl-lens-break{flex-basis:100%;height:0}
  .pl-arch{text-align:center;border-radius:13px;padding:13px 12px 14px;
    background:linear-gradient(135deg,var(--neoes-4),var(--card));border:1px solid var(--neoes-3)}
  .pl-aline{display:flex;align-items:center;justify-content:center;gap:11px;min-height:48px}
  .pl-aem{font-size:33px;width:48px;text-align:center;line-height:48px}
  .pl-aface{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 12%;
    display:none;box-shadow:0 0 0 2.5px var(--gold1),0 2px 6px rgba(0,0,0,.3)}
  .pl-aface.clickable{cursor:pointer;box-shadow:0 0 0 2.5px var(--neoes-3),0 2px 6px rgba(0,0,0,.3)}
  .pl-aface.clickable:active{transform:scale(.94)}
  .pl-atitle{font-size:21px;font-weight:800;color:var(--neoes-1);
    font-family:'Cinzel','Palatino',Georgia,serif;letter-spacing:.3px;line-height:1.1}
  .pl-atag{font-size:12.5px;color:var(--ink-2);margin-top:8px;line-height:1.4}
  .pl-empty{text-align:center;padding:12px 10px;color:var(--ink-2);font-size:13px}
  .pl-take-btn{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:9px 18px;border:0;
    border-radius:99px;background:linear-gradient(160deg,var(--neoes-3),var(--neoes-2));color:#fff;
    font-weight:800;font-size:13.5px;cursor:pointer}
  .pl-take-btn:active{transform:scale(.96)}

  /* --- quiz sheet (full-screen; take / retake) --- */
  .pl-quiz-sheet .sheet-body{display:flex;flex-direction:column;padding:0 14px 16px;min-height:0}
  .pl-quiz-card{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:6px 4px 10px;min-height:0}
  .pl-qtop{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:2px}
  .pl-qdots{display:flex;gap:6px;justify-content:center}
  .pl-qdot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:all .15s}
  .pl-qdot.done{background:var(--neoes-2)}
  .pl-qdot.cur{background:var(--neoes-1);width:11px;height:11px;box-shadow:0 0 0 3px rgba(26,58,96,.18)}
  .pl-qcount{font-size:11px;font-weight:700;color:var(--ink-2);letter-spacing:.3px}
  .pl-qtitle{font-size:26px;font-weight:800;color:var(--neoes-1);text-align:center;letter-spacing:.1px;line-height:1.12}
  .pl-qtitle::after{content:"";display:block;width:48px;height:3px;margin:8px auto 0;border-radius:99px;
    background:linear-gradient(90deg,var(--gold2),var(--gold1))}
  .pl-qhero{flex:1;display:flex;flex-direction:column;justify-content:center}
  .pl-leadin{text-align:center;font-size:15.5px;font-weight:600;color:var(--ink-2);font-style:italic;line-height:1.3;padding:0 4px}
  .pl-phrase{text-align:center;font-size:23px;font-weight:800;color:var(--neoes-1);min-height:30px;line-height:1.15;padding:2px 6px 4px}
  .pl-sl{position:relative;display:flex;align-items:center;gap:11px;padding:74px 2px 12px}
  .pl-sl input{flex:1;min-width:0;height:40px;background:transparent;-webkit-appearance:none;appearance:none;margin:0}
  .pl-sl input::-webkit-slider-runnable-track{height:12px;border-radius:99px;background:linear-gradient(90deg,#E7EEF7,#C4D5EC)}
  .pl-sl input::-moz-range-track{height:12px;border-radius:99px;background:linear-gradient(90deg,#E7EEF7,#C4D5EC)}
  .pl-sl input::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:30px;border-radius:5px;
    background:var(--neoes-1);border:2px solid #fff;box-shadow:0 1px 5px rgba(14,34,54,.45);margin-top:-9px;cursor:grab}
  .pl-sl input::-moz-range-thumb{width:10px;height:30px;border-radius:5px;
    background:var(--neoes-1);border:2px solid #fff;box-shadow:0 1px 5px rgba(14,34,54,.45);cursor:grab}
  .pl-slfill{position:absolute;height:12px;border-radius:99px;pointer-events:none;z-index:1;
    background:linear-gradient(90deg,var(--neoes-3),var(--neoes-1))}
  .pl-pole{font-size:22px;line-height:1;opacity:.55;flex-shrink:0;user-select:none}
  .pl-knob{position:absolute;transform:translate(-50%,-50%);font-size:52px;line-height:1;
    pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.28));user-select:none;z-index:2}
  .pl-halo{position:absolute;pointer-events:none;border-radius:50%;z-index:1;transform:translate(-50%,-50%)}
  .pl-btnrow{display:flex;gap:8px;justify-content:center;align-items:center;padding-top:4px}
  .pl-next,.pl-back{display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:10px 24px;min-width:116px;border:0;border-radius:99px;
    background:linear-gradient(160deg,var(--neoes-3),var(--neoes-2));
    color:#fff;font-weight:800;font-size:14px;cursor:pointer;transition:opacity .15s,transform .1s}
  .pl-next .pl-ar,.pl-back .pl-ar{flex-shrink:0}
  .pl-back .pl-ar{transform:scaleX(-1)}
  .pl-next:disabled,.pl-back:disabled{opacity:.4;cursor:default}
  .pl-next:not(:disabled):active,.pl-back:not(:disabled):active{transform:scale(.96)}
  
    html.dark .pl-qtitle, html.dark .pl-phrase, html.dark .pl-atitle{color:#CDEBFF}
    html.dark .pl-arch{background:linear-gradient(135deg,#173250,var(--card))}
    html.dark .pl-qdot.cur{box-shadow:0 0 0 3px rgba(205,235,255,.2)}
  

  /* --- Results ↔ Map swipe deck (inside the personality section) --- */
  .pl-deck{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pl-deck::-webkit-scrollbar{display:none}
  .pl-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;min-width:0}
  .pl-dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
  .pl-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer;transition:all .15s}
  .pl-dots i.on{background:var(--neoes-1);width:18px;border-radius:99px}
  .pl-swipehint{text-align:center;font-size:10.5px;color:var(--ink-2);font-style:italic;margin-top:6px}
  .pl-tabs{display:flex;gap:6px;justify-content:center;margin-top:11px}
  .pl-tab{padding:6px 15px;border-radius:99px;border:1.5px solid var(--line);background:var(--bg);
    color:var(--ink-2);font-size:12px;font-weight:700;cursor:pointer;transition:transform .1s}
  .pl-tab.on{background:var(--neoes-1);color:#fff;border-color:var(--neoes-1)}
  .pl-tab:active{transform:scale(.96)}
  /* --- team map --- */
  .pl-map{position:relative;height:342px;border-radius:12px;background:linear-gradient(180deg,#F8FAFD,#EDF2F8);overflow:hidden}
  .pl-map .pl-ax{position:absolute;font-size:10.5px;font-weight:800;letter-spacing:.7px;color:var(--ink-2);opacity:.85}
  .pl-map .pl-ax.axv-l{writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}
  .pl-map .pl-ax.axv-r{writing-mode:vertical-rl;transform:translateY(-50%)}
  .pl-axline-v{position:absolute;left:50%;top:12px;bottom:12px;width:1px;background:var(--line)}
  .pl-axline-h{position:absolute;top:50%;left:10px;right:10px;height:1px;background:var(--line)}
  .pl-zone{position:absolute;transform:translate(-50%,-50%);text-align:center;z-index:0;
    font:italic 700 13px/1.1 Georgia,'Times New Roman',serif;color:var(--neoes-3);opacity:.5;pointer-events:none;white-space:nowrap}
  .pl-stage{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
  .pl-pd{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--neoes-3);opacity:.85;transform:translate(-50%,-50%);cursor:pointer}
  .pl-pd::after{content:"";position:absolute;inset:-9px}
  .pl-you{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;z-index:4}
  .pl-you img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 12%;
    box-shadow:0 0 0 3px var(--gold1),0 0 0 5px rgba(201,154,26,.35),0 2px 8px rgba(0,0,0,.4);display:block}
  .pl-you::after{content:"YOU";position:absolute;top:100%;left:50%;transform:translateX(-50%);
    font-size:8.5px;font-weight:900;color:#8A6510;text-shadow:0 1px 0 #fff,0 0 3px #fff;margin-top:2px}
  .pl-fam{position:absolute;transform:translate(-50%,-50%);text-align:center}
  .pl-fam img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:50% 15%;
    box-shadow:0 0 0 2px var(--gold1),0 1px 3px rgba(0,0,0,.35);display:block;margin:0 auto}
  .pl-fam .nm{font-size:7.5px;font-weight:700;color:#8A6510;margin-top:1px;white-space:nowrap;text-shadow:0 1px 0 #fff}
  .pl-pop{position:absolute;display:none;z-index:9;transform:translate(-50%,calc(-100% - 11px));
    background:#fff;border-radius:13px;box-shadow:0 8px 22px rgba(0,0,0,.30);padding:7px 9px 8px;text-align:center;cursor:pointer;min-width:60px}
  .pl-pop img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 12%;box-shadow:0 0 0 2px var(--neoes-3);display:block;margin:0 auto}
  .pl-pop .nm{font-size:11px;font-weight:800;color:#0E2236;margin-top:4px;white-space:nowrap}
  .pl-pop .go{font-size:8.5px;font-weight:700;color:var(--neoes-2);margin-top:1px}
  .pl-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff}
  .pl-refresh{position:absolute;left:7px;top:7px;z-index:6;width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    border:2px solid var(--neoes-1);background:linear-gradient(155deg,var(--neoes-3),var(--neoes-1));color:#fff;
    box-shadow:0 2px 7px rgba(14,34,54,.30),0 0 0 2px rgba(255,255,255,.6)}
  .pl-refresh:active{transform:scale(.92)}
  .pl-refresh svg{display:block}
  .pl-refresh.spin svg{animation:pl-spin360 .5s ease}
  @keyframes pl-spin360{to{transform:rotate(360deg)}}
  .pl-expand{position:absolute;right:6px;bottom:6px;z-index:6;width:27px;height:27px;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.92);color:var(--neoes-1);cursor:pointer;box-shadow:0 2px 6px rgba(14,34,54,.16)}
  .pl-expand:active{transform:scale(.94)}
  .pl-mapnote{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:10px;color:var(--ink-2);pointer-events:none;z-index:7}
  .pl-mapnote b{color:var(--neoes-1)}
  #plMapFull{position:fixed;inset:0;z-index:1100;background:var(--bg);display:none;flex-direction:column}
  #plMapFull.on{display:flex}
  .plmf-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px}
  .plmf-title{font-size:17px;font-weight:800;color:var(--neoes-1)}
  .plmf-close{width:34px;height:34px;border:0;border-radius:50%;background:var(--card);color:var(--ink);font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.16)}
  .plmf-body{flex:1;display:flex;padding:0 10px;min-height:0}
  .plmf-body .pl-map{flex:1;height:auto;border-radius:14px;touch-action:none}
  #plMapFull .pl-expand{display:none}
  .plmf-hint{text-align:center;font-size:11px;color:var(--ink-2);font-style:italic;padding:8px 0 14px}
  
    html.dark .pl-map{background:linear-gradient(180deg,#0F2A44,#0A1A2A)}
    html.dark .plmf-title{color:#CDEBFF}
    /* legible on the dark map: light gold + a soft dark shadow (no white halo) */
    html.dark .pl-fam .nm, html.dark .pl-you::after{color:#F2D274;text-shadow:0 1px 3px rgba(0,0,0,.75)}
    html.dark .pl-pop{background:#16324B}
    html.dark .pl-pop .nm{color:#EAF2F8}
    html.dark .pl-pop::after{border-top-color:#16324B}

  /* Appearance segmented control (Settings) */
  .theme-seg{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;flex-shrink:0}
  .theme-seg button{padding:6px 13px;border:0;background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:700;cursor:pointer}
  .theme-seg button.on{background:var(--neoes-1);color:#fff}

  /* ---- Larger touch targets (v155) — invisible ::after hit-area extensions so small
     icon-only controls are easier to tap on a phone, with NO visual change. Each hit box
     is sized to its context: isolated controls get a full ~44px; horizontally-packed rows
     get a box no wider than (button + gap) so neighbours meet but never overlap; dense/
     stacked controls get only a modest bump so cross-row taps can't be stolen. ---- */
  .icon-btn, .nudge .nudge-x, .hero-actions button, .hero-actions a,
  .row-line .contact-acts a, .ml-row .ml-rm, .ml-row .ml-ed, .ff-tag-x,
  .family-icons-edit .fi-del-below, .family-icons-edit .fi-cam{ position:relative; }
  /* (.hero-back and .clear-btn are already position:absolute — don't override.) */
  .icon-btn::after, .hero-back::after, .clear-btn::after, .nudge .nudge-x::after,
  .hero-actions button::after, .hero-actions a::after, .row-line .contact-acts a::after,
  .ml-row .ml-rm::after, .ml-row .ml-ed::after, .ff-tag-x::after,
  .family-icons-edit .fi-del-below::after, .family-icons-edit .fi-cam::after{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  }
  .icon-btn::after, .hero-back::after, .nudge .nudge-x::after{ width:44px;height:44px; }
  .clear-btn::after{ width:36px;height:36px; }
  .hero-actions button::after, .hero-actions a::after{ width:42px;height:46px; }   /* 36px + 6px gap */
  .row-line .contact-acts a::after{ width:34px;height:40px; }                      /* 30px + 4px gap */
  .ml-row .ml-rm::after, .ml-row .ml-ed::after{ width:30px;height:30px; }          /* 24px + 8px gap */
  .ff-tag-x::after{ width:24px;height:26px; }                                      /* packed tags */
  .family-icons-edit .fi-del-below::after, .family-icons-edit .fi-cam::after{ width:30px;height:24px; }

  /* ==================== GAMES ARENA — app-native, full-screen (v163) ==================== */
  /* Home teaser — a visual sibling of .ib-bar (app-native, no neon). */
  #arenaTeaser{padding:8px 8px 0}
  #arenaTeaser:empty{display:none;padding:0}
  .tg-bar{width:100%;display:flex;align-items:center;gap:8px;
    padding:9px 12px;border-radius:12px;border:0;cursor:pointer;
    background:var(--card);box-shadow:var(--shadow-sm);
    font-size:12.5px;color:var(--ink);text-align:left}
  .tg-bar:active{transform:scale(.985)}
  .tg-em{font-size:15px;line-height:1;flex-shrink:0}
  .tg-q{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tg-q b{color:var(--neoes-1)}
  html.dark .tg-q b{color:#9DD3EE}
  .tg-ct{flex-shrink:0;font-size:11px;font-weight:700;color:var(--neoes-2);letter-spacing:.2px}
  .tg-ct b{color:var(--neoes-1)}
  html.dark .tg-ct b{color:#9DD3EE}

  /* Full-screen arena overlay (uses the app's #plMapFull on/off pattern) */
  #arenaFull{position:fixed;inset:0;z-index:1100;background:var(--bg);
    display:none;flex-direction:column;color:var(--ink)}
  #arenaFull.on{display:flex}
  .arf-bar{display:flex;align-items:center;justify-content:space-between;
    padding:calc(10px + var(--safe-top,0px)) 14px 8px}
  .arf-title{font-family:'Cinzel',serif;font-size:18px;font-weight:700;letter-spacing:.5px;color:var(--neoes-1)}
  html.dark .arf-title{color:#CDEBFF}
  .arf-close{width:34px;height:34px;border:0;border-radius:50%;background:var(--card);
    color:var(--ink);font-size:16px;font-weight:800;cursor:pointer;box-shadow:var(--shadow-sm)}
  .ar-tabs{display:flex;gap:2px;padding:0 10px;flex:0 0 auto;border-bottom:1px solid var(--line)}
  .ar-tab{flex:1;min-height:42px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;
    font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.3px;border-bottom:2px solid transparent}
  .ar-tab.on{color:var(--neoes-1);border-bottom-color:var(--neoes-3)}
  html.dark .ar-tab.on{color:#9DD3EE;border-bottom-color:#9DD3EE}
  .arf-body{flex:1;min-height:0;display:flex;flex-direction:column;
    padding:10px 12px calc(12px + var(--safe-bot,0px));overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* Play-tab hero + primary action */
  .ar-hero{text-align:center;padding:8px 4px 2px}
  .ar-hero-k{font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:.22em;
    text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
  .ar-hero-t{font-family:'Cinzel',serif;font-size:21px;font-weight:700;color:var(--neoes-1)}
  html.dark .ar-hero-t{color:#CDEBFF}
  .ar-hero-s{font-size:12px;color:var(--ink-2);margin-top:3px}
  .ar-play{display:block;width:100%;margin:12px 0 4px;min-height:50px;border:0;border-radius:12px;
    background:var(--neoes-1);color:#fff;font-family:'Cinzel',serif;font-weight:700;font-size:16px;
    letter-spacing:.5px;cursor:pointer;box-shadow:var(--shadow)}
  .ar-play:active{transform:scale(.99);filter:brightness(1.06)}
  /* played state — a compact one-row status strip (v179: was a tall stacked card) */
  .ar-done{display:flex;align-items:center;gap:9px;background:var(--card);border-radius:11px;
    box-shadow:var(--shadow-sm);padding:7px 9px 7px 11px;margin:6px 0 2px;border-left:3px solid var(--good)}
  .ar-done-ic{width:20px;height:20px;flex:0 0 auto;border-radius:50%;background:var(--good);
    color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
  .ar-done-main{flex:1;min-width:0}
  .ar-done-t{font-size:12.5px;font-weight:800;color:var(--ink)}
  .ar-done-t b{color:var(--neoes-1)}
  html.dark .ar-done-t b{color:#9DD3EE}
  .ar-done-s{font-size:11px;color:var(--ink-2)}
  /* "Result" — a quiet button on the right of the strip */
  .ar-review{flex:0 0 auto;background:transparent;border:1px solid var(--line);border-radius:8px;
    color:var(--neoes-1);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:6px 12px}
  html.dark .ar-review{color:#CDEBFF;border-color:rgba(150,190,225,.25)}
  .ar-review:active{filter:brightness(1.15)}

  /* boards */
  .ar-board{margin-top:8px}
  .ar-board-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
    margin:2px 0 6px;font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--neoes-1)}
  html.dark .ar-board-h{color:#CDEBFF}
  .ar-sub{font-size:11px;color:var(--ink-2);margin:-2px 0 8px}
  .ar-seg{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
  .ar-sbtn{border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-size:10.5px;
    font-weight:700;padding:4px 10px;cursor:pointer}
  .ar-sbtn.on{background:var(--neoes-1);color:#fff}
  .ar-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px;margin-bottom:4px;
    background:var(--card);box-shadow:var(--shadow-sm);cursor:pointer}
  .ar-row.me{box-shadow:var(--shadow-sm),inset 0 0 0 1.5px var(--neoes-3)}
  .ar-row.lead{box-shadow:var(--shadow-sm),inset 0 0 0 1.5px var(--warn)}
  .ar-rk{font-size:13px;font-weight:800;color:var(--ink-2);min-width:22px;text-align:right}
  .ar-row.lead .ar-rk{color:var(--warn)}
  /* self-contained avatar — no global .photo base exists */
  .ar-av{position:relative;overflow:hidden;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
    color:#fff;font-weight:700;font-size:11px;background:linear-gradient(135deg,var(--g1,#2A8FBE),var(--g2,#175D8E))}
  .ar-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
  .ar-av .person-silhouette{width:60%;height:60%;opacity:.85}
  .ar-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:13px;font-weight:700;color:var(--ink)}
  .ar-sc{flex:0 0 auto;font-size:14px;font-weight:800;color:var(--neoes-1)}
  html.dark .ar-sc{color:#9DD3EE}
  .ar-sc small{font-size:9px;color:var(--ink-2);margin-left:2px;font-weight:600}
  .ar-titles{display:inline-flex;gap:7px}
  .ar-titles i{font-style:normal;font-size:12px;color:var(--ink)}
  .ar-crown{filter:none}
  .ar-note{text-align:center;color:var(--ink-2);font-size:12.5px;padding:16px 8px;line-height:1.55}
  .ar-note-s{font-size:11px;color:var(--ink-2);opacity:.8}
  .ar-pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 0}
  .ar-pick{display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--card);
    box-shadow:var(--shadow-sm);border:0;border-radius:10px;padding:9px 4px;cursor:pointer;color:var(--ink);font-family:inherit}
  .ar-pick span{font-size:10.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .ar-pick:active{transform:scale(.97)}
  /* recent-games history chips (Play tab) */
  .ar-hist{display:flex;flex-wrap:wrap;gap:6px}
  .ar-hchip{display:flex;align-items:center;gap:5px;background:var(--card);box-shadow:var(--shadow-sm);
    border-radius:99px;padding:4px 10px 4px 8px;font-size:11.5px}
  .ar-hg{font-size:13px}
  .ar-hd{color:var(--ink-2)}
  .ar-hs{font-weight:800;color:var(--neoes-1)}
  html.dark .ar-hs{color:#9DD3EE}

  /* One-time "pick your name" prompt (only shows before an identity exists) */
  .ar-playas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:center;
    font-size:12px;color:var(--ink-2);margin:8px 0 4px}
  .ar-playas b{color:var(--ink)}

  /* 3-column tight leaderboard (This Week / Month / Year) */
  /* Centered All/Docs/Staff filter — the whole heading row now (title removed, v179) */
  .ar-boardbar{display:flex;justify-content:center;margin:2px 0 8px}
  /* Three standings columns, split by a subtle full-height divider in each gutter */
  .ar-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:4px}
  .ar-col{min-width:0;padding:0 8px}
  .ar-col.sep{border-left:1px solid var(--line)}
  html.dark .ar-col.sep{border-left-color:rgba(150,190,225,.14)}
  .ar-col-h{display:block;width:100%;
    font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--neoes-1);text-align:center;padding:1px 0 6px;margin-bottom:5px}
  html.dark .ar-col-h{color:#CDEBFF}
  /* Mini race-chart button — a thumbnail of the bump chart itself, image-only (v178):
     short, and the graphic stretches to fill the whole button */
  .ar-racego{display:block;width:100%;
    background:var(--card);border:1px solid var(--line);border-radius:9px;cursor:pointer;
    font-family:inherit;padding:4px 5px;margin-bottom:5px;box-shadow:var(--shadow-sm)}
  .ar-racego svg{width:100%;height:20px;display:block}
  html.dark .ar-racego{background:#10273B;border-color:rgba(150,190,225,.18)}
  .ar-racego:active{filter:brightness(1.12)}

  /* Race-over-time bump chart */
  .ar-racecard{background:var(--card);border-radius:12px;box-shadow:var(--shadow-sm);padding:8px 6px;margin-top:4px}
  .ar-racewrap{width:100%;overflow-x:auto}
  .ar-race{width:100%;min-width:320px;height:auto;display:block}
  .ar-race-grid{stroke:var(--line);stroke-width:1;opacity:.55}
  .ar-race-lbl{fill:var(--ink-2);font-size:8.5px;font-family:'Helvetica Neue',Arial,sans-serif}
  .ar-race-nm{fill:var(--ink-2);font-size:9px;font-weight:600;font-family:'Helvetica Neue',Arial,sans-serif}
  .ar-race-nm.you{fill:var(--ink);font-size:10px;font-weight:800}
  html.dark .ar-race-nm.you{fill:#EAF2F8}
  .ar-raceswitch{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;margin-top:10px}
  .ar-rsw{border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-size:11px;font-weight:700;padding:6px 14px;cursor:pointer}
  .ar-rsw.on{background:var(--neoes-1);color:#fff}
  .ar-crow{display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:5px;margin-bottom:2px;font-size:11px;cursor:pointer}
  .ar-crow.me{background:var(--neoes-4)}
  html.dark .ar-crow.me{background:#173247}
  .ar-crk{color:var(--ink-2);min-width:15px;text-align:right;font-weight:700}
  .ar-crow.lead .ar-crk{color:var(--warn)}
  .ar-cnm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:600}
  .ar-csc{flex:0 0 auto;color:var(--neoes-1);font-weight:800}
  html.dark .ar-csc{color:#9DD3EE}
  .ar-col-empty{text-align:center;color:var(--ink-2);font-size:11px;padding:8px 0}

  /* "Your games" list */
  .ar-glist{display:flex;flex-direction:column;gap:4px}
  .ar-grow{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
    background:var(--card);box-shadow:var(--shadow-sm);font-size:12.5px}
  .ar-gg{font-size:15px;flex:0 0 auto}
  .ar-gd{color:var(--ink-2);flex:0 0 auto;min-width:44px}
  .ar-gnm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:600}
  .ar-gsc{flex:0 0 auto;font-weight:800;color:var(--neoes-1)}
  html.dark .ar-gsc{color:#9DD3EE}
  .ar-grank{flex:0 0 auto;min-width:48px;text-align:right;color:var(--ink-2);font-weight:700}
  .ar-grank small{font-weight:600;opacity:.75}

  /* --- Today podium (Play tab): centered 2nd·1st·3rd with faces + stepped pedestals --- */
  .ar-podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:12px 2px 8px}
  .ar-pod{flex:1 1 0;min-width:0;max-width:34%;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;cursor:pointer}
  .ar-pod:active{transform:scale(.98)}
  .ar-pod-medal{font-size:19px;line-height:1}
  .ar-pod.first .ar-pod-medal{font-size:24px}
  .ar-pod-av{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--neoes-3)}
  .ar-pod.first .ar-pod-av{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--warn),0 0 12px rgba(198,139,23,.55)}
  .ar-pod-nm{font-size:11.5px;font-weight:700;color:var(--ink);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ar-pod-sc{font-size:15px;font-weight:800;color:var(--neoes-1);line-height:1.1}
  html.dark .ar-pod-sc{color:#9DD3EE}
  .ar-pod-base{width:100%;border-radius:9px 9px 0 0;display:grid;place-items:center;margin-top:2px;
    font-weight:800;font-size:13px;color:var(--neoes-2);background:linear-gradient(180deg,var(--neoes-4),transparent)}
  html.dark .ar-pod-base{background:linear-gradient(180deg,#1C3A58,transparent);color:#9DD3EE}
  .ar-pod.first .ar-pod-base{height:44px;color:var(--warn);background:linear-gradient(180deg,rgba(198,139,23,.32),transparent)}
  .ar-pod.second .ar-pod-base{height:32px}
  .ar-pod.third .ar-pod-base{height:22px}
  .ar-list{margin-top:2px}

  /* --- "You" dashboard (v171): one panel, tight 3-across grid mixing dials + stat tiles --- */
  .ar-pcard{display:flex;align-items:center;gap:11px;background:var(--card);border-radius:12px;
    box-shadow:var(--shadow-sm);padding:8px 12px;margin:2px 0 8px}
  .ar-pcard-av{box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--neoes-3)}
  .ar-pcard-main{flex:1;min-width:0}
  .ar-pcard-nm{font-family:'Cinzel',serif;font-size:17px;font-weight:700;color:var(--neoes-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.dark .ar-pcard-nm{color:#CDEBFF}

  .ar-dash{background:var(--card);border-radius:14px;box-shadow:var(--shadow-sm);padding:9px 7px 8px}
  .ar-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 0}
  .ar-tile{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2px 1px 3px;min-width:0}

  /* speedometer dial — 270° arc + ticks + glowing needle (SVG in home.js); sweeps in on load */
  .ar-gwrap{position:relative;width:96px;height:96px;--acc:var(--neoes-3)}
  .ar-gsvg{width:100%;height:100%;display:block;overflow:visible}
  .ar-gwrap::before{content:"";position:absolute;inset:16%;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%)}
  .g-track{fill:none;stroke:var(--line);stroke-width:8}
  .g-val{fill:none;stroke:var(--acc);stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 0 2px var(--acc));
    transition:stroke-dasharray .9s cubic-bezier(.22,.61,.36,1)}
  html.dark .g-val{filter:drop-shadow(0 0 4px var(--acc))}
  .g-major{stroke:var(--ink-2);stroke-width:2;opacity:.5}
  .g-needle{stroke:var(--acc);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 2px var(--acc));
    transform-box:view-box;transform-origin:60px 60px;transition:transform 1s cubic-bezier(.34,1.4,.5,1)}
  .g-hub{fill:var(--acc)}
  .ar-gwrap.lead .g-val,.ar-gwrap.lead .g-needle{stroke:var(--warn)}
  .ar-gwrap.lead .g-hub{fill:var(--warn)}
  .ar-gwrap.lead .g-val{filter:drop-shadow(0 0 5px rgba(198,139,23,.85))}
  .ar-gwrap.lead{animation:arGoldPulse 2.4s ease-in-out .9s 3}
  @keyframes arGoldPulse{0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px rgba(198,139,23,.6))}}
  .ar-gcenter{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:11%}
  .ar-gcenter b{font-size:20px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:.2px;
    font-variant-numeric:tabular-nums;text-shadow:0 1px 2px var(--card),0 0 4px var(--card)}
  .ar-gwrap.lead .ar-gcenter b{color:var(--warn)}
  .ar-glabel{margin-top:2px;font-size:10px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--neoes-1)}
  html.dark .ar-glabel{color:#9DD3EE}
  .ar-gsub{font-size:9px;color:var(--ink-2);margin-top:1px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

  /* non-dial stat tile (flame / medal) + sparkline tile */
  .ar-stat{justify-content:flex-start;padding-top:8px}
  .ar-stat-em{font-size:19px;line-height:1}
  .ar-stat-n{font-size:30px;font-weight:800;line-height:1.02;font-variant-numeric:tabular-nums;letter-spacing:.3px;margin-top:1px}
  .ar-sparktile{padding-top:20px}
  .ar-spark{width:86%;height:30px;display:block;margin:0 auto}
  .ar-spark-fill{fill:var(--acc);opacity:.14}
  .ar-spark-line{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    transition:stroke-dashoffset 1s cubic-bezier(.22,.61,.36,1)}
  .ar-spark-dot{fill:var(--acc)}
  .ar-spark-empty{display:flex;align-items:center;justify-content:center;height:30px;color:var(--ink-2)}

  /* rank strip inside the same panel */
  .ar-rankstrip{margin-top:7px;padding-top:8px;border-top:1px solid var(--line)}
  .ar-rank-h{font-family:'Cinzel',serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
    color:var(--neoes-1);text-align:center;margin-bottom:5px}
  html.dark .ar-rank-h{color:#9DD3EE}
  .ar-ranks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .ar-rnk{display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:0 3px;min-width:0}
  .ar-rnk-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--ink-2);font-weight:700}
  .ar-rnk-r{font-size:19px;font-weight:800;color:var(--neoes-1);font-variant-numeric:tabular-nums}
  html.dark .ar-rnk-r{color:#9DD3EE}
  .ar-rnk.lead .ar-rnk-r{color:var(--warn)}
  .ar-rnk-r.dim{color:var(--ink-2)}
  .ar-rnk-o{font-size:9px;color:var(--ink-2)}
  .ar-rnk-bar{width:100%;height:4px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:4px}
  .ar-rnk-bar i{display:block;height:100%;background:var(--neoes-3);border-radius:99px}
  .ar-rnk.lead .ar-rnk-bar i{background:var(--warn)}

  /* --- Eye-anatomy level chip (v173) --- */
  .eye-ic{width:16px;height:16px;display:block}
  /* Big eye-level button on the You card (v176): large glowing icon + the part name */
  .ar-lvbig{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;
    background:transparent;border:0;cursor:pointer;font-family:inherit;padding:2px 4px}
  .ar-lvbig-ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
    color:var(--neoes-2);background:radial-gradient(circle at 50% 32%,var(--neoes-4),var(--bg));
    box-shadow:0 0 0 1.5px color-mix(in srgb,var(--neoes-3) 55%,transparent),0 0 14px color-mix(in srgb,var(--neoes-3) 30%,transparent)}
  html.dark .ar-lvbig-ic{color:#9DD3EE;background:radial-gradient(circle at 50% 32%,#1C3A55,#0E2233);
    box-shadow:0 0 0 1.5px rgba(90,169,230,.45),0 0 14px rgba(90,169,230,.28)}
  .ar-lvbig-ic .eye-ic{width:32px;height:32px}
  .ar-lvbig-nm{font-family:'Cinzel',serif;font-size:12.5px;font-weight:700;color:var(--neoes-1)}
  html.dark .ar-lvbig-nm{color:#CDEBFF}
  .ar-lvbig.cornea .ar-lvbig-ic{color:var(--warn);
    box-shadow:0 0 0 1.5px rgba(198,139,23,.6),0 0 16px rgba(198,139,23,.4)}
  .ar-lvbig.cornea .ar-lvbig-nm{color:var(--warn)}
  .ar-lvbig:active .ar-lvbig-ic{filter:brightness(1.15)}
  /* --- Rival tile in the rank strip --- */
  .ar-rival{display:flex;align-items:center;gap:9px;margin-top:8px;padding:7px 9px;border-radius:10px;background:var(--bg);cursor:pointer}
  html.dark .ar-rival{background:#0E2233}
  .ar-rival.lead{cursor:default}
  .ar-rival-av{width:34px;height:34px;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--neoes-3)}
  .ar-rival-crown{font-size:22px;width:34px;text-align:center;flex:0 0 auto}
  .ar-rival-main{flex:1;min-width:0}
  .ar-rival-nm{font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ar-rival-sub{font-size:11px;color:var(--ink-2)}
  .ar-rival-sub b{color:var(--neoes-1)}
  html.dark .ar-rival-sub b{color:#9DD3EE}
  .ar-rival .ar-rnk-bar{margin-top:4px}

  /* --- Progress ("Your climb") view: hero, eye ladder, badge grid --- */
  .ar-prog-hero{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:12px;box-shadow:var(--shadow-sm);padding:12px;margin-bottom:12px}
  .ar-prog-hero.cornea{box-shadow:var(--shadow-sm),0 0 0 1.5px var(--warn)}
  .ar-prog-ic{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--bg);color:var(--neoes-2)}
  html.dark .ar-prog-ic{background:#0E2233;color:#9DD3EE}
  .ar-prog-hero.cornea .ar-prog-ic{color:var(--warn)}
  .ar-prog-ic .eye-ic{width:28px;height:28px}
  .ar-prog-part{font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--neoes-1)}
  html.dark .ar-prog-part{color:#CDEBFF}
  .ar-prog-xp{font-size:12px;color:var(--ink-2)}
  .ar-prog-xp b{color:var(--neoes-1)}
  html.dark .ar-prog-xp b{color:#9DD3EE}
  .ar-ladder{display:flex;flex-direction:column;gap:4px}
  .ar-rung{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;background:var(--card);box-shadow:var(--shadow-sm)}
  .ar-rung-ic{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--bg);color:var(--ink-2)}
  html.dark .ar-rung-ic{background:#0E2233}
  .ar-rung-ic .eye-ic{width:20px;height:20px}
  .ar-rung-main{flex:1;min-width:0}
  .ar-rung-nm{font-size:13px;font-weight:800;color:var(--ink)}
  .ar-rung-sub{font-size:10.5px;color:var(--ink-2)}
  .ar-rung-tag{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--ink-2)}
  .ar-rung.current{box-shadow:var(--shadow-sm),inset 0 0 0 1.5px var(--neoes-3)}
  .ar-rung.current .ar-rung-ic{color:var(--neoes-1);background:var(--neoes-4)}
  html.dark .ar-rung.current .ar-rung-ic{color:#9DD3EE;background:#173247}
  .ar-rung.current .ar-rung-tag{color:var(--neoes-2)}
  .ar-rung.passed .ar-rung-ic,.ar-rung.passed .ar-rung-tag{color:var(--good)}
  .ar-rung.locked{opacity:.6}
  .ar-rung.cornea .ar-rung-ic{color:var(--warn)}
  .ar-rung.cornea.current{box-shadow:var(--shadow-sm),inset 0 0 0 1.5px var(--warn)}
  .ar-badges{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  .ar-badge{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--card);box-shadow:var(--shadow-sm);border-radius:11px;padding:9px 5px}
  .ar-badge-disc{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:radial-gradient(circle at 50% 35%,var(--neoes-4),var(--bg))}
  html.dark .ar-badge-disc{background:radial-gradient(circle at 50% 35%,#1c3a55,#0e2233)}
  .ar-badge.on .ar-badge-disc{background:radial-gradient(circle at 50% 35%,rgba(198,139,23,.35),var(--bg));box-shadow:0 0 8px rgba(198,139,23,.3)}
  .ar-badge-nm{font-size:10.5px;font-weight:800;color:var(--ink);margin-top:4px}
  .ar-badge-desc{font-size:9px;color:var(--ink-2);line-height:1.25;margin-top:1px}
  /* Locked = mystery: identity hidden behind a "?", only the objective shows */
  .ar-badge.locked{border:1px dashed rgba(0,0,0,.14)}
  html.dark .ar-badge.locked{border-color:rgba(255,255,255,.12)}
  .ar-badge.locked .ar-badge-disc{background:radial-gradient(circle at 50% 35%,var(--bg),var(--card));color:var(--ink-2);font-weight:800;font-size:22px;opacity:.85}
  .ar-badge.locked .ar-badge-nm{color:var(--ink-2);letter-spacing:2px;opacity:.7}
  .ar-badge.locked .ar-badge-desc b{color:var(--neoes-2)}
  html.dark .ar-badge.locked .ar-badge-desc b{color:#9DD3EE}
  /* Reveal: earned badges pop + sweep a shine when the Progress view opens (staggered) */
  @keyframes ar-badge-pop{0%{transform:scale(.55);opacity:0}62%{transform:scale(1.09)}100%{transform:scale(1);opacity:1}}
  @keyframes ar-badge-shine{0%{transform:translateX(-140%) skewX(-16deg)}100%{transform:translateX(240%) skewX(-16deg)}}
  .ar-badge.on{animation:ar-badge-pop .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--bi,0)*80ms)}
  .ar-badge.on::after{content:"";position:absolute;top:0;left:0;width:45%;height:100%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-140%) skewX(-16deg);animation:ar-badge-shine .85s ease-out both;animation-delay:calc(var(--bi,0)*80ms + .4s)}
  html.dark .ar-badge.on::after{background:linear-gradient(100deg,transparent,rgba(198,139,23,.5),transparent)}
  @media(prefers-reduced-motion:reduce){.ar-badge.on{animation:none}.ar-badge.on::after{display:none}}
  /* "You" race readout — a compact gold strip under the bump chart for outside-top-8 players */
  .ar-yourace{margin-top:8px;padding:8px 10px;border-radius:10px;cursor:pointer;
    background:linear-gradient(180deg,color-mix(in srgb,var(--warn) 16%,var(--card)),var(--card));
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--warn) 55%,transparent)}
  .ar-yr-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  .ar-yr-you{font-size:12px;font-weight:800;color:var(--neoes-1)}
  html.dark .ar-yr-you{color:#CDEBFF}
  .ar-yr-rank{font-size:13px;font-weight:800;color:#B5820F}
  html.dark .ar-yr-rank{color:var(--warn)}
  .ar-yr-rank small{font-size:10px;font-weight:600;color:var(--ink-2)}
  .ar-yr-track{display:flex;gap:4px;margin-top:5px}
  .ar-yr-cell{flex:1;text-align:center;font-size:10.5px;font-weight:700;color:var(--ink-2);
    padding:3px 0;border-radius:5px;background:var(--bg)}
  html.dark .ar-yr-cell{background:#0E2233}

  /* v175: frozen-snapshot install warning (only ever shows on <hash>.neoes.pages.dev) */
  #pinnedBanner{position:fixed;left:10px;right:10px;bottom:12px;z-index:9999;
    display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;
    background:#3A2A08;color:#F5E3B8;font-size:13px;line-height:1.4;
    box-shadow:0 6px 22px rgba(0,0,0,.45),inset 0 0 0 1.5px #C68B17}
  #pinnedBanner b{color:#FFD87A}
  #pinnedBanner button{flex:0 0 auto;border:0;border-radius:8px;font-family:inherit;
    font-weight:700;font-size:12.5px;padding:8px 10px;cursor:pointer}
  #pinnedBanner #pinnedGo{background:#C68B17;color:#241800}
  #pinnedBanner #pinnedX{background:transparent;color:#F5E3B8;font-size:15px;padding:8px 6px}

  @media(prefers-reduced-motion:reduce){
    .g-val,.g-needle,.ar-spark-line{transition:none!important}
    .ar-gwrap.lead{animation:none!important}
  }

  /* EyeDLE — app-native; fits the screen (cell size set by JS via --cell) */
  .eyd{flex:1;min-height:0;display:flex;flex-direction:column;padding:2px 0}
  .eyd-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;flex:0 0 auto}
  .eyd-title{font-family:'Cinzel',serif;font-weight:700;font-size:15px;color:var(--neoes-1)}
  html.dark .eyd-title{color:#CDEBFF}
  .eyd-hint{font-size:11px;color:var(--ink-2)}
  .eyd-grid{flex:1;min-height:0;display:grid;justify-content:center;align-content:safe center;gap:5px;overflow:auto;
    grid-template-columns:repeat(var(--eyd-cols,5),var(--cell,44px));grid-auto-rows:var(--cell,44px)}
  .eyd-cell{display:grid;place-items:center;font-weight:800;color:var(--ink);
    font-size:calc(var(--cell,44px) * .5);line-height:1;border:2px solid var(--line);border-radius:6px;
    background:var(--eyd-cellbg,var(--card));text-transform:uppercase}
  html.dark .eyd-cell{--eyd-cellbg:#0A1F2E}
  .eyd-cell.filled{border-color:var(--neoes-3)}
  .eyd-cell.hit{background:var(--good);border-color:var(--good);color:#fff}
  .eyd-cell.near{background:var(--warn);border-color:var(--warn);color:#fff}
  .eyd-cell.miss{background:var(--ink-2);border-color:var(--ink-2);color:#fff;opacity:.55}
  .eyd-msg{flex:0 0 auto;text-align:center;min-height:15px;color:var(--neoes-2);font-size:12px;font-weight:600;margin:2px 0}
  .eyd-keys{flex:0 0 auto;margin-top:2px}
  .eyd-krow{display:flex;justify-content:center;gap:4px;margin-bottom:5px}
  .eyd-key{flex:1 1 auto;min-width:26px;max-width:34px;height:44px;border:0;border-radius:6px;
    background:var(--eyd-keybg,var(--neoes-4));color:var(--eyd-keyfg,var(--neoes-1));font-family:inherit;font-weight:700;font-size:14px;cursor:pointer}
  html.dark .eyd-key{--eyd-keybg:#22405C;--eyd-keyfg:#DCE6F2}
  .eyd-key.wide{flex:1.6 1 auto;max-width:56px;font-size:10.5px;letter-spacing:.4px}
  .eyd-key.hit{background:var(--good);color:#fff}
  .eyd-key.near{background:var(--warn);color:#fff}
  .eyd-key.miss{background:var(--ink-2);color:#fff;opacity:.55}
  .eyd-key:active{filter:brightness(1.1)}
  .eyd-after{flex:0 0 auto}
  .eyd-bonus{margin:8px 0 4px;text-align:center}
  .eyd-bq{color:var(--neoes-1);font-size:12.5px;font-weight:800;margin-bottom:8px}
  html.dark .eyd-bq{color:#9DD3EE}
  .eyd-bopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .eyd-bopt{padding:11px 8px;border:1px solid var(--line);border-radius:10px;background:var(--card);
    color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
  .eyd-bopt.right{background:var(--good);color:#fff;border-color:var(--good)}
  .eyd-bopt.wrong{background:var(--danger);color:#fff;border-color:var(--danger)}
  .eyd-result{text-align:center;padding:6px 4px}
  .eyd-answer{font-family:'Cinzel',serif;font-size:26px;font-weight:700;letter-spacing:4px;color:var(--neoes-1)}
  html.dark .eyd-answer{color:#CDEBFF}
  .eyd-learn{font-size:13px;color:var(--ink-2);margin:8px 0 10px;line-height:1.45}
  .eyd-learn b{color:var(--ink)}
  .eyd-scoreline{font-size:13px;color:var(--ink);margin-bottom:12px}
  .eyd-scoreline b{font-size:18px;color:var(--neoes-1)}
  html.dark .eyd-scoreline b{color:#9DD3EE}

  /* Trivia — app-native */
  .trv{flex:1;min-height:0;display:flex;flex-direction:column;padding:2px 0}
  .trv-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;flex:0 0 auto}
  .trv-title{font-family:'Cinzel',serif;font-weight:700;font-size:15px;color:var(--neoes-1)}
  html.dark .trv-title{color:#CDEBFF}
  .trv-prog{font-size:12px;color:var(--ink-2)}
  .trv-q{flex:0 0 auto;font-size:16px;font-weight:700;color:var(--ink);text-align:center;margin:14px 6px;line-height:1.35;min-height:44px}
  .trv-opts{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:safe center;gap:9px;overflow-y:auto}
  .trv-opt{padding:13px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);
    box-shadow:var(--shadow-sm);color:var(--ink);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;text-align:left}
  .trv-opt:active{transform:scale(.99)}
  .trv-opt.right{background:var(--good);color:#fff;border-color:var(--good)}
  .trv-opt.wrong{background:var(--danger);color:#fff;border-color:var(--danger)}
  .trv-result{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .trv-big{font-family:'Cinzel',serif;font-size:40px;font-weight:700;color:var(--neoes-1)}
  html.dark .trv-big{color:#CDEBFF}
  .trv-sub{font-size:13px;color:var(--ink-2);margin:8px 0 14px}