*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --primary:#1e3a5f; --primary-light:#2d6a9f; --primary-dark:#152a45;
      --accent:#f0a500; --accent-dark:#d4920a;
      --success:#27ae60; --danger:#e74c3c;
      --bg:#f0f2f5; --surface:#ffffff; --surface2:#f4f6f9;
      --text:#1a1a2e; --text-muted:#6c757d;
      --border:#dee2e6;
      --shadow:0 2px 8px rgba(0,0,0,.1); --shadow-lg:0 4px 24px rgba(0,0,0,.15);
      --radius:8px; --radius-lg:12px;
    }
    body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }

    /* ── AUTH ── */
    #view-auth { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 60%,var(--primary-light) 100%); padding:24px; }
    .auth-card { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:460px; overflow:hidden; }
    .auth-hdr { background:var(--primary); padding:32px 32px 24px; text-align:center; color:#fff; }
    .auth-logo { font-size:1.8rem; font-weight:800; }
    .auth-logo span { color:var(--accent); }
    .auth-tagline { font-size:.85rem; color:rgba(255,255,255,.65); margin-top:4px; }
    .auth-tabs { display:flex; border-bottom:2px solid var(--border); }
    .auth-tab { flex:1; padding:14px; text-align:center; font-weight:600; font-size:.9rem; cursor:pointer; background:var(--surface2); color:var(--text-muted); border:none; transition:all .2s; font-family:inherit; }
    .auth-tab.active { background:var(--surface); color:var(--primary); border-bottom:2px solid var(--accent); margin-bottom:-2px; }
    .auth-body { padding:28px 32px 32px; }
    .auth-error { background:#fdecea; border:1px solid #f5c6cb; color:var(--danger); border-radius:var(--radius); padding:10px 14px; font-size:.875rem; margin-bottom:16px; display:none; }
    .auth-link-btn { background:none; border:none; padding:0; font:inherit; font-size:.82rem; color:var(--primary); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
    .auth-link-btn:hover { color:var(--accent-dark); }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .fgrp { margin-bottom:16px; }
    label,.flbl { display:block; font-size:.8rem; font-weight:600; color:var(--text-muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.4px; }
    input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=time],select,textarea,.fctl { width:100%; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--radius); font-size:.95rem; font-family:inherit; background:var(--surface); color:var(--text); transition:border-color .2s; outline:none; }
    input:focus,select:focus,textarea:focus { border-color:var(--primary-light); }
    .pw-wrap { position:relative; }
    .pw-wrap input { padding-right:44px; }
    .pw-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:transparent; cursor:pointer; padding:4px 6px; font-size:1rem; line-height:1; color:var(--text-muted); border-radius:6px; }
    .pw-toggle:hover { color:var(--primary); background:var(--surface2); }
    .pw-toggle[aria-pressed="true"] { color:var(--primary); }
    textarea { resize:vertical; }
    .optional { color:var(--text-muted); font-weight:400; font-style:italic; }
    .section-divider { border:none; border-top:1px solid var(--border); margin:20px 0; }
    .section-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:12px; }

    /* ── BUTTONS ── */
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 18px; border-radius:var(--radius); font-size:.9rem; font-weight:600; cursor:pointer; border:none; transition:all .2s; font-family:inherit; white-space:nowrap; }
    .btn-primary { background:var(--accent); color:#fff; }
    .btn-primary:hover { background:var(--accent-dark); }
    .btn-primary:disabled { opacity:.6; cursor:not-allowed; }
    .btn-blue { background:var(--primary); color:#fff; }
    .btn-blue:hover { background:var(--primary-dark); }
    .btn-success { background:var(--success); color:#fff; }
    .btn-success:hover { background:#219a52; }
    .btn-danger { background:var(--danger); color:#fff; }
    .btn-danger:hover { background:#c0392b; }
    .btn-secondary { background:var(--surface2); color:var(--text); border:1.5px solid var(--border); }
    .btn-secondary:hover { background:var(--border); }
    .btn-accent { background:var(--accent); color:#fff; }
    .btn-accent:hover { background:var(--accent-dark); }
    .btn-sm { padding:5px 12px; font-size:.78rem; }
    .btn-lg { padding:12px 28px; font-size:1rem; }
    .btn-full { width:100%; }
    .btn:disabled { opacity:.45; cursor:not-allowed; }

    /* ── APP HEADER ── */
    #view-app { display:none; flex-direction:column; min-height:100vh; }
    header {
      background:var(--primary); color:#fff;
      padding:0 20px; padding-top:env(safe-area-inset-top, 0px);
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center; gap:14px;
      min-height:calc(62px + env(safe-area-inset-top, 0px));
      position:sticky; top:0; z-index:200;
      box-shadow:0 2px 10px rgba(0,0,0,.3);
    }
    .hdr-left {
      display:flex; align-items:center; gap:12px; min-width:0;
      justify-self:start;
    }
    .hdr-right {
      display:flex; align-items:center; gap:8px; justify-self:end;
    }
    .hdr-logo { font-size:1.1rem; font-weight:800; white-space:nowrap; flex-shrink:0; }
    .hdr-logo span { color:var(--accent); }
    .hdr-company { font-size:.88rem; color:rgba(255,255,255,.7); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
    nav {
      display:flex; gap:2px; flex-shrink:0;
      justify-self:center; grid-column:2;
    }
    nav button { background:transparent; border:none; color:rgba(255,255,255,.7); padding:7px 13px; border-radius:var(--radius); cursor:pointer; font-size:.84rem; font-weight:600; transition:all .2s; white-space:nowrap; font-family:inherit; }
    nav button:hover { background:rgba(255,255,255,.12); color:#fff; }
    nav button.active { background:rgba(255,255,255,.2); color:#fff; }
    .hclock { text-align:right; flex-shrink:0; line-height:1.2; }
    .hclock .time { font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums; }
    .hclock .date { font-size:.68rem; color:rgba(255,255,255,.6); }
    .hdr-gear-btn {
      flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
      width:40px; height:40px; border:none; border-radius:var(--radius);
      background:transparent; color:rgba(255,255,255,.85); font-size:1.2rem;
      cursor:pointer; transition:background .2s, color .2s; font-family:inherit; line-height:1;
    }
    .hdr-gear-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
    .hdr-user { position:relative; flex-shrink:0; }
    .hdr-avatar-btn { display:flex; align-items:center; gap:8px; cursor:pointer; padding:5px 8px; border-radius:var(--radius); transition:background .2s; border:none; background:transparent; color:#fff; font-family:inherit; }
    .hdr-avatar-btn:hover { background:rgba(255,255,255,.1); }
    .avatar-circle { width:32px; height:32px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; color:#fff; flex-shrink:0; }
    .hdr-dropdown { position:absolute; right:0; top:calc(100% + 8px); background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); min-width:220px; overflow:hidden; border:1px solid var(--border); z-index:300; display:none; }
    .hdr-dropdown.open { display:block; }
    .dd-user-info { padding:14px 16px; border-bottom:1px solid var(--border); background:var(--surface2); }
    .dd-name { font-weight:700; font-size:.92rem; }
    .dd-email { font-size:.78rem; color:var(--text-muted); margin-top:2px; }
    .dd-company { font-size:.78rem; color:var(--primary); font-weight:600; margin-top:4px; }
    .dd-item { display:flex; align-items:center; gap:10px; padding:11px 16px; cursor:pointer; font-size:.88rem; font-weight:500; transition:background .15s; border:none; background:none; font-family:inherit; color:var(--text); width:100%; text-align:left; }
    .dd-item:hover { background:var(--surface2); }
    .dd-item.danger { color:var(--danger); }
    .dd-sep { border:none; border-top:1px solid var(--border); }

    /* ── MAIN LAYOUT ── */
    main { flex:1; max-width:1400px; margin:0 auto; padding:22px; width:100%; }
    .view { display:none; }
    .view.active { display:block; }
    .sec-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
    .sec-hdr h2 { font-size:1.1rem; font-weight:700; color:var(--primary); display:flex; align-items:center; gap:8px; }
    .page-title { font-size:1.35rem; font-weight:800; color:var(--primary); }
    .card { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:20px 22px; margin-bottom:20px; }
    .card-title { font-size:.95rem; font-weight:700; color:var(--primary); margin-bottom:14px; }
    hr.divider { border:none; border-top:1px solid var(--border); margin:22px 0; }

    /* ── PULSE ── */
    .pulse { display:inline-block; width:8px; height:8px; background:var(--success); border-radius:50%; animation:pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }
    .badge-count { background:var(--accent); color:#fff; border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; }
    .btn.has-alerts { border-color:var(--accent); color:var(--accent-dark, #b45309); }
    /* Billable vs clock: gold = gain (above clock), soft red = below clock */
    .billable-adj { color: var(--accent-dark, #b45309) !important; }
    .billable-low { color: #e57373 !important; }
    td.sum-billable-col { white-space: nowrap; }
    .billed-tag { background:#d4edda; color:#155724; font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:10px; margin-left:6px; }
    .unbilled-tag { background:#fff3cd; color:#856404; font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:10px; margin-left:6px; }
    .hold-tag { background:#e8eaf6; color:#3730a3; font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:10px; margin-left:6px; }

    /* ── BILLING PAGE ── */
    .billing-scope-bar {
      display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
      gap:12px 18px; margin-bottom:14px;
    }
    .billing-scope-bar .week-nav { justify-content:center; }
    .billing-scope-bar #billingWeekNav[hidden] { display:none !important; }
    .billing-week-chip {
      font-size:.78rem; font-weight:700; color:var(--primary);
      background:var(--surface2); border:1px solid var(--border);
      border-radius:999px; padding:3px 10px;
      white-space:nowrap;
    }
    .billing-weekday-chip {
      font-size:.82rem; font-weight:600; color:var(--text-muted);
      white-space:nowrap;
    }
    .billing-weekday-chip::before {
      content:'·';
      margin:0 4px 0 2px;
      color:var(--border);
      font-weight:700;
    }
    .billing-cust-name {
      font-weight:800;
      color:var(--text);
    }
    /* Customer name inside dark blue group headers must stay white */
    .rpt-hdr .billing-cust-name,
    .rpt-hdr h3,
    .rpt-hdr h3 strong {
      color:#fff;
    }
    .billing-stats-note {
      font-size:.76rem; color:var(--text-muted); margin:-6px 0 14px;
    }
    .billing-chain-banner {
      font-size:.8rem; font-weight:700; color:var(--primary);
      background:rgba(30,58,95,.08); border:1px solid var(--border);
      border-radius:8px; padding:8px 12px; margin-bottom:4px;
    }
    .billing-week-breakdown {
      display:flex; flex-direction:column; gap:4px;
      margin:4px 0 2px; padding:0;
      list-style:none; font-size:.8rem; color:var(--text-muted);
    }
    .billing-week-breakdown li {
      display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline;
    }
    .billing-week-breakdown .bd-week { font-weight:700; color:var(--text); }
    .billing-week-breakdown .bd-hrs { font-weight:700; color:var(--primary); }
    .billing-combine-opt {
      display:flex; align-items:flex-start; gap:10px;
      padding:10px 12px; border:1px solid var(--border); border-radius:8px;
      background:var(--surface2); cursor:pointer; font-size:.84rem;
    }
    .billing-combine-opt:has(input:checked) {
      border-color:var(--primary); background:rgba(30,58,95,.06);
    }
    .billing-combine-opt input { margin-top:3px; }
    .billing-toolbar {
      display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
      margin-bottom:10px; padding:10px 14px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius-lg); box-shadow:var(--shadow);
    }
    .billing-hint { font-size:.8rem; color:var(--text-muted); margin:0 0 14px; }
    .billing-stats {
      display:flex; flex-wrap:wrap; gap:14px 22px; margin-bottom:14px;
      font-size:.84rem; color:var(--text-muted);
    }
    .billing-stats strong { color:var(--primary); }
    .billing-unit-list {
      display:flex; flex-direction:column; gap:12px;
      padding:14px;
      background:var(--surface2);
    }
    .billing-unit-row {
      display:flex; flex-direction:column; gap:12px;
      padding:14px 16px;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
    }
    .billing-unit-row.billing-row-highlight {
      background:rgba(212, 175, 55, .12);
      border-color:rgba(212, 175, 55, .45);
    }
    .billing-unit-top {
      display:flex; align-items:center; justify-content:space-between;
      gap:12px; flex-wrap:wrap;
    }
    .billing-unit-title {
      display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
      min-width:0; flex:1 1 auto;
    }
    .billing-unit-title strong { font-size:1.05rem; }
    .billing-unit-top .billed-tag,
    .billing-unit-top .unbilled-tag,
    .billing-unit-top .hold-tag {
      flex-shrink:0;
      font-size:.85rem;
      font-weight:800;
      padding:5px 14px;
      border-radius:999px;
      margin-left:0;
      letter-spacing:.02em;
    }
    .billing-unit-cust { font-size:.9rem; font-weight:500; color:var(--text-muted); }
    .billing-unit-num { font-size:1.05rem; }
    .billing-ro-chip {
      display:inline-flex; align-items:center; gap:4px;
      font-size:.75rem; font-weight:700; font-family:inherit;
      padding:4px 10px; border-radius:999px; cursor:pointer;
      border:1px solid var(--border); background:var(--surface2);
      color:var(--primary); line-height:1.2;
    }
    .billing-ro-chip:hover { background:var(--border); }
    .billing-unit-body {
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:18px 24px; flex-wrap:wrap;
    }
    .billing-unit-meta {
      display:grid;
      grid-template-columns:repeat(4, minmax(72px, 1fr));
      gap:10px 20px;
      flex:1 1 280px;
      min-width:0;
    }
    .billing-meta-item {
      display:flex; flex-direction:column; gap:3px; min-width:0;
    }
    .billing-meta-lbl {
      font-size:.72rem; font-weight:800; letter-spacing:.04em;
      text-transform:uppercase; color:var(--primary);
    }
    .billing-meta-val {
      font-size:1.05rem; font-weight:800; color:var(--text);
      font-variant-numeric:tabular-nums; word-break:break-word;
    }
    .billing-invoice-btn {
      display:inline-flex; align-items:center; gap:6px;
      padding:0; border:none; background:none; cursor:pointer;
      font:inherit; font-size:1.05rem; font-weight:800; color:var(--primary);
      font-variant-numeric:tabular-nums; text-align:left;
    }
    .billing-invoice-btn:hover { text-decoration:underline; }
    .billing-invoice-edit {
      font-size:.78rem; font-weight:700; color:var(--text-muted);
    }
    .billing-hold-note {
      font-size:.88rem; font-weight:700; color:#3730a3;
      padding:6px 10px; background:rgba(55, 48, 163, .06);
      border-radius:var(--radius); border-left:3px solid #3730a3;
    }
    .billing-hold-note .billing-meta-lbl { margin-bottom:2px; }
    .billing-actions {
      display:grid;
      grid-template-columns:repeat(2, minmax(110px, auto));
      gap:8px;
      flex:0 0 auto;
      align-content:end;
    }
    .billing-actions .btn { justify-content:center; white-space:nowrap; }
    @media (max-width:720px) {
      .billing-unit-meta { grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .billing-unit-body { align-items:stretch; }
      .billing-actions { width:100%; grid-template-columns:1fr 1fr; }
    }
    .no-lunch-tag { background:#fde8e8; color:#9b1c1c; font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:10px; margin-left:8px; vertical-align:middle; }
    .edit-btn { background:none; border:none; cursor:pointer; font-size:.9rem; padding:0 4px; color:var(--text-muted); }
    .edit-btn:hover { color:var(--primary); }

    /* ── ACTIVE SESSIONS ── */
    .active-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; margin-bottom:24px; }
    .active-card { background:var(--surface); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow); border-left:4px solid var(--accent); cursor:pointer; transition:box-shadow .15s,transform .15s; position:relative; }
    .active-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-1px); }
    .ac-name { font-size:1rem; font-weight:700; color:var(--primary); margin-bottom:2px; padding-right:64px; }
    .ac-unit { font-size:1.35rem; font-weight:800; color:var(--accent-dark); margin-bottom:4px; line-height:1.2; }
    .ac-unit-sub {
      display:inline-block; font-size:.78rem; font-weight:700; color:var(--primary);
      background:var(--surface2); border:1px solid var(--border); border-radius:999px;
      padding:2px 10px; margin-bottom:6px;
    }
    .ac-meta { font-size:.8rem; color:var(--text-muted); margin-bottom:6px; }
    .ac-elapsed { font-size:1.2rem; font-weight:700; color:var(--success); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:6px; }
    .ac-edit { position:absolute; top:10px; right:10px; background:rgba(255,255,255,.85); border:1px solid var(--border); border-radius:5px; padding:3px 9px; font-size:.72rem; cursor:pointer; color:var(--text-muted); transition:all .15s; }
    .ac-edit:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
    .active-card.lunch-card { border-left-color:var(--accent-dark); background:linear-gradient(135deg,#fffbf0,#fff); cursor:default; }
    .active-card.lunch-card:hover { box-shadow:var(--shadow); transform:none; }
    .ac-lunch-tag { font-size:.78rem; font-weight:700; color:var(--accent-dark); margin-bottom:4px; }
    .ac-lunch-actions { display:flex; gap:8px; margin-top:12px; }
    .ac-lunch-btn { flex:1; border:1.5px solid var(--border); border-radius:var(--radius); padding:7px 10px; font-size:.8rem; font-weight:700; cursor:pointer; background:#fff; font-family:inherit; color:var(--text); transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s; }
    .ac-lunch-btn:hover { background:#fff8e8; border-color:var(--accent); color:var(--accent-dark); box-shadow:0 0 0 2px rgba(232,168,56,.22); transform:translateY(-1px); }
    .ac-lunch-btn:active { transform:translateY(0); box-shadow:none; }
    .ac-lunch-btn.resume { background:var(--success); border-color:var(--success); color:#fff; }
    .ac-lunch-btn.resume:hover { filter:brightness(1.08); background:var(--success); border-color:var(--success); color:#fff; box-shadow:0 0 0 2px rgba(40,167,69,.25); }
    .ac-lunch-btn.clockout { color:var(--danger); border-color:var(--danger); }
    .ac-lunch-btn.clockout:hover { background:#fef2f2; border-color:var(--danger); color:var(--danger); box-shadow:0 0 0 2px rgba(220,53,69,.18); }

    /* ── EMPLOYEE GRID ── */
    .emp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:12px; }
    .emp-btn { background:var(--surface); border:2px solid var(--border); border-radius:var(--radius-lg); padding:14px; cursor:pointer; display:flex; align-items:center; gap:12px; transition:all .2s; font-family:inherit; text-align:left; width:100%; }
    .emp-btn:hover { border-color:var(--primary-light); box-shadow:var(--shadow); transform:translateY(-1px); }
    .emp-btn.on { border-color:var(--accent); background:linear-gradient(135deg,#fff9ea,#fff); }
    .emp-btn.on:hover { border-color:var(--accent-dark); }
    .avatar { width:40px; height:40px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0; }
    .emp-btn.on .avatar { background:var(--accent); }
    .emp-info-name { font-weight:700; font-size:.9rem; }
    .emp-info-status { font-size:.75rem; color:var(--text-muted); margin-top:2px; }
    .emp-btn.on .emp-info-status { color:var(--accent-dark); font-weight:600; }

    /* ── EMPTY STATE ── */
    .empty-state { text-align:center; padding:36px; color:var(--text-muted); font-style:italic; background:var(--surface); border-radius:var(--radius-lg); border:2px dashed var(--border); }

    /* ── MODALS ── */
    .overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:1000; padding:16px; backdrop-filter:blur(3px); }
    .modal { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:540px; max-height:92vh; overflow:hidden; display:flex; flex-direction:column; animation:slideUp .2s ease; }
    @keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
    .modal-hdr { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--primary); color:#fff; flex-shrink:0; }
    .modal-hdr h3 { font-size:1rem; font-weight:700; }
    .modal-x { background:none; border:none; cursor:pointer; font-size:1.4rem; line-height:1; color:rgba(255,255,255,.8); transition:color .15s; }
    .modal-x:hover { color:#fff; }
    .modal-body { padding:22px; overflow-y:auto; flex:1; min-height:0; }
    .modal-ftr { padding:14px 22px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; flex-shrink:0; }

    /* ── EQUIP PICKER ── */
    .ci-quick-add { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
    .ci-quick-add-fields { display:flex; gap:8px; align-items:center; }
    .ci-quick-add-fields #ciNewUnit { width:110px; flex:0 0 110px; }
    .ci-quick-add-fields #ciNewDesc { flex:1 1 auto; width:auto; min-width:0; }
    .ci-quick-add-actions { display:flex; justify-content:flex-end; }
    .equip-search-wrap { position:relative; margin-bottom:10px; }
    .equip-search-wrap input { padding-left:34px; }
    .search-ico { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none; font-size:1rem; }
    .equip-list { max-height:280px; overflow-y:auto; border:1.5px solid var(--border); border-radius:var(--radius); }
    .equip-item { padding:10px 14px; cursor:pointer; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); transition:background .12s; }
    .equip-item:last-child { border-bottom:none; }
    .equip-item:hover { background:var(--surface2); }
    .equip-item.selected { background:#e8f0fe; }
    .unit-chip { background:var(--primary); color:#fff; padding:2px 10px; border-radius:4px; font-size:.78rem; font-weight:700; min-width:58px; text-align:center; white-space:nowrap; }
    .unit-chip-ymm { min-width:0; max-width:180px; white-space:normal; line-height:1.25; text-align:left; font-size:.72rem; }
    .equip-desc { font-size:.86rem; color:var(--text); }

    /* ── STORY TOOLBAR ── */
    .story-tools { display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
    .story-tool-btn { border:1px solid var(--border); background:var(--surface2); border-radius:8px; padding:6px 12px; font-size:.78rem; font-weight:600; color:var(--primary); cursor:pointer; font-family:inherit; }
    .story-tool-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }

    /* ── ROW ACTION ICONS ── */
    .row-edit-btn { background:none; border:none; cursor:pointer; font-size:1rem; padding:2px 6px; border-radius:6px; color:var(--text-muted); line-height:1; }
    .row-edit-btn:hover { background:var(--surface2); color:var(--primary); }

    /* ── INFO CARD ── */
    .info-card { background:var(--surface2); border-radius:var(--radius); padding:14px; margin-bottom:14px; }
    .icr { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
    .icr:last-child { margin-bottom:0; }
    .ic-lbl { font-weight:600; font-size:.88rem; }
    .ic-val { font-weight:700; }
    .ic-val.big { font-size:1.4rem; color:var(--success); font-variant-numeric:tabular-nums; }

    /* ── TABLES ── */
    .tbl-wrap { overflow-x:auto; }
    table { width:100%; border-collapse:collapse; font-size:.88rem; }
    th { background:var(--surface2); padding:9px 14px; text-align:left; font-size:.73rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); font-weight:700; border-bottom:2px solid var(--border); white-space:nowrap; }
    td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
    tr:last-child td { border-bottom:none; }
    tbody tr:hover td { background:var(--surface2); }
    .td-chip { background:var(--primary); color:#fff; padding:2px 8px; border-radius:4px; font-size:.75rem; font-weight:700; display:inline-block; white-space:nowrap; }
    .pill { padding:2px 10px; border-radius:20px; font-size:.73rem; font-weight:700; }
    .pill-on { background:#d4edda; color:#155724; }
    .pill-off { background:#f8d7da; color:#721c24; }
    .pill-muted { background:var(--border); color:var(--text-muted); }

    /* ── REPORTS ── */
    .report-bar { background:var(--surface); border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:18px; box-shadow:var(--shadow); display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
    .week-nav { display:flex; align-items:center; gap:8px; }
    .week-nav button { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:6px 14px; cursor:pointer; font-size:1.1rem; transition:background .15s; }
    .week-nav button:hover { background:var(--border); }
    .week-lbl { font-weight:700; font-size:.9rem; min-width:200px; text-align:center; }
    .tab-bar { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
    .tab-btn { padding:8px 20px; border:2px solid var(--border); border-radius:30px; background:var(--surface); color:var(--text-muted); cursor:pointer; font-weight:600; font-size:.84rem; transition:all .2s; font-family:inherit; }
    .tab-btn.active { border-color:var(--primary); background:var(--primary); color:#fff; }
    .rpt-section { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; }
    .rpt-hdr { background:var(--primary); color:#fff; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; }
    .rpt-hdr h3 { font-size:.95rem; font-weight:700; }
    .rpt-total { background:rgba(255,255,255,.2); padding:2px 14px; border-radius:20px; font-size:.8rem; font-weight:700; }
    .rpt-collapse { cursor:pointer; user-select:none; }
    .rpt-collapse-body { display:block; }
    .rpt-collapse.collapsed .rpt-collapse-body { display:none; }
    .sum-unit-row { cursor:pointer; }
    .sum-unit-row:hover td { background:#f0f5fb; }
    .sum-toolbar {
      display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
      margin-bottom:14px; padding:10px 14px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius-lg); box-shadow:var(--shadow);
    }
    .sum-toolbar-lbl { font-size:.82rem; font-weight:700; color:var(--primary); }
    .sum-group-toggle { display:flex; gap:6px; }
    .sum-toolbar-hint { font-size:.78rem; color:var(--text-muted); margin-left:auto; }
    .sum-period-banner {
      padding:10px 16px; font-size:.9rem; font-weight:700; color:var(--primary);
      background:var(--surface2); border-bottom:1px solid var(--border);
      letter-spacing:.01em;
    }
    .sum-punch-hint {
      font-size:.68rem; font-weight:600; color:var(--primary); opacity:.75;
      margin-left:6px; text-transform:uppercase; letter-spacing:.03em;
    }
    .unit-punch-nav {
      display:flex; align-items:center; gap:10px; flex-wrap:wrap;
      margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border);
    }
    .unit-punch-nav .week-lbl { font-weight:700; font-size:.9rem; color:var(--primary); min-width:160px; text-align:center; }
    .unit-punch-tbl { width:100%; border-collapse:collapse; font-size:.84rem; }
    .unit-punch-tbl th {
      text-align:left; padding:8px 10px; background:var(--surface2); border-bottom:1px solid var(--border);
      font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted);
    }
    .unit-punch-tbl td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
    .unit-punch-tbl tr.lunch td { color:var(--text-muted); font-style:italic; }
    .unit-punch-story { max-width:280px; white-space:pre-wrap; line-height:1.4; color:var(--text-muted); font-size:.8rem; }
    .gap-banner {
      background:#fff8eb; border:1px solid #f0d080; border-radius:var(--radius);
      padding:12px 14px; font-size:.88rem; line-height:1.5;
    }
    .gap-banner strong { color:var(--primary); }
    .gap-panels { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
    .gap-panels.three { grid-template-columns:1fr 1fr 1fr; }
    @media (max-width:900px) { .gap-panels.three { grid-template-columns:1fr; } }
    @media (max-width:640px) { .gap-panels { grid-template-columns:1fr; } }
    .gap-panel {
      background:var(--surface2); border-radius:var(--radius);
      padding:14px; border:1.5px solid var(--border);
    }
    .gap-panel h4 { font-size:.85rem; color:var(--primary); margin:0 0 10px; font-weight:700; line-height:1.35; }
    .gap-panel .gap-meta { font-size:.78rem; color:var(--text-muted); margin-bottom:10px; }
    .missing-lunch-list { display:flex; flex-direction:column; gap:8px; }
    .missing-lunch-row {
      display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center;
      padding:10px 12px; background:var(--surface2); border:1px solid var(--border);
      border-radius:var(--radius); font-size:.86rem;
    }
    .missing-lunch-row .ml-main { min-width:0; }
    .missing-lunch-row .ml-unit { font-weight:700; color:var(--primary); }
    .missing-lunch-row .ml-time { color:var(--text-muted); font-size:.82rem; margin-top:2px; }
    .missing-lunch-row.lunch { border-color:#c4a35a; background:#fff8eb; }
    .missing-lunch-row.gap-hint {
      border:2px solid #dc2626;
      background:#fff5f5;
      box-shadow:inset 3px 0 0 #dc2626;
    }
    .conflict-ro-choices { display:flex; flex-wrap:wrap; gap:8px; }
    .conflict-ro-choice {
      border:1.5px solid var(--border); background:var(--surface); color:var(--text);
      border-radius:var(--radius); padding:8px 12px; font-size:.86rem; font-weight:600;
      cursor:pointer; font-family:inherit;
    }
    .conflict-ro-choice:hover { border-color:var(--primary); }
    .conflict-ro-choice.active {
      border-color:var(--primary); background:#e8f0fe; color:var(--primary);
    }
    .conflict-ro-choice .ro-count { font-weight:500; color:var(--text-muted); font-size:.78rem; margin-left:6px; }
    .missing-lunch-row.ro-mismatch { border-color:#f0a0a0; background:#fff5f5; }
    .missing-lunch-row .ml-ro { font-size:.8rem; margin-top:3px; }
    .missing-lunch-row .ml-ro.wrong { color:#b91c1c; font-weight:700; }
    .missing-lunch-row .ml-ro.ok { color:#157347; font-weight:600; }
    .alert-focus-box {
      border-radius:var(--radius);
      padding:10px;
      margin:0 -2px;
    }
    .alert-focus {
      position:relative;
      z-index:0;
      background:rgba(220, 38, 38, 0.06);
      box-shadow:0 0 0 2px rgba(220, 38, 38, 0.55);
    }
    .alert-focus::after {
      content:'';
      position:absolute;
      inset:-3px;
      border-radius:calc(var(--radius) + 2px);
      pointer-events:none;
      z-index:1;
      background:conic-gradient(from var(--alert-tracer, 0deg),
        #dc2626 0deg, #dc2626 55deg,
        transparent 90deg, transparent 270deg,
        #dc2626 305deg, #dc2626 360deg);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      padding:2.5px;
      animation:alert-focus-spin 1.6s linear infinite;
    }
    @property --alert-tracer {
      syntax:'<angle>';
      inherits:false;
      initial-value:0deg;
    }
    @keyframes alert-focus-spin {
      to { --alert-tracer:360deg; }
    }
    @media (prefers-reduced-motion:reduce) {
      .alert-focus::after { animation:none; border:2.5px solid #dc2626; background:none; padding:0; -webkit-mask:none; mask:none; }
    }
    .total-row td { font-weight:700; background:#eef2f8; color:var(--primary); }
    tr.lunch-row td { color:var(--text-muted); font-style:italic; }
    .story-td { max-width:260px; font-size:.82rem; color:var(--text-muted); line-height:1.45; white-space:pre-wrap; }

    /* ── SETTINGS ── */
    .settings-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:20px; }
    .s-card { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
    .s-card-hdr { background:var(--primary); color:#fff; padding:12px 18px; font-weight:700; font-size:.9rem; }
    .s-card-body { padding:18px; }
    .s-full { grid-column:1/-1; }
    .co-info-layout {
      display:grid;
      grid-template-columns:minmax(260px,1fr) minmax(280px,1.1fr);
      gap:22px 28px;
      align-items:stretch;
    }
    @media (max-width:800px) {
      .co-info-layout { grid-template-columns:1fr; }
    }
    .co-info-form .fgrp { max-width:420px; }
    .co-info-aside {
      background:linear-gradient(165deg, #f4f7fb 0%, #eef2f8 55%, #e8edf5 100%);
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:18px 18px 16px;
      display:flex;
      flex-direction:column;
      gap:12px;
      min-height:260px;
    }
    .co-logo-stage {
      background:#fff;
      border:1px dashed #c5d0de;
      border-radius:var(--radius);
      min-height:150px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:16px;
      position:relative;
    }
    .co-logo-img {
      max-height:140px;
      max-width:100%;
      object-fit:contain;
    }
    .co-logo-placeholder {
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:4px;
      color:var(--text-muted);
      font-size:.88rem;
      font-weight:600;
      text-align:center;
    }
    .co-logo-placeholder small { font-weight:500; font-size:.76rem; opacity:.85; }
    .co-logo-ph-ico { font-size:1.6rem; line-height:1; margin-bottom:4px; opacity:.7; }
    .co-aside-name {
      font-size:1.05rem;
      font-weight:800;
      color:var(--primary);
      line-height:1.25;
    }
    .co-aside-stats {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }
    .co-stat {
      background:rgba(255,255,255,.72);
      border:1px solid rgba(15,40,80,.08);
      border-radius:var(--radius);
      padding:10px 12px;
    }
    .co-stat-val { font-size:1.05rem; font-weight:800; color:var(--primary); line-height:1.1; }
    .co-stat-lbl { font-size:.72rem; color:var(--text-muted); margin-top:3px; text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
    .co-aside-hint { margin:0; font-size:.78rem; color:var(--text-muted); line-height:1.4; }
    .list-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
    .list-row:last-child { border-bottom:none; }
    #empSettingsList .list-row { flex-wrap:nowrap; }
    #empSettingsList .lr-acts { flex-wrap:wrap; justify-content:flex-end; }
    .lr-name { font-weight:600; font-size:.88rem; }
    .lr-sub { font-size:.75rem; color:var(--text-muted); }
    .lr-acts { display:flex; gap:6px; align-items:center; flex-shrink:0; margin-left:10px; }

    /* ── ALERT / SETTINGS COLLAPSE ── */
    .alert-opt { display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-bottom:1px solid var(--border); }
    .alert-opt:last-child { border-bottom:none; }
    .alert-opt > input[type="checkbox"] { margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--primary); }
    .alert-opt-body { flex:1; min-width:0; }
    .alert-opt-title { font-weight:600; font-size:.9rem; }
    .alert-opt-desc { font-size:.82rem; color:var(--text-muted); margin-top:4px; line-height:1.45; }
    .alert-opt-fields { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-top:10px; max-width:480px; }
    .set-collapse { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; background:var(--surface2); }
    .set-collapse summary { padding:12px 16px; font-weight:700; font-size:.88rem; color:var(--primary); cursor:pointer; user-select:none; list-style:none; }
    .set-collapse summary::-webkit-details-marker { display:none; }
    .set-collapse summary::before { content:'▸ '; color:var(--text-muted); }
    .set-collapse[open] summary::before { content:'▾ '; }
    .set-collapse-body { padding:0 16px 14px; }
    .settings-help { font-size:.82rem; color:var(--text-muted); line-height:1.5; background:var(--surface2); border-radius:var(--radius); padding:12px 14px; margin-bottom:16px; }
    .emp-perm-grid { display:flex; flex-direction:column; gap:8px; }
    .emp-perm { display:flex; align-items:flex-start; gap:8px; font-size:.84rem; color:var(--text); cursor:pointer; line-height:1.35; }
    .emp-perm input { margin-top:2px; flex-shrink:0; }
    .emp-perm-details summary { list-style:none; }
    .emp-perm-details summary::-webkit-details-marker { display:none; }
    .col-check-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
    .col-check-grid label { display:flex; gap:6px; align-items:center; font-size:.86rem; font-weight:400; text-transform:none; }
    .excel-order-list { display:flex; flex-direction:column; gap:6px; min-height:40px; }
    .excel-order-row {
      display:flex; align-items:center; gap:10px;
      padding:8px 10px; background:var(--surface); border:1.5px solid var(--border);
      border-radius:var(--radius); font-size:.88rem; font-weight:400; text-transform:none;
      box-shadow:0 1px 2px rgba(0,0,0,.04); transition:box-shadow .15s, border-color .15s, transform .15s, opacity .15s;
      user-select:none;
    }
    .excel-order-row label { display:flex; align-items:center; gap:8px; flex:1; margin:0; font-weight:500; text-transform:none; letter-spacing:0; color:var(--text); cursor:pointer; user-select:none; }
    .excel-drag-handle {
      flex-shrink:0; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
      border-radius:6px; color:var(--text-muted); cursor:grab; font-size:1.1rem; line-height:1;
      letter-spacing:-2px;
    }
    .excel-drag-handle:active { cursor:grabbing; }
    .excel-drag-handle:hover { background:var(--surface2); color:var(--primary); }
    .excel-order-row.dragging {
      opacity:.45; border-style:dashed; box-shadow:none; transform:scale(.98);
    }
    .excel-order-row.drag-over {
      border-color:var(--primary); box-shadow:0 0 0 2px rgba(30,58,95,.18);
      transform:translateY(1px);
    }
    .excel-order-row .excel-order-btns { display:flex; gap:4px; }
    .excel-order-row .excel-order-btns button {
      width:30px; height:28px; padding:0; font-size:.85rem; line-height:1;
    }
    @media (prefers-reduced-motion:reduce) {
      .excel-order-row { transition:none; }
    }

    /* ── VEHICLE CARDS ── */
    .v-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
    .v-card { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; transition:box-shadow .2s,transform .2s; }
    .v-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
    .v-card-hdr { background:var(--primary); color:#fff; padding:12px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
    .v-card-hdr.clickable { cursor:pointer; }
    .v-card-hdr.clickable:hover { filter:brightness(1.08); }
    .v-card-hdr h3, .v-customer { font-size:1.05rem; font-weight:800; line-height:1.25; margin:0; width:100%; }
    .v-unit-banner {
      display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
      color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.02em;
      padding:3px 10px; border-radius:999px; line-height:1.2;
    }
    .v-card-body { padding:12px 16px; }
    .v-row { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid var(--border); font-size:.83rem; }
    .v-row:last-child { border-bottom:none; }
    .v-lbl { color:var(--text-muted); font-size:.76rem; }
    .v-val { font-weight:600; font-family:monospace; font-size:.82rem; }
    .v-val.normal { font-family:inherit; font-size:.86rem; font-weight:500; }
    .v-card-ftr { padding:10px 16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

    /* ── ACCOUNT MODAL ── */
    .acct-section { margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--border); }
    .acct-section:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
    .acct-section h4 { font-size:.88rem; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.4px; margin-bottom:14px; }
    .sub-badge { display:inline-flex; align-items:center; gap:6px; background:#d4edda; color:#155724; padding:4px 12px; border-radius:20px; font-size:.82rem; font-weight:700; }

    /* ── TOAST ── */
    .toast-wrap { position:fixed; bottom:22px; right:22px; z-index:2000; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
    .toast { background:#2d3748; color:#fff; padding:11px 18px; border-radius:var(--radius); box-shadow:var(--shadow-lg); font-size:.86rem; max-width:300px; animation:toastIn .3s ease; pointer-events:auto; }
    .toast.ok { background:var(--success); }
    .toast.err { background:var(--danger); }
    @keyframes toastIn { from{transform:translateX(80px);opacity:0} to{transform:translateX(0);opacity:1} }

    /* ── SPINNER ── */
    .spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
    @keyframes spin { to{transform:rotate(360deg)} }

    /* ── PRINT ── */
    .no-print { }
    .print-only { display:none; }
    @media print {
      header,.no-print { display:none !important; }
      body { background:#fff; }
      main { padding:0; max-width:none; }
      .view { display:block !important; }
      #view-dashboard,#view-vehicles,#view-settings,#view-account { display:none !important; }
      #view-reports { display:block !important; }
      /* Keep each employee/unit block together when possible; allow long tables to split */
      .rpt-section {
        box-shadow:none; border:1px solid #ccc; margin-bottom:14px; overflow:visible; border-radius:0;
        break-inside: avoid-page; page-break-inside: avoid;
      }
      .rpt-collapse,.rpt-collapse-body { display:block !important; }
      .rpt-collapse.collapsed .rpt-collapse-body { display:block !important; }
      .rpt-hdr {
        -webkit-print-color-adjust:exact; print-color-adjust:exact;
        break-after: avoid; page-break-after: avoid;
      }
      .rpt-section table { break-inside: auto; page-break-inside: auto; }
      .rpt-section tr { break-inside: avoid; page-break-inside: avoid; }
      .rpt-section tr.total-row { break-before: avoid; page-break-before: avoid; }
      .print-hdr { break-after: avoid; page-break-after: avoid; }
      table { font-size:.72rem; }
      th { padding:5px 8px; font-size:.66rem; }
      td { padding:5px 8px; }
      .print-only { display:block !important; margin-bottom:12px; }
      .print-hdr { display:flex; align-items:center; gap:14px; margin-bottom:14px; border-bottom:2px solid #1e3a5f; padding-bottom:10px; }
      .print-hdr img { height:52px; max-width:140px; object-fit:contain; }
      .print-hdr-text h1 { font-size:1.1rem; margin-bottom:2px; }
      .print-hdr-text p { font-size:.78rem; color:#555; }
      .tab-bar,.report-bar,.rpt-print-row { display:none !important; }
      .td-chip { font-size:.65rem; padding:1px 5px; }
      tr.rpt-day-banner td { background:#e8edf3; -webkit-print-color-adjust:exact; print-color-adjust:exact; break-after: avoid; page-break-after: avoid; }
    }

    /* ── RO WEEK PICKER / SAVED ROS ── */
    .ro-pick-bar {
      display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center;
      justify-content:space-between; margin-bottom:14px;
      padding-bottom:12px; border-bottom:1px solid var(--border);
    }
    .ro-pick-unit-list { display:flex; flex-direction:column; gap:8px; max-height:360px; overflow-y:auto; }
    .ro-pick-unit {
      display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center;
      padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--radius);
      background:var(--surface); cursor:pointer; text-align:left; font-family:inherit; width:100%;
    }
    .ro-pick-unit:hover { border-color:var(--primary-light); background:var(--surface2); }
    .ro-pick-unit .rp-unit { font-weight:700; color:var(--primary); font-size:.9rem; }
    .ro-pick-unit .rp-name { font-size:.82rem; color:var(--text); margin-top:2px; }
    .ro-pick-unit .rp-meta { font-size:.78rem; color:var(--text-muted); margin-top:4px; }
    .ro-pick-unit .rp-hrs { font-weight:700; font-size:.92rem; white-space:nowrap; }
    .ro-week-opt { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1.5px solid var(--border); border-radius:var(--radius); cursor:pointer; background:var(--surface); }
    .ro-week-opt:hover { border-color:var(--primary-light); }
    .ro-week-opt input { margin-top:3px; }
    .ro-week-opt-body { display:flex; flex-direction:column; gap:2px; font-size:.84rem; }
    .ro-week-opt-body span { color:var(--text-muted); font-size:.78rem; }
    .vh-ro-list { display:flex; flex-direction:column; gap:6px; }
    .vh-ro-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.84rem; padding:6px 0; border-bottom:1px solid var(--border); }
    .vh-ro-row:last-child { border-bottom:none; }
    .vh-ro-row .vh-ro-meta { flex:1; min-width:140px; color:var(--text-muted); }

    .saved-ro-hub-intro { margin-bottom:16px; }
    .saved-ro-hub-intro h3 { margin:0 0 6px; font-size:1.15rem; color:var(--primary); display:flex; align-items:center; gap:10px; }
    .saved-ro-hub-intro p { margin:0; font-size:.86rem; color:var(--text-muted); line-height:1.45; }
    .saved-ro-count { display:inline-flex; align-items:center; justify-content:center; min-width:1.6rem; height:1.6rem; padding:0 7px; border-radius:999px; background:var(--accent); color:#1a1a1a; font-size:.75rem; font-weight:800; }
    .saved-ro-table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:auto; }
    .saved-ro-table { width:100%; border-collapse:collapse; font-size:.88rem; }
    .saved-ro-table th { text-align:left; padding:10px 12px; background:var(--surface2); color:var(--text-muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--border); white-space:nowrap; }
    .saved-ro-table td { padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
    .saved-ro-table tr:last-child td { border-bottom:none; }
    .saved-ro-table tr:hover td { background:#f8fafc; }
    .saved-ro-title { max-width:280px; }
    .saved-ro-acts { display:flex; gap:6px; flex-wrap:wrap; white-space:nowrap; }

    /* ── UPDATE HISTORY ── */
    .update-list { display:flex; flex-direction:column; gap:18px; max-height:480px; overflow-y:auto; padding-right:4px; }
    .update-entry { border-left:3px solid var(--accent); padding:0 0 0 14px; }
    .update-meta { font-weight:700; font-size:.92rem; color:var(--primary); margin-bottom:6px; }
    .update-meta span { font-weight:500; font-size:.8rem; color:var(--text-muted); margin-left:8px; }
    .update-items { margin:0; padding-left:18px; font-size:.86rem; color:var(--text); line-height:1.55; }
    .update-items li { margin-bottom:4px; }

    /* ── DISPLAY LAYOUTS (portal = default desktop; set via data-layout on <html>) ── */
    /* Preference is localStorage only — never company settings. */

    /* Display mode picker UI */
    .dash-view-bar {
      margin-top:22px; padding:12px 14px;
      background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius-lg); box-shadow:var(--shadow);
      display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
    }
    .dash-view-lbl { font-size:.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-right:4px; }
    .display-mode-btns { display:flex; flex-wrap:wrap; gap:6px; }
    .display-mode-btns .tab-btn { padding:6px 14px; font-size:.8rem; }
    .display-mode-hint { font-size:.76rem; color:var(--text-muted); margin-left:auto; max-width:340px; line-height:1.35; }

    /* ── TABLET (iPad / normal tablets ~768–1024) ── */
    html[data-layout="tablet"] header {
      padding:0 16px; padding-top:env(safe-area-inset-top, 0px);
      gap:10px; flex-wrap:wrap; height:auto; min-height:0;
      padding-bottom:8px;
    }
    html[data-layout="tablet"] .hdr-logo { font-size:1.05rem; }
    html[data-layout="tablet"] .hdr-company { font-size:.82rem; max-width:180px; }
    html[data-layout="tablet"] nav { flex-wrap:wrap; gap:4px; }
    html[data-layout="tablet"] nav button {
      min-height:42px; padding:8px 14px; font-size:.86rem;
      background:rgba(255,255,255,.08);
    }
    html[data-layout="tablet"] nav button.active { background:rgba(255,255,255,.22); }
    html[data-layout="tablet"] .hclock .time { font-size:.9rem; }
    html[data-layout="tablet"] main {
      padding:18px;
      padding-bottom:max(22px, env(safe-area-inset-bottom, 0px));
      max-width:1100px;
    }
    html[data-layout="tablet"] .emp-grid { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
    html[data-layout="tablet"] .active-grid { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
    html[data-layout="tablet"] .v-grid { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
    html[data-layout="tablet"] .btn { min-height:42px; }
    html[data-layout="tablet"] .btn-sm { min-height:38px; padding:8px 12px; font-size:.84rem; }
    html[data-layout="tablet"] .tab-btn { min-height:40px; padding:8px 16px; }
    html[data-layout="tablet"] .emp-btn { min-height:54px; padding:12px 14px; }
    html[data-layout="tablet"] .equip-item { padding:12px 14px; min-height:46px; }
    html[data-layout="tablet"] .row-edit-btn { min-width:38px; min-height:38px; padding:8px; }
    html[data-layout="tablet"] .modal-x { min-width:42px; min-height:42px; display:inline-flex; align-items:center; justify-content:center; }
    html[data-layout="tablet"] .modal { max-width:640px; }
    html[data-layout="tablet"] .overlay { padding:20px; }
    html[data-layout="tablet"] .ci-quick-add-fields #ciNewUnit { width:120px; flex:0 0 120px; }
    html[data-layout="tablet"] .equip-list { max-height:min(46vh, 380px); }
    html[data-layout="tablet"] input[type=text],
    html[data-layout="tablet"] input[type=email],
    html[data-layout="tablet"] input[type=password],
    html[data-layout="tablet"] input[type=tel],
    html[data-layout="tablet"] input[type=number],
    html[data-layout="tablet"] input[type=date],
    html[data-layout="tablet"] input[type=time],
    html[data-layout="tablet"] select,
    html[data-layout="tablet"] textarea,
    html[data-layout="tablet"] .fctl { font-size:16px; }
    html[data-layout="tablet"] .tbl-wrap {
      overflow-x:auto; -webkit-overflow-scrolling:touch;
    }
    html[data-layout="tablet"] .tbl-wrap table { min-width:520px; }
    html[data-layout="tablet"] .week-lbl { min-width:160px; }
    html[data-layout="tablet"] .settings-grid { grid-template-columns:1fr; }
    html[data-layout="tablet"] .co-info-layout { grid-template-columns:1fr 1fr; }

    /* ── MOBILE (phones) ── */
    html[data-layout="mobile"] header {
      display:flex;
      flex-wrap:wrap;
      height:auto;
      min-height:0;
      padding:8px 12px 0;
      padding-top:max(8px, env(safe-area-inset-top, 0px));
      padding-bottom:0;
      gap:0 8px;
      row-gap:0;
    }
    html[data-layout="mobile"] .hdr-left { order:1; flex:1; min-width:0; }
    html[data-layout="mobile"] .hdr-logo { font-size:1rem; }
    html[data-layout="mobile"] .hdr-company { display:none; }
    html[data-layout="mobile"] .hclock { display:none; }
    html[data-layout="mobile"] .hdr-right { order:2; margin-left:auto; }
    html[data-layout="mobile"] .hdr-gear-btn { min-height:44px; min-width:44px; }
    html[data-layout="mobile"] .hdr-avatar-btn { min-height:44px; min-width:44px; justify-content:center; }
    html[data-layout="mobile"] .billing-toolbar { gap:8px; }
    html[data-layout="mobile"] .billing-actions .btn { min-height:40px; }
    html[data-layout="mobile"] .billing-scope-bar { gap:10px; }
    html[data-layout="mobile"] nav {
      order:3;
      width:100%;
      justify-self:stretch;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      gap:4px;
      padding:8px 0 10px;
      scrollbar-width:none;
    }
    html[data-layout="mobile"] nav::-webkit-scrollbar { display:none; }
    html[data-layout="mobile"] nav button {
      flex-shrink:0;
      min-height:40px;
      padding:8px 14px;
      font-size:.82rem;
      background:rgba(255,255,255,.08);
    }
    html[data-layout="mobile"] nav button.active { background:rgba(255,255,255,.22); }
    html[data-layout="mobile"] main {
      padding:12px;
      padding-bottom:max(20px, env(safe-area-inset-bottom, 0px));
    }
    html[data-layout="mobile"] .form-row { grid-template-columns:1fr; }
    html[data-layout="mobile"] .auth-body { padding:18px; }
    html[data-layout="mobile"] .settings-grid { grid-template-columns:1fr; }
    html[data-layout="mobile"] .s-full { grid-column:1; }
    html[data-layout="mobile"] input[type=text],
    html[data-layout="mobile"] input[type=email],
    html[data-layout="mobile"] input[type=password],
    html[data-layout="mobile"] input[type=tel],
    html[data-layout="mobile"] input[type=number],
    html[data-layout="mobile"] input[type=date],
    html[data-layout="mobile"] input[type=time],
    html[data-layout="mobile"] select,
    html[data-layout="mobile"] textarea,
    html[data-layout="mobile"] .fctl { font-size:16px; }
    html[data-layout="mobile"] .btn { min-height:44px; padding:10px 16px; }
    html[data-layout="mobile"] .btn-sm { min-height:40px; padding:8px 12px; font-size:.84rem; }
    html[data-layout="mobile"] .btn-lg { min-height:48px; }
    html[data-layout="mobile"] .tab-btn { min-height:40px; padding:8px 14px; }
    html[data-layout="mobile"] .modal-x { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
    html[data-layout="mobile"] .row-edit-btn { min-width:40px; min-height:40px; padding:8px; font-size:1.1rem; }
    html[data-layout="mobile"] .equip-item { padding:14px 14px; min-height:48px; }
    html[data-layout="mobile"] .emp-btn { min-height:56px; padding:12px 14px; }
    html[data-layout="mobile"] .dd-item { min-height:48px; padding:14px 16px; }
    html[data-layout="mobile"] .ci-quick-add-fields { flex-direction:column; align-items:stretch; }
    html[data-layout="mobile"] .ci-quick-add-fields #ciNewUnit { width:100%; flex:none; }
    html[data-layout="mobile"] .equip-list { max-height:min(42vh, 320px); }
    html[data-layout="mobile"] .overlay {
      padding:8px;
      padding-bottom:max(8px, env(safe-area-inset-bottom, 0px));
      align-items:flex-end;
    }
    html[data-layout="mobile"] .modal {
      max-width:100%;
      max-height:min(94vh, 100%);
      border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    }
    html[data-layout="mobile"] .modal-ftr {
      flex-wrap:wrap;
      padding-bottom:max(14px, env(safe-area-inset-bottom, 0px));
    }
    html[data-layout="mobile"] .modal-ftr .btn { flex:1 1 auto; }
    html[data-layout="mobile"] .week-lbl { min-width:0; flex:1; font-size:.82rem; }
    html[data-layout="mobile"] .week-nav button { min-width:44px; min-height:40px; }
    html[data-layout="mobile"] .report-bar { padding:12px; gap:10px; }
    html[data-layout="mobile"] .rpt-hdr { flex-wrap:wrap; gap:8px; padding:12px 14px; }
    html[data-layout="mobile"] .rpt-hdr h3 { font-size:.88rem; line-height:1.3; }
    html[data-layout="mobile"] .sum-toolbar-hint { display:none; }
    html[data-layout="mobile"] .sum-toolbar { gap:8px; }
    html[data-layout="mobile"] #empSettingsList .list-row { flex-wrap:wrap; }
    html[data-layout="mobile"] .saved-ro-acts { gap:8px; }
    html[data-layout="mobile"] .saved-ro-title { max-width:160px; }
    html[data-layout="mobile"] .tbl-wrap {
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      overscroll-behavior-x:contain;
    }
    html[data-layout="mobile"] .tbl-wrap table { min-width:560px; }
    html[data-layout="mobile"] .summary-tbl { min-width:480px; }
    html[data-layout="mobile"] .toast-wrap {
      bottom:max(16px, env(safe-area-inset-bottom, 0px));
      right:12px; left:12px; align-items:stretch;
    }
    html[data-layout="mobile"] .toast { max-width:none; }
    html[data-layout="mobile"] .display-mode-hint { display:none; }
    html[data-layout="mobile"] .hdr-logo { font-size:.95rem; }