/* ===== ADMIN REDESIGN v4 — neutral work palette · blue primary · color language.
     Admin DROPS brand gold: --gold/--goldbg/--goldbd are remapped to BLUE so every
     chrome accent (217 uses) recolors with zero markup changes. Gold stays client-facing
     only (booking/, m/, emails). Color language: green=go, amber=caution, red=stop,
     blue=action/info, grey=draft/done. ===== */
  :root{
    --bg:#0d0e11; --card:#16171b; --card2:#1d1e23; --well:#101116; --navbg:#101116;
    --line:#262830; --line2:#34363f; --hair:#1f2128;
    --txt:#f0f1f4; --fg:#f0f1f4; --mut:#a3a5ac; --mut2:#70727a;
    /* "gold" → BLUE (admin primary / active / info accent) */
    --gold:#4a9bff; --goldbg:#15243a; --goldbd:#23344f;
    --green:#46c98a; --greenbg:#14301f; --greenbd:#235238;
    --blue:#4a9bff; --bluebg:#15243a;
    --orange:#e0a23a; --orangebg:#33260f; --orangebd:#4a3614;   /* amber = caution */
    --red:#ff6a60; --redbg:#341818; --redtx:#ff8e86;
    --pink:#e0699e; --pinkbg:#241420;
    --dgreen:#46c98a; --dgreenbg:#14301f; --purple:#9d8bea; --purplebg:#221d33; --yellow:#e0a23a; --yellowbg:#33260f; --gray:#9aa0a6; --graybg:#1a1b1d;
    --navon:#15243a; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
    --disp:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif; --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,sans-serif;
    /* iOS radii scale — applied to shared components for the rounded Apple look */
    --r-card:18px; --r-btn:13px; --r-row:12px; --r-pill:999px; --r-sheet:24px;
  }
  [data-theme="light"]{
    --bg:#f5f6f8; --card:#ffffff; --card2:#f7f8fa; --well:#f1f2f5; --navbg:#ffffff;
    --line:#e6e7ec; --line2:#d5d7de; --hair:#eef0f3;
    --txt:#1a1b1e; --fg:#1a1b1e; --mut:#5f6168; --mut2:#9598a0;
    /* "gold" → BLUE */
    --gold:#0a73e6; --goldbg:#e8f1fe; --goldbd:#c7e0fb;
    --green:#1b9e5f; --greenbg:#e4f6ec; --greenbd:#bfe6cd;
    --blue:#0a73e6; --bluebg:#e8f1fe;
    --orange:#b9770a; --orangebg:#fbf0d8; --orangebd:#f0dcae;   /* amber = caution */
    --red:#df352b; --redbg:#fdebea; --redtx:#c5271e;
    --pink:#c2568a; --pinkbg:#fbe9f1;
    --dgreen:#1b9e5f; --dgreenbg:#e4f6ec; --purple:#6f5bd0; --purplebg:#efebfb; --yellow:#b9770a; --yellowbg:#fbf0d8; --gray:#6b7075; --graybg:#eef0f3;
    --navon:#e8f1fe; --shadow:0 1px 2px rgba(20,20,40,.04),0 6px 20px rgba(20,20,40,.05);
  }
  /* ===== DESIGN SYSTEM · canonical token layer (n71) =====================================
     Additive + non-destructive: clean semantic names that ALIAS the existing tokens (kept for
     back-compat) + the handful of tokens the leak-audit showed were being hardcoded. var() is
     late-bound so theme-aware aliases (e.g. --danger→--red) follow light/dark automatically.
     This block is the ONLY place new raw hex is allowed; the deploy lint enforces that.
     Canonical going forward — prefer these names; the legacy ones (--gold,--txt,--dgreen,--yellow)
     are documented as deprecated in the Style guide.  ================================== */
  :root{
    /* brand (client-facing gold — marketing / emails / galleries; admin stays blue) */
    --brand:#c8a47e; --brand-ink:#2a1f10;
    --white:#fff; --black:#000;
    /* semantic roles → existing accents (theme-aware) */
    --accent:var(--blue); --accent-bg:var(--bluebg); --accent-bd:var(--goldbd);
    --on-accent:#fff;                                  /* text/icon on any filled colored control */
    --success:var(--green);  --success-bg:var(--greenbg);  --success-bd:var(--greenbd);
    --warning:var(--orange); --warning-bg:var(--orangebg); --warning-bd:var(--orangebd);
    --danger:var(--red);     --danger-bg:var(--redbg);     --danger-bd:var(--red);
    --info:var(--blue);      --info-bg:var(--bluebg);
    /* text ramp */
    --muted:var(--mut); --muted-2:var(--mut2); --muted-3:#7a7d85;
    /* spacing scale — 4px base */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
    /* type scale + weights */
    --fs-xs:11px; --fs-sm:12.5px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
    --fw-reg:500; --fw-med:600; --fw-bold:800;
    /* HUD / monitoring language (Brain + Diagnostics — fixed dark surface, not theme-aware;
       canvas/3D/JS-set colors read the same values from window.HUD since var() can't resolve there) */
    --hud-verified:#46c98a; --hud-warn:#e0a23a; --hud-down:#ef5d63; --hud-scan:#4a9bff;
    --hud-infra:#4a9bff; --hud-external:#e0a23a; --hud-data:#46c98a; --hud-system:#9d8bea; --hud-security:#2dd4bf; --hud-core:#6fb7ff;
    --hud-mono:'JetBrains Mono',ui-monospace,monospace;
  }
  /* ===== 5 DENSITY SIZES (spacing only — every datum stays present at any density) ===== */
  html[data-density="spacious"] body{font-size:16px}
  html[data-density="spacious"] .navi{padding:13px 16px;font-size:14.5px}
  html[data-density="spacious"] .tbl th,html[data-density="spacious"] .tbl td{padding:14px 16px}
  html[data-density="spacious"] .xtbl th{padding:13px 14px}html[data-density="spacious"] .xtbl td{padding:12px 14px}
  html[data-density="spacious"] .content{padding:10px 28px 34px}
  html[data-density="spacious"] .stat{padding:20px 22px}
  html[data-density="spacious"] .btn{padding:14px 19px;font-size:15px}
  html[data-density="spacious"] .newbtn,html[data-density="spacious"] .out,html[data-density="spacious"] .pill,html[data-density="spacious"] .subtab{padding:12px 19px;font-size:13.5px}
  html[data-density="spacious"] .clrow{padding:16px 18px}
  html[data-density="spacious"] .drow,html[data-density="spacious"] .setrow{padding:13px 0}
  html[data-density="comfortable"] body{font-size:15.5px}
  html[data-density="comfortable"] .navi{padding:12px 15px}
  html[data-density="comfortable"] .tbl th,html[data-density="comfortable"] .tbl td{padding:12px 15px}
  html[data-density="comfortable"] .xtbl td{padding:10px 13px}
  html[data-density="comfortable"] .content{padding:6px 24px 28px}
  html[data-density="comfortable"] .stat{padding:18px 20px}
  html[data-density="comfortable"] .clrow{padding:14px 16px}
  html[data-density="compact"] body{font-size:14px}
  html[data-density="compact"] .navi{padding:6px 13px;margin:1px 10px}
  html[data-density="compact"] .tbl th,html[data-density="compact"] .tbl td{padding:7px 11px}
  html[data-density="compact"] .xtbl th{padding:7px 10px}html[data-density="compact"] .xtbl td{padding:6px 10px}
  html[data-density="compact"] .content{padding:2px 16px 22px}
  html[data-density="compact"] .stat{padding:7px 11px}
  html[data-density="compact"] .clrow{padding:9px 12px}
  html[data-density="compact"] .drow,html[data-density="compact"] .setrow{padding:7px 0}
  html[data-density="dense"] body{font-size:13px}
  html[data-density="dense"] .navi{padding:4px 12px;margin:1px 10px}
  html[data-density="dense"] .tbl th,html[data-density="dense"] .tbl td{padding:5px 10px}
  html[data-density="dense"] .xtbl th{padding:5px 9px}html[data-density="dense"] .xtbl td{padding:4px 9px}
  html[data-density="dense"] .content{padding:2px 14px 20px}
  html[data-density="dense"] .stat{padding:6px 10px}
  html[data-density="dense"] .clrow{padding:7px 11px}
  html[data-density="dense"] .drow,html[data-density="dense"] .setrow{padding:5px 0}
  *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
  body{font-family:var(--sans);background:var(--bg);color:var(--txt);line-height:1.5;font-size:15px;transition:background .25s,color .25s}
  html,body{overflow-x:hidden;max-width:100vw}   /* hard stop: no page sideways scroll, ever */
  /* #4 mobile: dense inline tile rows (stats/servers/reports = repeat(4|5|6,1fr)) collapse to 2-up across the whole mobile-shell range (≤820, matching the layout breakpoint) so they don't cram or overflow. Calendar (repeat(7)) is excluded — it stays a grid / swaps to the agenda view. */
  @media(max-width:820px){
    .view [style*="grid-template-columns:repeat(4,1fr)"],
    .view [style*="grid-template-columns:repeat(5,1fr)"],
    .view [style*="grid-template-columns:repeat(6,1fr)"]{ grid-template-columns:repeat(2,1fr)!important; }
    .view [style*="grid-template-columns:repeat("] > *{ min-width:0 }
  }
  /* de-condensed: clean modern bold headings (was Anton uppercase) */
  .disp{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;text-transform:none;line-height:1.1}
  .stagebar{background:var(--goldbg);color:var(--gold);text-align:center;font-size:11.5px;padding:5px;letter-spacing:1px;border-bottom:1px solid var(--goldbd)}
  .chip{font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:2px 8px;border-radius:20px;display:inline-block}
  input,select,textarea,button{font-family:inherit}

  /* login */
  #login{max-width:380px;margin:8vh auto;padding:0 18px}
  .lcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
  .lcard h1{font-size:24px;margin-bottom:6px}
  .lcard .sub{color:var(--mut);font-size:13px;margin-bottom:18px}
  .lcard input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:15px;margin-bottom:10px;background:var(--well);color:var(--txt)}
  .lcard input:focus{outline:none;border-color:var(--gold)}
  .lbtn{background:var(--gold);color:#fff;border:none;padding:13px;border-radius:11px;font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;width:100%}
  .note{font-size:11.5px;color:var(--mut2);margin-top:14px;text-align:center;line-height:1.5}
  .msg{padding:10px;border-radius:9px;font-size:13px;margin-top:10px;display:none}
  .msg.ok{background:var(--greenbg);color:var(--green);display:block}
  .msg.err{background:var(--redbg);color:var(--redtx);display:block}

  #app{display:none}
  .layout{display:flex;flex-direction:column;height:calc(100vh - 28px);overflow:hidden}
  .shell{display:flex;flex:1;min-height:0;overflow:hidden}   /* fixed app shell: page never scrolls; only .content scrolls → footer + user chip stay anchored */
  .nav{width:190px;background:var(--navbg);padding:16px 0 12px;flex-shrink:0;border-right:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
  .navscroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}  /* only the menu items scroll; logo top + user chip bottom stay anchored */
  .wm{margin:4px 12px 5px}
  .navver{font-size:10px;font-weight:600;letter-spacing:.4px;color:var(--mut2);text-align:center;margin:1px 0 12px;display:block;cursor:pointer}
  .navver:hover{color:var(--gold)}
  .navi{display:flex;align-items:center;gap:10px;padding:5px 12px;margin:1px 10px;border-radius:10px;color:var(--mut);font-size:11px;font-weight:600;cursor:pointer}  /* n163b: 11px per Moshe — minimal nav scrolling */
  .navi.on{background:var(--navon);color:var(--gold)}
  .navct{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--mut2);background:var(--card2);border-radius:999px;padding:1px 7px;min-width:18px;text-align:center}
  .navi.on .navct{color:var(--gold)}
  .navi:hover:not(.on){background:var(--card2);color:var(--txt)}
  .navuser{flex:0 0 auto;margin:6px 10px 0;padding:7px 9px;display:flex;align-items:center;gap:9px;border-radius:11px;cursor:pointer;background:var(--navbg)}
  .navuser:hover{background:var(--card2)}
  .userchip{display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:999px;padding:2px;flex:0 0 auto}
  .userchip:hover{background:var(--card2)}
  .userchip .avatar{width:32px;height:32px}
  .pf-left{width:190px;flex:none;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:6px 18px}
  .pf-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 22px}
  @media(max-width:820px){ .pf-left{width:auto;border-right:none;padding:6px 14px} .pf-main{padding:9px 14px} }
  .pf-left .srvdots{width:100%;flex-wrap:wrap;gap:3px 4px}
  .pf-left .srvdots .sd{width:6px;height:6px}
  .pf-left #navPresence{flex-wrap:wrap;max-width:100%}
  .userpop{position:fixed;top:56px;right:16px;width:210px;background:var(--card);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);padding:9px;display:none;z-index:60}
  .userpop.on{display:block}
  .uphead{display:flex;align-items:center;gap:9px;padding:5px 5px 10px;border-bottom:1px solid var(--hair);margin-bottom:5px}
  .upitem2{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:9px;font-size:13px;color:var(--txt);cursor:pointer}
  .upitem2:hover{background:var(--card2)}
  .upitem2 .ico{width:16px;text-align:center;color:var(--mut)}
  .avatar{width:30px;height:30px;border-radius:50%;background:var(--goldbg);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
  /* sidebar sections (self-managed, drag-drop, renamable) */
  .navsec{margin:2px 0}
  .navsechd{display:flex;align-items:center;gap:7px;margin:9px 12px 3px;padding:4px 5px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--gold);cursor:pointer;user-select:none;border-radius:7px}
  .navsechd .chev{font-size:10px;transition:transform .18s;width:13px;text-align:center;opacity:1}
  .navsechd:hover .chev{color:var(--gold)}
  .navsec.collapsed .chev{transform:rotate(-90deg)}
  .navsechd .nm{flex:1}
  .navsechd:hover{background:var(--card2)}
  .navsechd:active{cursor:grabbing}
  .navsecbody{overflow:hidden;transition:max-height .2s ease}
  .navsec.collapsed .navsecbody{max-height:0!important}
  .navsec.secdragover .navsechd{color:var(--gold)}
  .navi.navi-edit{outline:1px solid var(--gold);background:var(--card2)}
  .navsecadd{font-size:10.5px;color:var(--mut2);cursor:pointer;margin:8px 12px 2px;padding:3px 4px}
  .navsecadd:hover{color:var(--gold)}
  /* nav item = icon + label → reads as a clickable PAGE row (section labels below have no icon) */
  .nvico{flex:0 0 auto;width:20px;text-align:center;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
  .nvico svg,.navi .navico svg{width:12.5px;height:12.5px;display:block;margin:0 auto}  /* n160 SVG nav icons — stroke follows text color (hover/active/theme aware) */
  .nvlbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .navi .navico{flex:none;width:20px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
  .navi .navtxt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.12}
  .navi .navtxt .nvlbl{flex:none}
  .navsub{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut2)}
  .navi.on .navsub{color:var(--selfg);opacity:.75}
  /* Notes + Messages nav launchers (pop their windows; flash on unread) */
  /* Notes + Messages moved to the portal footer (n157) — chip styling below */
  .portalfoot .navlaunch.pfchip,.tools .navlaunch.pfchip{display:flex;align-items:center;gap:8px;height:36px;padding:0 11px;margin:0;border-radius:9px;border:1px solid var(--line2);background:var(--card2);color:var(--mut);cursor:pointer;position:relative;flex:none}
  .portalfoot .navlaunch.pfchip:hover,.tools .navlaunch.pfchip:hover{background:var(--card);color:var(--fg)}
  .portalfoot .navlaunch.pfchip .nlico,.tools .navlaunch.pfchip .nlico{width:auto;font-size:14px}
  .portalfoot .navlaunch.pfchip .nllbl,.tools .navlaunch.pfchip .nllbl{font-size:12px}
  .portalfoot .navlaunch.pfchip .nlsub,.tools .navlaunch.pfchip .nlsub{font-size:8.5px}
  @media(max-width:900px){ .portalfoot .navlaunch.pfchip .nltxt,.tools .navlaunch.pfchip .nltxt{display:none} }
  @media(max-width:560px){ .tools .navlaunch.pfchip,.tools .themebtn{display:none} }  /* phone uses the iOS shell */

  .navlaunch{display:flex;align-items:center;gap:11px;padding:9px 14px;margin:2px 10px;border-radius:10px;color:var(--mut);cursor:pointer;position:relative}
  .navlaunch:hover{background:var(--card2);color:var(--fg)}
  .navlaunch .nlico{flex:none;width:18px;text-align:center;font-size:14px}
  .navlaunch .nltxt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.12}
  .navlaunch .nllbl{font-size:13px;font-weight:600;color:var(--fg)}
  .navlaunch .nlsub{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut2)}
  .nlbadge{display:none;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;align-items:center;justify-content:center;line-height:1;flex:none}
  .nlbadge.on{display:flex}
  @keyframes nlFlashY{0%,100%{background:transparent}50%{background:rgba(245,197,24,.20)}}
  @keyframes nlFlashG{0%,100%{background:transparent}50%{background:rgba(47,191,99,.20)}}
  .navlaunch.flashY{animation:nlFlashY 1.05s ease-in-out infinite}
  .navlaunch.flashY .nllbl{color:#f5c518}
  .navlaunch.flashY .nlico{filter:drop-shadow(0 0 4px rgba(245,197,24,.6))}
  .navlaunch.flashG{animation:nlFlashG 1.05s ease-in-out infinite}
  .navlaunch.flashG .nllbl{color:var(--green)}
  /* Clara / Rosie full page */
  #v-clara.on{display:flex;flex-direction:column;height:100%;min-height:0}
  .clarawrap{display:flex;flex-direction:column;flex:1;min-height:0;border:1px solid var(--line2);border-radius:16px;overflow:hidden;background:var(--card)}
  .clarabar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line2);flex-wrap:wrap;background:var(--card);position:relative;z-index:2}
  /* Dedicated Clara page: #claraBody IS the .claracalls scroller. Its 6px top padding left a strip where
     calls bled above the sticky Active/Archived bar — zero the top so the opaque sticky bar pins flush.
     (#claraBody.claracalls beats the base #claraBody padding rule on specificity, so order doesn't matter.) */
  #claraBody.claracalls{padding-top:0}
  #claraBody.claracalls>.hmcalbar{top:0;margin-bottom:2px}
  .clarainfo{font-size:12.5px;color:var(--mut);flex:1;min-width:200px}
  .clarasize{display:flex;align-items:center;gap:6px}
  .clarasizelbl{font-size:11px;color:var(--mut2)}
  .clarasizebtn{background:var(--card2);border:1px solid var(--line2);color:var(--fg);border-radius:8px;width:36px;height:30px;font-size:13px;font-weight:700;cursor:pointer}
  .clarasizebtn:hover{border-color:var(--selbd)}
  #claraBody{flex:1;overflow-y:auto;padding:6px 16px 16px}

  .main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 12px;flex-wrap:nowrap;gap:12px 24px;position:relative}
  .ttl{flex:1 1 auto;min-width:0;overflow:hidden;padding-right:18px}            /* title/clock shrink instead of pushing the tools */
  .ttl .disp{font-size:23px}
  .ttl .d{font-size:10px;color:var(--mut2);letter-spacing:1.5px}
  #vtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0}  /* title ellipsizes; clock stays */
  .tools{display:flex;gap:8px;align-items:center;flex:0 0 auto}  /* fixed slot — search never moves */
  .search{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:12px;color:var(--txt);width:190px}
  /* Responsive topbar — keep the clock visible; never let search overlap it */
  @media (max-width:1180px){ #estclock{display:none} }   /* drop the clock before it can cover the title on narrow windows */
  @media (max-width:1040px){ .ttl .disp{font-size:20px} .search{width:150px} }
  @media (max-width:820px){ .topbar{flex-wrap:wrap} .ttl{flex:1 1 100%} .tools{flex:1 1 100%;justify-content:flex-end} .search{flex:1 1 auto;width:auto;min-width:0} }
  @media (max-width:520px){ #estclock{font-size:16px} .ttl .disp{font-size:18px} }
  .search::placeholder{color:var(--mut)}
  /* Clearable search boxes: a themed "×" inside any type=search input (visible on dark) */
  input[type=search]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; height:14px; width:14px; margin-left:6px; cursor:pointer; opacity:.5; background-color:var(--mut); -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 4l8 8M12 4l-8 8" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center/contain no-repeat; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 4l8 8M12 4l-8 8" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center/contain no-repeat; }
  input[type=search]::-webkit-search-cancel-button:hover{ opacity:.9 }
  .searchdrop{position:absolute;top:calc(100% + 5px);right:0;width:380px;max-width:calc(100vw - 28px);max-height:400px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:60;display:none}
  .searchdrop.on{display:block}
  .searchdrop .sdrow.kbsel,.searchdrop .sdmore.kbsel{background:var(--well);outline:1.5px solid var(--selbd);outline-offset:-1.5px}
  /* nav-bottom page/tab finder (searches ONLY tabs+sections) */
  .navsearch{position:relative;padding:2px 10px 10px}
  .navsearch input{width:100%;box-sizing:border-box;background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:12px;color:var(--fg);outline:none}
  .navsearch input:focus{border-color:var(--selbd)}
  .navfdrop{position:absolute;left:10px;right:10px;top:calc(100% - 6px);background:var(--card);border:1px solid var(--line2);border-radius:11px;box-shadow:var(--shadow);max-height:340px;overflow:auto;display:none;z-index:60}
  .navfdrop.on{display:block}
  .navfrow{padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--hair)}
  .navfrow:last-child{border-bottom:none}
  .navfrow:hover,.navfrow.kbsel{background:var(--well)}
  .navfrow .nflbl{font-size:12.5px;font-weight:600;color:var(--fg)}
  .navfrow .nfsub{font-size:10.5px;color:var(--mut2);margin-top:1px}
  .pgTabs .o[draggable],.subtab[draggable]{cursor:grab}
  .pgTabs .o.tabdrag,.subtab.tabdrag{opacity:.4;cursor:grabbing;outline:1.5px dashed var(--selbd)}
  /* in-app confirm modal (replaces native confirm) */
  .acOv{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity .15s;padding:20px}
  .acOv.on{opacity:1}
  .acCard{background:var(--card);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);max-width:430px;width:100%;padding:20px 22px 16px;transform:translateY(10px) scale(.98);transition:transform .16s,opacity .16s}
  .acOv.on .acCard{transform:none}
  .acTtl{font-size:15px;font-weight:700;color:var(--txt);margin-bottom:8px}
  .acMsg{font-size:13.5px;line-height:1.55;color:var(--mut);margin-bottom:18px}
  .acBtns{display:flex;gap:10px;justify-content:flex-end}
  .acBtns .btn{min-width:108px}
  .acOv.acSheet{align-items:flex-end;padding:0}
  .acOv.acSheet .acCard{max-width:none;width:100%;border-radius:18px 18px 0 0;transform:translateY(100%);padding:22px 24px calc(20px + env(safe-area-inset-bottom))}
  .acOv.acSheet.on .acCard{transform:none}
  .acOv.acSheet .acBtns .btn{flex:1;min-width:0;padding:14px}
  /* send-confirm PREVIEW (render of exactly what's sent) */
  .acOv.acWide .acCard{max-width:600px}
  .acPvLbl{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut2);margin:12px 0 5px}
  .acPvMeta{font-size:11.5px;color:var(--mut);margin-bottom:7px;line-height:1.5}
  .acPvMeta b{color:var(--txt);font-weight:600}
  .acPvBox{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--well);max-height:46vh;overflow-y:auto}
  .acPvText{padding:13px 15px;font-size:14px;line-height:1.5;color:var(--txt);white-space:pre-wrap;word-break:break-word;background:color-mix(in srgb,var(--blue) 12%,transparent)}
  .acPvFrame{display:block;width:100%;height:46vh;border:none;background:#fff}
  .acToInp{width:100%;box-sizing:border-box;background:var(--well);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13.5px;color:var(--txt);margin-bottom:7px}
  .acToInp:focus{outline:none;border-color:var(--blue)}
  .acAddTo{display:inline-block;font-size:12px;color:var(--blue);text-decoration:none;cursor:pointer;margin-bottom:4px}
  .sdhd{padding:7px 12px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--mut2);background:var(--card2);position:sticky;top:0}
  .sdrow{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--hair)}
  .sdrow:hover{background:var(--card2)}
  .sdmore{padding:10px 12px;font-size:12px;color:var(--gold);cursor:pointer;text-align:center}
  .sdempty{padding:14px 12px;font-size:12.5px;color:var(--mut)}
  .newbtn{background:var(--gold);color:#fff;font-weight:700;padding:8px 13px;border-radius:8px;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;cursor:pointer;border:none}
  .out{background:none;border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-size:12px;color:var(--mut);cursor:pointer}
  .srvstat{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:default;white-space:nowrap}
  .srvdot{width:8px;height:8px;border-radius:50%;background:var(--mut2);flex-shrink:0}
  .srvdot.up{background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
  .srvdot.down{background:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 22%,transparent)}
  .srvdot.checking{background:var(--orange)}
  .themebtn{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 7px;cursor:pointer}
  .themebtn .opt{width:26px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--mut)}
  .themebtn .opt.on{background:var(--goldbg);color:var(--gold)}
  .denssel{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:11px;color:var(--mut);cursor:pointer;font-family:inherit}
  .denssel:focus{outline:none;border-color:var(--gold)}

  .content{padding:4px 22px 26px;flex:1;min-width:0;overflow-y:auto;min-height:0}
  .view{display:none}.view.on{display:block}
  .panel{background:var(--card);border:1px solid var(--line);border-radius:14px}
  .loading{color:var(--mut);font-size:13px;padding:30px;text-align:center}

  .stats{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
  .stat{flex:1;min-width:130px;border-radius:11px;padding:6px 13px;background:var(--card);border:1px solid var(--line);transition:transform .13s,border-color .13s}
  .stat:hover{transform:translateY(-1px);border-color:var(--line2)}  /* n161 facelift */
  .stat[role=button]{cursor:pointer;transition:border-color .12s,transform .06s}
  .stat[role=button]:hover{border-color:var(--gold)}
  .stat[role=button]:active{transform:translateY(1px)}
  .stat.hl{background:var(--goldbg);border-color:var(--goldbd)}
  .stat .l{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--mut2)}
  .stat.hl .l{color:var(--gold)}
  .stat .v{font-size:17px;margin-top:1px}
  .stat.hl .v{color:var(--gold)}

  .work{display:flex;gap:14px;align-items:flex-start}
  @media(max-width:980px){.work{flex-direction:column}}
  /* Desktop: top tiles stay static; the calendar grid body and the check-in rail each get their
     OWN vertical scroll so a taller (Gmail-like) grid doesn't push the page. Day headers + nav stay put. */
  @media(min-width:981px){
    #v-calendar .gbody{max-height:calc(100vh - 300px);overflow-y:auto;overflow-x:hidden}
    #v-calendar .rail{max-height:calc(100vh - 210px);overflow-y:auto;overflow-x:hidden;padding-right:2px}
  }
  .gridcard{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
  .calnav{display:flex;align-items:center;gap:7px;padding:9px 11px;border-bottom:1px solid var(--hair);flex-wrap:wrap}
  .calsrchrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--hair)}
  .calsrch{flex:1;min-width:0;width:auto}
  .calsrchct{font-size:11px;color:var(--mut2);white-space:nowrap}
  .caldim{opacity:.16;filter:grayscale(.55);transition:opacity .12s}
  .calbtn{background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:5px 9px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1}
  .calbtn:hover{border-color:var(--gold)}
  .calrange{font-size:12.5px;font-weight:700;color:var(--txt);padding:0 4px}
  .calspacer{flex:1}
  .caldate{background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:4px 7px;font-size:12px;font-family:inherit;color-scheme:dark}
  .calseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .calsegbtn{background:var(--card2);border:none;color:var(--mut);padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
  .calsegbtn.on{background:var(--gold);color:#fff}
  /* ===== UNIFIED ACTIVE/SELECTED = GREEN, site-wide (clear visual on what's selected) ===== */
  /* Shared selected-state tokens used by inline render styles across the portal */
  :root{--sel:var(--blue);--seltx:#fff;--selbg:color-mix(in srgb,var(--blue) 15%,transparent);--selbd:var(--blue);--selfg:var(--blue)}  /* v4 color language: blue = active/selected; green reserved for go-actions */
  /* Solid-fill toggles / tabs / segments / chips / filters */
  .calsegbtn.on,.dlseg button.on,.emTab.on,.seg3b.on,.cktab.on,.subtab.on,.seg2 .o.on,.aochip.on,.whoseg .w.on,.dlstg.sel,.etbtn.on,.themebtn .opt.on,#mpMeth .pill.on{background:var(--sel)!important;color:var(--seltx)!important;border-color:var(--selbd)!important;box-shadow:0 0 6px color-mix(in srgb,var(--blue) 45%,transparent)!important;font-weight:700!important}
  .aochip.on .p{color:#06210f!important}
  /* Sidebar active section = green text + green left accent (keeps the nav background) */
  .navi.on{color:var(--selfg)!important;box-shadow:inset 3px 0 0 var(--sel)}
  .navi.on .navct{color:var(--selfg)!important}
  /* n167g: colored count badges (Clara/Texting/Chat/Callbacks) keep their own text color when
     the nav item is selected or hovered — the selfg override made the number invisible. */
  .navi.on .navct.cnt.on,.navi:hover .navct.cnt.on{color:#fff!important}
  .navi:hover:not(.on) .navct{background:var(--card)}
  /* Row / list selections = green frame + subtle green wash */
  .pendrow.on,#dirPickOv .dpRow.on,.dlstg.sel{border-color:var(--blue)!important}
  #dirPickOv .dpRow.on{background:color-mix(in srgb,var(--blue) 12%,transparent)!important}
  #dirPickOv .dpRow.on .dpCk{background:var(--blue)!important;border-color:var(--blue)!important}
  .ibxmsg.sel,.smsTi.sel{background:color-mix(in srgb,var(--blue) 13%,transparent)!important;border-left:3px solid var(--blue)}
  #msgDrawer .mgconv.on{border-left-color:var(--blue)!important}
  .emailwrap{display:grid;grid-template-columns:210px 1fr;gap:14px}
  @media(max-width:860px){.emailwrap{grid-template-columns:1fr}}
  .emaillist{display:flex;flex-direction:column;gap:6px}
  .etbtn{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--txt);cursor:pointer;font-family:inherit}
  .etbtn .es{display:block;font-size:10px;color:var(--mut2);margin-top:2px}
  .etbtn.on{border-color:var(--gold);background:var(--card2)}
  .emaileditor{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}
  .efield{margin-bottom:12px}
  .efield label{display:block;font-size:11px;font-weight:600;color:var(--mut);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
  .efield input,.efield textarea{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13.5px;color:var(--txt);font-family:inherit}
  .efield textarea{min-height:72px;resize:vertical;line-height:1.5}
  .eprev{margin-top:14px;border-top:1px solid var(--hair);padding-top:12px}
  .eprevsub{font-size:11px;color:var(--mut2);margin-bottom:6px}
  .eprevsub b{color:var(--txt)}
  .eframe{width:100%;height:430px;border:1px solid var(--line);border-radius:10px;background:#fff}
  /* Email engine — lifecycle list + audience/variation + GrapesJS */
  .elgrp{font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--mut2);text-transform:uppercase;padding:10px 2px 2px;margin-top:4px}
  .elgrp:first-child{margin-top:0;padding-top:0}
  .emTabs{display:flex;gap:6px;margin-bottom:12px}
  .emTab{padding:7px 16px;border-radius:9px;border:1px solid var(--line);background:var(--card2);color:var(--mut);font-size:12.5px;font-weight:600;cursor:pointer}
  .emTab.on{border-color:var(--gold);background:var(--gold);color:#fff}
  .emVar{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px}
  .emVar select{background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13px;color:var(--txt);font-family:inherit}
  .emInherit{background:var(--orangebg);color:var(--orange);border:1px solid var(--orange);border-radius:9px;padding:8px 11px;font-size:11.5px;margin-bottom:12px;display:flex;align-items:center;gap:10px;justify-content:space-between}
  .emTools{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:9px}
  .emTools select,.emTools button{font-size:12px}
  #gjsWrap{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
  .emStatus{font-size:10.5px;color:var(--mut2);margin-left:auto}
  /* ── Luxury / iOS-style restyle of the GrapesJS builder chrome ───────────────── */
  #gjsWrap .gjs-editor, #gjsWrap .gjs-one-bg{background:#fbfbfa}
  #gjsWrap .gjs-pn-panel{background:#fbfbfa;border-color:#eee}
  #gjsWrap .gjs-pn-commands{border-bottom:1px solid #eee}
  #gjsWrap .gjs-pn-btn{color:#7a7a7a;font-size:17px;min-width:40px;height:38px;line-height:38px;border-radius:11px;margin:4px;transition:background .15s,color .15s,transform .1s;box-shadow:none}
  #gjsWrap .gjs-pn-btn:hover{background:#f1ebe1;color:#1a1a1a}
  #gjsWrap .gjs-pn-btn:active{transform:scale(.92)}
  #gjsWrap .gjs-pn-btn.gjs-pn-active{background:#C8A47E;color:#2a1f10;box-shadow:none}
  #gjsWrap .gjs-pn-btn svg{width:20px;height:20px;vertical-align:middle}
  #gjsWrap .gjs-block{border-radius:15px;border:1px solid #ececec;background:#fff;padding:16px 8px 13px;min-height:84px;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column;align-items:center;justify-content:center}
  #gjsWrap .gjs-block:hover{border-color:#C8A47E;box-shadow:0 6px 18px rgba(0,0,0,.09);transform:translateY(-2px)}
  #gjsWrap .gjs-block__media{margin-bottom:8px;color:#C8A47E}
  #gjsWrap .gjs-block__media svg{width:28px;height:28px}
  #gjsWrap .gjs-block-label{font-size:12.5px;font-weight:600;color:#3a3a3a;line-height:1.3}
  #gjsWrap .gjs-blocks-c{padding:10px;gap:10px}
  #gjsWrap .gjs-title,#gjsWrap .gjs-category-title,#gjsWrap .gjs-sm-sector-title,#gjsWrap .gjs-layer-title{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#9a9a9a;background:transparent;border:0;font-weight:700;padding:12px 10px 6px}
  #gjsWrap .gjs-field,#gjsWrap .gjs-sm-field input,#gjsWrap .gjs-clm-select{border-radius:9px;background:#fff;border:1px solid #e2e2e2;color:#222}
  #gjsWrap .gjs-cv-canvas{background:#f4f3f1}
  #gjsWrap .gjs-frame{border-radius:10px;box-shadow:0 2px 14px rgba(0,0,0,.06)}
  #gjsWrap .gjs-toolbar{background:#C8A47E;border-radius:8px}
  #gjsWrap .gjs-toolbar .gjs-toolbar-item{color:#2a1f10}
  #gjsWrap .gjs-rte-toolbar,#gjsWrap .gjs-rte-action{border-radius:8px}
  #gjsWrap .gjs-mdl-dialog{border-radius:16px;overflow:hidden}
  #gjsWrap .gjs-btn-prim{background:#C8A47E;color:#2a1f10;border-radius:9px;font-weight:700;padding:8px 16px}
  #gjsWrap .gjs-sm-sector .gjs-sm-properties{padding:6px}
  .elchip{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px;display:inline-block}
  .elchip.ok{background:var(--greenbg);color:var(--green)}
  .elchip.sent{background:var(--well);color:var(--mut)}
  .elchip.warn{background:var(--orangebg);color:var(--orange)}
  .elchip.bad{background:var(--redbg);color:var(--redtx)}
  .ehist{margin-top:12px;border-top:1px solid var(--hair);padding-top:10px}
  .ehrow{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--mut2);padding:3px 0}
  .erow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
  .aogrid{display:flex;flex-wrap:wrap;gap:7px}
  .aochip{display:flex;flex-direction:column;align-items:flex-start;gap:0;border:1.5px solid var(--line);border-radius:10px;padding:6px 11px;cursor:pointer;background:var(--card2);font-family:inherit}
  .aochip .n{font-size:12.5px;color:var(--txt);font-weight:600;white-space:nowrap}
  .aochip .p{font-size:10px;color:var(--mut2)}
  .aochip.on{border-color:var(--gold);background:var(--goldbg)}
  .aochip.on .p{color:var(--gold)}
  .aobill{margin:4px 0 10px;padding:11px;border:1px dashed var(--line2);border-radius:11px;background:var(--card2)}
  .aobill-h{font-size:11.5px;font-weight:600;color:var(--mut);margin-bottom:8px}
  .seg3{display:flex;gap:6px}
  .seg3b{flex:1;border:1.5px solid var(--line);background:var(--card);color:var(--mut);border-radius:9px;padding:8px 6px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
  .seg3b.on{border-color:var(--gold);background:var(--gold);color:#fff}
  .portalfoot{position:relative;z-index:20;display:flex;align-items:stretch;padding:0;border-top:1px solid var(--line);background:var(--card);min-height:44px;flex-shrink:0}
  .pf-side{display:flex;align-items:center;gap:8px}
  .pf-blocks{flex:1;display:flex;align-items:stretch;gap:0;min-width:0}
  .pf-brand{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--mut)}
  .pf-chip{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:20px;background:var(--goldbg);color:var(--gold)}
  .pf-muted{font-size:10px;color:var(--mut2);letter-spacing:.5px}
  @media(max-width:680px){.pf-muted{display:none}}
  .gcols{display:flex}
  .gcorner{width:40px;flex-shrink:0;border-bottom:1px solid var(--hair)}
  .ghd{flex:1;text-align:center;padding:7px 0 8px;border-bottom:1px solid var(--hair);font-size:11px;color:var(--mut);position:relative}
  .ghd.today{color:var(--txt);background:var(--card2);font-weight:700}
  .ghdshrink{display:block;width:fit-content;margin:0 auto 5px;padding:2px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--mut);font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;cursor:pointer;font-family:inherit}
  .ghdshrink:hover{border-color:var(--gold);color:var(--gold);background:var(--goldbg)}
  .gbody{display:flex}
  .gtimes{width:40px;flex-shrink:0;position:relative;font-size:9px;color:var(--mut2);height:960px}
  .gtimes div{position:absolute;right:5px}
  .gcol{position:relative;flex:1;border-left:1px solid var(--hair)}
  .gcol.today .gbodyc{background:var(--card2)}   /* highlight the FULL day column (not just the visible top) */
  .gbodyc{position:relative;height:960px}
  .hline{position:absolute;left:0;right:0;border-top:1px solid var(--hair)}
  /* drag-to-block time blocks (admin) */
  .calblk{position:absolute;left:2px;right:2px;border:1px dashed var(--mut2);border-radius:6px;overflow:hidden;pointer-events:auto;z-index:1;background:repeating-linear-gradient(45deg,rgba(150,150,160,.16),rgba(150,150,160,.16) 6px,rgba(150,150,160,.28) 6px,rgba(150,150,160,.28) 12px)}
  .calblk.ghostblk{pointer-events:none}
  .calblk .blklbl{font-size:10px;color:var(--mut);padding:2px 6px;display:block;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  .calblk .blkdel{position:absolute;top:0;right:4px;color:var(--red);font-weight:800;cursor:pointer;pointer-events:auto;font-size:14px;line-height:1.2;z-index:4}
  .calblk .blkrz{position:absolute;left:0;right:0;height:7px;cursor:ns-resize;z-index:3}
  .calblk .blkrz-t{top:0} .calblk .blkrz-b{bottom:0}
  .ghostblk{z-index:9;border-color:var(--gold);background:repeating-linear-gradient(45deg,var(--goldbg),var(--goldbg) 6px,rgba(200,164,126,.4) 6px,rgba(200,164,126,.4) 12px)}
  .ev{position:absolute;left:4px;right:4px;border-radius:9px;padding:3px 8px;overflow:hidden;font-size:10.5px;line-height:1.2;cursor:pointer;border:1px solid var(--hair);transition:box-shadow .12s,transform .12s}  /* n161 facelift: softer radius + hairline + hover lift */
  .ev:hover{box-shadow:var(--shadow);z-index:6;transform:translateY(-1px)}
  .ev .t{font-weight:600;font-size:10.5px}.ev .m{font-size:9px;opacity:.85}
  .ev{cursor:grab;touch-action:none;z-index:2}
  .evghost{position:fixed;z-index:60;border-radius:6px;background:var(--goldbg);border:1.5px dashed var(--gold);color:var(--gold);font-size:10px;font-weight:700;padding:2px 5px;pointer-events:none;text-align:right}
  /* Read-only external-calendar overlay (Acuity / Google) — monitoring only, never interactive */
  .evo{position:absolute;left:52%;right:3px;border-radius:6px;padding:2px 5px;overflow:hidden;font-size:9.5px;line-height:1.15;border:1px dashed;opacity:.92;cursor:pointer;z-index:1}
  .evo:hover{opacity:1}
  .evo .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
  .evo.ac{background:rgba(20,160,160,.14);border-color:#3bbdbd;color:#84dada}
  .evo.gc{background:rgba(150,150,165,.16);border-color:#9aa0aa;color:#c6cad3}
  .evoall{display:block;margin:1px 3px 1px 52%;border-radius:5px;padding:1px 6px;font-size:9px;font-weight:600;border:1px dashed;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;position:relative;z-index:3}
  .evoall.ac{background:rgba(20,160,160,.2);border-color:#3bbdbd;color:#84dada}
  .evoall.gc{background:rgba(150,150,165,.22);border-color:#9aa0aa;color:#c6cad3}
  /* Calendar hover preview */
  #evtip{position:fixed;z-index:120;min-width:170px;max-width:240px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:11px 13px;font-size:12px;color:var(--txt);pointer-events:none;opacity:0;transition:opacity .12s;display:none}
  #evtip .etn{font-weight:700;font-size:13px;margin-bottom:2px}
  #evtip .ett{color:var(--mut);font-size:11.5px;margin-bottom:6px}
  #evtip .etrow{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--mut2);margin-top:3px}
  #evtip .etbadge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
  /* Nav drag-to-reorder */
  .navi.dragging{opacity:.45}
  .navi.dragover{box-shadow:inset 0 2px 0 var(--gold)}
  @media(max-width:820px){ .navi.mhide{display:none!important} }
  /* Mobile scope: these 5 screens are DESKTOP-ONLY — hidden from the phone nav (no mobile layout) */
  @media(max-width:820px){ .navi[data-v="access"],.navi[data-v="rules"],.navi[data-v="emails"],.navi[data-v="forms"],.navi[data-v="types"]{display:none!important} }
  /* Footer per-service dots */
  .srvdots{display:flex;align-items:center;gap:5px;cursor:pointer;padding:0 4px}
  .srvdots.side{padding:2px 21px 8px;gap:4px}
  .srvdots.side .sd{width:6px;height:6px}
  .srvdots .sd{width:8px;height:8px;border-radius:50%;background:var(--mut);transition:background .2s}
  .srvdots .sd.up{background:var(--green)}.srvdots .sd.slow{background:var(--orange)}.srvdots .sd.down{background:var(--red)}.srvdots .sd.checking{background:var(--mut2)}
  /* hover popover that names every service dot (so the row isn't a cryptic line of dots) */
  .srvpop{position:fixed;z-index:10000;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.55);padding:8px;min-width:212px}
  .srvpop .srvpoptitle{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--mut2);text-transform:uppercase;padding:4px 8px 7px}
  .srvpop .srvpoprow{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:7px}
  .srvpop .srvpoprow .sd{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--mut)}
  .srvpop .srvpoprow .sd.up{background:var(--green)}.srvpop .srvpoprow .sd.slow{background:var(--orange)}.srvpop .srvpoprow .sd.down{background:var(--red)}.srvpop .srvpoprow .sd.checking{background:var(--mut2)}
  .srvpop .spnm{flex:1;font-size:12.5px;color:var(--txt)}
  .srvpop .spst{font-size:11px;color:var(--mut2)} .srvpop .spst.up{color:var(--green)}.srvpop .spst.down{color:var(--red)}.srvpop .spst.slow{color:var(--orange)}
  .srvpop .srvpopfoot{font-size:10.5px;color:var(--mut2);padding:7px 8px 3px;border-top:1px solid var(--line);margin-top:4px}
  /* Servers page */
  .srvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,238px),1fr));gap:11px}
  .srvcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px}
  .srvcard .sch{display:flex;align-items:center;gap:9px;margin-bottom:10px}
  .srvcard .sch .nm{font-weight:700;font-size:14px}
  .srvcard .bigdot{width:11px;height:11px;border-radius:50%;background:var(--mut);flex:0 0 auto}
  .srvcard .bigdot.up{background:var(--green)}.srvcard .bigdot.slow{background:var(--orange)}.srvcard .bigdot.down{background:var(--red)}.srvcard .bigdot.checking{background:var(--mut2)}
  .srvcard .stpill{margin-left:auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 9px;border-radius:999px}
  .srvcard .stpill.up{background:rgba(52,199,89,.14);color:var(--green)}.srvcard .stpill.slow{background:rgba(245,166,35,.16);color:var(--orange)}.srvcard .stpill.down{background:rgba(255,69,58,.15);color:var(--red)}.srvcard .stpill.checking{background:var(--card2);color:var(--mut2)}
  .srvcard .smet{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin:10px 0}
  .srvcard .smet .k{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut2)}
  .srvcard .smet .v{font-size:13px;font-weight:600;color:var(--txt)}
  .srvcard .sinfo{font-size:11px;color:var(--mut);border-top:1px solid var(--hair);padding-top:8px;margin-top:2px}
  .spark{display:flex;align-items:flex-end;gap:2px;height:34px;margin-top:8px}
  .spark .b{flex:1;min-width:2px;background:var(--gold);opacity:.55;border-radius:1px;transition:height .2s}
  /* Build-value page — compact data tiles (Servers-style) */
  .valhead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:radial-gradient(120% 130% at 50% 0,rgba(200,164,126,.10),transparent),var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:13px}
  .valhead .vt{font-family:Georgia,serif;font-size:32px;color:var(--gold);font-weight:400;line-height:1}
  .valhead .vk{font-size:10px;letter-spacing:1.4px;color:var(--mut2);text-transform:uppercase;margin-bottom:3px}
  .valhead .vsub{font-size:11.5px;color:var(--mut);text-align:right;line-height:1.5}
  .valgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,178px),1fr));gap:11px}
  .valcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 13px}
  .valcard .vnm{font-size:12px;font-weight:700;line-height:1.25}
  .valcard .vamt{font-family:Georgia,serif;font-size:21px;font-weight:400;color:var(--gold);margin:5px 0 0}
  .valcard .vhrs{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut2)}
  .valcard .vbar{height:5px;background:var(--well);border-radius:6px;overflow:hidden;margin:9px 0 0}
  .valcard .vbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#e0c39a)}
  .valcard .vd{font-size:10.5px;color:var(--mut);border-top:1px solid var(--hair);padding-top:7px;margin-top:9px;line-height:1.4}
  /* Mobile-config rows */
  .mcfgrow{display:flex;align-items:center;justify-content:space-between;padding:11px 4px;border-bottom:1px solid var(--hair)}
  .mcfgrow:last-child{border-bottom:none}
  .mcfgrow .lbl{font-size:13px;font-weight:500}
  .mcfgrow .sub{font-size:11px;color:var(--mut2)}
  .nowline{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--red);z-index:5}
  .nowline .dot{position:absolute;left:-4px;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--red)}
  .nowline .lbl{position:absolute;right:3px;top:-13px;font-size:8px;font-weight:700;color:var(--red);background:var(--card2);padding:0 3px}
  .rail{width:252px;flex-shrink:0;display:flex;flex-direction:column;gap:11px}
  @media(max-width:980px){.rail{width:100%}}
  .raillabel{font-size:10px;color:var(--mut2);letter-spacing:2px;margin-bottom:8px}
  .railcard{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px}
  .upitem{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:6px}
  /* iOS-style switch */
  .toggle{width:46px;height:28px;background:var(--green);border-radius:999px;position:relative;flex-shrink:0;cursor:pointer;transition:background .18s}
  .toggle::after{content:'';width:24px;height:24px;background:#fff;border-radius:50%;position:absolute;right:2px;top:2px;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
  .toggle.off{background:var(--line2)}
  .toggle.off::after{background:#fff;left:2px;right:auto}

  .tbl{width:100%;border-collapse:collapse;font-size:13px}
  .tbl th{text-align:left;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--mut2);padding:10px 14px;border-bottom:1px solid var(--line)}
  .tbl td{padding:11px 14px;border-bottom:1px solid var(--hair)}
  .tbl tbody tr{cursor:pointer;transition:background .12s}
  .bkwho{display:flex;align-items:center;gap:10px}  /* n162 facelift: bookings list client cell */
  .bkav{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex:none;letter-spacing:.02em}
  .bkwt{min-width:0}.bkwt b{display:block;font-weight:650;line-height:1.25}
  .bkwt span{display:block;font-size:11px;color:var(--mut2);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
  .tbl tbody tr:hover{background:var(--card2)}
  .paid{color:var(--green)}.refunded{color:var(--mut)}.partial{color:var(--orange)}

  /* Teams Excel-like grid: resizable / movable / hideable columns + inline edit + lock */
  .gridbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .gridbar .spacer{flex:1}
  .lockbtn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:600;cursor:pointer;background:none;color:var(--mut);white-space:nowrap}
  .lockbtn.locked{border-color:var(--orange);color:var(--orange);background:color-mix(in srgb,var(--orange) 12%,transparent)}
  .lockbtn.open{border-color:var(--green);color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
  .colmenu-wrap{position:relative}
  .colmenu{position:absolute;top:34px;right:0;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;z-index:25;min-width:190px}
  .colmenu.on{display:block}
  .colmenu .cm-h{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--mut2);padding:4px 8px 7px}
  .colmenu label{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;font-size:12.5px;color:var(--txt);cursor:pointer}
  .colmenu label:hover{background:var(--card2)}
  .colmenu input{accent-color:var(--gold)}
  .xwrap{overflow-x:auto}
  .xtbl{border-collapse:collapse;font-size:13px;table-layout:fixed;min-width:100%}
  .xtbl th{position:relative;text-align:left;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--mut2);padding:10px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;user-select:none}
  .xtbl th:last-child{border-right:none}
  .xtbl th.drag{cursor:grab}
  .xtbl th.dragging{opacity:.4}
  .xtbl th.dragover{box-shadow:inset 2px 0 0 var(--gold)}
  .xtbl td{padding:9px 12px;border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .xtbl td:last-child{border-right:none}
  .xtbl tbody tr:hover{background:var(--card2)}
  .xtbl .rez{position:absolute;top:0;right:-9px;width:18px;height:100%;cursor:col-resize;z-index:6;touch-action:none}
  .xtbl .rez:hover{background:linear-gradient(90deg,transparent 5px,var(--gold) 5px,var(--gold) 7px,transparent 7px)}
  .xtbl .rez:active{background:linear-gradient(90deg,transparent 5px,var(--gold) 5px,var(--gold) 7px,transparent 7px)}
  .xtbl .coname{font-weight:600;color:var(--txt);cursor:pointer}
  .xtbl .coname:hover{color:var(--gold)}
  .coopen{color:var(--gold);cursor:pointer;font-size:12px;text-decoration:none;flex:0 0 auto;font-weight:700}
  .coopen:hover{filter:brightness(1.15)}
  .conamewrap{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .conamewrap .coname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .cototal{font-size:11px;color:var(--mut);font-weight:700;white-space:nowrap;flex:none;letter-spacing:.2px}
  .xcell{display:inline-block;min-width:24px;border-radius:5px;padding:2px 5px;margin:-2px -5px;outline:none}
  .xcell[contenteditable="true"]{cursor:text}
  .xcell[contenteditable="true"]:hover{background:var(--card2)}
  .xcell[contenteditable="true"]:focus{background:var(--card2);box-shadow:0 0 0 1px var(--gold)}
  .xtbl.lockedgrid .xcell[contenteditable]{cursor:default}
  .rushsel{background:var(--card2);color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:3px 5px;font-size:12px;max-width:100%;cursor:pointer}
  .vdot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
  .vdot.green{background:var(--green)} .vdot.orange{background:var(--orange)} .vdot.red{background:var(--red)} .vdot.grey{background:var(--mut2)}
  /* Teams grid → responsive card view on narrow screens (iPad/iPhone): no horizontal scrolling */
  .tcards{display:none}
  @media(max-width:900px){
    #co-directory .xwrap{display:none}
    #co-directory .gridbar .colmenu-wrap{display:none}
    #co-directory .tcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:12px}
  }
  .tcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;cursor:pointer}
  .tcard:active{border-color:var(--gold)}
  .tcard-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .tcard-name{font-weight:700;color:var(--txt);font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tcard-tot{font-size:12px;color:var(--gold);font-weight:700;white-space:nowrap}
  .tcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px}
  .tcard-grid>div{display:flex;flex-direction:column;gap:1px;min-width:0}
  .tcard-grid label{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--mut2)}
  .tcard-grid .tcv{font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .billkey{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--mut);margin:0 2px 10px}
  .billkey span{display:inline-flex;align-items:center;gap:5px}
  .subtabs{display:flex;gap:6px;margin-bottom:14px}
  .subtab{font-size:12px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:7px 15px;color:var(--mut);cursor:pointer;background:none}
  .subtab.on{border-color:var(--gold);color:var(--gold);background:var(--goldbg)}
  .subtab span{opacity:.55;font-weight:700;margin-left:2px}
  .clrow{display:flex;align-items:center;gap:12px;padding:13px 15px;border-bottom:1px solid var(--hair);cursor:pointer}
  .clrow:hover{background:var(--card2)}
  .clgrp{font-size:11px;letter-spacing:1.2px;color:var(--mut2);text-transform:uppercase;padding:9px 15px 7px;background:var(--card2);border-bottom:1px solid var(--hair);font-weight:700;position:sticky;top:0;z-index:2}
  /* Pending emails — feed + preview */
  .pendrow{padding:11px 13px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;background:var(--card2)}
  .pendrow:hover{border-color:var(--gold)}
  .pendrow.on{border-color:var(--gold);background:var(--goldbg)}
  .pendframe{width:100%;height:520px;border:1px solid var(--line);border-radius:10px;background:#fff}
  .penddot{background:var(--orange)!important;color:#1a0e00!important}
  /* "On air" flashing indicator — testing-period alert that drafts await */
  .onair{display:none;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.6px;color:#fff;background:var(--red);border-radius:999px;padding:7px 13px;cursor:pointer;box-shadow:0 0 0 0 rgba(220,60,60,.6)}
  .onair.on{display:inline-flex;animation:onairpulse 1.3s ease-in-out infinite}
  .onair .oadot{width:9px;height:9px;border-radius:50%;background:#fff;animation:onairblink 1s steps(1) infinite}
  .onair .oacount{background:rgba(0,0,0,.25);border-radius:999px;padding:1px 7px;font-weight:800}
  @keyframes onairpulse{0%{box-shadow:0 0 0 0 rgba(220,60,60,.55)}70%{box-shadow:0 0 0 10px rgba(220,60,60,0)}100%{box-shadow:0 0 0 0 rgba(220,60,60,0)}}
  @keyframes onairblink{0%,50%{opacity:1}51%,100%{opacity:.15}}
  .ppcard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 17px;margin-bottom:12px}
  .ppcard .pphead{display:flex;align-items:center;gap:14px;cursor:pointer}
  .ppname{font-size:15px;font-weight:700;font-family:var(--disp,inherit);min-width:170px}
  .ppcount{font-size:13px;color:var(--mut);white-space:nowrap}
  .ppcount b{color:var(--gold);font-size:16px}
  .ppbar{flex:1;height:9px;background:var(--card2);border-radius:999px;overflow:hidden;min-width:90px;max-width:320px}
  .ppbar > i{display:block;height:100%;background:var(--gold);border-radius:999px}
  .ppchev{color:var(--mut2);font-size:12px;transition:transform .15s}
  .ppcard.open .ppchev{transform:rotate(90deg)}
  .ppbody{margin-top:12px;display:none}
  .ppcard.open .ppbody{display:block}
  .pppack{border:1px solid var(--hair);border-radius:10px;padding:10px 12px;margin-top:9px}
  .pppack-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px}
  .pppill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:999px}
  .pppill.paid{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
  .pppill.invoiced{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}
  .pppill.open{background:color-mix(in srgb,var(--mut2) 20%,transparent);color:var(--mut)}
  .ppmem{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .ppmem span{font-size:11.5px;color:var(--mut);background:var(--card2);border:1px solid var(--hair);border-radius:7px;padding:3px 8px}
  .ppmem span b{color:var(--txt);font-weight:500}
  /* prepay list → drill-in editable sheet */
  .pplist{display:flex;flex-direction:column;gap:8px}
  .pprow{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer}
  .pprow:hover{border-color:var(--gold)}
  .pprow.due{border-color:var(--orange)}
  .ppinv{font-size:11px;font-weight:700;color:var(--orange);background:color-mix(in srgb,var(--orange) 15%,transparent);border:1px solid var(--orange);border-radius:999px;padding:3px 10px;white-space:nowrap}
  .ppdh{display:flex;align-items:center;gap:14px;margin:2px 0 14px}
  .pplabel{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px}
  .ppsheet,.ppnum{width:100%;border-collapse:collapse;font-size:13px}
  .ppsheet th,.ppnum th{text-align:left;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--mut2);padding:8px 12px;border-bottom:1px solid var(--line)}
  .ppsheet td,.ppnum td{padding:7px 12px;border-bottom:1px solid var(--hair);vertical-align:middle}
  .ppsheet td.n,.ppnum td.n{color:var(--mut2);width:34px;text-align:right;font-variant-numeric:tabular-nums}
  .ppsheet tr.mt td{color:var(--mut2)}
  .ppsheet tr.trig td,.ppnum tr.trig td{box-shadow:inset 0 -2px 0 color-mix(in srgb,var(--orange) 50%,transparent)}
  .ppsheet tr.trig{background:color-mix(in srgb,var(--orange) 7%,transparent)}
  .tl{color:var(--orange);font-size:10px;font-weight:700;white-space:nowrap}
  .ppedit{display:inline-block;min-width:30px;border-radius:5px;padding:2px 5px;margin:-2px -3px;outline:none;cursor:text}
  .ppedit:hover{background:var(--card2)}
  .ppedit:focus{background:var(--card2);box-shadow:0 0 0 1px var(--gold)}
  .ppedit.dt{font-variant-numeric:tabular-nums;color:var(--mut)}
  .pplink{color:var(--gold);cursor:pointer;font-weight:700;margin-left:5px;text-decoration:none}
  .pplink:hover{text-decoration:underline}
  .ppadd{color:var(--gold);cursor:pointer;font-size:12px}
  .ppdel{color:var(--mut2);cursor:pointer;font-size:12px;margin-left:8px}
  .ppdel:hover{color:var(--red)}
  .pphist{border:1px solid var(--hair);border-radius:10px;margin-top:8px;padding:4px 10px}
  .pphist summary{cursor:pointer;font-size:12.5px;padding:5px 2px}
  .pphist[open] summary{border-bottom:1px solid var(--hair);margin-bottom:4px}
  .locklog{margin-top:14px}
  .locklog .ll-row{display:flex;gap:12px;font-size:12px;color:var(--mut);padding:6px 2px;border-bottom:1px solid var(--hair)}
  .locklog .ll-row b{color:var(--txt);font-weight:600}

  .det{display:grid;grid-template-columns:1fr;gap:14px}
  @media(min-width:780px){.det{grid-template-columns:1.4fr 1fr}}
  .drow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13.5px}
  .drow .k{color:var(--mut);white-space:nowrap}
  .drow .v{text-align:right;word-break:break-word}
  .paycard{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:16px;height:fit-content}
  .amt{font-size:26px;font-weight:700;font-family:var(--disp);letter-spacing:.5px}
  .btn{padding:11px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;width:auto}
  /* full-width only where it belongs: modal primary actions, the payment card, the mobile detail sheet.
     Page-content buttons size to their label (no more full-width stretch). Inline width overrides still win. */
  .modal .btn,.paycard .btn{width:100%}
  .btn:disabled{opacity:.5;cursor:default}
  .btn-refund{background:var(--redbg);color:var(--redtx);border:1px solid var(--red)}
  .btn-ghost{background:none;border:1px solid var(--line);color:var(--mut)}
  .back{color:var(--gold);font-size:12.5px;cursor:pointer;display:inline-block;margin-bottom:12px;font-weight:600}

  .ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:18px}
  .ov.on{display:flex}
  #duvDrop.drag{border-color:var(--gold)!important;background:rgba(200,164,126,.10)!important}
  .modal{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:440px;width:100%;box-shadow:var(--shadow);max-height:90vh;overflow:auto}
  .modal.rswide{max-width:660px}
  .rscols{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:start}
  @media(max-width:600px){.rscols{grid-template-columns:1fr;gap:14px}}
  @media(max-width:760px){.jcCols{grid-template-columns:1fr!important}}
  .jcRow{display:grid;grid-template-columns:1fr 210px 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:12px}
  .jcRow.done{border-color:var(--green)}
  .jcRow .jcMid{border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--card2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:13px}
  @media(max-width:780px){.jcRow{grid-template-columns:1fr}.jcRow .jcMid{border:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}}
  .modal h3{font-size:18px;margin-bottom:4px}
  .modal .ms{font-size:12.5px;color:var(--mut);margin-bottom:16px}
  .field{margin-bottom:13px}
  .field label{display:block;font-size:11.5px;font-weight:600;color:var(--mut);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
  .field input,.field select,.field textarea{width:100%;padding:10px 11px;background:var(--well);border:1px solid var(--line);border-radius:9px;color:var(--txt);font-size:14px}
  .lineitem{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair);font-size:13px}
  .lineitem input{width:17px;height:17px;accent-color:var(--gold)}
  .lineitem .li-amt{margin-left:auto;font-weight:600}
  .warn{background:var(--redbg);border:1px solid var(--red);color:var(--redtx);border-radius:9px;padding:10px 12px;font-size:12px;margin-bottom:14px;line-height:1.5}
  .okmsg{background:var(--greenbg);border:1px solid var(--greenbd);color:var(--green);border-radius:9px;padding:12px;font-size:13px;text-align:center}
  /* Refund breakdown marker + hover popover (detail screen + bookings list) */
  .refmark{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:default}
  .refmark .refdot{font-size:11px;opacity:.85}
  .refpop{display:none;position:absolute;z-index:60;left:0;top:calc(100% + 7px);min-width:248px;max-width:320px;
    background:var(--card2);border:1px solid var(--line2);border-radius:11px;padding:11px 12px;
    box-shadow:0 12px 30px rgba(0,0,0,.45);text-align:left;cursor:default}
  .refmark:hover .refpop{display:block}
  .refpop .rh{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--mut2);margin-bottom:7px}
  .refev{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--hair);font-size:12px}
  .refev:first-of-type{border-top:none}
  .refev .rdt{color:var(--txt);font-weight:600}
  .refev .rsub{color:var(--mut2);font-size:10.5px;margin-top:2px;line-height:1.35}
  .refev .ramt{font-weight:700;white-space:nowrap}
  .refst{font-size:9px;letter-spacing:.5px;text-transform:uppercase;padding:1px 6px;border-radius:6px;margin-left:6px;vertical-align:middle}
  .refst.done{background:var(--greenbg);color:var(--green)} .refst.pend{background:var(--orangebg);color:var(--orange)}
  .refpop .rtot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;font-weight:700}
  .listref{color:var(--orange);font-size:10px;margin-left:5px;cursor:default;position:relative}
  .refmark-list .refpop{left:auto;right:0}   /* row marker sits far-right → open leftward so it doesn't clip */

  .typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));gap:10px}
  .typecard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative}
  .typephoto{position:relative;aspect-ratio:1;background:var(--well);overflow:hidden}
  .typephoto img{width:100%;height:100%;object-fit:cover;display:block}
  .changebtn{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:7px;padding:2px 6px;font-size:12px;line-height:18px;cursor:pointer;z-index:2}
  .changebtn:hover{background:rgba(0,0,0,.8)}
  .mrgchk{text-align:center;vertical-align:middle}
  .addonrow.dragging{opacity:.4}
  .typecard.dragging{opacity:.4}
  .tdrag{position:absolute;top:5px;left:5px;background:rgba(0,0,0,.5);color:#fff;border-radius:6px;padding:0 5px;font-size:13px;line-height:18px;cursor:grab;z-index:2}
  .typebody{padding:11px 13px}
  .typebody .tn{font-size:13.5px;font-weight:600}
  .typebody .tp{font-size:11.5px;color:var(--mut2)}

  .qi{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--mut);margin-right:12px}
  .qi b{color:var(--txt);font-weight:600}
  .qi.flag b{color:var(--orange)}
  .cdetail-grid{display:grid;grid-template-columns:1fr;gap:14px}
  @media(min-width:820px){.cdetail-grid{grid-template-columns:1.5fr 1fr}}
  .chartstat{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:14px 0}
  .cs{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
  .cs .l{font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--mut2)}
  .cs .v{font-size:19px;font-family:var(--disp);margin-top:2px}
  .cchart .chartstat{margin:0 0 12px;grid-template-columns:repeat(5,1fr);gap:7px}
  .cchart .cs{padding:7px 9px}
  .cchart .cs .v{font-size:16px}
  #clPhotoId{align-items:flex-end}
  #clPhotoId .clidph{width:120px;height:120px}
  .clidb{text-align:center}
  .clidph{width:92px;height:92px;border-radius:11px;border:1px solid var(--line);background:var(--card2);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--mut2);font-size:9px;text-align:center;line-height:1.3}
  .clidph img{width:100%;height:100%;object-fit:cover;display:block}
  .clidl{font-size:9px;letter-spacing:.9px;text-transform:uppercase;color:var(--mut2);margin-top:5px;font-weight:600}
  .tl{position:relative;padding-left:18px}
  .tl::before{content:'';position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--line)}
  .tlitem{position:relative;padding:0 0 14px 0}
  .tlitem::before{content:'';position:absolute;left:-16px;top:4px;width:9px;height:9px;border-radius:50%;background:var(--gold);border:2px solid var(--card)}
  .tlitem.resched::before{background:var(--orange)}
  .tlitem .tt{font-size:13px;font-weight:600;color:var(--txt);white-space:normal}
  .tlitem .td{font-size:11px;color:var(--mut2);white-space:normal}
  /* unified metadata tag system (status/source/add-on chips) — one size + shape everywhere */
  .tlbadge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.2px;line-height:1.55;vertical-align:middle;margin-left:6px;padding:1px 7px;border-radius:6px;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 32%,transparent)}
  .tlchip{display:inline-block;font-size:10.5px;line-height:1.55;vertical-align:middle;margin:3px 5px 0 0;padding:1px 8px;border-radius:6px;background:var(--well);color:var(--mut);border:1px solid var(--line)}
  /* who-asked toggle = standard connected segmented control (matches .seg2); selected fill via the unified .on rule */
  .whoseg{display:inline-flex;margin-top:8px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .whoseg .w{font-size:11px;font-weight:600;padding:5px 13px;cursor:pointer;color:var(--mut);user-select:none;transition:background .12s,color .12s}
  .whoseg .w:not(.on):hover{color:var(--txt);background:var(--card2)}
  /* clickable phone numbers + the call/text popup */
  .phlink{cursor:pointer;border-bottom:1px dashed color-mix(in srgb,var(--blue) 50%,transparent)}
  .phlink:hover{color:var(--blue);border-bottom-color:var(--blue)}
  .phpopscrim{position:fixed;inset:0;z-index:9998}
  .phpop{position:fixed;z-index:9999;background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.5);padding:6px;min-width:186px}
  .phpop .phnum{font-size:12px;font-weight:700;color:var(--txt);padding:6px 10px 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
  .phpop a,.phpop button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;color:var(--txt);font-size:13px;padding:9px 10px;border-radius:8px;cursor:pointer;text-decoration:none}
  .phpop a:hover,.phpop button:hover{background:var(--card2)}
  .actbtn{display:block;width:100%;text-align:left;background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:13px;color:var(--txt);cursor:pointer;margin-bottom:8px}
  .linkbtn{background:none;border:none;color:var(--gold);font-size:12px;font-weight:600;cursor:pointer;padding:2px 4px}
  .clinp{width:100%;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--txt);margin-bottom:7px;outline:none}
  .clinp:focus{border-color:var(--gold)}
  .actbtn:hover{border-color:var(--line2)}
  .actbtn .sub2{font-size:11px;color:var(--mut2)}
  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--green);color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;font-weight:600;opacity:0;transition:.3s;z-index:80;box-shadow:var(--shadow)}
  .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
  .toast.err{background:var(--red)}

  .setwrap{max-width:1300px}
  /* Settings: lay each tab's individual settings into up to ~3 columns. auto-fill keeps a single
     setting ~1/3 width (room to add more beside it) and reduces scrolling on row-heavy tabs.
     Custom panels (Hours / Coupons / Jarvis) span the full width. */
  @media(min-width:980px){
    #v-settings .setsec{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));column-gap:30px;align-items:start}
    #v-settings .setsec>*{grid-column:1 / -1}
    #v-settings .setsec>.setrow{grid-column:auto}
  }
  .setsec{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:2px 16px;margin-bottom:14px}
  .setsec h4{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--mut2);padding:13px 0 9px;font-weight:700}
  .setrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--hair)}
  .setrow .sl{font-size:13.5px;font-weight:500}
  .setrow .sd{font-size:11.5px;color:var(--mut2);margin-top:2px}
  .setval{font-size:13px;color:var(--mut);text-align:right;white-space:nowrap}
  .setinput{width:74px;padding:7px 9px;background:var(--well);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:13px;text-align:right}
  input[type="tel"]{text-align:left}   /* smart phone fields always read left-to-right, never right-aligned like number cells */
  /* In Settings, selects / date / text fields are full-width + left-aligned so their content never clips (number inputs stay narrow & inline). */
  #v-settings select.setinput, #v-settings input.setinput[type=date], #v-settings input.setinput[type=text], #v-settings input.setinput:not([type]){width:100%;box-sizing:border-box;text-align:left}
  #v-settings #couponEditor select.setinput, #v-settings #couponEditor input.setinput{width:100%;box-sizing:border-box;text-align:left}
  #v-settings #aiAdminWrap select.setinput, #v-settings #aiAdminWrap input.setinput{width:100%;box-sizing:border-box}
  .timeinput{width:108px;padding:7px 9px;background:var(--well);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:13px}
  .pill{font-size:11px;border:1px solid var(--line);border-radius:8px;padding:6px 11px;color:var(--mut);cursor:pointer;background:none}
  .pill:hover{border-color:var(--gold);color:var(--gold)}
  .sortsel{background:var(--well);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:12px;cursor:pointer}
  .scsearch{background:var(--well);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px;min-width:200px;flex:1;max-width:320px}
  .scsearch::placeholder{color:var(--mut2)}
  .ctxchip{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:20px;display:inline-block;white-space:nowrap}
  .ctxchip.teams{background:rgba(59,130,246,.16);color:#7fb0ff}
  .ctxchip.personal{background:var(--goldbg);color:var(--gold)}
  .ctxchip.both{background:rgba(34,197,94,.16);color:#5fd597}
  .mglist{display:flex;flex-direction:column;gap:7px;margin:8px 0}
  .mgrec{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--well)}
  .mgrec.pick{border-color:var(--gold);background:var(--goldbg)}
  .mgrec .mgr{margin-left:auto;font-size:10px;color:var(--mut2);text-align:right}
  .mgrec .surv{font-size:9.5px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.5px}
  .mgmatch{color:var(--green);font-weight:600} .mgdiff{color:#ec8a8a;font-weight:600} .mgneu{color:inherit}
  .seg2{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .seg2 .o{padding:6px 13px;font-size:12px;color:var(--mut);cursor:pointer}
  .seg2 .o.on{background:var(--goldbg);color:var(--gold);font-weight:700}

  @keyframes cipulse{0%,100%{box-shadow:0 0 0 0 rgba(52,199,89,.55)}50%{box-shadow:0 0 0 8px rgba(52,199,89,0)}}
  .ci-pulse{animation:cipulse 1.8s ease-in-out infinite}
  .navtoggle{display:none;align-items:center;justify-content:center;width:36px;height:34px;border-radius:9px;background:var(--card2);border:1px solid var(--line);color:var(--txt);font-size:17px;cursor:pointer;flex:0 0 auto;margin-right:8px}
  .navback{display:none}
  .nav{transition:width .2s ease}
  .layout.navmin .nav{width:0;min-width:0;padding-left:0;padding-right:0;border-right:none;overflow:hidden}
  @media(max-width:820px){
    .layout{display:block;height:auto;overflow:visible}   /* phone: normal page scroll, not the fixed desktop shell */
    .shell{display:block}
    .content{overflow:visible;min-height:0}
    .navtoggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:38px;border-radius:10px;background:var(--card2);border:1px solid var(--line);color:var(--txt);font-size:18px;cursor:pointer;flex:0 0 auto;margin-right:6px}
    .nav{position:fixed;top:0;left:0;height:100%;z-index:90;width:244px;max-width:84vw;transform:translateX(-104%);transition:transform .22s ease;box-shadow:var(--shadow);overflow:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
    .layout.navopen .nav{transform:translateX(0)}
    .navback{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:89;opacity:0;pointer-events:none;transition:opacity .2s}
    .layout.navopen .navback{opacity:1;pointer-events:auto}
    .topbar{position:sticky;top:0;z-index:40;background:var(--bg);padding:11px 13px 9px;align-items:center}
    .ttl{flex:1 1 auto}
    .tools{flex:1 1 100%;flex-wrap:wrap;gap:8px;justify-content:flex-start}
    .searchwrap{flex:1 1 100%}
    .search{width:100%!important}
    .content{padding:6px 13px 30px}
    .work{flex-direction:column}
    .rail{width:100%}
    #estclock{display:none}
    #vtitle{font-size:20px;overflow:visible;text-overflow:clip}
    .stat{min-width:calc(50% - 4px)}
    .userpop{left:12px;right:auto;width:min(290px,calc(100vw - 24px));box-sizing:border-box}
    .uphead{flex-wrap:wrap;gap:8px}
    /* nothing may exceed the phone width: cap overlays, wrap wide content, scroll wide tables INSIDE a contained box */
    .content,.main,.view,.panel{max-width:100vw;box-sizing:border-box}
    /* iOS bottom-sheet modals on mobile */
    .ov{padding:0;align-items:flex-end}
    .ov .modal{max-width:100%!important;width:100%;border-radius:var(--r-sheet) var(--r-sheet) 0 0;max-height:92vh;box-sizing:border-box}
    .ov>div:not(.modal){max-width:100vw!important;box-sizing:border-box;overflow-x:auto}
    .view table:not(.tbl){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    img,canvas,video{max-width:100%;height:auto}
  }
  /* phones/tablets: list tables (.tbl) collapse to STACKED CARDS — zero horizontal scroll, every field on its own line (≤820 matches the mobile shell) */
  @media(max-width:820px){
    .tbl{display:block;width:100%}
    .tbl thead{display:none}
    .tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
    .tbl tr{background:var(--card);border:1px solid var(--line);border-radius:13px;margin-bottom:9px;padding:10px 13px}
    .tbl tr:hover{background:var(--card)}
    .tbl td{border:none;padding:3px 0;white-space:normal;overflow:visible;text-overflow:clip;font-size:14px}
    .tbl td:first-child{font-size:15.5px;font-weight:700;padding-bottom:5px}
    .tbl td .li-amt{margin-left:0}
    /* opt-in field labels on stacked .tbl cards (cells with data-label; the bold first cell stays label-free) */
    .tbl td[data-label]:not([data-label=""])::before{content:attr(data-label) ": ";font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--mut2)}
  }
  /* Mobile master→detail: big thumb-friendly stacked action buttons in detail surfaces (Square-app feel) (≤820 matches the mobile shell) */
  @media(max-width:820px){
    #bk-detail #dActions{flex-direction:column;gap:9px}
    #bk-detail #dActions .pill{width:100%;padding:14px;font-size:15px;border-radius:12px;text-align:center;box-sizing:border-box}
    #invModal{max-height:94vh}
    #invBody{max-height:74vh!important}
    .iegrid{grid-template-columns:1fr!important}
    #invActions{flex-direction:column;gap:9px}
    #invActions button{width:100%!important;padding:14px!important;font-size:15px!important;border-radius:12px!important;text-align:center!important}
  }
  /* invoice home: tiles AUTO-FIT (never crush a number past its tile, at any width); panels stack on tablet */
  .invtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,172px),1fr));gap:9px;margin-bottom:18px}
  .invtiles>*{min-width:0;overflow:hidden}
  .invcols{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
  @media(max-width:820px){.invcols{grid-template-columns:1fr}}
  /* Invoices master-detail: list left, white-paper preview right (sticky); single column on small screens */
  .invsplit{display:grid;grid-template-columns:minmax(330px,1fr) 1.25fr;gap:16px;align-items:start}
  #invDetail{position:sticky;top:10px;max-height:calc(100vh - 78px);overflow:auto}
  .invpaper{background:#e8e8e4;border-radius:12px;padding:16px}
  #invTbody tr.invselrow{background:var(--card2)!important;box-shadow:inset 3px 0 0 var(--gold)}
  @media(max-width:980px){ .invsplit{grid-template-columns:1fr} #invDetail{position:static;max-height:none} }
  /* Transactions ledger tiles → 2-up on phones (no 4-wide split on mobile) */
  @media(max-width:820px){ .txtiles{grid-template-columns:1fr 1fr!important} .txtbl th:nth-child(4),.txtbl td:nth-child(4){display:none} }
  /* ── Deliveries List view (Concept A) ───────────────────────── */
  .dlbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:13px}
  .dlseg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
  .dlseg button{background:none;border:none;color:var(--mut);font:inherit;font-size:12.5px;font-weight:600;padding:6px 14px;cursor:pointer}
  .dlseg button.on{background:var(--gold);color:#fff}
  .nlrow{display:flex;align-items:center;gap:8px;margin-bottom:7px}
  .nlck{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
  .nlck.on{background:var(--green);border-color:var(--green)}
  .nlin{flex:1;background:var(--well);border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:8px 10px;font:inherit;font-size:14px;outline:none}
  .nlin:focus{border-color:var(--gold)}
  .nldel{flex:0 0 auto;background:transparent;border:none;color:var(--mut2);font-size:18px;cursor:pointer;line-height:1;padding:2px 6px}.nldel:hover{color:var(--red)}
  @keyframes nlglow{0%{box-shadow:0 0 0 0 rgba(230,150,30,0)}30%{box-shadow:0 0 0 3px rgba(230,150,30,.6)}100%{box-shadow:0 0 0 0 rgba(230,150,30,0)}}
  .nlglow{animation:nlglow 1.4s ease-in-out 2}
  .dlctrl{background:var(--card2);border:1px solid var(--line);border-radius:9px;color:var(--txt);font:inherit;font-size:12.5px;padding:6px 10px}
  .dlsp{flex:1}
  .dlstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:14px}
  .dlstg{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 10px;position:relative;text-align:left;display:flex;align-items:baseline;gap:7px}
  .dlstg .n{font-size:16px;font-weight:700;line-height:1}
  .dlstg .l{font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut)}
  .dlstg .dot{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%}
  .dlstg.sel{border-color:var(--gold);background:var(--goldbg)}
  .dlday{font-size:11.5px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.6px;margin:16px 0 8px;display:flex;align-items:center;gap:9px}
  .dlday .cnt{color:var(--mut2);font-weight:600;letter-spacing:0}
  .dlday .ln{flex:1;height:1px;background:var(--line)}
  .dljob{display:grid;grid-template-columns:16px 1.7fr 1.15fr 0.85fr auto;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-left-width:3px;border-radius:11px;padding:10px 14px 10px 12px;margin-bottom:7px}
  .dljob:hover{background:var(--card2)}
  .dljob.u-red{border-left-color:var(--red)} .dljob.u-amber{border-left-color:var(--orange)} .dljob.u-green{border-left-color:var(--green)} .dljob.u-done{border-left-color:var(--mut2)}
  .dljob .icn{color:var(--mut2);font-size:13px;text-align:center}
  .dljob .nm{font-size:14px;font-weight:600}
  .dljob .sub{font-size:11.5px;color:var(--mut);margin-top:1px}
  .dljob .meta{font-size:12px;color:var(--mut);line-height:1.45}
  .dljob .meta b{color:var(--txt);font-weight:600}
  .dlchip{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;display:inline-block}
  .dlc-raw{background:var(--bluebg);color:var(--blue)}
  .dlc-edit{background:var(--orangebg);color:var(--orange)}
  .dlc-ready{background:var(--dgreenbg);color:var(--dgreen)}
  .dlc-edited{background:var(--yellowbg);color:var(--yellow)}
  .dlc-deliv{background:var(--greenbg);color:var(--green)}
  .dlc-rev{background:var(--redbg);color:var(--red)}
  .dlc-done{background:var(--line);color:var(--mut)}
  /* v3 lifecycle board */
  .v3board{display:flex;gap:0;align-items:stretch;width:100%}
  .v3col{flex:1;min-width:0;display:flex;flex-direction:column}
  .v3arrow{flex:0 0 16px;display:flex;align-items:center;justify-content:center;color:var(--mut2);font-size:14px;padding-top:28px}
  .v3head{display:flex;align-items:center;gap:7px;padding:0 4px 8px}
  .v3head .d{width:9px;height:9px;border-radius:50%}.v3head .t{font-size:12px;font-weight:600}.v3head .c{font-size:11px;color:var(--mut2);margin-left:auto}
  .v3body{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px;display:flex;flex-direction:column;gap:7px;flex:1;min-height:90px;max-height:64vh;overflow-y:auto}
  .v3body.needsme{border-color:var(--orange)}
  .v3jc{background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:9px;padding:9px 11px}
  .v3jc.act{border-left-color:var(--orange);background:var(--orangebg)}
  .v3nm{font-size:13px;font-weight:600;line-height:1.2}.v3ty{font-size:10.5px;color:var(--mut2);margin-top:1px}
  .v3meta{font-size:10.5px;color:var(--mut2);margin-top:5px}
  .v3btns{display:flex;flex-direction:column;gap:6px;margin-top:8px}
  .v3btns .btn{width:100%!important;justify-content:center;height:38px!important;font-size:12.5px!important;font-weight:600!important;padding:0 12px!important}
  .v3empty{font-size:11px;color:var(--mut2);text-align:center;padding:16px 0}
  .v3rail{flex:0 0 150px;margin-left:12px;display:flex;flex-direction:column;gap:10px;padding-top:26px}
  .v3railcard{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 12px;cursor:pointer}
  .v3railcard:hover{border-color:var(--line2)}
  .v3railcard .big{font-size:22px;font-weight:700;margin-top:3px}.v3railcard .s{font-size:10.5px;color:var(--mut2)}
  .dljob .rgt{display:flex;align-items:center;gap:7px;justify-content:flex-end;flex-wrap:wrap}
  .dljob .rgt .btn{width:auto!important;flex:0 0 auto;height:auto;padding:8px 13px!important;font-size:12px!important;border-radius:9px;border:1px solid var(--line);background:var(--card2);color:var(--txt)}
  .dlsub{margin:0 0 7px 26px;border-left:2px solid var(--line);padding-left:12px}
  .dlexp{cursor:pointer;color:var(--gold);font-size:11px;font-weight:600;user-select:none}
  .dllegend{font-size:11.5px;color:var(--mut);margin:14px 0 0;display:flex;gap:16px;flex-wrap:wrap}
  .dllegend span{display:inline-flex;align-items:center;gap:6px}
  /* #4 mobile: the wide Deliveries ledger table → a tight card per job on phones (no sideways scroll).
     Inline "label: value" on ONE line each (not label-over-value) → ~half the height. Meta fields flow 2-up;
     Session is the title, Notes + action buttons span full width. Lifecycle color = left stripe. Desktop unchanged. */
  @media(max-width:760px){
    .dlintro{flex-basis:100%;font-size:11px;line-height:1.4;order:-1}
    table.dlledger thead{display:none}
    table.dlledger,table.dlledger tbody{display:block;width:100%}
    table.dlledger tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 10px;border:1px solid var(--line);border-left:4px solid var(--fr,var(--line));border-radius:11px;background:var(--card);margin:0 0 8px;padding:7px 11px}
    table.dlledger td{flex:1 1 44%;min-width:0;border:none!important;box-shadow:none!important;padding:1px 0!important;text-align:left!important;white-space:normal!important;max-width:none!important;font-size:11.5px;line-height:1.3}
    table.dlledger td:empty{display:none}
    /* inline label: value (one line, tiny label) */
    table.dlledger td[data-label]:not([data-label=""])::before{content:attr(data-label) ": ";font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--mut2)}
    /* Session = the card title (full width, no label); Notes + actions full width */
    table.dlledger td[data-label="Session"]{flex-basis:100%;font-size:13px;font-weight:600;margin-bottom:1px}
    table.dlledger td[data-label="Session"]::before{display:none}
    table.dlledger td[data-label="Notes"]{flex-basis:100%}
    table.dlledger td[data-label="Notes"]::before{display:none}
    /* the whole card is a tap target → opens the mobile detail sheet; inline actions hidden, checklist read-only on the card */
    table.dlledger tr{cursor:pointer}
    table.dlledger td[data-label=""]{display:none}
    table.dlledger td[data-label="Notes"] button{pointer-events:none}
  }
  /* Mobile job-detail sheet (Square-style master→detail) — big, thumb-friendly action buttons */
  .dmov{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.5);display:none}
  .dmov.on{display:block}
  .dmsheet{position:absolute;left:0;right:0;bottom:0;top:7%;background:var(--card);border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -8px 30px rgba(0,0,0,.4)}
  .dmhead{display:flex;align-items:flex-start;gap:11px;padding:16px;border-bottom:1px solid var(--line)}
  .dmx{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card2);color:var(--txt);font-size:14px;cursor:pointer}
  .dmtitle{font-size:15px;font-weight:600;line-height:1.35;padding-top:3px}
  .dmbody{flex:1;overflow:auto;padding:6px 16px}
  .dmrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
  .dmk{color:var(--mut2);text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.4px;flex:0 0 auto}
  .dmv{text-align:right;font-size:14px;font-weight:500;min-width:0}
  .dmacts{padding:14px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
  .dmacts button,.dmacts .btn{width:100%!important;display:block!important;flex:none!important;padding:15px!important;font-size:15px!important;border-radius:12px!important;text-align:center!important;white-space:normal!important;margin:0!important}
  .dmacts span.dim{text-align:center;display:block;font-size:13px;color:var(--mut2)}
  .dlsw{width:10px;height:10px;border-radius:3px;display:inline-block}
  @media(max-width:760px){ .dlstrip{grid-template-columns:repeat(2,1fr)} .dljob{grid-template-columns:1fr;gap:6px} .dljob .icn{display:none} .dljob .rgt{justify-content:flex-start} }
  /* Generic mobile table→card transform (reusable): mark a <table> .mtbl and put data-label on each <td>.
     One "label: value" per line, meta fields 2-up; a td with data-label="_title" becomes the full-width bold header. (≤820 matches the mobile shell) */
  @media(max-width:820px){
    table.mtbl thead{display:none}
    table.mtbl,table.mtbl tbody{display:block;width:100%}
    table.mtbl tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);margin:0 0 7px;padding:7px 11px}
    table.mtbl td{flex:1 1 44%;min-width:0;border:none!important;box-shadow:none!important;text-align:left!important;white-space:normal!important;max-width:none!important;padding:1px 0!important;font-size:12px;line-height:1.3}
    table.mtbl td:empty{display:none}
    table.mtbl td[data-label]:not([data-label=""]):not([data-label="_title"])::before{content:attr(data-label) ": ";font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--mut2)}
    table.mtbl td[data-label="_title"]{flex-basis:100%;font-size:13px;font-weight:600;margin-bottom:1px}
    /* report tile grids → 2-up on phones (overrides the inline repeat(4|5,1fr)) */
    .rtiles{grid-template-columns:repeat(2,1fr)!important}
  }

  /* ── Editor inbox (email-style) ── */
  .ibxapp{display:grid;grid-template-columns:360px 1fr;gap:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;min-height:62vh;background:var(--card)}
  .ibxlist{border-right:1px solid var(--line);overflow:auto;max-height:74vh;background:var(--card)}
  .ibxreader{overflow:auto;max-height:74vh;padding:20px 24px;background:var(--card2)}
  .ibxempty{color:var(--mut2);font-size:13px;padding:40px 6px;text-align:center}
  .ibxmsg{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
  .ibxmsg:hover{background:var(--card2)} .ibxmsg.sel{background:var(--well,rgba(120,140,200,.10))}
  .ibxmsg .dot{position:absolute;left:5px;top:17px;width:7px;height:7px;border-radius:50%;background:var(--blue)} .ibxmsg.read .dot{background:transparent}
  .ibxav{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff}
  .ibxav.client{background:var(--blue)} .ibxav.studio{background:var(--orange)}
  .ibxmt{flex:1;min-width:0}
  .ibxmt .top{display:flex;align-items:center;gap:7px}
  .ibxmt .from{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ibxmsg.read .from{font-weight:600;color:var(--mut)}
  .ibxmt .time{margin-left:auto;font-size:10.5px;color:var(--mut2);white-space:nowrap}
  .ibxmt .job{font-size:11px;color:var(--blue);font-weight:700;margin:1px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ibxmt .snip{font-size:12px;color:var(--mut);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ibxsrc{font-size:9px;font-weight:800;border-radius:5px;padding:2px 6px;margin-top:5px;display:inline-block}
  .ibxsrc.client{background:rgba(90,140,230,.16);color:var(--blue)} .ibxsrc.studio{background:rgba(230,150,30,.16);color:var(--orange)}
  .ibxmessage{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:12px;padding:15px 16px;margin:14px 0}
  .ibxmessage.studio{border-left-color:var(--orange)}
  .ibxmessage .body{font-size:14px;line-height:1.6;white-space:pre-wrap;color:var(--txt)}
  .ibxsechd{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mut2);margin:20px 0 10px}
  .ibxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr));gap:11px}
  .ibxph{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card2);cursor:zoom-in;position:relative}
  .ibxph img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
  .ibxph .num{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;font-weight:800;border-radius:6px;padding:2px 6px}
  .ibxback{display:none;margin-bottom:12px}
  @media(max-width:760px){ .ibxapp{grid-template-columns:1fr} .ibxapp.reading .ibxlist{display:none} .ibxapp:not(.reading) .ibxreader{display:none} .ibxapp.reading .ibxback{display:inline-flex} }

  /* ============================================================================
     v4 COMPONENT LAYER — the actual redesign: larger pill buttons, roomier tiles,
     rounder cards + soft shadows, bigger nav items & inputs (App Store / Gmail feel).
     Restyles the SHARED primitives globally — no markup or logic changes.
     (compact/dense densities override these smaller; spacious/comfortable larger.)
     ============================================================================ */
  /* — buttons: bigger touch targets, pill-rounded — */
  .btn{padding:12px 17px;border-radius:11px;font-size:14px;font-weight:600}
  .newbtn{padding:11px 17px;border-radius:11px;font-size:12.5px}
  .out{padding:9px 15px;border-radius:11px;font-size:13px}
  .calbtn{padding:8px 13px;border-radius:10px;font-size:13px}
  .calsegbtn{padding:8px 15px;font-size:13px}
  .caldate{padding:7px 11px;border-radius:10px;font-size:13px}
  .pill{padding:8px 15px;border-radius:11px;font-size:12.5px}
  .subtab{padding:10px 18px;font-size:13px;border-radius:11px}
  .actbtn{padding:14px 16px;border-radius:11px;font-size:14px;margin-bottom:10px}
  .lockbtn{padding:9px 16px;font-size:12.5px}
  .linkbtn{font-size:13px;padding:4px 6px}
  .dlseg button{padding:9px 18px;font-size:13px}
  .dlctrl{padding:9px 13px;font-size:13px;border-radius:11px}
  .emTab{padding:9px 18px;border-radius:11px;font-size:13px}
  .etbtn{padding:13px 14px;border-radius:11px;font-size:13.5px}
  .seg2 .o{padding:9px 15px;font-size:12.5px}
  .seg3b{padding:11px 9px;font-size:12.5px;border-radius:11px}
  .aochip{padding:9px 14px;border-radius:11px}
  .subtabs,.gridbar,.dlbar,.calnav,.tabs,.emTabs{gap:9px}
  /* — iOS-style segmented controls: neutral track + elevated selected segment (UISegmentedControl feel) — */
  .calseg,.dlseg,.seg2{background:var(--well);border:1px solid var(--line);border-radius:12px;padding:3px;overflow:visible;gap:2px}
  .calsegbtn,.dlseg button,.seg2 .o{border-radius:9px;border:none;background:transparent}
  .calsegbtn.on,.dlseg button.on,.seg2 .o.on{background:var(--card);color:var(--txt);box-shadow:var(--shadow);font-weight:700}
  /* ===== iOS DEEP PASS — tactile feedback, iOS buttons, focus rings (CSS only, no feature change) ===== */
  .lcard{border-radius:20px;box-shadow:var(--shadow)}
  .lbtn{text-transform:none;letter-spacing:.2px;font-size:15px;border-radius:13px}
  .btn,.newbtn,.out,.pill,.calbtn,.subtab,.lockbtn,.dlctrl{transition:transform .08s,filter .12s,background .12s,border-color .12s}
  .btn:active,.newbtn:active,.out:active,.pill:active,.calbtn:active,.subtab:active,.dlseg button:active,.calsegbtn:active,.lbtn:active{transform:scale(.96)}
  .clrow,.row,.sdrow,.navi,.drow,.setrow,.etbtn{transition:background .12s,transform .08s}
  .clrow:active,.row:active,.sdrow:active,.etbtn:active{background:var(--card2)}
  .navi:active{transform:scale(.99)}
  .search:focus,.clinp:focus,.setinput:focus,.scsearch:focus,.field input:focus,.field select:focus,.field textarea:focus,.efield input:focus,.efield textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
  /* mobile bottom-sheet: grab-handle affordance at the top of the sheet */
  @media(max-width:820px){ .ov.on .modal::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:var(--line2);margin:-6px auto 14px} }
  /* Terminal (checkout) mobile = Square-style cascading screens (items → cart), handled in JS (renderCheckout). */
  .ckbar{position:sticky;bottom:0;z-index:8;display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.18);margin:0 -13px}
  .ckback{display:inline-flex;align-items:center;gap:5px;background:none;border:none;color:var(--blue);font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:6px 2px;margin-bottom:6px}
  .ckadd{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:14px 12px;border:none;border-bottom:1px solid var(--line);background:var(--card);color:var(--txt);font:inherit;font-size:14.5px;cursor:pointer;text-align:left}
  .ckadd:active{background:var(--card2)} .ckadd .p{color:var(--mut);font-weight:600;font-size:13px}
  /* Terminal category tabs (Square-style, left pane over items) */
  .cktabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
  .cktab{background:var(--card2);border:1px solid var(--line);color:var(--mut);border-radius:999px;padding:8px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,border-color .12s,transform .08s}
  .cktab:hover{border-color:var(--gold);color:var(--txt)}
  .cktab.on{background:var(--gold);border-color:var(--gold);color:#fff}
  .cktab:active{transform:scale(.96)}
  /* less micro: bump the tiniest chips/labels so text is iOS-readable (was 9.5–10.5px) */
  .chip{font-size:11px;padding:3px 10px}
  .pf-chip{font-size:11px} .elchip{font-size:11.5px} .navct{font-size:11px} .aochip .p{font-size:11px}
  .stat .l{font-size:11px} .srvcard .stpill{font-size:11px} .tbl th{font-size:10.5px}
  /* ===== Final mobile sweep — NO vertical splits on phones: every 2-col layout → single column (desktop keeps its columns) ===== */
  @media(max-width:820px){
    .rscols,.invcols,.tcard-grid{grid-template-columns:1fr!important}
    .view [style*="grid-template-columns:1fr 1fr"],.ov [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  }
  /* — inputs: taller, rounder — */
  .search{padding:10px 14px;border-radius:11px;font-size:13px}
  .field input,.field select,.field textarea{padding:12px 13px;border-radius:11px;font-size:14px}
  .efield input,.efield textarea{padding:11px 13px;border-radius:11px}
  .setinput,.timeinput{padding:9px 11px;border-radius:10px}
  .clinp,.scsearch,.sortsel{border-radius:10px;padding:9px 12px}
  /* — stat tiles: bigger, rounder, soft shadow — */
  .stats{gap:11px;margin-bottom:16px}
  .stat{padding:16px 18px;border-radius:14px;box-shadow:var(--shadow);min-width:150px}
  .stat .l{font-size:11px}
  .stat .v{font-size:25px;margin-top:4px}
  /* — nav items: larger, easier targets — */
  .navi{padding:6px 14px;font-size:11.5px;border-radius:10px}  /* n163c: this later rule is the EFFECTIVE one (overrides the base .navi) — 11px per Moshe, tighter rows = less nav scrolling */
  .navsechd{font-size:11px;margin:12px 12px 4px}
  /* — cards / surfaces: consistent radius + soft shadow — */
  .panel,.gridcard,.railcard,.ppcard,.tcard,.typecard,.srvcard,.setsec,.valcard{border-radius:16px}
  .panel,.gridcard,.railcard,.srvcard,.setsec,.ppcard{box-shadow:var(--shadow)}
  .modal{border-radius:18px;padding:24px}
  .paycard{border-radius:14px;padding:18px}
  /* — tables: fit-to-width, NO horizontal scroll — long cells truncate (Moshe: minimal scrolling) — */
  .tbl{table-layout:fixed;width:100%}
  .tbl th{padding:11px 14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tbl td{padding:12px 14px;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .clrow{padding:14px 16px}
  /* — content gets a touch more breathing room — */
  .content{padding:10px 24px 30px}
  /* ===== ALWAYS-FIT GUARDS — nothing spills past the viewport; shell shrinks gracefully ===== */
  .main,.content,.view,.panel{min-width:0;max-width:100%}
  .tools{min-width:0}
  .tools .search{flex:0 1 300px;min-width:110px;max-width:100%;width:auto!important}
  .searchwrap{min-width:0;flex:0 1 auto}
  /* ===== v4 HOME TOP (permanent clean section above the tile canvas) ===== */
  /* opaque sticky PANEL: content scrolls completely under it (real separation), with a built-in gap below the bar */
  #homeTop{position:sticky;top:0;z-index:6;background:var(--bg);padding:0 0 15px;box-shadow:0 -16px 0 0 var(--bg)}
  /* one SOLID connected bar (no see-through gaps) */
  .hcards{display:flex;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 10px -6px rgba(0,0,0,.45);overflow:hidden}
  .hcard{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:9px 12px;border-left:1px solid var(--line);cursor:pointer;transition:background .12s}
  .hcard:first-child{border-left:none}
  .hcard:hover{background:var(--card2)}
  .hcard .v{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1;flex:0 0 auto}
  .hcard .lw{display:flex;flex-direction:column;min-width:0;gap:1px}
  .hcard .l{font-size:10.5px;color:var(--mut);line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hcard .s{font-size:9.5px;font-weight:600;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hsec{margin:0 0 6px}
  .hseclbl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--mut2);text-transform:uppercase;margin:0 0 9px}
  #homeUpNext{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px;align-items:start}
  #homeUpNext .upitem,#homeUpNext .railcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px;box-shadow:var(--shadow)}
  @media(max-width:980px){.hcards{flex-wrap:wrap}.hcard{flex:1 1 45%}.hcard:nth-child(3){border-left:none}}
  /* phone: clean 2×2 grid, labels wrap (no "Sessions t…" truncation) */
  @media(max-width:560px){
    .hcards{display:grid;grid-template-columns:1fr 1fr;flex-wrap:initial}
    .hcard{flex:initial;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 13px;border-left:1px solid var(--line)}
    .hcard:nth-child(odd){border-left:none}
    .hcard .l{white-space:normal;overflow:visible;text-overflow:clip;order:0}
    .hcard .v{font-size:22px;order:1}
    .hcard .s{white-space:normal;order:2}
  }
  /* agenda-tile action buttons (check-in/out + directions live here now) */
  .agitem{border-top:1px solid var(--hair)} .agitem:first-child{border-top:none}
  .hmacts{display:flex;gap:6px;flex-wrap:nowrap;padding:0 2px 6px 10px}  /* n165c: one line, minimal row height (was wrap + 60px indent) */
  .hmactbtn{background:var(--card2);border:1px solid var(--line2);color:var(--fg);border-radius:8px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer}
  .hmactbtn:hover{border-color:var(--blue)}
  .hmactbtn.go{background:var(--green);color:#fff;border-color:var(--green)}
  .hmactbtn:disabled{opacity:.42;cursor:default;background:var(--card2);color:var(--mut2);border-color:var(--line)}
  .hmpill.src{background:var(--bluebg);color:var(--blue);border:1px solid var(--line)}
  .agday{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);padding:10px 2px 4px}
  .agday:first-child{padding-top:2px}
  /* Calendar = full-width Google-style; the rail (Up Next / check-in / directions) lives on the hub now */
  #v-calendar .rail{display:none!important}
  #v-calendar .work{display:block}
  #v-calendar .gridcard{width:100%}
  /* Month view (Google-style) */
  #calMonth{display:none}
  #v-calendar.monthmode #calMonth{display:block}
  #v-calendar.monthmode .gcols,#v-calendar.monthmode .gbody,#v-calendar.monthmode .calagenda{display:none!important}
  .cmhead{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:8px 0 6px}
  .cmhead>div{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--mut2);padding:0 5px}
  .cmgrid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(104px,auto);gap:6px}
  .cmcell{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:5px 5px 6px;min-height:104px;overflow:hidden;cursor:pointer;transition:border-color .12s}
  .cmcell:hover{border-color:var(--line2)}
  .cmcell.out{background:var(--well);opacity:.55}
  .cmcell.today{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
  .cmnum{font-size:12px;font-weight:700;color:var(--mut);margin-bottom:4px;padding-left:1px}
  .cmcell.today .cmnum{color:var(--blue)}
  .cmchip{font-size:10.5px;line-height:1.3;padding:2px 6px;border-radius:5px;margin-bottom:3px;background:color-mix(in srgb,var(--cc,var(--blue)) 16%,transparent);color:var(--txt);border-left:3px solid var(--cc,var(--blue));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  .cmchip .cmt{font-weight:700}
  .cmchip.ov{background:transparent;border-left-style:dashed;border-left-color:var(--mut2);color:var(--mut2)}
  .cmmore{font-size:10px;color:var(--mut2);padding:1px 4px}
  .agmeta.agnoteam{color:var(--orange);font-weight:600}
  /* Reports tiles — compact, ~5 per row (Moshe) */
  #v-reports .rtiles{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))!important;gap:9px!important;margin-bottom:12px!important}
  #v-reports .artile{padding:8px 12px!important;border-radius:10px!important}
  #v-reports .artile>div:first-child{font-size:9.5px!important;letter-spacing:.4px!important}
  #v-reports .artile>div:nth-child(2){font-size:17px!important;margin-top:1px!important;letter-spacing:-.3px!important}
  #v-reports .artile>div:nth-child(3){font-size:10px!important;margin-top:0!important}
  /* ===== TABLE STANDARDS (all charts): anchored headers · clickable sort · status pills ===== */
  .tbl thead th{position:sticky;top:0;z-index:3;background:var(--card)}
  .tbl th.thsort{cursor:pointer;user-select:none;white-space:nowrap;transition:color .12s}
  .tbl th.thsort:hover{color:var(--txt)}
  .tharr{display:inline-block;width:12px;text-align:center;color:currentColor;font-size:10px;font-weight:800;margin-left:2px}
  .seg2 .o.on .tharr{color:var(--seltx)}   /* arrow visible on the active (filled) chip */
  .spill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:2px 9px;border-radius:20px;white-space:nowrap}
  .spill.green{background:var(--greenbg);color:var(--green)}
  .spill.red{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
  .spill.amber{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}
  .spill.grey{background:var(--well);color:var(--mut)}
  .spill.blue{background:var(--bluebg);color:var(--blue)}
  /* Search/filter inputs must always read left-to-right (some used .setinput which is right-aligned for number cells) */
  input[type="search"],.scsearch,.search,#globalSearch,#navFind,
  input[placeholder*="earch" i],input[placeholder*="ilter" i]{text-align:left!important;direction:ltr!important}
  /* ════════════════ n68 MOBILE POLISH (iPhone) — additive, ≤820px ONLY · desktop untouched ════════════════ */
  @media(max-width:820px){
    /* hard guard: the page must never scroll sideways on a phone */
    html,body{max-width:100%;overflow-x:hidden}
    /* Client chart: 5 stat tiles were crushed into one row → readable 3-up grid */
    .cchart .chartstat{grid-template-columns:repeat(3,1fr);gap:8px}
    .cchart .cs{padding:9px 11px}
    .cchart .cs .l{font-size:9px;letter-spacing:.4px}
    .cchart .cs .v{font-size:17px}
    /* Bookings filter row (inline-flex wrapper around the search box): stack so the Sort dropdown can't overflow */
    #bk-list > div:has(> #bkSearch){flex-wrap:wrap;gap:8px}
    #bk-list #bkSearch{flex:1 1 100%}
    #bk-list #bkHistBtn{flex:1 1 auto}
    #bk-list > div:has(> #bkSearch) > span{margin-left:0!important}
    #bk-list #bkSort{flex:1 1 100%;min-width:0}
  }
  @media(max-width:460px){
    .cchart .chartstat{grid-template-columns:repeat(2,1fr)}  /* true phones: 2-up so labels never crush */
  }

/* Add-on production chips (deliveries board cards + Home agenda) + drawer shoot-time rows */
.hdcachips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.hdcachip{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;letter-spacing:.2px;padding:2px 7px;border-radius:6px;background:var(--well);border:1px solid var(--line);color:var(--mut);white-space:nowrap;line-height:1.5}
.hdcachip.done{background:rgba(29,158,117,.16);border-color:rgba(29,158,117,.5);color:var(--green)}
.hdcachip.shoot{background:rgba(200,164,126,.14);border-color:rgba(200,164,126,.45);color:var(--gold)}
.jbaddrow{display:flex;align-items:center;gap:8px;padding:5px 2px}
.jbaddrow .jbaddtag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--gold);background:rgba(200,164,126,.14);border:1px solid rgba(200,164,126,.4);border-radius:5px;padding:2px 6px;white-space:nowrap}