:root {
    /* Apple Human Interface Guidelines — macOS system-appearance palette.
       Semantic roles (label/secondaryLabel/systemBackground tiers/system
       accent colors) per Apple's HIG color system. Light appearance only —
       dark mode was deliberately removed (2026-09-21); see CLAUDE.md. */
    --font-sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;
    --font-mono:ui-monospace,'SF Mono',Menlo,Monaco,Consolas,monospace;

    --bg:#ffffff;--bg2:#ffffff;--bg3:#f2f2f7;--bg4:#e5e5ea;
    --border:#d1d1d6;
    --accent:#007aff;--accent-bg:rgba(0,122,255,.12);
    --heading:#000000;--text-secondary:rgba(60,60,67,.6);--text:#1c1c1e;--text-dim:rgba(60,60,67,.6);
    --red:#ff3b30;--green:#34c759;
    --blue:#007aff;--violet:#af52de;--orange:#ff9500;--yellow:#ffcc00;--indigo:#5856d6;--teal:#30b0c7;
    --sidebar-w:260px;
    --radius-card:12px;--radius-control:8px;--radius-pill:980px;
    --material-bg:rgba(255,255,255,.72);
    --hover-fill:rgba(0,0,0,.05);--hover-fill-subtle:rgba(0,0,0,.025);--scrollbar-fill:rgba(0,0,0,.2);--scrollbar-fill-hover:rgba(0,0,0,.35);
    /* status colors (workflow pills) — Apple system tints at reduced opacity */
    --s-briefing:rgba(88,86,214,.14);--s-briefing-t:#5856d6;
    --s-inprog:rgba(0,122,255,.14);--s-inprog-t:#007aff;
    --s-revision:rgba(255,149,0,.16);--s-revision-t:#c76d00;
    --s-delivered:rgba(52,199,89,.16);--s-delivered-t:#1f9c46;
    --s-completed:rgba(52,199,89,.22);--s-completed-t:#1a7d38;
    --s-cancelled:rgba(255,59,48,.14);--s-cancelled-t:#d70015;
    /* task type colors (category pills, board lanes, charts) — one hue
       per TASK_TYPE_META entry in app.js, same tint convention as --s-* */
    --t-social:rgba(255,45,85,.14);--t-social-t:#ff2d55;
    --t-photo:rgba(88,86,214,.14);--t-photo-t:#5856d6;
    --t-design:rgba(175,82,222,.14);--t-design-t:#af52de;
    --t-web:rgba(0,122,255,.14);--t-web-t:#007aff;
    --t-market:rgba(255,149,0,.16);--t-market-t:#c76d00;
    --t-software:rgba(48,176,199,.16);--t-software-t:#1f8797;
    --t-hardware:rgba(162,132,94,.18);--t-hardware-t:#8a6d47;
    --t-network:rgba(52,199,89,.16);--t-network-t:#1f9c46;
    --t-villa:rgba(255,204,0,.2);--t-villa-t:#8a6d00;
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden}
  body{font-family:var(--font-sans);background:var(--bg3);color:var(--text);display:flex;font-size:14.5px;line-height:1.47059}

  /* ── SIDEBAR (macOS System Settings-style source list) ── */
  #sidebar{width:var(--sidebar-w);height:100vh;overflow-y:auto;background:var(--bg3);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;padding:8px 8px 20px}
  .sidebar-brand{padding:14px 10px 12px}
  .sidebar-brand .brand-logo{display:block;width:120px;height:auto;margin-bottom:4px}
  .sidebar-brand p{font-family:var(--font-sans);font-size:11px;color:var(--text-dim);margin-top:2px}
  .sec-label{font-family:var(--font-sans);font-size:11px;font-weight:600;color:var(--text-dim);padding:16px 12px 6px}
  .nav-item{display:flex;align-items:center;gap:9px;padding:6px 10px;cursor:pointer;color:var(--text);font-family:var(--font-sans);font-size:13px;transition:background .1s;border-radius:7px;border-left:none;margin-bottom:1px}
  .nav-item:hover{background:var(--hover-fill)}
  .nav-item.active{color:#fff;background:var(--accent)}
  .nav-item.active svg{stroke:#fff}
  .nav-item .ic{width:18px;height:18px;display:flex;align-items:center;justify-content:center;opacity:.85;flex-shrink:0}
  .nav-item .ic svg{width:16px;height:16px;stroke:var(--text-secondary);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .nav-item.active .ic svg{stroke:#fff}
  .badge{margin-left:auto;font-family:var(--font-sans);font-size:11px;font-weight:600;background:var(--red);color:#fff;border-radius:9px;padding:1px 7px;min-width:9px;text-align:center}
  .nav-item.active .badge{background:rgba(255,255,255,.3)}
  .badge.violet{background:var(--violet)}.badge.hidden{display:none}
  .sidebar-footer{margin-top:auto;padding:14px 10px 0;border-top:1px solid var(--border);font-family:var(--font-sans);font-size:11px;color:var(--text-dim)}
  .sidebar-footer .dt{color:var(--accent);font-size:11px}

  /* ── MAIN ── */
  #main{flex:1;overflow-y:auto;display:flex;flex-direction:column}
  .topbar{position:sticky;top:0;z-index:10;background:var(--material-bg);backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);border-bottom:1px solid var(--border);padding:14px 30px;display:flex;align-items:center;justify-content:space-between}
  .topbar h2{font-family:var(--font-sans);font-size:22px;font-weight:700;color:var(--heading);letter-spacing:-.01em}
  .topbar .actions{display:flex;gap:9px;align-items:center}
  .page-content{padding:22px 30px;flex:1}

  /* ── BUTTONS (Apple filled / tinted / plain) ── */
  .btn{font-family:var(--font-sans);font-size:13px;font-weight:590;letter-spacing:0;text-transform:none;padding:7px 16px;border-radius:var(--radius-control);border:none;cursor:pointer;transition:opacity .1s,background .1s;display:inline-flex;align-items:center;gap:6px}
  .btn-ic{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
  .btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{opacity:.85}
  .btn-ghost{background:var(--bg4);color:var(--accent);border:none}.btn-ghost:hover{background:var(--border)}
  .btn-danger{background:rgba(255,59,48,.12);color:var(--red);border:none}.btn-danger:hover{background:var(--red);color:#fff}
  .btn-success{background:rgba(52,199,89,.12);color:#1f9c46;border:none}.btn-success:hover{background:var(--green);color:#fff}
  .btn-blue{background:rgba(0,122,255,.12);color:var(--blue);border:none}.btn-blue:hover{background:rgba(0,122,255,.22)}
  .btn-violet{background:rgba(175,82,222,.12);color:var(--violet);border:none}.btn-violet:hover{background:rgba(175,82,222,.22)}
  .btn-sm{padding:5px 12px;font-size:12px}
  .btn:disabled{opacity:.4;cursor:not-allowed}

  /* ── KPI (Apple grouped stat card, no colored accent strip) ── */
  .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
  .kpi-grid.c3{grid-template-columns:repeat(3,1fr)}
  .kpi-grid.c2{grid-template-columns:repeat(2,1fr)}
  .kpi-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-card);padding:16px}
  .kpi-card::before{display:none}
  /* These two modifiers were used on 4+ pages (Project Summary, Monthly
     Report, PC Ads, Dashboard) with no matching rule — every "alert"/
     "success" card rendered identically to a plain one. Fixed here rather
     than left inert for the new Monthly Budget over-budget card. */
  .kpi-card.alert{border-color:var(--red)}
  .kpi-card.success{border-color:var(--green)}
  .kpi-label{font-family:var(--font-sans);font-size:12px;font-weight:590;color:var(--text-dim);margin-bottom:6px}
  .kpi-value{font-family:var(--font-sans);font-size:26px;font-weight:700;color:var(--heading);line-height:1.1;letter-spacing:-.01em}
  .kpi-value.accent{color:var(--accent)}.kpi-value.red{color:var(--red)}.kpi-value.sm{font-size:19px}.kpi-value.violet{color:var(--violet)}
  .kpi-sub{font-family:var(--font-sans);font-size:12px;color:var(--text-dim);margin-top:4px}

  /* ── TABLE (Apple plain/grouped list) ── */
  .table-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-card);overflow-x:auto}
  .table-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .table-header h3{font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--heading)}
  .table-footer{padding:12px 18px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .pg-btns{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
  .pg-btns .btn{min-width:30px;justify-content:center;padding:5px 10px}
  .pg-ellipsis{color:var(--text-dim);font-size:12px;padding:0 2px}
  .search-input{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-control);padding:6px 11px;color:var(--text);font-family:var(--font-sans);font-size:13px;width:190px;outline:none;transition:border-color .15s}
  .search-input:focus{border-color:var(--accent)}.search-input::placeholder{color:var(--text-dim)}
  table{width:100%;border-collapse:collapse;min-width:max-content}
  th{font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-dim);padding:8px 14px;text-align:left;border-bottom:1px solid var(--border);background:transparent}
  td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
  tr:last-child td{border-bottom:none}tr:hover td{background:var(--hover-fill-subtle)}
  .mono{font-family:var(--font-mono)}
  .tg{color:var(--accent)}.tr{color:var(--red)}.tgn{color:var(--green)}.td{color:var(--text-dim)}.tv{color:var(--violet)}

  /* ── STATUS PILLS (Apple capsule badges, no border) ── */
  .pill{display:inline-block;font-family:var(--font-sans);font-size:11px;letter-spacing:0;text-transform:none;padding:3px 9px;border-radius:var(--radius-pill);font-weight:590}
  .pill-briefing{background:var(--s-briefing);color:var(--s-briefing-t)}
  .pill-in-progress{background:var(--s-inprog);color:var(--s-inprog-t)}
  .pill-revision{background:var(--s-revision);color:var(--s-revision-t)}
  .pill-delivered{background:var(--s-delivered);color:var(--s-delivered-t)}
  .pill-completed{background:var(--s-completed);color:var(--s-completed-t)}
  .pill-cancelled{background:var(--s-cancelled);color:var(--s-cancelled-t)}
  .pill-draft{background:rgba(60,60,67,.1);color:var(--text-secondary)}
  .pill-sent{background:rgba(0,122,255,.14);color:var(--blue)}
  .pill-approved{background:rgba(52,199,89,.16);color:#1f9c46}
  .pill-rejected{background:rgba(255,59,48,.14);color:var(--red)}
  .pill-paid,.pill-ok{background:rgba(52,199,89,.16);color:#1f9c46}
  .pill-overdue,.pill-urgent{background:rgba(255,59,48,.16);color:var(--red)}
  .pill-high{background:rgba(255,149,0,.16);color:#c76d00}
  .pill-normal{background:rgba(60,60,67,.1);color:var(--text-secondary)}
  .pill-low{background:rgba(52,199,89,.12);color:#2f9e56}
  .pill-todo{background:rgba(60,60,67,.1);color:var(--text-secondary)}
  .pill-select{font-family:var(--font-sans);font-size:12px;letter-spacing:0;text-transform:none;padding:4px 10px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg2);color:var(--heading);cursor:pointer}
  .pill-review{background:var(--s-briefing);color:var(--s-briefing-t)}
  .pill-done{background:rgba(52,199,89,.16);color:#1f9c46}
  /* Category pills */
  .pc-foto{background:rgba(255,149,0,.14);color:#c76d00}
  .pc-video{background:rgba(88,86,214,.14);color:var(--indigo)}
  .pc-desain{background:rgba(0,122,255,.14);color:var(--blue)}
  .pc-social{background:rgba(255,149,0,.14);color:#c76d00}
  .pc-brand{background:rgba(175,82,222,.14);color:var(--violet)}
  .pc-konten{background:rgba(52,199,89,.14);color:#1f9c46}
  .pc-web{background:rgba(0,122,255,.14);color:var(--blue)}

  /* Status-colored select — the quick-change dropdown on the task table
     and board cards; data-status is stamped by JS to mirror TASK_STATUSES
     so the control itself carries the same colour as the read-only pill. */
  .pill-select[data-status="todo"]{background:var(--s-cancelled,rgba(60,60,67,.1));background:rgba(60,60,67,.1);color:var(--text-secondary)}
  .pill-select[data-status="in_progress"]{background:var(--s-inprog);color:var(--s-inprog-t)}
  .pill-select[data-status="review"]{background:var(--s-briefing);color:var(--s-briefing-t)}
  .pill-select[data-status="approved"]{background:rgba(52,199,89,.16);color:#1f9c46}
  .pill-select[data-status="done"]{background:rgba(52,199,89,.22);color:#1a7d38}

  /* Task type pills — one class per TASK_TYPE_META entry (app.js) */
  .tt-social{background:var(--t-social);color:var(--t-social-t)}
  .tt-photo{background:var(--t-photo);color:var(--t-photo-t)}
  .tt-design{background:var(--t-design);color:var(--t-design-t)}
  .tt-web{background:var(--t-web);color:var(--t-web-t)}
  .tt-market{background:var(--t-market);color:var(--t-market-t)}
  .tt-software{background:var(--t-software);color:var(--t-software-t)}
  .tt-hardware{background:var(--t-hardware);color:var(--t-hardware-t)}
  .tt-network{background:var(--t-network);color:var(--t-network-t)}
  .tt-villa{background:var(--t-villa);color:var(--t-villa-t)}
  .pill.pill-ic{display:inline-flex;align-items:center;gap:4px}
  .pill.pill-ic svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

  /* ── TASK VIEW TABS ── */
  .tview-tabs{display:flex;background:var(--bg4);border-radius:8px;padding:2px;gap:2px}
  .tview-tabs button{font-family:var(--font-sans);font-size:12.5px;font-weight:590;padding:6px 13px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--text-dim);display:inline-flex;align-items:center;gap:5px;transition:background .1s,color .1s}
  .tview-tabs button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tview-tabs button.active{background:var(--bg2);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .tview-tabs button:hover:not(.active){color:var(--text)}
  .tgroup-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}

  /* ── TASK BOARD (grouped lanes) ── */
  .tlane{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-card);margin-bottom:14px;overflow:hidden}
  .tlane-head{padding:11px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;position:relative;overflow:hidden}
  .tlane-head:hover{background:var(--hover-fill-subtle)}
  .tlane-head .tlh-name{font-family:var(--font-sans);font-size:13.5px;font-weight:650;color:var(--heading);position:relative;z-index:1}
  .tlane-head .tlh-count{background:var(--bg4);border-radius:var(--radius-pill);padding:1px 9px;font-size:11px;color:var(--text-dim);position:relative;z-index:1}
  .tlane-head .tlh-chevron{margin-left:auto;width:14px;height:14px;stroke:var(--text-dim);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s;position:relative;z-index:1}
  .tlane.collapsed .tlh-chevron{transform:rotate(-90deg)}
  .tlane-head .tlh-art{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;z-index:0}
  .tlane-head .tlh-scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg2) 30%,transparent);z-index:0}
  .tlane-mix{display:flex;height:4px;border-radius:2px;overflow:hidden;flex-shrink:0;width:80px}
  .tlane-mix span{height:100%}
  .tlane-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:12px}
  .tlane.collapsed .tlane-cols{display:none}
  .tlane-col-head{font-family:var(--font-sans);font-size:10.5px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px;padding:0 2px}
  .tlane-col-body{min-height:8px}
  .tcard{background:var(--bg3);border:1px solid var(--border);border-left-width:4px;border-radius:var(--radius-control);padding:9px 10px;margin-bottom:8px;cursor:pointer;transition:box-shadow .15s,border-color .15s}
  .tcard:last-child{margin-bottom:0}
  .tcard:hover{box-shadow:0 2px 8px rgba(0,0,0,.07)}
  .tcard .tc-top{display:flex;align-items:center;gap:5px;margin-bottom:5px}
  .tcard .tc-top svg{width:13px;height:13px;flex-shrink:0}
  .tcard .tc-title{font-size:12.5px;font-weight:590;color:var(--heading);line-height:1.35}
  .tcard .tc-meta{font-family:var(--font-sans);font-size:10.5px;color:var(--text-dim);margin-top:4px}
  .tcard .tc-due{font-family:var(--font-sans);font-size:10.5px;margin-top:4px}
  .tcard .tc-select{width:100%;margin-top:7px;font-size:10.5px;padding:3px 7px}
  .empty-mini-note{font-family:var(--font-sans);font-size:11px;color:var(--text-dim);padding:6px 2px}

  /* ── TASK TIMELINE (Gantt-lite) ── */
  .ttl-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  .ttl-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-card);overflow-x:auto}
  .ttl-grid{display:grid;grid-template-columns:160px 1fr;min-width:640px}
  .ttl-row-label{padding:8px 12px;font-family:var(--font-sans);font-size:11.5px;font-weight:600;color:var(--heading);border-bottom:1px solid var(--border);border-right:1px solid var(--border);display:flex;align-items:center;position:sticky;left:0;background:var(--bg2);z-index:1}
  .ttl-row-track{position:relative;border-bottom:1px solid var(--border);padding:6px 0;min-height:34px}
  .ttl-today{position:absolute;top:0;bottom:0;width:1px;background:var(--accent);z-index:2}
  .ttl-weekend{position:absolute;top:0;bottom:0;background:var(--hover-fill-subtle);z-index:0}
  .ttl-bar{position:absolute;height:18px;border-radius:5px;border-left:4px solid;font-size:10px;font-family:var(--font-sans);color:var(--heading);display:flex;align-items:center;padding:0 6px;overflow:hidden;white-space:nowrap;cursor:pointer;z-index:1;min-width:8px}
  .ttl-bar.overdue-tail{background:repeating-linear-gradient(45deg,rgba(255,59,48,.25),rgba(255,59,48,.25) 4px,rgba(255,59,48,.4) 4px,rgba(255,59,48,.4) 8px)}
  .ttl-bar .tick{margin-left:auto}
  .ttl-marker{position:absolute;top:8px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);cursor:pointer;z-index:1}
  /* grid-column:1/-1 — this row is itself a nested 2-col grid living
     inside .ttl-grid's own 2-col track; without spanning both of the
     parent's columns it collapses into column 1 alone, and grid
     auto-placement then slots the first data row's label into the
     now-empty column 2 of row 1 instead of starting a fresh row. */
  .ttl-header-row{display:grid;grid-template-columns:160px 1fr;grid-column:1/-1;position:sticky;top:0;background:var(--bg2);z-index:3}
  .ttl-header-days{display:flex;border-bottom:1px solid var(--border)}
  .ttl-day{flex:1;text-align:center;font-family:var(--font-mono);font-size:9.5px;color:var(--text-dim);padding:5px 0;border-right:1px solid var(--border)}
  .ttl-outside-note{padding:10px 12px;font-family:var(--font-sans);font-size:11.5px;color:var(--text-dim);border-top:1px solid var(--border)}

  /* ── TASK CHARTS ── */
  .tchart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .tchart-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-card);padding:18px}
  .tchart-card h4{font-family:var(--font-sans);font-size:12.5px;font-weight:650;color:var(--heading);margin-bottom:14px}
  .tchart-donut-wrap{display:flex;align-items:center;gap:18px}
  .tchart-legend{display:flex;flex-direction:column;gap:6px;flex:1}
  .tchart-legend-row{display:flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:11.5px;color:var(--text)}
  .tchart-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .tchart-legend-n{margin-left:auto;font-family:var(--font-mono);color:var(--text-dim)}
  .tchart-bar-row{margin-bottom:10px}
  .tchart-bar-row:last-child{margin-bottom:0}
  .tchart-bar-label{display:flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:11.5px;color:var(--text);margin-bottom:4px}
  .tchart-bar-label svg{width:12px;height:12px;flex-shrink:0}
  .tchart-bar-label .n{margin-left:auto;font-family:var(--font-mono);color:var(--text-dim)}
  .tchart-bar-track{height:8px;background:var(--bg4);border-radius:4px;overflow:hidden}
  .tchart-bar-fill{height:100%;border-radius:4px}
  .tchart-stack{height:16px;border-radius:4px;overflow:hidden;display:flex;background:var(--bg4)}
  .tchart-stack span{height:100%}
  .tchart-empty{grid-column:1/-1;text-align:center;padding:40px 20px;color:var(--text-dim);font-size:13px}

  /* ── TASK HERO / EMPTY-STATE ART ── */
  .thero{position:relative;border-radius:var(--radius-card);overflow:hidden;margin-bottom:20px;min-height:72px;display:flex;align-items:center;padding:0 22px;background:var(--bg2);border:1px solid var(--border)}
  .thero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
  .thero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg2) 24%,transparent)}
  .thero-text{position:relative;z-index:1}
  .thero-text h3{font-family:var(--font-sans);font-size:15px;font-weight:650;color:var(--heading)}
  .thero-text p{font-family:var(--font-sans);font-size:12px;color:var(--text-dim);margin-top:2px}
  .task-empty-art{text-align:center;padding:36px 20px}
  .task-empty-art img{width:180px;max-width:60%;opacity:.85;margin-bottom:10px}

  /* ── MODAL (Apple sheet) ── */
  /* z-index above #loginScreen (999) — the Forgot Password modal on the
     login screen is the first thing to ever open a modal pre-login,
     which is what exposed this: the modal used to sit behind it. */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s;backdrop-filter:blur(4px)}
  .modal-overlay.hidden{display:none}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .modal{background:var(--bg2);border:none;border-radius:14px;width:580px;max-width:96vw;max-height:90vh;overflow-y:auto;animation:slideUp .2s;box-shadow:0 20px 68px rgba(0,0,0,.28)}
  .modal.mlg{width:740px}.modal.mxl{width:900px}
  @keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
  .modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
  .modal-head h3{font-family:var(--font-sans);font-size:17px;font-weight:600;color:var(--heading)}
  .modal-close{background:var(--bg4);border:none;color:var(--text-dim);font-size:14px;cursor:pointer;line-height:1;width:26px;height:26px;border-radius:50%;transition:background .15s;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:var(--border);color:var(--heading)}
  .modal-body{padding:22px}.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:9px;justify-content:flex-end;background:var(--bg3)}

  /* ── FORMS (Apple text fields) ── */
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .fgrid.c3{grid-template-columns:1fr 1fr 1fr}
  .fg{display:flex;flex-direction:column;gap:5px}.fg.full{grid-column:1/-1}
  label{font-family:var(--font-sans);font-size:12.5px;font-weight:590;letter-spacing:0;text-transform:none;color:var(--text-secondary)}
  input,select,textarea{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-control);padding:8px 11px;color:var(--text);font-family:var(--font-sans);font-size:14px;outline:none;transition:all .15s;width:100%}
  input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
  input::placeholder,textarea::placeholder{color:var(--text-dim)}
  select option{background:var(--bg2);color:var(--text)}textarea{resize:vertical;min-height:65px}
  input[type="number"]{font-family:var(--font-mono)}

  /* ── ALERTS ── */
  .alert-bar{display:flex;align-items:center;gap:10px;background:rgba(255,59,48,.1);border:none;border-radius:var(--radius-control);padding:11px 15px;margin-bottom:18px;font-family:var(--font-sans);font-size:13px;color:var(--red)}
  .alert-bar.warn{background:rgba(255,149,0,.12);color:#c76d00}
  .alert-bar.info{background:rgba(175,82,222,.1);color:var(--violet)}

  /* ── LINE ITEMS ── */
  .lih{display:grid;grid-template-columns:1fr 80px 130px 36px;gap:7px;font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-dim);margin-bottom:5px;padding:0 2px}
  /* Layanan is now a free-typed field (no catalog dropdown), so the row is
     one text column short of what "has-desc" originally meant — kept the
     class name to avoid touching the mobile breakpoint rules below. */
  .lih.has-desc{grid-template-columns:1fr 80px 130px 130px 36px}
  .lir{display:grid;grid-template-columns:1fr 80px 130px 36px;gap:7px;align-items:center;margin-bottom:7px}
  .lir.has-desc{grid-template-columns:1fr 80px 130px 130px 36px}
  .rm-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:15px;padding:4px;border-radius:4px;transition:color .15s;display:flex;align-items:center;justify-content:center}.rm-btn:hover{color:var(--red)}
  .add-line{background:none;border:1px dashed var(--border);border-radius:var(--radius-control);color:var(--accent);font-family:var(--font-sans);font-size:13px;font-weight:590;letter-spacing:0;padding:7px;cursor:pointer;width:100%;text-align:center;transition:all .15s;margin-top:3px}.add-line:hover{border-color:var(--accent);background:var(--accent-bg)}
  .line-total{text-align:right;font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--accent);margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}

  /* ── FILTER BAR ── */
  .filter-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--bg3)}
  .filter-bar .fl{font-family:var(--font-sans);font-size:12px;font-weight:590;letter-spacing:0;text-transform:none;color:var(--text-dim);white-space:nowrap}
  .filter-bar input[type="date"]{width:138px;padding:5px 9px;font-size:12px;font-family:var(--font-sans)}
  .filter-bar select{width:auto;min-width:120px;padding:5px 9px;font-size:12px;font-family:var(--font-sans)}
  .filter-bar .fsep{color:var(--text-dim);font-size:11px}
  .filter-bar .freset{font-family:var(--font-sans);font-size:12px;background:none;border:1px solid var(--border);color:var(--text-dim);padding:4px 10px;border-radius:var(--radius-control);cursor:pointer;transition:all .15s}.filter-bar .freset:hover{color:var(--accent);border-color:var(--accent)}
  /* When a filter-bar is its own card (Tasks: shared across 4 views, not
     glued above a single table) rather than the top slice of a .table-wrap
     that continues into a table-header below it. */
  .table-wrap>.filter-bar:last-child{border-bottom:none;border-radius:var(--radius-card)}

  /* ── REPORT ── */
  .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .rcard{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden}
  .rcard-head{padding:13px 17px;border-bottom:1px solid var(--border);font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--heading);background:var(--bg3);display:flex;align-items:center;justify-content:space-between}
  .rcard-body{padding:14px 17px}
  .rrow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border)}.rrow:last-child{border-bottom:none}
  .rrow .lb{font-size:13px;color:var(--text-secondary)}.rrow .vl{font-family:var(--font-sans);font-size:13px;font-weight:590;color:var(--heading)}
  .rrow .vl.accent{color:var(--accent)}.rrow .vl.red{color:var(--red)}.rrow .vl.violet{color:var(--violet)}

  /* ── ATTACHMENTS (Petty Cash / PC Ads uploads) ── */
  .att-add{display:flex;gap:8px;margin-bottom:10px}
  .att-add select{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-control);padding:6px 10px;color:var(--text);font-family:var(--font-sans);font-size:13px}
  .att-add input[type=file]{flex:1;font-family:var(--font-sans);font-size:12px;color:var(--text-dim)}
  .att-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}.att-row:last-child{border-bottom:none}
  .att-row.att-pending{opacity:.7}
  .att-ic{font-size:15px;line-height:1}
  .att-name{flex:1;font-size:13px;color:var(--heading);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  a.att-name:hover{text-decoration:underline}
  .att-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
  .att-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-card);padding:10px;display:flex;flex-direction:column;gap:4px}
  .att-thumb{width:100%;height:90px;object-fit:cover;border-radius:6px;background:var(--bg4)}
  .att-pdf-ic{display:flex;align-items:center;justify-content:center;font-size:32px}
  .att-card-name{font-size:11px;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ── PROJECT KANBAN STRIP ── */
  .kanban-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:24px}
  .kanban-col{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden}
  .kanban-col-head{padding:10px 14px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
  .kanban-col-head .kcount{background:var(--bg4);border:none;border-radius:var(--radius-pill);padding:1px 8px;font-size:11px}
  .kanban-col-body{padding:10px}
  .kanban-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-control);padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:all .15s}
  .kanban-card:last-child{margin-bottom:0}
  .kanban-card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.06)}
  .kanban-card .kc-title{font-size:13px;font-weight:590;color:var(--heading);line-height:1.35;margin-bottom:4px}
  .kanban-card .kc-client{font-family:var(--font-sans);font-size:11px;color:var(--text-dim)}
  .kanban-card .kc-due{font-family:var(--font-sans);font-size:11px;margin-top:6px}
  .kanban-card .kc-val{font-family:var(--font-sans);font-size:11px;color:var(--accent);margin-top:3px}

  /* ── MISC ── */
  .empty-state{text-align:center;padding:44px 20px;color:var(--text-dim)}.empty-state .ic{font-size:32px;margin-bottom:10px}.empty-state p{font-size:14px}
  .divider{height:1px;background:var(--border);margin:18px 0}.gap-8{display:flex;gap:8px;flex-wrap:wrap}
  .sec-lbl{font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--heading);margin-bottom:10px}
  .code-badge{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);background:var(--bg3);border:1px solid var(--border);padding:2px 7px;border-radius:6px;display:inline-block}
  .month-sel{display:flex;gap:10px;align-items:center;margin-bottom:22px}
  #toast{position:fixed;bottom:22px;right:22px;background:var(--bg2);border:none;border-radius:var(--radius-card);padding:11px 16px;font-family:var(--font-sans);font-size:13px;color:var(--heading);z-index:999;opacity:0;transform:translateY(10px);transition:all .2s;pointer-events:none;max-width:300px;box-shadow:0 8px 30px rgba(0,0,0,.18)}
  #toast.show{opacity:1;transform:translateY(0)}
  #loader{position:fixed;inset:0;background:var(--material-bg);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
  #loader.show{display:flex}
  .spinner{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  ::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scrollbar-fill);border-radius:4px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-fill-hover);background-clip:padding-box}

  /* ── FOCUS-VISIBLE (keyboard nav, Apple-blue ring) ── */
  :focus-visible{outline:3px solid var(--accent-bg);outline-offset:0;box-shadow:0 0 0 2px var(--accent)}
  .nav-item:focus-visible{outline-offset:0}
  input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}

  /* ── RESPONSIVE ── */
  .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;background:none;border:1px solid var(--border);border-radius:6px;cursor:pointer;margin-right:14px;flex-shrink:0}
  .nav-toggle span{display:block;width:16px;height:2px;background:var(--heading);margin:0 auto}
  #sidebarBackdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:90}
  @media (max-width:1024px){
    .kpi-grid,.kpi-grid.c3{grid-template-columns:repeat(2,1fr)}
    .kanban-strip{grid-template-columns:repeat(3,1fr)}
    .rgrid,div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
    .tchart-grid{grid-template-columns:1fr}
  }
  @media (max-width:768px){
    .nav-toggle{display:flex}
    #sidebar{position:fixed;left:0;top:0;z-index:95;transform:translateX(-100%);transition:transform .2s ease;box-shadow:4px 0 24px rgba(0,0,0,.2)}
    #sidebar.open{transform:translateX(0)}
    #sidebar.open ~ #sidebarBackdrop{display:block}
    #main{width:100%}
    .topbar{padding:12px 16px}
    .page-content{padding:16px}
    .kpi-grid,.kpi-grid.c3,.kpi-grid.c2{grid-template-columns:1fr}
    .kanban-strip{grid-template-columns:1fr}
    .fgrid,.fgrid.c3{grid-template-columns:1fr}
    .modal-body{padding:16px}
    .lih.has-desc,.lir.has-desc{grid-template-columns:1fr;gap:4px}
    .lih.has-desc{display:none}
    /* Task board: 5 equal-fr status columns don't fit a phone width even
       with .tlane's overflow:hidden clipping them — .tlane-cols becomes
       its own horizontally-scrollable strip of fixed-width columns
       instead, contained entirely within the lane card. */
    .tlane-cols{grid-template-columns:repeat(5,148px);overflow-x:auto;padding-bottom:12px}
  }
  @media (max-width:480px){
    .topbar h2{font-size:17px}
    .kpi-value{font-size:19px}
    /* The topbar's own overflow-y:auto makes overflow-x compute to auto
       too (CSS's mismatched-overflow-axis rule) — four full-width view
       tabs plus "+ New Task" don't fit 375px and were dragging the whole
       page into a horizontal scrollbar. Icon-only tabs fix it at the
       narrowest width without touching the desktop layout. */
    .tview-tabs .tvt-label{display:none}
    .tview-tabs button{padding:7px 10px}
  }
  /* ── UTILITY CLASSES (extracted from inline styles, C1) ── */
  .u-bg3{background:var(--bg3)}
  .u-bg4{background:var(--bg4)}
  .u-c-dim{color:var(--text-dim)}
  .u-c-heading{color:var(--heading)}
  .u-c-red{color:var(--red)}
  .u-c-sec{color:var(--text-secondary)}
  .u-capitalize{text-transform:capitalize}
  .u-col-span{grid-column:1/-1}
  .u-flex{display:flex}
  .u-flex-wrap{flex-wrap:wrap}
  .u-fs10{font-size:10px}
  .u-fs11{font-size:11px}
  .u-fs12{font-size:12px}
  .u-fs13{font-size:13px}
  .u-fs15{font-size:15px}
  .u-fs16{font-size:16px}
  .u-fs17{font-size:17px}
  .u-fs18{font-size:18px}
  .u-fs9{font-size:9px}
  .u-fw4{font-weight:400}
  .u-fw5{font-weight:500}
  .u-fw6{font-weight:600}
  .u-fw7{font-weight:700}
  .u-gap14{gap:14px}
  .u-gap5{gap:5px}
  .u-gap6{gap:6px}
  .u-gap8{gap:8px}
  .u-h46{height:46px}
  .u-invisible{visibility:hidden}
  .u-italic{font-style:italic}
  .u-items-center{align-items:center}
  .u-justify-between{justify-content:space-between}
  .u-justify-center{justify-content:center}
  .u-ls08{letter-spacing:.08em}
  .u-ls12{letter-spacing:.12em}
  .u-ls18{letter-spacing:.18em}
  .u-m0{margin:0}
  .u-mb10{margin-bottom:10px}
  .u-mb12{margin-bottom:12px}
  .u-mb14{margin-bottom:14px}
  .u-mb16{margin-bottom:16px}
  .u-mb18{margin-bottom:18px}
  .u-mb4{margin-bottom:4px}
  .u-mb5{margin-bottom:5px}
  .u-mb6{margin-bottom:6px}
  .u-ml6{margin-left:6px}
  .u-ml8{margin-left:8px}
  .u-mono{font-family:var(--font-mono)}
  .u-mt10{margin-top:10px}
  .u-mt14{margin-top:14px}
  .u-mt18{margin-top:18px}
  .u-mt2{margin-top:2px}
  .u-mt22{margin-top:22px}
  .u-mt3{margin-top:3px}
  .u-mt4{margin-top:4px}
  .u-mt5{margin-top:5px}
  .u-mt6{margin-top:6px}
  .u-mt8{margin-top:8px}
  .u-opacity75{opacity:.75}
  .u-py8{padding:8px 0}
  .u-row{flex-direction:row}
  .u-tr{text-align:right}
  .u-uppercase{text-transform:uppercase}
  .u-w-auto{width:auto}
  .u-w-full{width:100%}
  .u-w200{width:200px}
  .u-w210{width:210px}
  /* ── COMPONENT CLASSES (extracted from inline styles, C1) ── */
  .api-error-box{padding:40px;font-family:var(--font-sans);font-size:14px;color:var(--text-dim);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg2)}
  .chip-group{display:flex;flex-wrap:wrap;gap:10px;border:1px solid var(--border);border-radius:8px;padding:10px 12px}
  .empty-mini-note{font-family:var(--font-sans);font-size:12px;color:var(--text-dim);text-align:center;padding:16px 0}
  .empty-row-note{color:var(--text-dim);font-size:12px;padding:14px 0;text-align:center}
  .empty-state-note{text-align:center;color:var(--text-dim);padding:18px}
  .form-error{color:var(--red,#b5281a);font-size:12px;min-height:18px;margin-bottom:10px}
  .grid-2col-gap14{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
  .link-dim{color:var(--text-dim);text-decoration:underline}
  .offline-msg{font-weight:500;margin-bottom:3px}
  .report-table-spacer{margin:10px 0 24px}
  .row-ending{background:rgba(180,150,10,.18)}
  .row-opening{background:rgba(26,122,60,.08)}
  .dep-row{display:grid;grid-template-columns:130px 1fr 140px 32px;gap:8px;margin-bottom:6px}

  /* ── LOGIN (split-screen: brand panel + card) ── */
  #loginScreen{position:fixed;inset:0;background:var(--bg);display:none;z-index:999}
  .login-split{display:flex;width:100%;height:100%}
  .login-left,.login-right{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;position:relative;overflow:hidden}
  .login-left{background:var(--bg3)}
  .login-right{background:var(--bg)}
  /* A faint scattered icon pattern behind both panels, tying the split
     layout together the way the reference's watermark icons do — kept to
     a single repeating SVG tile (no new asset) at very low contrast so it
     never competes with the actual content in front of it. */
  .login-left::before,.login-right::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.05' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(30,40) rotate(-8)'%3E%3Crect x='0' y='0' width='34' height='44' rx='3'/%3E%3Cline x1='7' y1='12' x2='27' y2='12'/%3E%3Cline x1='7' y1='20' x2='27' y2='20'/%3E%3Cline x1='7' y1='28' x2='20' y2='28'/%3E%3C/g%3E%3Cg transform='translate(220,60) rotate(10)'%3E%3Crect x='0' y='14' width='9' height='20'/%3E%3Crect x='13' y='4' width='9' height='30'/%3E%3Crect x='26' y='20' width='9' height='14'/%3E%3C/g%3E%3Cg transform='translate(320,180) rotate(-14)'%3E%3Crect x='0' y='0' width='38' height='26' rx='3'/%3E%3Cline x1='0' y1='9' x2='38' y2='9'/%3E%3C/g%3E%3Cg transform='translate(60,220) rotate(6)'%3E%3Ccircle cx='16' cy='16' r='16'/%3E%3Cpath d='M16 8v8l6 4'/%3E%3C/g%3E%3Cg transform='translate(180,300) rotate(-6)'%3E%3Cpath d='M4 8a4 4 0 0 1 4-4h10l4 4h14a4 4 0 0 1 4 4v16a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z'/%3E%3C/g%3E%3Cg transform='translate(330,330) rotate(12)'%3E%3Crect x='0' y='0' width='28' height='36' rx='3'/%3E%3Cpath d='M7 10h14M7 17h14M7 24h9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat:repeat;background-size:420px 420px;
  }
  .login-logo{width:320px;max-width:70%;height:auto;position:relative}
  .login-card{width:380px;max-width:100%;padding:38px 36px;border:1px solid var(--border);border-radius:14px;background:var(--bg2);box-shadow:0 8px 40px rgba(0,0,0,.06);position:relative}
  .login-card-title{font-family:var(--font-sans);font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--heading);margin-bottom:6px}
  .login-card-sub{font-family:var(--font-sans);font-size:12.5px;color:var(--text-dim);line-height:1.5;margin-bottom:24px}
  .login-forgot{text-align:right;margin-bottom:14px}
  .login-forgot a{font-family:var(--font-sans);font-size:12px;color:var(--accent);text-decoration:none}
  .login-forgot a:hover{text-decoration:underline}
  @media (max-width:768px){
    .login-split{flex-direction:column}
    .login-left{flex:none;padding:32px 24px}
    .login-logo{width:220px}
    .login-right{flex:1;padding:24px}
    .login-card{padding:28px 24px}
  }