@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root{
    /* Light theme — warm cream + white panels, deep ink, subtle lines */
    --bg:#f5f3ee;       --panel:#ffffff;    --panel-2:#f0eee8;    --panel-3:#e3e0d8;
    --ink:#1c1b22;      --ink-soft:#5a5765; --ink-faint:#8e8a97;
    --line:#dad6cd;     --line-soft:#ece9e1;
    --accent:#c46d33;   --accent-soft:#fbe6d4;
    --green:#5e8447;    --green-soft:#e1ecd6;
    --blue:#4a78a1;     --blue-soft:#dde7f0;
    --red:#b25555;      --red-soft:#f5dcdc;
    --violet:#7a6ab0;
    --shadow:0 6px 22px rgba(40,40,60,.07);
    /* Heatmap-specific palette tuned so dark text reads well on each fill */
    --heat-green:#a3c083;   /* fully done — lighter than indicator green */
    --heat-orange:#ecae7a;  /* partial — lighter peach */
    --heat-grey:#cdc8bd;    /* nothing done — visible but neutral */
    --heat-off:#3a3742;     /* no tasks / future — clearly inactive (no text drawn) */
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    background:var(--bg); color:var(--ink);
    font-family:'IBM Plex Sans',sans-serif; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  ::-webkit-scrollbar{width:9px;height:9px;}
  ::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px;}
  ::-webkit-scrollbar-track{background:transparent;}

  /* ---------- LAYOUT ---------- */
  .app{display:grid;grid-template-columns:230px 1fr;min-height:100vh;}

  /* sidebar */
  .side{
    background:var(--panel); border-right:1px solid var(--line);
    padding:22px 16px; display:flex; flex-direction:column; gap:4px;
    position:sticky; top:0; height:100vh;
  }
  .brand{display:flex;align-items:center;gap:9px;padding:0 8px 20px;}
  .brand .mark{
    width:30px;height:30px;border-radius:8px;
    background:linear-gradient(135deg,var(--accent),#b35f33);
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;color:#16151a;font-size:17px;
  }
  .brand .name{font-family:'Fraunces',serif;font-weight:600;font-size:18px;}
  .brand .sub{font-size:10px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;letter-spacing:1px;}
  .nav-label{
    font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    padding:14px 8px 6px;
  }
  .nav-item{
    display:flex;align-items:center;gap:10px;padding:9px 10px;
    border-radius:8px;cursor:pointer;color:var(--ink-soft);
    font-size:14px;font-weight:500;transition:all .14s;
  }
  .nav-item:hover{background:var(--panel-2);color:var(--ink);}
  .nav-item.on{background:var(--accent-soft);color:var(--accent);}
  .nav-item .ic{width:17px;text-align:center;font-size:14px;}
  .side-foot{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--line-soft);}
  .who{display:flex;align-items:center;gap:9px;}
  .who .ava{
    width:32px;height:32px;border-radius:50%;
    background:var(--panel-3);display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:600;font-family:'IBM Plex Mono',monospace;
  }
  .who .nm{font-size:13px;font-weight:600;}
  .who .rl{font-size:11px;color:var(--accent);}

  /* main */
  .main{display:flex;flex-direction:column;}
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 30px;border-bottom:1px solid var(--line);
    background:var(--panel);position:sticky;top:0;z-index:20;
  }
  .topbar h1{font-family:'Fraunces',serif;font-weight:500;font-size:22px;letter-spacing:-.3px;}
  .topbar .crumb{font-size:11px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;}
  .top-tools{display:flex;align-items:center;gap:10px;}
  .region-pick{
    background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
    border-radius:8px;padding:8px 12px;font-size:13px;font-family:'IBM Plex Sans';
  }
  .region-pick:focus{outline:none;border-color:var(--accent);}

  .view{padding:26px 30px 60px;max-width:1320px;width:100%;}
  /* Daily view: use a wider band so the heatmap + calendar have room to breathe */
  #view-daily{max-width:1680px;}
  .view.hidden{display:none;}

  /* ---------- SHARED ---------- */
  .card{
    background:var(--panel);border:1px solid var(--line);
    border-radius:13px;box-shadow:var(--shadow);
  }
  .card-h{
    padding:15px 19px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
  }
  .card-h h2{font-family:'Fraunces',serif;font-weight:500;font-size:16px;}
  .card-h .sub{font-size:11px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;}
  .card-b{padding:19px;}

  .btn{
    border:none;border-radius:7px;cursor:pointer;font-weight:600;
    font-family:'IBM Plex Sans';font-size:12.5px;padding:7px 13px;transition:all .12s;
    letter-spacing:.05px;
  }
  .btn-pri{background:var(--accent);color:#16151a;}
  .btn-pri:hover{filter:brightness(1.09);}
  .btn-pri:active{transform:translateY(1px);}
  .btn-gh{background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);}
  .btn-gh:hover{color:var(--ink);}
  .btn-sm{padding:4px 10px;font-size:11.5px;border-radius:6px;}

  label{
    display:block;font-size:10px;font-weight:600;letter-spacing:.5px;
    color:var(--ink-soft);margin-bottom:5px;text-transform:uppercase;
    font-family:'IBM Plex Mono',monospace;
  }
  input[type=text],input[type=email],input[type=date],input[type=number],
  input[type=tel],input[type=password],textarea,select{
    width:100%;background:var(--panel-2);border:1px solid var(--line);
    border-radius:7px;color:var(--ink);font-family:'IBM Plex Sans';
    font-size:13px;padding:7px 10px;transition:border-color .14s, box-shadow .14s;
  }
  input:hover:not(:disabled),textarea:hover:not(:disabled),
  select:hover:not(:disabled){border-color:var(--ink-faint);}
  input:focus,textarea:focus,select:focus{
    outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  input:disabled,textarea:disabled,select:disabled{
    background:var(--panel-2);color:var(--ink-faint);cursor:not-allowed;
  }
  input::placeholder,textarea::placeholder{color:var(--ink-faint);}
  textarea{resize:vertical;min-height:54px;}
  .field{margin-bottom:9px;}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}

  .tag{
    font-size:10px;font-family:'IBM Plex Mono',monospace;font-weight:500;
    padding:2px 7px;border-radius:4px;white-space:nowrap;display:inline-block;
  }
  .t-green{background:var(--green-soft);color:var(--green);}
  .t-blue{background:var(--blue-soft);color:var(--blue);}
  .t-amber{background:var(--accent-soft);color:var(--accent);}
  .t-red{background:var(--red-soft);color:var(--red);}
  .t-grey{background:var(--panel-3);color:var(--ink-soft);}

  /* ---------- DASHBOARD HOME ---------- */
  .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px;}
  .kpi{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:16px 17px;position:relative;overflow:hidden;
  }
  .kpi::after{
    content:'';position:absolute;right:-20px;top:-20px;width:90px;height:90px;
    border-radius:50%;opacity:.07;
  }
  .kpi.k1::after{background:var(--accent);}
  .kpi.k2::after{background:var(--green);}
  .kpi.k3::after{background:var(--blue);}
  .kpi.k4::after{background:var(--red);}
  .kpi .lab{
    font-size:11px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;
    text-transform:uppercase;letter-spacing:.5px;
  }
  .kpi .val{font-family:'Fraunces',serif;font-size:32px;font-weight:500;margin-top:6px;line-height:1;}
  .kpi .delta{font-size:11.5px;margin-top:7px;font-family:'IBM Plex Mono',monospace;}
  .up{color:var(--green);} .down{color:var(--red);}

  .dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-bottom:18px;}
  .dash-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}

  /* bar chart */
  .chart{display:flex;align-items:flex-end;gap:14px;height:180px;padding:8px 4px 0;}
  .bargrp{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;}
  .barstack{width:100%;max-width:46px;display:flex;flex-direction:column-reverse;border-radius:5px 5px 0 0;overflow:hidden;}
  .barseg{width:100%;transition:height .6s cubic-bezier(.2,.7,.3,1);}
  .bs-done{background:var(--green);}
  .bs-prog{background:var(--accent);}
  .bs-todo{background:var(--panel-3);}
  .barlab{font-size:11px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;}
  .legend{display:flex;gap:16px;margin-top:14px;font-size:11px;color:var(--ink-soft);}
  .legend span{display:flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;}
  .lg-dot{width:9px;height:9px;border-radius:2px;}

  /* donut */
  .donut-wrap{display:flex;align-items:center;gap:22px;}
  .donut{position:relative;width:140px;height:140px;flex-shrink:0;}
  .donut .mid{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
  }
  .donut .mid .big{font-family:'Fraunces',serif;font-size:26px;font-weight:500;}
  .donut .mid .sm{font-size:10px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;}
  .donut-legend{display:flex;flex-direction:column;gap:9px;font-size:12.5px;}
  .donut-legend .li{display:flex;align-items:center;gap:8px;}
  .donut-legend .sw{width:11px;height:11px;border-radius:3px;}
  .donut-legend .ct{margin-left:auto;font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);}

  /* workload list */
  .wl-row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-soft);}
  .wl-row:last-child{border:none;}
  .wl-ava{
    width:30px;height:30px;border-radius:50%;background:var(--panel-3);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    font-size:10.5px;font-weight:600;font-family:'IBM Plex Mono',monospace;
  }
  .wl-name{font-size:13px;font-weight:500;flex-shrink:0;width:104px;}
  .wl-bar{flex:1;height:8px;background:var(--panel-2);border-radius:4px;overflow:hidden;}
  .wl-bar>div{height:100%;border-radius:4px;}
  .wl-num{font-size:11.5px;font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);width:30px;text-align:right;}

  /* activity feed */
  .feed-row{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line-soft);}
  .feed-row:last-child{border:none;}
  .feed-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0;}
  .feed-txt{font-size:13px;}
  .feed-txt b{font-weight:600;}
  .feed-time{font-size:10.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;margin-top:2px;}

  /* ---------- TABLES ---------- */
  table{width:100%;border-collapse:collapse;}
  thead th{
    text-align:left;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
    color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;font-weight:500;
    padding:10px 12px;border-bottom:1px solid var(--line);
  }
  tbody td{padding:11px 12px;border-bottom:1px solid var(--line-soft);font-size:13.5px;}
  tbody tr{cursor:pointer;transition:background .1s;}
  tbody tr:hover{background:var(--panel-2);}
  tbody tr:last-child td{border-bottom:none;}
  .cell-name{display:flex;align-items:center;gap:9px;}
  .cell-ava{
    width:28px;height:28px;border-radius:50%;background:var(--panel-3);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    font-size:10px;font-weight:600;font-family:'IBM Plex Mono',monospace;
  }
  .cell-sub{font-size:11px;color:var(--ink-faint);}

  /* progress mini */
  .mini-prog{display:flex;align-items:center;gap:8px;}
  .mini-bar{width:70px;height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden;}
  .mini-bar>div{height:100%;background:var(--green);}
  .mini-txt{font-size:11px;font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);}

  .view-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
  .view-head .desc{font-size:13px;color:var(--ink-soft);margin-top:2px;}
  .seg-filter{display:flex;gap:6px;}
  .seg-filter button{
    background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);
    border-radius:7px;padding:6px 12px;font-size:12px;cursor:pointer;
    font-family:'IBM Plex Mono',monospace;
  }
  .seg-filter button.on{background:var(--ink);color:var(--bg);border-color:var(--ink);}

  /* ---------- MODAL ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(40,40,55,.34);
    display:none;align-items:flex-start;justify-content:center;
    z-index:50;padding:44px 20px;overflow-y:auto;backdrop-filter:blur(4px);
  }
  .overlay.show{display:flex;}
  .modal{
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    width:100%;max-width:460px;
    box-shadow:0 20px 50px -12px rgba(28,27,34,.18),
               0 4px 12px rgba(28,27,34,.06);
    animation:pop .18s ease;
  }
  @keyframes pop{from{transform:scale(.97) translateY(2px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
  .modal-h{
    padding:11px 16px;border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--panel-2) 28%, var(--panel)) 0%,
      var(--panel) 100%);
  }
  .modal-h h3{font-family:'Fraunces',serif;font-weight:500;font-size:15.5px;letter-spacing:.1px;}
  .modal-x{
    background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);
    width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:13px;
    transition:all .12s;
  }
  .modal-x:hover{background:var(--panel-3);color:var(--ink);}
  .modal-b{padding:13px 16px;}
  .modal-f{
    padding:9px 16px;border-top:1px solid var(--line);
    display:flex;justify-content:flex-end;gap:7px;
    background:color-mix(in srgb, var(--panel-2) 30%, var(--panel));
  }

  /* assign controls */
  .seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:3px;}
  .seg button{
    flex:1;background:none;border:none;cursor:pointer;color:var(--ink-soft);
    font-family:'IBM Plex Sans';font-size:12.5px;font-weight:600;padding:8px;
    border-radius:6px;transition:all .14s;
  }
  .seg button.on{background:var(--accent);color:#16151a;}
  .broadcast-box{
    background:var(--accent-soft);border:1px solid #5a4030;border-radius:8px;
    padding:11px 13px;margin-top:10px;font-size:12.5px;
  }
  .broadcast-box .count{font-family:'IBM Plex Mono',monospace;color:var(--accent);font-weight:500;}
  .av-strip{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
  .av{
    width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:9.5px;font-weight:600;
    font-family:'IBM Plex Mono',monospace;background:var(--panel);
    border:1px solid var(--line);cursor:pointer;user-select:none;transition:all .12s;
  }
  .av.excluded{opacity:.32;text-decoration:line-through;}
  .av:hover{border-color:var(--accent);}
  /* Task-modal team picker — full-name chips, grouped staff vs managers */
  .tk-picklist{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  .tk-pick-h{
    width:100%;font-size:10px;font-weight:700;letter-spacing:.6px;
    text-transform:uppercase;color:var(--ink-faint);
    margin:7px 0 1px;font-family:'IBM Plex Mono',monospace;
  }
  .tk-pick-h:first-child{margin-top:0;}
  .tk-pick{
    display:inline-flex;align-items:center;gap:7px;
    padding:4px 11px 4px 4px;border-radius:999px;cursor:pointer;
    border:1px solid var(--accent);background:var(--accent-soft);
    user-select:none;font-size:12px;transition:all .12s;
  }
  .tk-pick.off{border-color:var(--line);background:var(--panel);opacity:.7;}
  .tk-pick-ava{
    width:22px;height:22px;border-radius:50%;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;font-family:'IBM Plex Mono',monospace;
    background:var(--accent);color:#fff;
  }
  .tk-pick.off .tk-pick-ava{background:var(--ink-faint);}
  .tk-pick-name{font-weight:600;color:var(--ink);}
  .tk-pick-role{color:var(--ink-soft);font-size:11px;}
  .tk-pick-empty{font-size:12px;color:var(--ink-faint);font-style:italic;}
  .hint{font-size:11px;color:var(--ink-faint);font-style:italic;margin-top:5px;line-height:1.45;}
  .sf-readonly{
    font-size:13px;color:var(--ink-soft);padding:9px 11px;
    background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  }
  /* Always-visible meta line in "Who can see this" sections — reads as a
     small callout telling the user the current sharing effect in plain
     English. Accent-edged so it stands apart from the regular .hint. */
  .vis-meta{
    font-style:normal;color:var(--ink-soft);font-size:11.5px;
    background:transparent;border:none;
    padding:0;line-height:1.4;letter-spacing:.05px;
    margin-bottom:8px !important;margin-top:0 !important;
  }
  .vis-meta:empty{display:none;}

  /* sectioned modal */
  .modal-lg{max-width:560px;}
  .modal-section{padding:11px 16px;border-bottom:1px solid var(--line-soft);}
  .modal-section:last-child{border-bottom:none;}
  .modal-section-h{
    font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
    color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    margin-bottom:7px;font-weight:600;display:flex;align-items:center;gap:8px;
  }
  .modal-section-h::after{
    content:'';flex:1;height:1px;
    background:color-mix(in srgb, var(--line-soft) 60%, transparent);
  }
  .modal-h-actions{display:flex;gap:8px;align-items:center;}

  /* permission picker */
  .perm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
  .perm-pill{
    background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
    padding:11px 8px;cursor:pointer;text-align:center;transition:all .14s;
  }
  .perm-pill:hover{border-color:var(--ink-faint);}
  .perm-pill .pn{font-size:13px;font-weight:600;color:var(--ink);}
  .perm-pill .pd{
    font-size:9.5px;color:var(--ink-faint);margin-top:3px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.6px;
  }
  .perm-pill.on{background:var(--accent-soft);border-color:var(--accent);}
  .perm-pill.on .pn,.perm-pill.on .pd{color:var(--accent);}

  /* password row */
  .pw-row{display:flex;gap:8px;align-items:flex-end;}
  .pw-row > .field{flex:1;margin-bottom:0;}
  .pw-row > .btn{margin-bottom:0;flex-shrink:0;}
  .check-row{
    display:flex;align-items:center;gap:9px;margin-top:9px;
    font-size:13px;cursor:pointer;color:var(--ink-soft);
  }
  .check-row input{width:auto;margin:0;accent-color:var(--accent);}
  .check-row:hover{color:var(--ink);}

  /* member search & list */
  .member-search{position:relative;}
  .member-results{
    position:absolute;top:100%;left:0;right:0;max-height:220px;overflow-y:auto;
    background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
    margin-top:4px;z-index:5;box-shadow:var(--shadow);display:none;
  }
  .member-results.show{display:block;}
  .member-result{
    display:flex;align-items:center;gap:10px;padding:9px 11px;cursor:pointer;
    border-bottom:1px solid var(--line-soft);
  }
  .member-result:hover{background:var(--panel-3);}
  .member-result:last-child{border-bottom:none;}
  .member-list{display:flex;flex-direction:column;gap:7px;margin-top:11px;}
  .member-row{
    display:flex;align-items:center;gap:11px;padding:8px 11px;
    background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  }
  .mr-ava{
    width:30px;height:30px;border-radius:50%;background:var(--panel-3);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    font-size:10.5px;font-weight:600;font-family:'IBM Plex Mono',monospace;
  }
  .mr-info{flex:1;min-width:0;}
  .mr-name{font-size:13px;font-weight:500;}
  .mr-meta{font-size:11px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;}
  .mr-role{
    width:auto !important;padding:6px 9px !important;font-size:12px !important;
    background:var(--panel) !important;
  }
  .mr-rm{
    background:var(--panel-3);border:1px solid var(--line);color:var(--ink-soft);
    width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:13px;
    display:flex;align-items:center;justify-content:center;
  }
  .mr-rm:hover{color:var(--red);border-color:var(--red);}
  .empty-hint{
    padding:14px;text-align:center;color:var(--ink-faint);font-size:12.5px;
    font-style:italic;background:var(--panel-2);border-radius:8px;margin-top:10px;
    border:1px dashed var(--line);
  }

  /* danger button variant */
  .btn-danger{background:var(--red-soft);color:var(--red);border:1px solid #4a2a2c;}
  .btn-danger:hover{background:var(--red);color:#16151a;border-color:var(--red);}

  /* companies grid */
  .co-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
  .co-card{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:18px 19px;cursor:pointer;transition:all .15s;box-shadow:var(--shadow);
    display:flex;flex-direction:column;gap:13px;position:relative;overflow:hidden;
  }
  .co-card:hover{border-color:var(--accent);transform:translateY(-2px);}
  .co-card::after{
    content:'';position:absolute;right:-30px;top:-30px;width:110px;height:110px;
    border-radius:50%;background:var(--accent);opacity:.05;
  }
  .co-card-h{display:flex;align-items:center;gap:11px;}
  .co-mark{
    width:42px;height:42px;border-radius:10px;flex-shrink:0;
    background:linear-gradient(135deg,var(--accent),#b35f33);
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;color:#16151a;font-size:17px;
  }
  .co-card-name{font-family:'Fraunces',serif;font-weight:500;font-size:17px;line-height:1.15;}
  .co-card-ind{font-size:11px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;margin-top:2px;}
  .co-card-desc{
    font-size:12.5px;color:var(--ink-soft);line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .co-card-stats{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:11px;
    border-top:1px solid var(--line-soft);
  }
  .co-stat{text-align:center;}
  .co-stat .n{font-family:'Fraunces',serif;font-size:18px;font-weight:500;color:var(--ink);}
  .co-stat .l{font-size:9.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    text-transform:uppercase;letter-spacing:.5px;margin-top:2px;}
  .co-card-foot{
    display:flex;align-items:center;justify-content:space-between;
    font-size:11px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;
  }

  /* "+ Add company" tile that sits at the end of the grid for discoverability */
  .co-card-add{
    background:transparent;border:1.5px dashed var(--line);border-radius:12px;
    padding:18px 19px;cursor:pointer;transition:all .15s;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;min-height:200px;color:var(--ink-soft);
  }
  .co-card-add:hover{border-color:var(--accent);color:var(--accent);background:rgba(217,119,73,.04);}
  .co-card-add .plus{font-size:32px;line-height:1;font-weight:300;}
  .co-card-add .lbl{font-size:13px;font-weight:500;}

  /* Empty-state hero — only when no companies exist at all */
  .co-empty-hero{
    text-align:center;padding:60px 20px;border:1.5px dashed var(--line);
    border-radius:14px;background:var(--panel-soft,transparent);
  }
  .co-empty-mark{
    width:64px;height:64px;border-radius:14px;margin:0 auto 18px;
    background:linear-gradient(135deg,var(--accent),#b35f33);
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;color:#16151a;font-size:26px;
  }
  .co-empty-title{font-family:'Fraunces',serif;font-size:22px;font-weight:500;margin-bottom:8px;}
  .co-empty-desc{font-size:13.5px;color:var(--ink-soft);max-width:440px;margin:0 auto 22px;line-height:1.55;}

  /* company detail header */
  .co-detail-head{
    display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap;
  }
  .co-detail-title{display:flex;align-items:center;gap:13px;flex:1;}
  .co-detail-mark{
    width:46px;height:46px;border-radius:11px;
    background:linear-gradient(135deg,var(--accent),#b35f33);
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;color:#16151a;font-size:18px;
  }
  .co-detail-name{font-family:'Fraunces',serif;font-weight:500;font-size:24px;letter-spacing:-.3px;}
  .co-detail-meta{font-size:12px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;margin-top:2px;}

  /* ---------- DAILY ---------- */
  .daily-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:22px;flex-wrap:wrap;gap:14px;
  }
  .daily-date{display:flex;align-items:center;gap:10px;}
  .day-nav{
    width:34px;height:34px;border-radius:9px;background:var(--panel-2);
    border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;
    font-size:18px;line-height:1;
  }
  .day-nav:hover{color:var(--ink);border-color:var(--accent);}
  .daily-date-text{text-align:center;min-width:240px;}
  .ddt-big{font-family:'Fraunces',serif;font-weight:500;font-size:22px;letter-spacing:-.2px;}
  .ddt-sub{font-size:11px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;letter-spacing:1px;margin-top:1px;}
  .daily-tabs{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px;}
  .dtab{
    background:none;border:none;cursor:pointer;color:var(--ink-soft);
    font-family:'IBM Plex Sans';font-size:12.5px;font-weight:600;padding:8px 14px;
    border-radius:6px;transition:all .14s;
  }
  .dtab.on{background:var(--accent);color:#16151a;}
  .daily-filters{
    display:flex;align-items:center;gap:11px;margin-bottom:16px;flex-wrap:wrap;
  }

  /* staff card grid */
  .daily-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px;}
  .ds-card{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:15px 17px;box-shadow:var(--shadow);transition:border-color .14s;
    display:flex;flex-direction:column;gap:11px;
  }
  .ds-card:hover{border-color:var(--line);}
  .ds-card-h{display:flex;align-items:center;gap:13px;}
  .ds-ring{position:relative;width:54px;height:54px;flex-shrink:0;}
  .ds-ring svg{transform:rotate(-90deg);}
  .ds-ring-num{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-size:14.5px;font-weight:500;
  }
  .ds-card-info{flex:1;min-width:0;}
  .ds-name{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:9px;}
  .ds-streak{
    background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:500;
    padding:2px 7px;border-radius:10px;font-family:'IBM Plex Mono',monospace;
    display:inline-flex;align-items:center;gap:3px;
  }
  .ds-meta{font-size:11.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;margin-top:3px;}
  .ds-edit{
    background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);
    width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:13px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .ds-edit:hover{color:var(--ink);border-color:var(--accent);}

  .ds-tasks{display:flex;flex-direction:column;gap:6px;}
  .ds-task{
    display:flex;align-items:center;gap:11px;padding:9px 11px;
    background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
    cursor:pointer;transition:all .14s;
  }
  .ds-task:hover{border-color:var(--ink-faint);}
  .ds-task.done{background:var(--green-soft);border-color:#2f4423;}
  .ds-task.done .ds-task-title{color:var(--green);text-decoration:line-through;text-decoration-color:rgba(127,166,99,.4);}
  .ds-check{
    width:22px;height:22px;border-radius:6px;border:2px solid var(--ink-faint);
    background:transparent;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    color:transparent;font-size:13px;font-weight:700;transition:all .15s;
  }
  .ds-task.done .ds-check{background:var(--green);border-color:var(--green);color:#14180e;}
  .ds-task-icon{font-size:15px;flex-shrink:0;}
  .ds-task-title{font-size:13.5px;font-weight:500;flex:1;color:var(--ink);}
  .ds-task-time{
    font-size:10.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
  }
  .ds-task.done .ds-task-time{color:var(--green);}
  .ds-task-add{
    border:1px dashed var(--line);background:transparent;color:var(--ink-faint);
    padding:7px;border-radius:8px;cursor:pointer;font-size:11.5px;font-family:'IBM Plex Mono',monospace;
    text-align:center;transition:all .14s;
  }
  .ds-task-add:hover{color:var(--accent);border-color:var(--accent);}
  .ds-empty{
    padding:18px;text-align:center;color:var(--ink-faint);font-size:12.5px;
    border:1px dashed var(--line);border-radius:8px;font-style:italic;
  }

  /* My Day */
  .my-day-head{display:flex;align-items:center;margin-bottom:16px;}
  .my-day-as{
    display:flex;align-items:center;background:var(--panel-2);
    border:1px solid var(--line);border-radius:9px;padding:6px 10px 6px 12px;
  }
  .my-day-as select{
    background:transparent;border:none;color:var(--ink);font-size:13.5px;
    font-weight:600;padding:4px 8px;cursor:pointer;width:auto;
  }
  .my-day-card{
    background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:26px 28px;display:grid;grid-template-columns:240px 1fr;gap:34px;
    box-shadow:var(--shadow);
  }
  @media (max-width:780px){ .my-day-card{grid-template-columns:1fr;} }
  .my-day-left{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;}
  .my-day-ring{position:relative;width:140px;height:140px;}
  .my-day-ring svg{transform:rotate(-90deg);}
  .my-day-ring-num{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
  }
  .my-day-ring-num .big{font-family:'Fraunces',serif;font-size:36px;font-weight:500;line-height:1;}
  .my-day-ring-num .sm{font-size:10.5px;color:var(--ink-faint);
    font-family:'IBM Plex Mono',monospace;margin-top:5px;letter-spacing:.8px;}
  .my-day-person{text-align:center;}
  .my-day-person .nm{font-family:'Fraunces',serif;font-size:18px;font-weight:500;}
  .my-day-person .rl{font-size:11.5px;color:var(--ink-faint);
    font-family:'IBM Plex Mono',monospace;margin-top:4px;}
  .my-day-streak{
    background:var(--accent-soft);color:var(--accent);
    padding:8px 14px;border-radius:8px;font-family:'IBM Plex Mono',monospace;
    font-size:12px;display:flex;align-items:center;gap:6px;
  }
  .my-day-streak .num{font-family:'Fraunces',serif;font-size:18px;font-weight:500;}
  .my-day-right{display:flex;flex-direction:column;gap:9px;min-width:0;}
  .my-day-h{
    font-family:'Fraunces',serif;font-size:15px;font-weight:500;
    margin-bottom:6px;color:var(--ink-soft);
  }
  .my-day-task{
    display:flex;align-items:center;gap:13px;padding:13px 15px;
    background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
    cursor:pointer;transition:all .15s;
  }
  .my-day-task:hover{border-color:var(--ink-faint);transform:translateX(2px);}
  .my-day-task.done{background:var(--green-soft);border-color:#2f4423;}
  .my-day-task.done .my-day-task-title{color:var(--green);text-decoration:line-through;text-decoration-color:rgba(127,166,99,.4);}
  .my-day-check{
    width:26px;height:26px;border-radius:7px;border:2px solid var(--ink-faint);
    flex-shrink:0;display:flex;align-items:center;justify-content:center;
    color:transparent;font-size:14px;font-weight:700;transition:all .15s;
  }
  .my-day-task.done .my-day-check{background:var(--green);border-color:var(--green);color:#14180e;}
  .my-day-task-icon{font-size:18px;flex-shrink:0;}
  .my-day-task-title{font-size:14.5px;font-weight:500;flex:1;}
  .my-day-task-time{font-size:11.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;}
  .my-day-task.done .my-day-task-time{color:var(--green);}

  /* yesterday mini */
  .yest-pill{
    display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
    background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
    font-size:12px;margin:3px 5px 3px 0;
  }
  .yest-pill.done{background:var(--green-soft);border-color:#2f4423;color:var(--green);}
  .yest-pill.miss{background:var(--red-soft);border-color:#4a2a2c;color:var(--red);}
  .yest-pill .ic{font-size:13px;}

  /* scope + tabs wrap */
  .daily-tabs-wrap{display:flex;gap:9px;flex-wrap:wrap;}

  /* ---------- TEAM MONTHLY HEATMAP ---------- */
  .hm-wrap{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--shadow);overflow:hidden;
  }
  .hm-scroll{overflow-x:auto;}
  .hm-table{
    width:100%;border-collapse:separate;border-spacing:0;
    font-family:'IBM Plex Mono',monospace;
    table-layout:fixed;
    /* Sticky-left col (180) + 31 day cols (min 22 each) + summary (110) = ~972 */
    min-width:980px;
  }
  .hm-table th, .hm-table td{padding:0;}
  .hm-table thead th{
    font-size:10px;color:var(--ink-faint);font-weight:500;letter-spacing:.4px;
    background:var(--panel);border-bottom:1px solid var(--line);
    padding:9px 0 7px;text-align:center;
    position:sticky;top:0;z-index:2;
  }
  .hm-table thead th.hm-h-staff,.hm-table tbody td.hm-c-staff{
    text-align:left;padding-left:14px;padding-right:10px;
    width:180px;
    background:var(--panel);position:sticky;left:0;z-index:3;
  }
  .hm-table thead th.hm-h-staff{z-index:4;border-right:1px solid var(--line);}
  .hm-table tbody td.hm-c-staff{
    border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line);
    font-family:'IBM Plex Sans',sans-serif;
  }
  .hm-staff-name{
    font-size:13px;font-weight:600;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .hm-staff-meta{
    font-size:10.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* Header day cells: two-line (DOW + day number) */
  .hm-dow{
    font-size:8.5px;color:var(--ink-faint);
    letter-spacing:.4px;opacity:.7;line-height:1.1;
  }
  .hm-day{
    font-size:11px;color:var(--ink);font-weight:600;line-height:1.2;margin-top:1px;
  }
  .hm-table thead th.wknd .hm-dow,.hm-table thead th.wknd .hm-day{color:var(--ink-faint);opacity:.55;}
  .hm-table thead th.today{background:var(--accent-soft);}
  .hm-table thead th.today .hm-dow,.hm-table thead th.today .hm-day{color:var(--accent);opacity:1;}
  /* Day cell wrapper td: holds the .hm-cell, centered, with padding */
  .hm-table tbody td:not(.hm-c-staff):not(.hm-c-summary){
    padding:3px;
  }
  .hm-cell{
    width:100%;height:30px;
    border:1px solid var(--bg);border-radius:3px;
    cursor:default;position:relative;transition:transform .08s;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
  }
  .hm-cell:hover{transform:scale(1.2);z-index:5;outline:2px solid var(--ink);}
  .hm-cell.today{outline:2px solid var(--accent);outline-offset:-2px;}
  .hm-cell.weekend{opacity:.78;}
  .hm-cell.future{cursor:not-allowed;}
  .hm-cell-text{
    font-size:9.5px;font-weight:600;letter-spacing:.2px;
    font-family:'IBM Plex Mono',monospace;
    line-height:1;
    pointer-events:none;
    color:rgba(28,27,34,.85);   /* dark text — readable on green/orange/grey cells */
  }
  /* na + future cells now use solid black bg set inline; class is just a hook */
  .hm-table thead th.hm-c-summary,
  .hm-table tbody td.hm-c-summary{
    width:110px;
  }
  .hm-c-summary{
    padding:0 14px;font-family:'IBM Plex Mono',monospace;
    font-size:11px;color:var(--ink-soft);text-align:right;
    border-left:1px solid var(--line);background:var(--panel);
  }
  .hm-c-summary .pct{
    font-family:'Fraunces',serif;font-size:15px;font-weight:500;color:var(--ink);
    display:block;
  }
  .hm-table tbody tr:hover td.hm-c-staff{background:var(--panel-2);}
  .hm-table tbody td{border-bottom:1px solid var(--line-soft);}

  /* heatmap legend */
  .hm-legend{
    padding:11px 14px;display:flex;align-items:center;gap:10px;
    font-size:10.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    border-top:1px solid var(--line);background:var(--panel-2);
    letter-spacing:.4px;
  }
  .hm-legend-scale{display:flex;align-items:center;gap:7px;}
  .hm-legend-scale .sw{width:16px;height:14px;display:inline-block;border:1px solid var(--line);border-radius:3px;}

  /* ---------- MY DAY MONTHLY CALENDAR ---------- */
  .cal-wrap{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:18px 20px;box-shadow:var(--shadow);
    /* keep the calendar in a sensible size band; cells stay square but don't go giant */
    max-width:820px;
  }
  .cal-grid{
    display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;
  }
  .cal-dowh{
    font-size:10.5px;letter-spacing:.6px;color:var(--ink-faint);
    font-family:'IBM Plex Mono',monospace;font-weight:600;
    text-align:center;padding:7px 0;
  }
  .cal-day{
    aspect-ratio:1;background:var(--panel-2);border:1px solid var(--line);
    border-radius:9px;padding:8px;display:flex;flex-direction:column;
    align-items:center;justify-content:space-between;
    cursor:default;position:relative;transition:border-color .14s;
    min-height:78px;
  }
  .cal-day:hover{border-color:var(--ink-faint);}
  .cal-day.blank{background:transparent;border-color:transparent;pointer-events:none;}
  .cal-day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
  .cal-day.future{opacity:.45;}
  .cal-daynum{
    font-family:'Fraunces',serif;font-size:16px;font-weight:500;
    align-self:flex-start;color:var(--ink);
  }
  .cal-day.weekend .cal-daynum{color:var(--ink-soft);}
  .cal-ring{position:relative;width:34px;height:34px;align-self:center;}
  .cal-ring svg{transform:rotate(-90deg);}
  .cal-ring-num{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:10px;font-weight:600;font-family:'IBM Plex Mono',monospace;
  }
  .cal-day-done .cal-ring-num{color:var(--green);}

  /* per-task stats table inside personal monthly */
  .task-stats{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    margin-top:18px;overflow:hidden;
  }
  .task-stats table{width:100%;border-collapse:collapse;}
  .task-stats th{
    text-align:left;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
    color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;font-weight:500;
    padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel);
  }
  .task-stats td{padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:13.5px;}
  .task-stats tr:last-child td{border-bottom:none;}
  .ts-bar{height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden;width:140px;display:inline-block;vertical-align:middle;}
  .ts-bar > div{height:100%;transition:width .4s;}

  /* task cards */
  .task-card{
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    padding:15px 17px;margin-bottom:12px;cursor:pointer;transition:border-color .12s;
  }
  .task-card:hover{border-color:var(--line);background:var(--panel-2);}
  .tc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
  .tc-title{font-weight:600;font-size:14px;}
  .tc-meta{font-size:11px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;margin-top:3px;display:flex;gap:11px;flex-wrap:wrap;}
  .tc-roll{margin-top:10px;}
  .tc-bar{height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden;border:1px solid var(--line);}
  .tc-bar>div{height:100%;background:var(--green);transition:width .4s;}
  .tc-rolllab{font-size:11px;color:var(--ink-soft);margin-top:4px;font-family:'IBM Plex Mono',monospace;}
  .chip-line{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap;}
  .chip{
    font-size:11px;padding:3px 8px;border-radius:12px;background:var(--panel-2);
    border:1px solid var(--line);display:flex;align-items:center;gap:5px;
  }
  .sdot{width:6px;height:6px;border-radius:50%;}
  .sd-done{background:var(--green);} .sd-prog{background:var(--accent);} .sd-todo{background:var(--ink-faint);}

  .empty{padding:44px;text-align:center;color:var(--ink-faint);font-size:13px;}

  #toast{
    position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--green);color:#14180e;padding:11px 22px;border-radius:8px;
    font-weight:600;font-size:13.5px;opacity:0;transition:all .3s;
    pointer-events:none;box-shadow:var(--shadow);z-index:80;
  }
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  /* ---------- STAFF PORTAL ---------- */
  /* "View as Staff" picker in the topbar */
  .view-as-pick{
    background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
    border-radius:8px;padding:8px 12px;font-size:13px;font-family:'IBM Plex Sans';
    cursor:pointer;
  }
  .view-as-pick:focus{outline:none;border-color:var(--accent);}

  /* When in staff mode, hide the admin sidebar and let portal use full width */
  .app.mode-staff{grid-template-columns:1fr;}
  .app.mode-staff .side{display:none;}
  .app.mode-staff #regionFilter{display:none;}
  .app.mode-staff #topAction{display:none;}
  /* Topbar gets a warmer accent strip when in staff mode (subtle visual cue) */
  .app.mode-staff .topbar{
    background:linear-gradient(180deg, var(--panel) 0%, var(--panel) 60%, var(--accent-soft) 100%);
    border-bottom-color:var(--accent);
  }

  /* Hero — fill the available width */
  #view-staff-portal{max-width:none;}
  .sp-hero{
    display:flex;align-items:center;justify-content:space-between;gap:22px;
    margin-bottom:22px;padding:20px 24px;
    background:var(--panel);
    border:1px solid var(--line);border-radius:12px;
    box-shadow:var(--shadow);
  }
  .sp-greet{
    font-family:'Fraunces',serif;font-weight:500;font-size:22px;
    letter-spacing:-.3px;line-height:1.15;
  }
  .sp-date{
    font-size:11.5px;color:var(--ink-soft);margin-top:4px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.4px;
  }
  .sp-meta{
    font-size:12px;color:var(--ink-soft);margin-top:10px;
    font-family:'IBM Plex Mono',monospace;
  }
  .sp-meta b{color:var(--accent);font-weight:600;}

  .sp-ring{position:relative;width:96px;height:96px;flex-shrink:0;}
  .sp-ring svg{transform:rotate(-90deg);width:96px;height:96px;}
  .sp-ring-num{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
  }
  .sp-ring-num .big{
    font-family:'Fraunces',serif;font-size:22px;font-weight:500;line-height:1;
  }
  .sp-ring-num .sm{
    font-size:9.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    letter-spacing:.6px;margin-top:4px;
  }

  /* Section base — stack full-width, simpler, fills page */
  .sp-grid{display:contents;}
  .sp-section{margin-bottom:22px;}
  .sp-section-h{
    display:flex;align-items:baseline;justify-content:space-between;
    margin-bottom:10px;padding:0 2px;
  }
  .sp-section-t{
    font-family:'Fraunces',serif;font-weight:500;font-size:15px;letter-spacing:-.1px;
  }
  .sp-section-sub{
    font-size:10.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    letter-spacing:.5px;
  }

  /* Daily checklist */
  .sp-daily-list{display:flex;flex-direction:column;gap:7px;}
  .sp-daily-item{
    background:var(--panel);border:1px solid var(--line);border-radius:9px;
    overflow:hidden;transition:all .15s;
  }
  .sp-daily-row{
    display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;
  }
  .sp-daily-item:hover{border-color:var(--ink-faint);}
  .sp-daily-item.pending{
    border-color:var(--accent);
    box-shadow:0 0 0 2px var(--accent-soft);
  }
  .sp-daily-item.done{background:var(--green-soft);border-color:var(--green);}
  .sp-daily-item.done .sp-daily-title{
    color:var(--green);text-decoration:line-through;text-decoration-color:rgba(94,132,71,.4);
  }
  .sp-daily-check{
    width:22px;height:22px;border-radius:6px;border:2px solid var(--ink-faint);
    flex-shrink:0;display:flex;align-items:center;justify-content:center;
    color:transparent;font-size:12px;font-weight:700;transition:all .15s;
  }
  .sp-daily-item.done .sp-daily-check{
    background:var(--green);border-color:var(--green);color:#fff;
  }
  .sp-daily-icon{font-size:15px;flex-shrink:0;}
  .sp-daily-title{font-size:13.5px;font-weight:500;flex:1;}
  .sp-daily-time{
    font-size:11px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
  }
  .sp-daily-item.done .sp-daily-time{color:var(--green);}

  /* Open tasks list */
  .sp-task-list{display:flex;flex-direction:column;gap:7px;}
  .sp-task-item{
    padding:12px 14px;background:var(--panel);border:1px solid var(--line);
    border-radius:9px;transition:border-color .14s;
  }
  .sp-task-item:hover{border-color:var(--ink-faint);}
  .sp-task-item.pending{
    border-color:var(--accent);
    box-shadow:0 0 0 2px var(--accent-soft);
  }
  .sp-task-item.overdue{border-left:3px solid var(--red);}
  .sp-task-item.due-soon{border-left:3px solid var(--accent);}
  .sp-task-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
  .sp-task-title{font-size:13.5px;font-weight:600;line-height:1.3;}
  .sp-task-context{
    font-size:11px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    margin-top:3px;
  }
  .sp-task-due{
    font-size:10.5px;font-family:'IBM Plex Mono',monospace;
    padding:3px 8px;border-radius:5px;white-space:nowrap;
    background:var(--panel-2);color:var(--ink-soft);
  }
  .sp-task-due.overdue{background:var(--red-soft);color:var(--red);}
  .sp-task-due.due-soon{background:var(--accent-soft);color:var(--accent);}
  .sp-task-status{
    margin-top:7px;display:flex;align-items:center;gap:8px;
    font-size:11px;color:var(--ink-soft);
  }
  .sp-task-status .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
  .sp-task-status .dot.todo{background:var(--ink-faint);}
  .sp-task-status .dot.progress{background:var(--accent);}
  .sp-task-status .dot.done{background:var(--green);}
  .sp-task-advance{
    background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);
    padding:4px 10px;border-radius:6px;cursor:pointer;font-size:11px;
    font-family:'IBM Plex Mono',monospace;margin-left:auto;
  }
  .sp-task-advance:hover{color:var(--accent);border-color:var(--accent);}

  /* Project cards — auto-fit grid that fills the row */
  .sp-proj-list{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:9px;
  }
  .sp-proj-item{
    padding:12px 14px;background:var(--panel);border:1px solid var(--line);
    border-radius:9px;
    display:flex;align-items:center;gap:11px;
    transition:border-color .14s;
  }
  .sp-proj-item:hover{border-color:var(--ink-faint);}
  .sp-proj-info{flex:1;min-width:0;}
  .sp-proj-name{font-size:13.5px;font-weight:600;}
  .sp-proj-meta{
    font-size:11px;color:var(--ink-faint);
    font-family:'IBM Plex Mono',monospace;margin-top:2px;
  }
  .sp-proj-role{
    font-size:10px;padding:2px 7px;border-radius:4px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.3px;
  }
  .sp-proj-role.lead{background:var(--accent-soft);color:var(--accent);}
  .sp-proj-role.member{background:var(--blue-soft);color:var(--blue);}
  .sp-proj-role.viewer{background:var(--panel-3);color:var(--ink-soft);}
  .sp-proj-prog{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
  .sp-proj-pct{
    font-family:'Fraunces',serif;font-size:14px;font-weight:500;
  }
  .sp-proj-bar{width:70px;height:5px;background:var(--panel-2);border-radius:3px;overflow:hidden;}
  .sp-proj-bar > div{height:100%;}

  /* Companies row */
  .sp-co-row{display:flex;flex-wrap:wrap;gap:9px;}
  .sp-co-chip{
    display:flex;align-items:center;gap:9px;padding:9px 12px;
    background:var(--panel);border:1px solid var(--line);border-radius:9px;
    min-width:180px;
  }
  .sp-co-mark{
    width:28px;height:28px;border-radius:7px;
    background:linear-gradient(135deg, var(--accent), #a55a28);
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:600;color:#fff;font-size:13px;
    flex-shrink:0;
  }
  .sp-co-info{flex:1;min-width:0;}
  .sp-co-name{font-size:12.5px;font-weight:600;}
  .sp-co-role{
    font-size:10.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    margin-top:2px;
  }

  /* Empty state */
  .sp-empty{
    padding:24px;text-align:center;color:var(--ink-faint);font-size:13px;
    background:var(--panel);border:1px dashed var(--line);border-radius:10px;
    font-style:italic;
  }

  /* Hero needs to flex its right side so toggle sits beside the ring */
  .sp-hero-text{flex:1;min-width:0;}
  .sp-scope{
    display:inline-flex;background:var(--panel-2);border:1px solid var(--line);
    border-radius:9px;padding:3px;margin-bottom:16px;
  }
  .sp-scope button{
    background:none;border:none;cursor:pointer;color:var(--ink-soft);
    font-family:'IBM Plex Sans';font-size:12.5px;font-weight:600;padding:7px 14px;
    border-radius:6px;transition:all .14s;
  }
  .sp-scope button.on{background:var(--accent);color:#16151a;}

  /* Note + confirm row that appears when ticking */
  .sp-confirm{
    padding:14px 20px 16px;background:var(--accent-soft);
    border-top:1px solid var(--accent);
    display:flex;flex-direction:column;gap:10px;
  }
  .sp-confirm-h{
    font-size:11.5px;color:var(--accent);font-weight:600;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.5px;
  }
  .sp-note-input{
    width:100%;background:var(--panel-2);border:1px solid var(--line);
    border-radius:8px;padding:10px 12px;color:var(--ink);
    font-size:13.5px;font-family:'IBM Plex Sans';
    transition:border-color .14s;resize:vertical;min-height:42px;max-height:160px;
  }
  .sp-note-input:focus{outline:none;border-color:var(--accent);}
  .sp-note-input::placeholder{color:var(--ink-faint);font-style:italic;}
  .sp-confirm-row{
    display:flex;gap:8px;align-items:center;
  }
  .sp-confirm-btn{
    background:var(--green);color:#14180e;border:none;border-radius:8px;
    padding:9px 18px;font-size:13.5px;font-weight:600;cursor:pointer;
    font-family:'IBM Plex Sans';transition:filter .14s;
  }
  .sp-confirm-btn:hover{filter:brightness(1.08);}
  .sp-cancel-btn{
    background:transparent;color:var(--ink-soft);border:1px solid var(--line);
    border-radius:8px;padding:9px 14px;font-size:12.5px;cursor:pointer;
    font-family:'IBM Plex Sans';transition:all .14s;
  }
  .sp-cancel-btn:hover{color:var(--ink);border-color:var(--ink-faint);}
  .sp-confirm-hint{
    font-size:10.5px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;
    margin-left:auto;letter-spacing:.3px;
  }

  /* Saved note display on done items */
  .sp-saved-note{
    margin:0 20px 14px 60px;padding:9px 12px;
    background:var(--green-soft);border-left:3px solid var(--green);
    border-radius:6px;font-size:13px;color:var(--ink);line-height:1.5;
    white-space:pre-wrap;
  }
  .sp-saved-note .sp-saved-note-h{
    font-size:10px;color:var(--green);font-weight:600;letter-spacing:.5px;
    font-family:'IBM Plex Mono',monospace;margin-bottom:3px;
  }

  /* Expandable open-task description */
  .sp-task-expand-btn{
    background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);
    width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:11px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:all .14s;
  }
  .sp-task-expand-btn:hover{color:var(--ink);border-color:var(--ink-faint);}
  .sp-task-expand-btn.open{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
  .sp-task-desc{
    margin-top:10px;padding:11px 13px;background:var(--panel-2);
    border-left:3px solid var(--ink-faint);border-radius:7px;
    font-size:13px;color:var(--ink-soft);line-height:1.55;
    white-space:pre-wrap;
  }
  .sp-task-desc.empty{font-style:italic;color:var(--ink-faint);}

  /* ----- STAFF PORTAL — MONTH CALENDAR ----- */
  .sp-month-wrap{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:20px 22px;box-shadow:var(--shadow);
  }
  .sp-month-nav{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:14px;
  }
  .sp-month-label{
    font-family:'Fraunces',serif;font-size:18px;font-weight:500;
  }
  .sp-month-nav-btns{display:flex;gap:7px;align-items:center;}
  .sp-month-nav-btns .day-nav{margin:0;}

  .sp-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;}
  .sp-cal-dowh{
    font-size:10.5px;letter-spacing:.6px;color:var(--ink-faint);
    font-family:'IBM Plex Mono',monospace;font-weight:600;
    text-align:center;padding:7px 0;
  }
  .sp-cal-day{
    aspect-ratio:1;background:var(--panel-2);border:1px solid var(--line);
    border-radius:9px;padding:9px 8px 8px;display:flex;flex-direction:column;
    align-items:center;justify-content:space-between;
    position:relative;transition:border-color .14s;
    min-height:88px;cursor:default;
  }
  .sp-cal-day.blank{background:transparent;border-color:transparent;pointer-events:none;}
  .sp-cal-day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
  .sp-cal-day.future{opacity:.4;}
  .sp-cal-daynum{
    font-family:'Fraunces',serif;font-size:17px;font-weight:500;
    align-self:flex-start;color:var(--ink);
  }
  .sp-cal-day.weekend .sp-cal-daynum{color:var(--ink-soft);}
  .sp-cal-ring{position:relative;width:38px;height:38px;align-self:center;}
  .sp-cal-ring svg{transform:rotate(-90deg);}
  .sp-cal-ring-num{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:10.5px;font-weight:600;font-family:'IBM Plex Mono',monospace;
  }

  /* Per-task monthly stats */
  .sp-task-stats{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    overflow:hidden;
  }
  .sp-task-stats table{width:100%;border-collapse:collapse;}
  .sp-task-stats th{
    text-align:left;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
    color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;font-weight:500;
    padding:11px 16px;border-bottom:1px solid var(--line);background:var(--panel);
  }
  .sp-task-stats td{
    padding:13px 16px;border-bottom:1px solid var(--line-soft);font-size:13.5px;
  }
  .sp-task-stats tr:last-child td{border-bottom:none;}
  .sp-stat-bar{
    height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden;
    width:160px;display:inline-block;vertical-align:middle;
  }
  .sp-stat-bar > div{height:100%;}

  /* ============ LOGIN OVERLAY ============ */
  body.logged-out > .app{filter:blur(6px) brightness(.4);pointer-events:none;user-select:none;}
  .login-overlay{
    position:fixed;inset:0;display:none;align-items:center;justify-content:center;
    background:rgba(8,9,12,.85);backdrop-filter:blur(6px);z-index:1000;
  }
  .login-overlay.show{display:flex;}
  .login-card{
    background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:32px 32px 28px;width:380px;max-width:92vw;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
    display:flex;flex-direction:column;gap:8px;
  }
  .login-brand{display:flex;align-items:center;gap:11px;margin-bottom:6px;}
  .login-brand .mark{
    width:36px;height:36px;border-radius:8px;background:var(--ink);color:var(--panel);
    display:flex;align-items:center;justify-content:center;font-weight:700;
    font-family:'Fraunces',serif;font-size:18px;
  }
  .login-brand .name{font-family:'Fraunces',serif;font-size:18px;font-weight:500;}
  .login-brand .sub{font-size:11px;color:var(--ink-soft);letter-spacing:.6px;font-family:'IBM Plex Mono',monospace;}
  .login-h{font-family:'Fraunces',serif;font-weight:500;font-size:22px;margin:6px 0 0 0;}
  .login-desc{color:var(--ink-soft);font-size:13px;margin-bottom:8px;}
  .login-label{font-size:11px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;
    letter-spacing:.6px;margin-top:8px;}
  .login-overlay input[type=email],
  .login-overlay input[type=password]{
    background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
    border-radius:8px;padding:10px 12px;font:inherit;font-size:14px;outline:none;
  }
  .login-overlay input[type=email]:focus,
  .login-overlay input[type=password]:focus{border-color:var(--accent);}
  .login-err{
    color:var(--red);font-size:12.5px;min-height:18px;margin-top:8px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.3px;
  }
  .login-btn{margin-top:10px;justify-content:center;width:100%;}
  .login-divider{
    display:flex;align-items:center;gap:10px;margin:14px 0 4px;
    color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  }
  .login-divider::before,
  .login-divider::after{
    content:"";flex:1;height:1px;background:var(--line);
  }
  .login-google{
    width:100%;justify-content:center;gap:10px;
    background:var(--panel-2);color:var(--ink);border:1px solid var(--line);
  }
  .login-google:hover{border-color:var(--ink-soft);}
  .login-google svg{flex:0 0 auto;}

  /* ============ TOPBAR CONTROL POLISH ============
   * Every control in .top-tools shares a uniform 36px height and
   * a single consistent visual language. The primary action button
   * preserves its SVG icon across view switches (see setTopAction
   * in app.js — we only swap the label span, not the button HTML).
   */
  .topbar{padding:14px 28px;}
  .topbar h1{margin-top:2px;}
  .topbar .crumb{margin-bottom:0;}
  .top-tools{gap:8px;}
  .top-tools .region-pick,
  .top-tools .view-as-pick,
  .top-tools .btn{
    height:36px;display:inline-flex;align-items:center;line-height:1;
    box-sizing:border-box;font-size:13px;
  }
  .top-tools .region-pick,
  .top-tools .view-as-pick{
    padding:0 32px 0 12px;color:var(--ink);
    background-color:var(--panel-2);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23a4a7b0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5l3 3 3-3'/></svg>");
    background-repeat:no-repeat;
    background-position:right 11px center;
    background-size:12px 12px;
    -webkit-appearance:none;appearance:none;
    cursor:pointer;
  }
  .top-tools .region-pick:hover,
  .top-tools .view-as-pick:hover{border-color:var(--ink-faint);}
  .top-tools .region-pick:focus,
  .top-tools .view-as-pick:focus{outline:none;border-color:var(--accent);}

  /* Primary "+ New Task" — clean SVG plus, rotates on hover */
  .btn.top-action{
    padding:0 16px;font-weight:600;letter-spacing:.1px;gap:7px;
    box-shadow:0 1px 0 rgba(0,0,0,.18), inset 0 -1px 0 rgba(0,0,0,.12);
  }
  .btn.top-action:hover{filter:brightness(1.08);transform:translateY(-1px);}
  .btn.top-action:active{transform:translateY(0);}
  .btn.top-action .ta-ic{
    flex-shrink:0;color:#16151a;opacity:.92;
    transition:transform .18s ease;
  }
  .btn.top-action:hover .ta-ic{transform:rotate(90deg);opacity:1;}

  /* "← Back to Admin" — appears only in staff preview mode.
     Make it visually distinct so it reads as an exit-mode action, not just another button. */
  .btn.btn-back-admin{
    background:var(--panel-2);
    border:1px solid var(--accent);
    color:var(--ink);
    padding:0 14px;font-weight:600;letter-spacing:.1px;gap:7px;
  }
  .btn.btn-back-admin:hover{background:var(--accent);color:#16151a;}
  .btn.btn-back-admin .ba-arr{
    font-size:15px;line-height:1;opacity:.85;transition:transform .15s;
  }
  .btn.btn-back-admin:hover .ba-arr{transform:translateX(-2px);opacity:1;}

  /* ============ ROLE-AWARE CHROME ============
   * body.is-staff-user → real staff logged in. Hide every admin-only
   * surface even if they try to navigate to it. The .mode-staff class
   * on .app (set by enterStaffPortal) already hides the sidebar; this
   * adds the topbar pieces and any view-as / back-to-admin controls. */
  body.is-staff-user .side{display:none !important;}
  body.is-staff-user .app{grid-template-columns:1fr;}
  body.is-staff-user #regionFilter,
  body.is-staff-user #viewAsPick,
  body.is-staff-user #companyFilter,
  body.is-staff-user #topbarAddCompanyBtn,
  body.is-staff-user #topAction{display:none !important;}

  /* Top sign-out button: hidden for admin (sign out is in the sidebar);
   * shown for staff users since their sidebar is hidden. */
  #signOutBtnTop{display:none;}
  body.is-staff-user #signOutBtnTop{display:inline-flex;}
  .top-tools .btn.btn-signout-top{
    background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);
    padding:0 13px;gap:7px;font-weight:600;
  }
  .top-tools .btn.btn-signout-top:hover{color:var(--ink);border-color:var(--ink-faint);}
  .top-tools .btn.btn-signout-top svg{opacity:.85;}

  /* body.is-manager-user → a manager logged in. They get the full workspace
   * chrome (sidebar + topbar, like admin) but every admin-only create/edit
   * affordance is hidden. Managers create + monitor tasks (incl. daily
   * routines) and file money for admin approval — nothing else. Data is
   * already scoped to their team + companies by /api/bootstrap, so the
   * shared workspace views render the right slice automatically. */
  body.is-manager-user #addStaffBtn,
  body.is-manager-user #addCompanyBtn,
  body.is-manager-user #topbarAddCompanyBtn,
  body.is-manager-user #addCompanyHeroBtn,
  body.is-manager-user #addCompanyTile,
  body.is-manager-user #addProjBtn,
  body.is-manager-user #coEditBtn,
  body.is-manager-user #coAddEmpBtn,
  body.is-manager-user #saveProj,
  body.is-manager-user #viewAsPick,
  body.is-manager-user .nav-item[data-view="managers"]{display:none !important;}
  /* Managers never use the staff-tab nav — not in their workspace, and not
   * while previewing a team member (that's pure monitoring of the staff's
   * Home; they exit via the preview banner). */
  body.is-manager-user .staff-tabs{display:none !important;}

  /* ============ COMPLETED TASKS ============ */
  .task-card.tc-done{
    opacity:.62;
    background:linear-gradient(to right, var(--panel) 0%, color-mix(in srgb, var(--green) 6%, var(--panel)) 100%);
    border-color:color-mix(in srgb, var(--green) 35%, var(--line));
  }
  .task-card.tc-done .tc-title{
    text-decoration:line-through;
    text-decoration-color:color-mix(in srgb, var(--ink-soft) 60%, transparent);
    text-decoration-thickness:1.5px;
    color:var(--ink-soft);
  }
  .task-card.tc-done .tc-done-badge{
    display:inline-block;margin-left:10px;padding:2px 8px;
    background:var(--green);color:#16151a;border-radius:999px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:.5px;vertical-align:middle;
    text-decoration:none;
  }
  .task-card.tc-done:hover{opacity:.85;}

  /* ============ STAFF PORTAL: COMPLETED TASKS ============ */
  .sp-task-item.is-done{
    opacity:.6;
    background:linear-gradient(to right, var(--panel) 0%, color-mix(in srgb, var(--green) 5%, var(--panel)) 100%);
    border-color:color-mix(in srgb, var(--green) 30%, var(--line));
  }
  .sp-task-item.is-done .sp-task-title{
    text-decoration:line-through;
    text-decoration-color:color-mix(in srgb, var(--ink-soft) 60%, transparent);
    color:var(--ink-soft);
  }
  .sp-task-item.is-done:hover{opacity:.85;}
  .sp-task-done-badge{
    display:inline-block;margin-left:10px;padding:2px 8px;
    background:var(--green);color:#16151a;border-radius:999px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
    letter-spacing:.5px;vertical-align:middle;text-decoration:none;
  }
  .sp-task-status-done{color:var(--green);font-weight:600;}
  .sp-task-reopen{
    margin-left:auto;background:transparent;border:1px solid var(--line);
    color:var(--ink-soft);padding:4px 10px;border-radius:6px;cursor:pointer;
    font-size:11px;font-family:'IBM Plex Mono',monospace;letter-spacing:.4px;
  }
  .sp-task-reopen:hover{color:var(--ink);border-color:var(--ink-faint);}

  /* ============ BOOT GATE — no admin-dashboard flash ============
   * body.app-booting hides the entire .app shell from the very first paint
   * so neither admin dashboard nor staff portal flickers before /api/me
   * resolves the user's role. bootApp() removes the class once the right
   * view is mounted. The login overlay sits above .app and is unaffected. */
  body.app-booting .app{visibility:hidden;}
  body.app-booting .login-overlay:not(.show)::before{
    content:'';position:fixed;left:50%;top:50%;width:22px;height:22px;
    margin:-11px 0 0 -11px;border-radius:50%;
    border:2px solid var(--line);border-top-color:var(--accent);
    animation:meridian-spin .8s linear infinite;
  }
  @keyframes meridian-spin{to{transform:rotate(360deg);}}

  /* ============ STAFF PORTAL · MONTH VIEW EXTRAS ============ */
  .sp-cal-day{position:relative;}  /* anchor for the project-task badge */
  .sp-cal-projdot{
    position:absolute;top:5px;right:5px;
    min-width:18px;height:18px;padding:0 4px;border-radius:9px;
    background:var(--green);color:#16151a;
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;
    line-height:1;letter-spacing:.2px;
    box-shadow:0 0 0 2px var(--panel);
  }
  .sp-cal-day.has-proj{background:color-mix(in srgb, var(--green) 5%, transparent);}

  .sp-month-subsection{margin-top:22px;}
  .sp-month-subhead{
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.6px;
    color:var(--ink-soft);text-transform:uppercase;margin-bottom:10px;
    display:flex;align-items:center;gap:8px;
  }
  .sp-month-subcount{
    background:var(--panel-2);border:1px solid var(--line);
    padding:1px 7px;border-radius:9px;font-size:10px;color:var(--ink);
  }
  .sp-proj-done-list{display:flex;flex-direction:column;gap:6px;}
  .sp-proj-done-row{
    display:flex;align-items:center;gap:11px;
    background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--green);
    border-radius:8px;padding:10px 13px;
  }
  .sp-proj-done-check{
    width:22px;height:22px;border-radius:50%;
    background:var(--green);color:#16151a;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:700;font-size:13px;flex-shrink:0;
  }
  .sp-proj-done-info{flex:1;min-width:0;}
  .sp-proj-done-title{font-weight:600;font-size:13.5px;color:var(--ink);}
  .sp-proj-done-meta{
    font-size:11.5px;color:var(--ink-soft);margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .sp-proj-done-date{
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);
    letter-spacing:.3px;flex-shrink:0;
  }

  /* ============ STAFF PORTAL · MONTH KPI STRIP ============ */
  .sp-month-kpis{
    display:grid;grid-template-columns:repeat(4, 1fr);gap:12px;
    margin-bottom:18px;
  }
  .sp-month-kpi{
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    padding:14px 16px;display:flex;flex-direction:column;gap:3px;
    box-shadow:var(--shadow);
  }
  .sp-month-kpi-num{
    font-family:'Fraunces',serif;font-weight:500;font-size:28px;
    line-height:1;color:var(--ink);letter-spacing:-.5px;
  }
  .sp-month-kpi-lab{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:.5px;color:var(--ink-soft);text-transform:uppercase;
    margin-top:6px;
  }
  .sp-month-kpi-sub{font-size:11.5px;color:var(--ink-faint);}
  @media (max-width: 900px){
    .sp-month-kpis{grid-template-columns:repeat(2, 1fr);}
  }

  /* Inline legend above the calendar */
  .sp-month-cal-legend{
    font-size:12px;color:var(--ink-soft);
    padding:8px 4px 12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  }
  .sp-cal-projdot.inline{
    position:static;display:inline-flex;width:16px;height:16px;
    margin:0 2px;box-shadow:none;vertical-align:middle;
  }

  /* ============ STAFF PORTAL · CALENDAR CELL DENSIFY ============ */
  .sp-cal-day{
    /* Slightly more room to fit the bottom caption without crowding */
    min-height:96px;
    padding-bottom:6px;
  }
  .sp-cal-cap{
    margin-top:auto;font-family:'IBM Plex Mono',monospace;
    font-size:9.5px;letter-spacing:.3px;line-height:1.25;
    color:var(--ink-soft);text-align:center;
    width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .sp-cal-cap-d{color:var(--ink-soft);}
  .sp-cal-cap-p{color:var(--green);font-weight:600;}
  .sp-cal-cap-today{
    color:var(--accent);font-weight:600;text-transform:uppercase;
  }
  .sp-cal-today-pin{
    color:var(--accent);font-size:14px;font-weight:700;
    margin-left:3px;vertical-align:top;line-height:1;
  }
  /* When a day has only a project task done (no daily), highlight the cell border lightly */
  .sp-cal-day.has-proj:not(.weekend){
    border-color:color-mix(in srgb, var(--green) 35%, var(--line));
  }

  /* ============ ADMIN DAILY · PROJECT-TASK OVERLAY ============ */
  /* Actionable empty state for staff with no daily checklist */
  .ds-empty-actionable{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    padding:16px 12px;
  }
  .ds-empty-line{color:var(--ink-soft);font-size:13px;text-align:center;}
  .ds-empty-add{align-self:center;}

  /* Card footer summarising the staff's project task activity */
  .ds-proj-footer{
    border-top:1px solid var(--line);
    padding:9px 14px;font-size:11.5px;
    color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;
    letter-spacing:.3px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  }
  .ds-proj-done{color:var(--green);font-weight:600;}
  .ds-proj-open{color:var(--ink-soft);}
  .ds-proj-overdue{color:var(--red);font-weight:600;}

  /* Subtle accent for cards where staff has no daily checklist */
  .ds-card.ds-no-daily{
    border-style:dashed;
    background:color-mix(in srgb, var(--panel-2) 92%, var(--panel));
  }

  /* Heatmap: project-task-only cell (staff has no daily, but did a project task) */
  .hm-cell.hm-proj-only{
    background:color-mix(in srgb, var(--green) 70%, transparent);
    color:#16151a;font-weight:700;
  }
  /* Mark cells that also had project tasks alongside dailies */
  .hm-cell.hm-has-proj{
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--green) 70%, transparent);
  }
  .hm-proj-sup{
    font-size:9px;color:var(--green);margin-left:2px;vertical-align:super;
    font-weight:700;
  }
  .hm-summary-proj{
    font-size:10.5px;color:var(--green);font-weight:600;
    margin-top:3px;font-family:'IBM Plex Mono',monospace;
  }

  /* My Day · project rows */
  .my-day-proj-row{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;border:1px solid var(--line);border-radius:8px;
    background:var(--panel-2);margin-bottom:6px;
  }
  .my-day-proj-row.done{border-left:3px solid var(--green);}
  .my-day-proj-row.overdue{border-left:3px solid var(--red);}
  .my-day-proj-check{
    width:20px;height:20px;border-radius:50%;background:var(--green);color:#16151a;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;flex-shrink:0;
  }
  .my-day-proj-dot{
    width:9px;height:9px;border-radius:50%;background:var(--ink-faint);flex-shrink:0;
  }
  .my-day-proj-dot.todo{background:var(--ink-faint);}
  .my-day-proj-dot.progress{background:var(--accent);}
  .my-day-proj-dot.done{background:var(--green);}
  .my-day-proj-info{flex:1;min-width:0;}
  .my-day-proj-title{font-weight:600;font-size:13px;}
  .my-day-proj-meta{font-size:11px;color:var(--ink-soft);margin-top:1px;}
  .my-day-proj-more{
    font-size:11px;color:var(--ink-soft);padding:6px 0 0 6px;font-style:italic;
  }

  /* ============ UNIFIED TASKS LIST ============ */
  .uni-row{
    display:flex;align-items:center;gap:14px;
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    padding:13px 16px;margin-bottom:9px;cursor:pointer;
    transition:border-color .12s, transform .12s;
  }
  .uni-row:hover{border-color:var(--ink-faint);transform:translateX(2px);}
  .uni-row.uni-done{
    opacity:.62;
    background:linear-gradient(to right, var(--panel) 0%, color-mix(in srgb, var(--green) 6%, var(--panel)) 100%);
    border-color:color-mix(in srgb, var(--green) 35%, var(--line));
  }
  .uni-row.uni-done .uni-title{
    text-decoration:line-through;
    text-decoration-color:color-mix(in srgb, var(--ink-soft) 60%, transparent);
    color:var(--ink-soft);
  }
  .uni-row.uni-overdue{
    border-left:3px solid var(--red);padding-left:13px;
  }
  .uni-row.uni-recurring{
    background:color-mix(in srgb, var(--accent) 4%, var(--panel));
    border-color:color-mix(in srgb, var(--accent) 25%, var(--line));
  }

  .uni-badge{
    flex-shrink:0;font-family:'IBM Plex Mono',monospace;
    font-size:9.5px;font-weight:700;letter-spacing:.6px;
    padding:4px 9px;border-radius:5px;
    width:60px;text-align:center;
  }
  .uni-badge-project{background:var(--panel-2);color:var(--ink-soft);border:1px solid var(--line);}
  .uni-badge-daily{background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));}

  .uni-main{flex:1;min-width:0;}
  .uni-title{
    font-weight:600;font-size:14px;
    display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  }
  .uni-icon{font-size:15px;}
  .uni-due{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    color:var(--ink-faint);font-weight:500;letter-spacing:.3px;
  }
  .uni-meta{
    font-size:11.5px;color:var(--ink-soft);margin-top:3px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .uni-assignee{color:var(--ink);}
  .uni-asg{
    display:inline-block;vertical-align:middle;
    font-family:'IBM Plex Mono',monospace;
    font-size:9.5px;font-weight:700;letter-spacing:.4px;
    padding:3px 8px;border-radius:5px;white-space:nowrap;
  }
  .uni-asg-self{background:var(--panel-2);color:var(--ink-soft);border:1px solid var(--line);}
  .uni-asg-in{
    background:var(--blue-soft);color:var(--blue);
    border:1px solid color-mix(in srgb, var(--blue) 32%, var(--line));
  }
  /* ✉ "message about this task" buttons — task list + staff portal */
  .uni-msg{
    flex-shrink:0;width:30px;height:30px;border-radius:7px;
    border:1px solid var(--line);background:var(--panel-2);
    color:var(--ink-soft);font-size:13px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:all .12s;
  }
  .uni-msg:hover{border-color:var(--accent);color:var(--accent);}
  .sp-task-msg{
    flex-shrink:0;width:28px;height:28px;border-radius:6px;
    border:1px solid var(--line);background:var(--panel);
    color:var(--ink-soft);font-size:13px;cursor:pointer;transition:all .12s;
  }
  .sp-task-msg:hover{border-color:var(--accent);color:var(--accent);}
  /* Staff messages — thread switcher chips (Admin + managers) */
  .sm-switch{
    display:flex;gap:6px;flex-wrap:wrap;
    padding:8px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);
  }
  .sm-chip{
    padding:5px 12px;border-radius:999px;cursor:pointer;
    border:1px solid var(--line);background:var(--panel);
    font-size:12px;color:var(--ink-soft);font-weight:500;transition:all .12s;
  }
  .sm-chip:hover{border-color:var(--accent);}
  .sm-chip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);}
  .sm-chip-n{
    display:inline-block;background:var(--red);color:#fff;
    border-radius:999px;font-size:9px;padding:0 5px;margin-left:3px;font-weight:700;
  }

  .uni-state-wrap{flex-shrink:0;}

  /* ===== Managers oversight page (admin) ===== */
  /* Manager collaboration grid → moved to its own file, collab-matrix.css,
     so the global table{width:100%} rule can't bleed in and shift it. */

  /* Managers overview — search bar + summary card grid */
  .mo-bar{display:flex;align-items:center;gap:14px;margin:4px 0 14px;}
  .mo-title{font-weight:600;font-size:15px;color:var(--ink);}
  .mo-count{
    background:var(--panel-2);color:var(--ink-soft);
    font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:4px;
  }
  .mo-search{
    margin-left:auto;width:230px;max-width:42vw;
    padding:8px 12px;border:1px solid var(--line);border-radius:9px;
    font-size:13px;background:var(--panel);color:var(--ink);
  }
  .mo-search:focus{outline:none;border-color:var(--accent);}
  .mo-grid{
    display:grid;gap:14px;
    grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  }
  .ms-card{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:16px;cursor:pointer;
    transition:border-color .12s,transform .12s,box-shadow .12s;
  }
  .ms-card:hover{
    border-color:var(--accent);transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,.06);
  }
  .ms-head{display:flex;align-items:center;gap:11px;}
  .ms-mark{
    width:42px;height:42px;border-radius:11px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent-soft);color:var(--accent);
    font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:15px;
  }
  .ms-id{min-width:0;}
  .ms-name{
    font-weight:600;font-size:14.5px;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .ms-sub{font-size:12px;color:var(--ink-soft);margin-top:1px;}
  .ms-meta{
    font-size:11px;color:var(--ink-faint);margin:11px 0 12px;
    font-family:'IBM Plex Mono',monospace;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .ms-stats{display:flex;gap:8px;}
  .ms-stat{
    flex:1;text-align:center;background:var(--panel-2);
    border-radius:8px;padding:8px 4px;
  }
  .ms-stat-n{
    display:block;font-size:18px;font-weight:600;color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  .ms-stat-l{
    display:block;font-size:9px;font-weight:700;letter-spacing:.4px;
    text-transform:uppercase;color:var(--ink-soft);margin-top:2px;
  }
  .ms-stat-over{background:var(--red-soft);}
  .ms-stat-over .ms-stat-n{color:var(--red);}
  .ms-bar{
    height:6px;border-radius:999px;background:var(--panel-3);
    margin:13px 0 7px;overflow:hidden;
  }
  .ms-bar-fill{height:100%;background:var(--accent);border-radius:999px;}
  .ms-foot{
    display:flex;justify-content:space-between;align-items:center;
    font-size:11.5px;color:var(--ink-soft);
  }
  .ms-open{color:var(--accent);font-weight:600;}

  /* Manager detail page */
  .md-back{
    display:inline-block;cursor:pointer;
    font-size:12.5px;font-weight:600;color:var(--ink-soft);
    margin-bottom:12px;transition:color .12s;
  }
  .md-back:hover{color:var(--accent);}
  .md-toolbar{padding:11px 22px;border-top:1px solid var(--line);}
  .md-showdone{
    display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    font-size:12px;color:var(--ink-soft);
  }

  .mgr-peer-tag{
    font-size:8.5px;font-weight:700;letter-spacing:.5px;
    background:var(--blue-soft);color:var(--blue);
    padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:middle;
  }
  .mgr-card{margin-bottom:16px;}
  .mgr-head{
    display:flex;align-items:center;gap:14px;
    padding:16px 22px;border-bottom:1px solid var(--line);
  }
  .mgr-mark{
    width:42px;height:42px;border-radius:10px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--accent);color:#16151a;font-weight:700;font-size:16px;
  }
  .mgr-id{flex:1;min-width:0;}
  .mgr-name{font-weight:600;font-size:15.5px;color:var(--ink);}
  .mgr-sub{font-size:12px;color:var(--ink-soft);margin-top:2px;}
  .mgr-stats{display:flex;gap:22px;flex-shrink:0;}
  .mgr-stat{text-align:center;}
  .mgr-stat-n{font-size:20px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
  .mgr-stat-l{
    font-size:9.5px;color:var(--ink-faint);text-transform:uppercase;
    letter-spacing:.6px;margin-top:1px;
  }
  .mgr-stat-over .mgr-stat-n{color:var(--red,#c14848);}

  .mgr-body{padding:6px 0;}
  .mgr-group{padding:9px 22px;}
  .mgr-group + .mgr-group{border-top:1px solid var(--line);}
  .mgr-group-head{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;}
  .mgr-group-name{font-weight:600;font-size:13px;color:var(--ink);}
  .mgr-group-meta{font-size:11px;color:var(--ink-faint);}
  .mgr-task{
    display:flex;align-items:center;gap:9px;
    padding:6px 10px;border-radius:7px;font-size:12.5px;cursor:pointer;
    transition:background .12s;
  }
  .mgr-task:hover{background:var(--panel-2);}
  .mgr-task-ic{width:18px;text-align:center;flex-shrink:0;font-size:12px;}
  .mgr-task-title{
    flex:1;min-width:0;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .mgr-task-state{
    font-size:11px;color:var(--ink-soft);white-space:nowrap;flex-shrink:0;
    font-family:'IBM Plex Mono',monospace;
  }
  .mgr-task-done .mgr-task-ic{color:var(--heat-green,#2c8a4e);}
  .mgr-task-done .mgr-task-title{color:var(--ink-soft);}
  .mgr-task-prog .mgr-task-ic{color:var(--amber,#c78a2c);}
  .mgr-task-over .mgr-task-ic{color:var(--red,#c14848);}
  .mgr-task-over .mgr-task-state{color:var(--red,#c14848);font-weight:600;}
  .mgr-task-todo .mgr-task-ic{color:var(--ink-faint);}
  .mgr-task-empty,.mgr-task-empty:hover{
    cursor:default;background:none;color:var(--ink-faint);font-style:italic;
  }
  .mgr-team-edit{padding:11px 22px 6px;border-top:1px solid var(--line);}
  .mgr-team-edit-h{font-size:11px;color:var(--ink-faint);margin-bottom:7px;}
  .mgr-team-strip{display:flex;flex-wrap:wrap;gap:6px;}
  /* Team roster — full-name chips; lit = on this manager's team. */
  .mgr-pick{
    display:inline-flex;align-items:center;gap:7px;
    padding:4px 11px 4px 4px;border-radius:999px;cursor:pointer;
    border:1px solid var(--line);background:var(--panel);
    user-select:none;font-size:12px;transition:all .12s;
  }
  .mgr-pick:hover{border-color:var(--accent);}
  .mgr-pick.on{border-color:var(--accent);background:var(--accent-soft);}
  .mgr-pick-ava{
    width:22px;height:22px;border-radius:50%;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;font-family:'IBM Plex Mono',monospace;
    background:var(--ink-faint);color:#fff;
  }
  .mgr-pick.on .mgr-pick-ava{background:var(--accent);}
  .mgr-pick-name{font-weight:600;color:var(--ink);}
  .mgr-pick-role{color:var(--ink-soft);font-size:11px;}
  .mgr-team-none{font-size:12px;color:var(--ink-faint);font-style:italic;}
  .uni-state{
    font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
    letter-spacing:.3px;padding:5px 10px;border-radius:999px;
    white-space:nowrap;
  }
  .uni-state-done{background:var(--green-soft);color:var(--green);}
  .uni-state-overdue{background:var(--red-soft);color:var(--red);}
  .uni-state-progress{background:var(--accent-soft);color:var(--accent);}
  .uni-state-todo{background:var(--panel-2);color:var(--ink-soft);border:1px solid var(--line);}

  /* ============ TASKS · CALENDAR VIEW ============ */
  .tc-cal-wrap{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:18px 20px;box-shadow:var(--shadow);
  }
  .tc-cal-nav{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin-bottom:8px;
  }
  .tc-cal-label{font-family:'Fraunces',serif;font-weight:500;font-size:20px;letter-spacing:-.2px;}
  .tc-cal-nav-right{display:flex;align-items:center;gap:8px;}
  .tc-cal-legend{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    font-size:11px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;
    letter-spacing:.4px;padding:10px 4px 14px;
    border-bottom:1px solid var(--line);margin-bottom:12px;
  }
  .tc-chip-dot{
    display:inline-block;width:8px;height:8px;border-radius:50%;
    margin-right:6px;vertical-align:middle;
  }
  .tc-chip-dot.tc-chip-due{background:var(--accent);}
  .tc-chip-dot.tc-chip-overdue{background:var(--red);}
  .tc-chip-dot.tc-chip-done{background:var(--green);}

  .tc-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
  .tc-cal-dowh{
    font-size:10.5px;letter-spacing:.6px;color:var(--ink-faint);
    font-family:'IBM Plex Mono',monospace;font-weight:600;
    text-align:center;padding:6px 0 8px;
  }
  .tc-cal-day{
    position:relative;min-height:110px;
    background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
    padding:7px 7px 6px;display:flex;flex-direction:column;gap:4px;
    transition:border-color .12s;
  }
  .tc-cal-day.blank{background:transparent;border-color:transparent;}
  .tc-cal-day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
  .tc-cal-day.future{opacity:.5;}
  .tc-cal-day.weekend{background:color-mix(in srgb, var(--panel-2) 92%, var(--panel));}
  .tc-cal-day.has-items{background:color-mix(in srgb, var(--accent) 4%, var(--panel-2));}

  .tc-cal-daynum{
    font-family:'Fraunces',serif;font-size:14px;font-weight:500;color:var(--ink);
  }
  .tc-cal-day.weekend .tc-cal-daynum{color:var(--ink-soft);}
  .tc-cal-today-pin{
    color:var(--accent);font-size:14px;font-weight:700;margin-left:3px;
    vertical-align:top;line-height:1;
  }
  .tc-cal-daily{
    position:absolute;top:6px;right:6px;
    background:var(--green);color:#16151a;
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
    padding:2px 6px;border-radius:9px;letter-spacing:.2px;
  }

  .tc-cal-items{display:flex;flex-direction:column;gap:3px;margin-top:auto;}
  .tc-cal-chip{
    display:flex;align-items:center;gap:5px;
    padding:3px 6px;border-radius:5px;cursor:pointer;
    font-size:11px;line-height:1.2;
    border:1px solid transparent;
    overflow:hidden;
  }
  .tc-cal-chip .tc-chip-ic{font-size:11px;font-weight:700;flex-shrink:0;}
  .tc-cal-chip .tc-chip-txt{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
  }
  .tc-cal-chip:hover{filter:brightness(1.15);}

  .tc-cal-chip.tc-chip-due{
    background:color-mix(in srgb, var(--accent) 18%, transparent);
    border-color:color-mix(in srgb, var(--accent) 40%, transparent);
    color:var(--ink);
  }
  .tc-cal-chip.tc-chip-overdue{
    background:color-mix(in srgb, var(--red) 18%, transparent);
    border-color:color-mix(in srgb, var(--red) 50%, transparent);
    color:var(--red);
  }
  .tc-cal-chip.tc-chip-done{
    background:color-mix(in srgb, var(--green) 12%, transparent);
    border-color:color-mix(in srgb, var(--green) 35%, transparent);
    color:var(--ink-soft);text-decoration:line-through;
    text-decoration-color:color-mix(in srgb, var(--ink-soft) 50%, transparent);
  }
  .tc-cal-more{
    font-size:10.5px;color:var(--ink-faint);font-style:italic;
    padding:1px 6px;
  }

  /* Heatmap cell tweaks for the all-staff Tasks calendar */
  .tc-hm-cell.clickable{cursor:pointer;}
  .tc-hm-cell .hm-cell-text{
    font-size:9px;letter-spacing:.1px;color:rgba(20,18,30,.92);
    font-weight:700;line-height:1;white-space:nowrap;
  }
  .tc-hm-cell{height:34px;}
  .tc-hm-cell:hover{outline:2px solid var(--ink);outline-offset:-1px;}

  /* Two-line month summary cell (tasks + daily) */
  .tc-sum-cell{padding:6px 12px;text-align:left;line-height:1.3;}
  .tc-sum-line{
    display:flex;align-items:baseline;gap:6px;
    font-size:11px;font-family:'IBM Plex Mono',monospace;
    color:var(--ink-soft);letter-spacing:.3px;
    margin-bottom:3px;
  }
  .tc-sum-line:last-child{margin-bottom:0;}
  .tc-sum-line .ic{
    display:inline-block;min-width:38px;
    font-size:9px;font-weight:700;letter-spacing:.6px;color:var(--ink-faint);
  }
  .tc-sum-num{font-family:'Fraunces',serif;font-size:14px;font-weight:500;color:var(--ink);letter-spacing:-.1px;}
  .tc-sum-num small{font-size:10.5px;color:var(--ink-soft);font-weight:500;}
  .tc-sum-pct{
    font-size:10.5px;color:var(--ink-soft);
    margin-left:auto;
  }
  .tc-sum-over{color:var(--red);font-weight:600;}
  .tc-sum-muted{color:var(--ink-faint);font-style:italic;}

  /* ============ DASHBOARD · ACTION-FIRST ============ */
  .kpi.kpi-alert{
    background:linear-gradient(180deg, color-mix(in srgb, var(--red) 12%, var(--panel)) 0%, var(--panel) 100%);
    border-color:color-mix(in srgb, var(--red) 50%, var(--line));
  }
  .kpi.kpi-alert .val{color:var(--red);}

  /* Needs Attention rows */
  .dash-na-row{
    display:flex;align-items:center;gap:14px;
    padding:13px 18px;border-bottom:1px solid var(--line-soft);
    cursor:pointer;transition:background .12s;
  }
  .dash-na-row:last-child{border-bottom:none;}
  .dash-na-row:hover{background:var(--panel-2);}
  .dash-na-row.dash-na-overdue{border-left:3px solid var(--red);padding-left:15px;}
  .dash-na-row.dash-na-due-todo{border-left:3px solid var(--accent);padding-left:15px;}
  .dash-na-row.dash-na-due-progress{border-left:3px solid color-mix(in srgb, var(--accent) 60%, var(--line));padding-left:15px;}
  .dash-na-row.dash-na-daily-pending{border-left:3px solid var(--ink-faint);padding-left:15px;}

  .dash-na-label{
    flex-shrink:0;font-family:'IBM Plex Mono',monospace;
    font-size:9.5px;font-weight:700;letter-spacing:.6px;
    padding:4px 8px;border-radius:5px;
    width:108px;text-align:center;
  }
  .dash-na-overdue .dash-na-label{background:var(--red-soft);color:var(--red);}
  .dash-na-due-todo .dash-na-label{background:var(--accent-soft);color:var(--accent);}
  .dash-na-due-progress .dash-na-label{background:var(--accent-soft);color:var(--accent);opacity:.85;}
  .dash-na-daily-pending .dash-na-label{background:var(--panel-2);color:var(--ink-soft);border:1px solid var(--line);}

  .dash-na-main{flex:1;min-width:0;}
  .dash-na-title{font-weight:600;font-size:14px;color:var(--ink);}
  .dash-na-meta{
    font-size:11.5px;color:var(--ink-soft);margin-top:2px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .dash-na-arrow{
    color:var(--ink-faint);font-size:16px;flex-shrink:0;
    transition:transform .12s,color .12s;
  }
  .dash-na-row:hover .dash-na-arrow{color:var(--accent);transform:translateX(3px);}

  /* Today's Wins rows */
  .dash-win-row{
    display:flex;align-items:center;gap:12px;
    padding:11px 14px;border-radius:8px;cursor:pointer;
    background:color-mix(in srgb, var(--green) 7%, var(--panel));
    border:1px solid color-mix(in srgb, var(--green) 30%, var(--line));
    margin-bottom:7px;transition:transform .12s,filter .12s;
  }
  .dash-win-row:last-child{margin-bottom:0;}
  .dash-win-row:hover{filter:brightness(1.05);transform:translateX(2px);}
  .dash-win-check{
    width:24px;height:24px;border-radius:50%;
    background:var(--green);color:#16151a;
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:700;font-size:13px;flex-shrink:0;
  }
  .dash-win-main{flex:1;min-width:0;}
  .dash-win-title{font-weight:600;font-size:13.5px;color:var(--ink);}
  .dash-win-meta{font-size:11.5px;color:var(--ink-soft);margin-top:1px;}

  /* Staff Today rows */
  .dash-staff-row{
    display:flex;align-items:center;gap:13px;
    padding:11px 14px;border-bottom:1px solid var(--line-soft);
    cursor:pointer;transition:background .12s;
  }
  .dash-staff-row:last-child{border-bottom:none;}
  .dash-staff-row:hover{background:var(--panel-2);}
  .dash-staff-ring{position:relative;width:40px;height:40px;flex-shrink:0;}
  .dash-staff-ring svg{transform:rotate(-90deg);}
  .dash-staff-ring-num{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:10px;font-weight:700;font-family:'IBM Plex Mono',monospace;
  }
  .dash-staff-info{flex:1;min-width:0;}
  .dash-staff-name{font-weight:600;font-size:13.5px;color:var(--ink);}
  .dash-staff-meta{font-size:11px;color:var(--ink-soft);margin-top:2px;font-family:'IBM Plex Mono',monospace;}
  .dash-staff-arrow{color:var(--ink-faint);font-size:14px;flex-shrink:0;transition:transform .12s,color .12s;}
  .dash-staff-row:hover .dash-staff-arrow{color:var(--accent);transform:translateX(3px);}

  /* ============ MESSAGES ============ */
  /* Nav badge */
  .nav-badge{
    display:inline-block;background:var(--red);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
    padding:1px 7px;border-radius:9px;margin-left:8px;
    letter-spacing:.3px;line-height:1.4;
    vertical-align:middle;
  }

  /* Admin Messages view: left list + right thread */
  #view-messages{max-width:none;padding:18px 26px 30px;}
  .msg-wrap{
    display:grid;grid-template-columns:320px 1fr;gap:14px;
    height:calc(100vh - 130px);min-height:520px;
  }
  @media (max-width:780px){ .msg-wrap{grid-template-columns:1fr;height:auto;} }

  .msg-side{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    display:flex;flex-direction:column;overflow:hidden;
  }
  .msg-side-h{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:15px 17px;border-bottom:1px solid var(--line);
  }
  .msg-side-h h2{font-family:'Fraunces',serif;font-weight:500;font-size:16px;}
  .msg-side-h .sub{font-size:11px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;letter-spacing:.5px;}

  .msg-list{flex:1;overflow-y:auto;}
  .msg-row{
    display:flex;align-items:center;gap:11px;
    padding:12px 14px;border-bottom:1px solid var(--line-soft);
    cursor:pointer;transition:background .12s;
  }
  .msg-row:last-child{border-bottom:none;}
  .msg-row:hover{background:var(--panel-2);}
  .msg-row.active{background:color-mix(in srgb, var(--accent) 12%, var(--panel-2));border-left:3px solid var(--accent);padding-left:11px;}
  .msg-row-ava{
    width:38px;height:38px;border-radius:50%;
    background:var(--panel-3);color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;flex-shrink:0;
  }
  .msg-row-body{flex:1;min-width:0;}
  .msg-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
  .msg-row-name{font-weight:600;font-size:13.5px;}
  .msg-row-when{font-size:10.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;flex-shrink:0;}
  .msg-row-preview{
    font-size:12px;color:var(--ink-soft);margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .msg-row-unread{
    background:var(--red);color:#fff;font-size:10.5px;font-weight:700;
    padding:2px 7px;border-radius:9px;font-family:'IBM Plex Mono',monospace;
    flex-shrink:0;
  }

  .msg-thread{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    display:flex;flex-direction:column;overflow:hidden;position:relative;
  }
  .msg-thread-empty{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    color:var(--ink-faint);font-size:13px;font-style:italic;text-align:center;padding:20px;
  }
  .msg-thread-h{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 18px;border-bottom:1px solid var(--line);
  }
  .msg-thread-name{font-family:'Fraunces',serif;font-weight:500;font-size:17px;}

  .msg-thread-body{
    flex:1;overflow-y:auto;padding:18px 20px;
    display:flex;flex-direction:column;gap:9px;
  }

  /* Bubbles — shared by admin view and staff portal */
  .msg-bubble-row{display:flex;}
  .msg-bubble-row.mine{justify-content:flex-end;}
  .msg-bubble-row.theirs{justify-content:flex-start;}
  .msg-bubble{
    max-width:78%;padding:9px 13px;border-radius:13px;
    display:flex;flex-direction:column;gap:3px;
    font-size:13.5px;line-height:1.4;
  }
  .msg-bubble-mine{
    background:var(--accent);color:#16151a;
    border-bottom-right-radius:4px;
  }
  .msg-bubble-theirs{
    background:var(--panel-2);border:1px solid var(--line);
    border-bottom-left-radius:4px;
  }
  .msg-bubble-text{white-space:pre-wrap;word-wrap:break-word;}
  .msg-bubble-meta{
    font-size:10px;font-family:'IBM Plex Mono',monospace;letter-spacing:.3px;
    opacity:.65;
  }
  .msg-bubble-mine .msg-bubble-meta{color:rgba(0,0,0,.55);}
  .msg-bubble-theirs .msg-bubble-meta{color:var(--ink-faint);}

  /* Compose */
  .msg-compose{
    border-top:1px solid var(--line);padding:11px 13px;
    display:flex;gap:9px;align-items:flex-end;background:var(--panel-2);
  }
  .msg-compose textarea{
    flex:1;background:var(--panel);border:1px solid var(--line);color:var(--ink);
    border-radius:8px;padding:9px 12px;font:inherit;font-size:13.5px;resize:none;
    min-height:38px;max-height:200px;outline:none;
  }
  .msg-compose textarea:focus{border-color:var(--accent);}
  .msg-compose .btn{flex-shrink:0;}

  /* Staff portal inline messages card */
  .sp-msg-card{
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    display:flex;flex-direction:column;overflow:hidden;
    max-height:480px;
  }
  .sp-msg-body{
    flex:1;overflow-y:auto;padding:16px 18px;
    display:flex;flex-direction:column;gap:9px;
    min-height:140px;
  }

  /* ============ STAFF PORTAL · MESSAGES PANEL (top) ============ */
  .sp-msg-panel{
    background:var(--panel);border:1px solid var(--line);border-radius:13px;
    box-shadow:var(--shadow);overflow:hidden;margin-bottom:22px;
    display:flex;flex-direction:column;
  }
  .sp-msg-h{
    display:flex;align-items:center;gap:12px;
    padding:13px 16px;border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--panel)) 0%, var(--panel) 100%);
  }
  .sp-msg-h-ava{
    width:38px;height:38px;border-radius:50%;
    background:var(--ink);color:var(--panel);
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:500;font-size:17px;flex-shrink:0;
  }
  .sp-msg-h-info{flex:1;min-width:0;}
  .sp-msg-h-name{
    font-weight:600;font-size:15px;
    display:flex;align-items:center;gap:10px;
  }
  .sp-msg-status{
    display:inline-flex;align-items:center;gap:5px;
    font-size:10.5px;color:var(--ink-soft);
    font-family:'IBM Plex Mono',monospace;letter-spacing:.4px;
    text-transform:lowercase;font-weight:500;
  }
  .sp-msg-dot{
    width:8px;height:8px;border-radius:50%;background:var(--green);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--green) 30%, transparent);
    animation:sp-msg-pulse 2.4s ease-in-out infinite;
  }
  @keyframes sp-msg-pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
  .sp-msg-h-sub{
    font-size:11.5px;color:var(--ink-soft);margin-top:2px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.3px;
  }
  .sp-msg-h-sub.has-unread{color:var(--red);font-weight:600;}
  .sp-msg-collapse{
    background:transparent;border:1px solid var(--line);
    color:var(--ink-soft);width:30px;height:30px;border-radius:7px;
    cursor:pointer;font-size:14px;line-height:1;
    transition:all .15s;flex-shrink:0;
  }
  .sp-msg-collapse:hover{color:var(--ink);border-color:var(--ink-faint);}
  .sp-msg-panel.collapsed .sp-msg-card{display:none;}
  .sp-msg-panel.collapsed .sp-msg-collapse{transform:rotate(-90deg);}

  /* ============ STAFF TOP TABS (Home / Messages) ============ */
  .staff-tabs{display:none;}     /* hidden by default; shown for real staff AND admin-in-preview */
  body.is-staff-user .staff-tabs,
  .app.mode-staff .staff-tabs{
    display:flex;align-items:center;gap:4px;
    padding:0 28px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
  }
  .st-tab{
    position:relative;
    display:inline-flex;align-items:center;gap:9px;
    background:transparent;border:none;cursor:pointer;
    color:var(--ink-soft);font-family:'IBM Plex Sans';font-size:14px;font-weight:600;
    padding:14px 20px 13px;
    border-bottom:3px solid transparent;
    letter-spacing:.1px;
    transition:color .12s, border-color .12s, background .12s;
  }
  .st-tab:hover{color:var(--ink);background:color-mix(in srgb, var(--accent) 4%, var(--panel));}
  .st-tab.on{
    color:var(--accent);
    border-bottom-color:var(--accent);
  }
  .st-ic{
    font-size:17px;opacity:.95;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
  }
  /* Pulsing glow + bolder treatment on the Messages tab when there's unread */
  .st-tab[data-stab="msgs"].has-unread{
    color:var(--ink);
  }
  .st-tab[data-stab="msgs"].has-unread .st-ic{
    color:var(--red);animation:st-msg-pulse 1.8s ease-in-out infinite;
  }
  @keyframes st-msg-pulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.18);}
  }
  .st-badge{
    background:var(--red);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
    padding:2px 8px;border-radius:9px;letter-spacing:.3px;line-height:1.4;
    box-shadow:0 0 0 2px var(--panel);
    animation:st-badge-pop .25s ease-out;
  }
  @keyframes st-badge-pop{
    0%{transform:scale(.5);opacity:0;}
    100%{transform:scale(1);opacity:1;}
  }

  /* ============ STAFF MESSAGES PAGE (#view-staff-messages) ============ */
  #view-staff-messages{padding:18px 26px 26px;max-width:none;width:100%;}
  .sm-wrap{
    background:var(--panel);border:1px solid var(--line);border-radius:13px;
    box-shadow:var(--shadow);overflow:hidden;
    display:flex;flex-direction:column;
    height:calc(100vh - 200px);min-height:520px;
    width:100%;
  }
  .sm-head{
    display:flex;align-items:center;gap:13px;
    padding:14px 18px;border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--panel)) 0%, var(--panel) 100%);
  }
  .sm-ava{
    width:44px;height:44px;border-radius:50%;
    background:var(--ink);color:var(--panel);
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:500;font-size:19px;flex-shrink:0;
  }
  .sm-h-info{flex:1;min-width:0;}
  .sm-h-name{
    font-family:'Fraunces',serif;font-weight:500;font-size:18px;
    display:flex;align-items:center;gap:11px;
  }
  .sm-status{
    display:inline-flex;align-items:center;gap:5px;
    font-size:10.5px;color:var(--ink-soft);
    font-family:'IBM Plex Mono',monospace;letter-spacing:.4px;
    text-transform:lowercase;font-weight:500;
  }
  .sm-dot{
    width:8px;height:8px;border-radius:50%;background:var(--green);
    box-shadow:0 0 0 2px color-mix(in srgb, var(--green) 30%, transparent);
    animation:sp-msg-pulse 2.4s ease-in-out infinite;
  }
  .sm-h-sub{
    font-size:11.5px;color:var(--ink-soft);margin-top:2px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.3px;
  }
  .sm-h-sub.has-unread{color:var(--red);font-weight:600;}
  .sm-thread{
    flex:1;overflow-y:auto;padding:18px 22px;
    display:flex;flex-direction:column;gap:9px;
  }
  .sm-compose{
    border-top:1px solid var(--line);padding:11px 13px;
    display:flex;gap:9px;align-items:flex-end;background:var(--panel-2);
  }
  .sm-compose textarea{
    flex:1;background:var(--panel);border:1px solid var(--line);color:var(--ink);
    border-radius:8px;padding:9px 12px;font:inherit;font-size:13.5px;resize:none;
    min-height:42px;max-height:240px;outline:none;
  }
  .sm-compose textarea:focus{border-color:var(--accent);}

  /* Admin sidebar Messages nav item — emphasise when unread */
  .nav-item[data-view="messages"].has-unread{
    color:var(--ink);
  }
  .nav-item[data-view="messages"].has-unread .ic{
    color:var(--red);animation:st-msg-pulse 1.8s ease-in-out infinite;
    display:inline-block;
  }
  .nav-badge{
    box-shadow:0 0 0 2px var(--panel);
    animation:st-badge-pop .25s ease-out;
  }

  /* ============ STAFF UNIFIED WORK LIST ============ */
  .sp-work-list{
    display:flex;flex-direction:column;gap:8px;
  }
  /* Both child types align tidily in the unified list */
  .sp-work-list .sp-daily-item,
  .sp-work-list .sp-task-item{
    margin:0;
  }

  /* ============ TASK LIST · DATE BUCKETS + PROMINENT DATES ============ */
  /* Section headers above each date-bucket group */
  .uni-bucket{margin-bottom:18px;}
  .uni-bucket-h{
    display:flex;align-items:baseline;gap:9px;
    margin:0 4px 8px;padding:6px 12px;
    border-radius:7px;
    font-family:'IBM Plex Mono',monospace;
  }
  .uni-bucket-label{
    font-size:10.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  }
  .uni-bucket-count{
    background:rgba(0,0,0,.15);padding:1px 7px;border-radius:9px;
    font-size:10px;font-weight:700;
  }
  /* Tone variants */
  .uni-bucket-red    .uni-bucket-h{background:var(--red-soft);    color:var(--red);}
  .uni-bucket-amber  .uni-bucket-h{background:var(--accent-soft); color:var(--accent);}
  .uni-bucket-green  .uni-bucket-h{background:var(--green-soft);  color:var(--green);}
  .uni-bucket-accent .uni-bucket-h{background:var(--accent-soft); color:var(--accent);}
  .uni-bucket-neutral .uni-bucket-h{background:var(--panel-2); color:var(--ink-soft);}

  /* Date column on each task row */
  .uni-date{
    flex-shrink:0;text-align:right;min-width:140px;
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;
    color:var(--ink-soft);letter-spacing:.2px;
    padding:0 12px 0 8px;
    border-left:1px solid var(--line);
  }
  .uni-date-overdue{color:var(--red);font-weight:700;}
  .uni-date-today{color:var(--accent);font-weight:700;}

  /* ============ STAFF "Your Work" · DATE BUCKETS ============ */
  .sp-bucket{margin-bottom:14px;}
  .sp-bucket-h{
    display:flex;align-items:baseline;gap:8px;
    margin:0 4px 6px;padding:5px 11px;
    border-radius:7px;
    font-family:'IBM Plex Mono',monospace;
  }
  .sp-bucket-label{
    font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  }
  .sp-bucket-count{
    background:rgba(0,0,0,.15);padding:1px 7px;border-radius:9px;
    font-size:10px;font-weight:700;
  }
  .sp-bucket-rows{display:flex;flex-direction:column;gap:7px;}
  .sp-bucket-red    .sp-bucket-h{background:var(--red-soft);    color:var(--red);}
  .sp-bucket-amber  .sp-bucket-h{background:var(--accent-soft); color:var(--accent);}
  .sp-bucket-green  .sp-bucket-h{background:var(--green-soft);  color:var(--green);}
  .sp-bucket-accent .sp-bucket-h{background:var(--accent-soft); color:var(--accent);}
  .sp-bucket-neutral .sp-bucket-h{background:var(--panel-2); color:var(--ink-soft);}

  /* ============ MESSAGES · TASK REFERENCE PILLS ============ */
  /* Inline pill rendered inside message bubbles */
  .msg-taskref{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--panel);border:1px solid var(--accent);
    color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:600;
    padding:1px 8px;border-radius:6px;margin:0 1px;
    cursor:pointer;vertical-align:baseline;line-height:1.4;
    transition:background .12s,transform .12s;
  }
  .msg-taskref:hover{background:var(--accent);color:#16151a;transform:translateY(-1px);}
  /* In mine (amber) bubbles, invert so it stays legible */
  .msg-bubble-mine .msg-taskref{
    background:rgba(0,0,0,.18);color:#16151a;border-color:rgba(0,0,0,.3);
  }
  .msg-bubble-mine .msg-taskref:hover{background:rgba(0,0,0,.3);color:#fff;}

  /* Resource pill — tinted amber so it reads distinctly from the blue task pill. */
  .msg-resref{
    display:inline-flex;align-items:center;gap:5px;
    background:var(--panel);border:1px solid rgba(196,124,46,0.55);
    color:var(--ink);font-family:inherit;font-size:12.5px;font-weight:600;
    padding:1px 8px;border-radius:6px;margin:0 1px;
    cursor:pointer;vertical-align:baseline;line-height:1.4;
    transition:background .12s,transform .12s;
  }
  .msg-resref:hover{background:rgba(196,124,46,0.18);transform:translateY(-1px);}
  .msg-bubble-mine .msg-resref{
    background:rgba(0,0,0,.18);color:#16151a;border-color:rgba(0,0,0,.3);
  }
  .msg-bubble-mine .msg-resref:hover{background:rgba(0,0,0,.3);color:#fff;}

  /* Divider rendered just above the first unread message in a thread, so the
   * user can scan back to where they left off. The thread auto-scrolls so
   * this divider lands near the top of the visible area. */
  .msg-newline{
    display:flex;align-items:center;gap:9px;
    margin:6px 0 9px 0;
    color:var(--red);font-family:'IBM Plex Mono',monospace;
    font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
    width:100%;
  }
  .msg-newline::before, .msg-newline::after{
    content:'';flex:1;height:1px;background:var(--red);opacity:.4;
  }
  .msg-newline span{
    padding:1px 9px;border:1px solid var(--red);border-radius:9px;
    background:color-mix(in srgb, var(--red) 12%, var(--panel));
  }

  /* Read-only resource popover opened from an @resource pill in messages. */
  .msg-resref-popover .modal-h h3{
    display:flex;align-items:center;font-size:17px;
  }
  .msg-resref-meta{
    font-size:10.5px;font-family:'IBM Plex Mono',monospace;
    color:var(--ink-faint);letter-spacing:.5px;
    margin:-4px 0 14px 0;font-weight:600;
  }
  .msg-resref-peek{gap:9px;}
  .msg-resref-peek .rsr-val{word-break:break-all;}
  .msg-resref-peek .rsr-cmd{max-width:100%;}

  /* Floating # picker shown above the compose box */
  .msg-ref-picker{
    position:fixed;z-index:200;
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    box-shadow:0 14px 38px rgba(0,0,0,.45);
    max-height:340px;overflow-y:auto;
    padding:5px;
    width:420px;
  }
  .msg-ref-row{
    display:flex;align-items:center;gap:11px;
    padding:9px 12px;border-radius:7px;cursor:pointer;
    font-size:13px;
  }
  .msg-ref-row.on{background:var(--accent-soft);}
  .msg-ref-main{flex:1;min-width:0;}
  .msg-ref-title{font-weight:600;color:var(--ink);}
  .msg-ref-meta{
    font-size:11px;color:var(--ink-soft);margin-top:2px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .msg-ref-status{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    color:var(--ink-soft);flex-shrink:0;letter-spacing:.3px;
  }
  .msg-ref-empty{
    padding:14px;text-align:center;color:var(--ink-faint);
    font-size:12.5px;font-style:italic;
  }

  /* ============ MESSAGES · REF BUTTON + TASK INFO POPOVER ============ */
  .msg-ref-btn{
    background:var(--panel);border:1px solid var(--line);color:var(--ink-soft);
    width:40px;height:40px;border-radius:8px;cursor:pointer;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    transition:all .12s;
  }
  .msg-ref-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}
  .msg-ref-btn svg{display:block;}

  /* Read-only task details popover (staff side) */
  .task-info-overlay .ti-grid{
    display:grid;grid-template-columns:120px 1fr;gap:9px 14px;
    font-size:13.5px;align-items:baseline;
  }
  .task-info-overlay .ti-lab{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.5px;
    color:var(--ink-faint);text-transform:uppercase;font-weight:600;
  }
  .task-info-overlay .ti-val{color:var(--ink);}
  .task-info-overlay .ti-overdue{color:var(--red);font-weight:600;margin-left:6px;}
  .task-info-overlay .ti-section{
    margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  }
  .task-info-overlay .ti-section-h{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.5px;
    color:var(--ink-faint);text-transform:uppercase;font-weight:600;margin-bottom:6px;
  }
  .task-info-overlay .ti-section-b{font-size:13.5px;color:var(--ink-soft);line-height:1.55;white-space:pre-wrap;}
  .task-info-overlay .ti-note{font-style:italic;}

  /* ============ MESSAGES · ATTACHMENTS ============ */
  /* Paperclip button in compose */
  .msg-att-btn{
    background:var(--panel);border:1px solid var(--line);color:var(--ink-soft);
    width:40px;height:40px;border-radius:8px;cursor:pointer;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    transition:all .12s;
  }
  .msg-att-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);}

  /* Compose drag-over highlight */
  .msg-compose.msg-compose-dragover{
    outline:2px dashed var(--accent);outline-offset:-4px;
    background:color-mix(in srgb, var(--accent) 10%, var(--panel-2));
  }

  /* Pending attachment previews above compose */
  .msg-att-previews{
    display:flex;flex-wrap:wrap;gap:7px;
    padding:8px 11px;border-top:1px solid var(--line);
    background:var(--panel-2);
  }
  .msg-att-preview{
    display:flex;align-items:center;gap:8px;
    background:var(--panel);border:1px solid var(--line);border-radius:7px;
    padding:5px 8px;max-width:240px;
  }
  .msg-att-preview img{
    width:36px;height:36px;border-radius:5px;object-fit:cover;flex-shrink:0;
  }
  .msg-att-preview-doc{
    width:36px;height:36px;border-radius:5px;background:var(--panel-2);
    display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
  }
  .msg-att-preview-info{flex:1;min-width:0;}
  .msg-att-preview-name{
    font-size:12px;font-weight:600;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .msg-att-preview-size{
    font-size:10.5px;color:var(--ink-faint);
    font-family:'IBM Plex Mono',monospace;
  }
  .msg-att-preview-x{
    background:transparent;border:none;color:var(--ink-faint);
    cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;
  }
  .msg-att-preview-x:hover{color:var(--red);}

  /* Rendered attachments inside bubbles */
  .msg-att-list{
    display:flex;flex-direction:column;gap:6px;margin-top:4px;
  }
  .msg-att.msg-att-img{
    max-width:320px;min-height:60px;border-radius:9px;overflow:hidden;
    background:var(--panel-2);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    cursor:zoom-in;transition:transform .12s;
  }
  .msg-att.msg-att-img:hover{transform:scale(1.01);}
  .msg-att.msg-att-img img{
    display:block;max-width:100%;max-height:340px;height:auto;
  }
  .msg-att-img-spin{
    color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    font-size:14px;padding:30px;
  }
  .msg-att-img-fail{color:var(--red);font-size:12px;padding:14px;}

  .msg-att.msg-att-file{
    display:flex;align-items:center;gap:10px;
    background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
    padding:9px 12px;cursor:pointer;
    color:var(--ink);font-family:inherit;font-size:13px;text-align:left;
    transition:border-color .12s;max-width:340px;
  }
  .msg-att.msg-att-file:hover{border-color:var(--accent);}
  .msg-att-file-ic{font-size:20px;flex-shrink:0;}
  .msg-att-file-info{flex:1;min-width:0;}
  .msg-att-file-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .msg-att-file-size{
    font-size:10.5px;color:var(--ink-soft);
    font-family:'IBM Plex Mono',monospace;margin-top:1px;
  }
  .msg-att-file-dl{
    color:var(--ink-faint);font-size:15px;flex-shrink:0;
    transition:color .12s;
  }
  .msg-att.msg-att-file:hover .msg-att-file-dl{color:var(--accent);}
  /* In mine (amber) bubbles invert tints */
  .msg-bubble-mine .msg-att.msg-att-file{
    background:rgba(0,0,0,.12);border-color:rgba(0,0,0,.25);color:#16151a;
  }
  .msg-bubble-mine .msg-att-file-size{color:rgba(0,0,0,.6);}
  .msg-bubble-mine .msg-att.msg-att-img{border-color:rgba(0,0,0,.25);}

  /* Fullscreen image lightbox */
  .msg-lightbox{
    position:fixed;inset:0;background:rgba(8,9,12,.92);z-index:9999;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    padding:24px;
  }
  .msg-lightbox img{
    max-width:96vw;max-height:88vh;border-radius:8px;
    box-shadow:0 20px 60px rgba(0,0,0,.7);
  }
  .msg-lightbox-caption{
    color:var(--ink-soft);font-size:13px;margin-top:14px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.3px;
  }
  .msg-lightbox-x{
    position:absolute;top:18px;right:22px;
    background:transparent;border:1px solid rgba(255,255,255,.25);
    color:#fff;font-size:18px;cursor:pointer;
    width:38px;height:38px;border-radius:50%;
  }
  .msg-lightbox-x:hover{background:rgba(255,255,255,.1);}

  /* Media panel (slide-in overlay) */
  .msg-media-overlay{
    position:fixed;inset:0;background:rgba(8,9,12,.55);z-index:500;
    display:flex;justify-content:flex-end;
  }
  .msg-media-panel{
    width:480px;max-width:96vw;height:100%;
    background:var(--panel);border-left:1px solid var(--line);
    display:flex;flex-direction:column;
    animation:msg-media-slidein .2s ease-out;
  }
  @keyframes msg-media-slidein{from{transform:translateX(100%);}to{transform:translateX(0);}}
  .msg-media-h{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 20px;border-bottom:1px solid var(--line);
  }
  .msg-media-title{font-family:'Fraunces',serif;font-weight:500;font-size:17px;}
  .msg-media-sub{
    font-size:11px;color:var(--ink-faint);
    font-family:'IBM Plex Mono',monospace;letter-spacing:.3px;margin-top:2px;
  }
  .msg-media-body{flex:1;overflow-y:auto;padding:14px 18px 26px;}
  .msg-media-section{margin-bottom:22px;}
  .msg-media-section-h{
    font-family:'IBM Plex Mono',monospace;font-size:11px;
    color:var(--ink-faint);letter-spacing:.6px;text-transform:uppercase;
    font-weight:700;margin-bottom:10px;
    display:flex;align-items:center;gap:8px;
  }
  .msg-media-section-h span{
    background:var(--panel-2);padding:1px 8px;border-radius:9px;
    font-size:10px;color:var(--ink);
  }
  .msg-media-grid{
    display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;
  }
  .msg-media-tile{
    aspect-ratio:1;background:var(--panel-2);border:1px solid var(--line);
    border-radius:8px;overflow:hidden;cursor:zoom-in;
    display:flex;align-items:center;justify-content:center;
  }
  .msg-media-tile img{width:100%;height:100%;object-fit:cover;display:block;}
  .msg-media-files{display:flex;flex-direction:column;gap:7px;}
  .msg-media-file{width:100%;max-width:none;}
  .msg-media-empty{
    color:var(--ink-faint);font-size:12.5px;font-style:italic;
    padding:14px;text-align:center;
    border:1px dashed var(--line);border-radius:8px;
  }

  /* ============ RESOURCES ============ */
  /* Hide the Resources nav item from real staff users (admin-only) */
  body.is-staff-user .nav-item[data-view="resources"]{display:none;}

  .rsr-banner{
    background:color-mix(in srgb, var(--accent) 8%, var(--panel));
    border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius:9px;padding:11px 14px;margin-bottom:14px;
    font-size:12.5px;color:var(--ink-soft);line-height:1.5;
  }
  .rsr-filters{
    display:flex;gap:11px;align-items:center;flex-wrap:wrap;
    margin-bottom:16px;
  }
  .rsr-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;
  }

  .rsr-card{
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    padding:14px 16px;box-shadow:var(--shadow);
    display:flex;flex-direction:column;gap:11px;
  }
  .rsr-card-h{display:flex;align-items:center;gap:11px;}
  .rsr-card-ic{
    width:38px;height:38px;border-radius:8px;background:var(--panel-2);
    display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;
  }
  .rsr-card-info{flex:1;min-width:0;}
  .rsr-card-title{font-weight:600;font-size:14.5px;color:var(--ink);}
  .rsr-card-meta{
    font-size:10.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    letter-spacing:.4px;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .rsr-card-edit{
    background:var(--panel-2);border:1px solid var(--line);color:var(--ink-soft);
    width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:13px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .rsr-card-edit:hover{color:var(--ink);border-color:var(--accent);}

  .rsr-card-peek{display:flex;flex-direction:column;gap:6px;}
  .rsr-kv{
    display:flex;align-items:center;gap:8px;
    font-size:12.5px;font-family:'IBM Plex Mono',monospace;
  }
  .rsr-kv > span:first-child{
    color:var(--ink-faint);min-width:78px;letter-spacing:.3px;
    text-transform:uppercase;font-size:10px;font-weight:600;
  }
  .rsr-kv b{color:var(--ink);font-weight:600;}
  .rsr-val{flex:1;min-width:0;font-family:inherit;}
  .rsr-iconbtn{
    background:transparent;border:1px solid var(--line);color:var(--ink-soft);
    padding:2px 7px;border-radius:5px;cursor:pointer;font-size:12px;line-height:1.4;
  }
  .rsr-iconbtn:hover{color:var(--ink);border-color:var(--accent);}
  .rsr-tag{
    background:var(--panel-2);padding:1px 7px;border-radius:9px;
    font-size:10px;color:var(--ink-soft);margin-left:6px;
  }
  .rsr-sub{
    font-size:11.5px;color:var(--ink-soft);font-family:'IBM Plex Sans';
    margin-top:4px;
  }
  .rsr-link{
    color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:12.5px;
    text-decoration:none;word-break:break-all;
  }
  .rsr-cmd{
    flex:1;min-width:0;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
    background:var(--panel-2);color:var(--ink);padding:3px 7px;border-radius:5px;
    border:1px solid var(--line);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  /* Owner pill — shows on every resource card. Color-coded by who created it
   * so it's instantly obvious whether a record came from admin or a staff. */
  .rsr-owner{
    display:inline-flex;align-items:center;gap:3px;
    padding:2px 8px;border-radius:9px;
    font-size:10.5px;font-weight:600;letter-spacing:.3px;
    font-family:'IBM Plex Sans';vertical-align:middle;
    border:1px solid transparent;
  }
  .rsr-owner-admin{
    background:rgba(76,114,176,0.12); color:#3b5a8e;
    border-color:rgba(76,114,176,0.28);
  }
  .rsr-owner-staff{
    background:rgba(196,124,46,0.14); color:#a05a1c;
    border-color:rgba(196,124,46,0.32);
  }
  .rsr-meta-sep{
    color:var(--ink-faint);font-size:10px;font-weight:600;
    letter-spacing:.3px;text-transform:uppercase;
  }
  .rsr-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  /* Left-edge color stripe matching the owner. Subtle but scannable. */
  .rsr-card-byadmin{border-left:3px solid rgba(76,114,176,0.55);}
  .rsr-card-bystaff{border-left:3px solid rgba(196,124,46,0.65);}
  .rsr-link:hover{text-decoration:underline;}

  .rsr-img{
    background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
    overflow:hidden;min-height:120px;
    display:flex;align-items:center;justify-content:center;
  }
  .rsr-img img{display:block;max-width:100%;max-height:240px;}
  .rsr-img-spin{color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;}
  .rsr-img-fail{color:var(--red);font-size:12px;padding:14px;}

  .rsr-doc{
    display:flex;align-items:center;gap:11px;
    background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
    padding:10px 13px;cursor:pointer;color:var(--ink);font:inherit;font-size:13px;
    transition:border-color .12s;width:100%;text-align:left;
  }
  .rsr-doc:hover{border-color:var(--accent);}
  .rsr-doc > span:first-child{font-size:18px;flex-shrink:0;}
  .rsr-doc-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rsr-doc-dl{margin-left:auto;color:var(--ink-faint);flex-shrink:0;}
  .rsr-doc:hover .rsr-doc-dl{color:var(--accent);}

  .rsr-note-body{
    font-size:13px;color:var(--ink);white-space:pre-wrap;
    background:var(--panel-2);border-left:3px solid var(--line);
    padding:8px 11px;border-radius:6px;line-height:1.45;
    max-height:160px;overflow-y:auto;
  }

  /* ============ "SPECIFIC PEOPLE" · LIST VIEW ============
     Vertical list of staff rows — contact-list style. Each row:
       [✓] [avatar]  Full Name · role            [company-chip]
     • Custom-painted checkbox on the far left.
     • Selected rows = soft accent background + left accent stripe.
     • Members of the picked company get a warm avatar tint.
     Works identically across all 5 modals (Resources / Expenses /
     Incomes / Planned / Loans). */

  /* Wrapper card: count toolbar on top + scrollable list below */
  #rsSpecificFields,
  #exVisSpecificFields,
  #inVisSpecificFields,
  #plVisSpecificFields,
  #lnVisSpecificFields{
    background:var(--panel);
    border:1px solid color-mix(in srgb, var(--line) 55%, transparent);
    border-radius:9px;
    overflow:hidden;
    margin-top:8px;
  }
  /* Header toolbar: count on the left, +All / Clear on the right */
  #rsSpecificFields > label,
  #exVisSpecificFields > label,
  #inVisSpecificFields > label,
  #plVisSpecificFields > label,
  #lnVisSpecificFields > label{
    display:flex !important;align-items:center;justify-content:space-between;
    gap:10px;
    padding:6px 10px !important;
    margin:0 !important;
    background:color-mix(in srgb, var(--panel-2) 55%, var(--panel));
    border-bottom:1px solid color-mix(in srgb, var(--line) 40%, transparent);
    font-family:'IBM Plex Sans',sans-serif !important;
    text-transform:none !important;letter-spacing:.05px !important;
    font-size:11px;font-weight:500;color:var(--ink-soft);
  }
  #rsStaffCount,
  #exVisStaffCount,
  #inVisStaffCount,
  #plVisStaffCount,
  #lnVisStaffCount{
    display:inline-flex;align-items:center;gap:5px;
    font-family:'IBM Plex Mono',monospace !important;
    font-size:10.5px !important;font-weight:500 !important;
    color:var(--ink-soft) !important;letter-spacing:.3px !important;
    text-transform:none !important;
  }
  #rsSpecificFields > label .btn,
  #exVisSpecificFields > label .btn,
  #inVisSpecificFields > label .btn,
  #plVisSpecificFields > label .btn,
  #lnVisSpecificFields > label .btn{
    padding:1px 7px;font-size:10px;border-radius:5px;
    font-family:'IBM Plex Sans',sans-serif;letter-spacing:.05px;
    font-weight:500;min-height:0;
  }

  /* ====== Vertical list of staff rows ====== */
  .rs-staff-list{
    display:flex;flex-direction:column;gap:0;
    max-height:280px;overflow-y:auto;overflow-x:hidden;
    background:var(--panel);
    border:1px solid color-mix(in srgb, var(--line) 55%, transparent);
    border-radius:8px;padding:3px;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb, var(--ink-faint) 35%, transparent) transparent;
  }
  .rs-staff-list::-webkit-scrollbar{width:6px;}
  .rs-staff-list::-webkit-scrollbar-thumb{
    background:color-mix(in srgb, var(--ink-faint) 30%, transparent);
    border-radius:3px;
  }
  /* Inside the wrapper card, the list loses its own border */
  #rsSpecificFields .rs-staff-list,
  #exVisSpecificFields .rs-staff-list,
  #inVisSpecificFields .rs-staff-list,
  #plVisSpecificFields .rs-staff-list,
  #lnVisSpecificFields .rs-staff-list{
    background:var(--panel);
    border:none;border-radius:0;
    padding:3px;margin-top:0 !important;
    max-height:300px;
  }

  /* ====== Row: [checkbox] [avatar] Name · role  [co-chip] ====== */
  .rs-staff-row{
    position:relative;
    display:flex;align-items:center;gap:10px;
    padding:7px 11px;border-radius:6px;cursor:pointer;
    background:transparent;border:1px solid transparent;
    transition:background .12s ease, border-color .12s ease;
  }
  /* Hairline divider between consecutive rows */
  .rs-staff-row + .rs-staff-row{
    border-top:1px solid color-mix(in srgb, var(--line) 28%, transparent);
    border-top-left-radius:0;border-top-right-radius:0;
  }
  .rs-staff-row:hover{
    background:color-mix(in srgb, var(--accent) 4%, var(--panel));
  }
  .rs-staff-row:hover + .rs-staff-row,
  .rs-staff-row.on + .rs-staff-row{border-top-color:transparent;}
  .rs-staff-row.on{
    background:color-mix(in srgb, var(--accent) 9%, var(--panel));
    border-color:color-mix(in srgb, var(--accent) 22%, var(--line));
  }
  /* Left accent stripe on the selected row */
  .rs-staff-row.on::before{
    content:'';position:absolute;left:0;top:6px;bottom:6px;width:2px;
    background:var(--accent);border-radius:2px;
  }

  /* Custom-painted checkbox — square that fills with accent on check */
  .rs-staff-row input[type=checkbox]{
    appearance:none;-webkit-appearance:none;
    width:17px;height:17px;flex-shrink:0;
    border-radius:5px;cursor:pointer;margin:0;
    background:var(--panel);
    border:1.5px solid color-mix(in srgb, var(--ink-faint) 45%, var(--line));
    transition:background .12s ease, border-color .12s ease;
    background-repeat:no-repeat;background-position:center;background-size:12px 12px;
  }
  .rs-staff-row:hover input[type=checkbox]{
    border-color:color-mix(in srgb, var(--accent) 55%, var(--ink-faint));
  }
  .rs-staff-row input[type=checkbox]:checked{
    background-color:var(--accent);
    border-color:var(--accent);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.4 L6.7 11.4 L12.5 4.8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  }

  /* Avatar — small initials circle, warmer tint when in the picked company */
  .rs-staff-ava{
    width:26px;height:26px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
    color:var(--ink);letter-spacing:.2px;
    background:radial-gradient(circle at 30% 25%,
      color-mix(in srgb, var(--accent) 22%, var(--panel)),
      color-mix(in srgb, var(--accent) 8%, var(--panel-3)) 75%);
    border:1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  }
  .rs-staff-row.in-co .rs-staff-ava{
    background:radial-gradient(circle at 30% 25%,
      color-mix(in srgb, var(--accent) 40%, var(--panel)),
      color-mix(in srgb, var(--accent) 16%, var(--panel-3)) 75%);
    border-color:color-mix(in srgb, var(--accent) 30%, var(--line));
  }

  /* Name · role — single line, baseline-aligned */
  .rs-staff-info{
    flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;
    white-space:nowrap;overflow:hidden;
  }
  .rs-staff-name{
    font-size:12.5px;font-weight:600;color:var(--ink);
    line-height:1.2;letter-spacing:.05px;flex-shrink:0;
    overflow:hidden;text-overflow:ellipsis;max-width:100%;
    font-family:'IBM Plex Sans',sans-serif;
  }
  .rs-staff-meta{
    font-size:10.5px;color:var(--ink-faint);line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;min-width:0;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.2px;
  }

  /* Company chip(s) on the right edge */
  .rs-staff-cos{
    display:flex;gap:3px;flex-wrap:nowrap;justify-content:flex-end;
    flex-shrink:0;overflow:hidden;
  }
  .rs-staff-co{
    font-size:9.5px;padding:1px 7px;border-radius:9px;
    background:color-mix(in srgb, var(--ink-faint) 9%, var(--panel));
    border:1px solid color-mix(in srgb, var(--line) 55%, transparent);
    color:var(--ink-soft);letter-spacing:.2px;font-weight:500;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:110px;line-height:1.55;
    font-family:'IBM Plex Mono',monospace;
  }
  .rs-staff-co.on{
    background:color-mix(in srgb, var(--accent) 14%, var(--panel));
    border-color:color-mix(in srgb, var(--accent) 32%, transparent);
    color:var(--accent);font-weight:600;
  }
  .rs-staff-co-none{font-style:italic;color:var(--ink-faint);background:transparent;border-color:transparent;}
  /* If a row has only one chip and it's the picked-company match,
     hide it — the avatar tint already conveys it. Reduces noise. */
  .rs-staff-row.in-co .rs-staff-cos .rs-staff-co.on:only-child{display:none;}

  /* ============ PREVIEW BANNER ============ */
  /* Only show for admin actively previewing — never for real staff users */
  body.is-staff-user .preview-banner{display:none !important;}
  /* While a preview is active the banner must stay visible + reachable no
   * matter whose chrome we've become — it overrides the is-staff-user hide
   * above (equal specificity, both !important, later in source so it wins)
   * and sticks to the top so the Exit button is never scrolled away. */
  body.preview-mode .preview-banner{
    display:flex !important;
    position:sticky;top:0;z-index:60;
  }
  .preview-banner{
    display:flex;align-items:center;gap:13px;
    background:color-mix(in srgb, var(--accent) 12%, var(--panel));
    border-bottom:1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    padding:9px 28px;
    font-size:13px;color:var(--ink);
    font-family:'IBM Plex Mono',monospace;letter-spacing:.2px;
  }
  .preview-eye{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:50%;
    background:var(--accent);color:#16151a;
    font-size:13px;flex-shrink:0;
  }
  .preview-banner > span:nth-child(2){
    color:var(--ink-soft);text-transform:uppercase;
    font-size:10.5px;font-weight:600;letter-spacing:.6px;
  }
  .preview-banner strong{
    font-weight:600;color:var(--ink);
    font-family:'IBM Plex Sans',sans-serif;font-size:14px;letter-spacing:0;
  }
  .preview-banner-sub{
    color:var(--ink-soft);font-size:11.5px;
  }
  #previewBannerExit{
    margin-left:auto;
    background:var(--panel);border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    color:var(--ink);font-family:'IBM Plex Sans',sans-serif;
  }
  #previewBannerExit:hover{
    background:var(--accent);color:#16151a;border-color:var(--accent);
  }

  /* ============ "WHO CAN SEE THIS" · FILTER-CHIP PILLS ============
     Three detached pill buttons in a row. Each is a capsule with the
     icon and label inline. The selected pill flips to a solid-accent
     fill (white text + icon) so the choice is instantly readable from
     across the modal; unselected pills sit as neutral outlined ghosts.
     This control is also reused by the loan prepay/rate toggles. */
  .rs-mode-toggle{
    display:flex;flex-wrap:wrap;gap:6px;
    background:transparent;border:none;padding:0;
  }
  .rs-mode-opt{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:6px 13px;min-height:30px;
    flex:1 1 auto;min-width:0;
    border-radius:999px;cursor:pointer;
    background:var(--panel);
    border:1.5px solid color-mix(in srgb, var(--line) 65%, transparent);
    color:var(--ink-soft);
    transition:background .14s ease, color .14s ease,
               border-color .14s ease, box-shadow .14s ease,
               transform .1s ease;
  }
  .rs-mode-opt:hover{
    color:var(--ink);
    background:color-mix(in srgb, var(--accent) 5%, var(--panel));
    border-color:color-mix(in srgb, var(--accent) 40%, var(--line));
  }
  .rs-mode-opt:active{transform:scale(.97);}
  /* Hide native radio — chip IS the toggle */
  .rs-mode-opt input[type=radio]{
    position:absolute;opacity:0;pointer-events:none;
    width:0;height:0;margin:0;
  }
  /* Icon glyph prefix */
  .rs-mode-opt::before{
    content:'';
    font-size:13px;line-height:1;flex-shrink:0;
    width:15px;text-align:center;
    transition:filter .14s ease;
  }
  .rs-mode-opt:has(input[value="creator"])::before{content:'🔒';}
  .rs-mode-opt:has(input[value="wide"])::before,
  .rs-mode-opt:has(input[value="companyWide"])::before{content:'🌐';}
  .rs-mode-opt:has(input[value="specific"])::before{content:'👥';}
  /* Loan-prepay / rate-change toggles reuse this control */
  .rs-mode-opt:has(input[value="tenure"])::before{content:'⏱';}
  .rs-mode-opt:has(input[value="emi"])::before{content:'💵';}
  /* No ::after pseudo — clean text right after icon */
  .rs-mode-opt::after{display:none;content:none;}
  /* Selected chip — solid accent fill, lifted feel */
  .rs-mode-opt:has(input:checked){
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
    box-shadow:0 2px 6px rgba(196,109,51,.20);
  }
  .rs-mode-opt:has(input:checked):hover{
    background:color-mix(in srgb, var(--accent) 88%, #000);
    color:#fff;
  }
  .rs-mode-opt:has(input:disabled){opacity:.5;cursor:not-allowed;}
  .rs-mode-opt strong{
    display:block;font-size:11.5px;color:inherit;font-weight:600;
    font-family:'IBM Plex Sans',sans-serif;letter-spacing:.1px;
    line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    min-width:0;
  }
  .rs-mode-opt:has(input:checked) strong{color:#fff;}
  /* Hide the descriptive small text — vis-meta line above carries the why */
  .rs-mode-opt small{display:none;}
  /* Narrow viewports: chips wrap; each takes the full row */
  @media (max-width:480px){
    .rs-mode-opt{flex:0 0 100%;justify-content:flex-start;}
  }

  /* ============ EXPENSES ============ */
  /* Category pill — small inline badge used in ledger rows. */
  .exp-cat-pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:3px 9px;border-radius:11px;
    background:var(--panel-2);border:1px solid var(--line-soft);
    font-size:11.5px;color:var(--ink-soft);letter-spacing:.3px;
    font-family:'IBM Plex Mono',monospace;
  }
  .exp-cat-pill .exp-cat-ic{font-size:12px;line-height:1;}

  /* Open-receipt icon button on ledger rows */
  .exp-receipt-btn{padding:4px 8px;margin-right:4px;}

  /* By-category / By-company breakdown rows */
  .exp-break-row{
    display:flex;align-items:center;gap:12px;
    padding:9px 16px;border-bottom:1px solid var(--line-soft);
  }
  .exp-break-row:last-child{border-bottom:none;}
  .exp-break-ic{
    width:30px;height:30px;border-radius:8px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--panel-2);border:1px solid var(--line-soft);
    font-size:14px;
  }
  .exp-break-init{
    font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
    color:var(--accent);
  }
  .exp-break-info{flex:1;min-width:0;}
  .exp-break-name{
    font-size:13px;font-weight:600;color:var(--ink);
    margin-bottom:5px;
  }
  .exp-break-bar{
    height:5px;border-radius:3px;background:var(--panel-2);overflow:hidden;
  }
  .exp-break-bar > div{
    height:100%;background:var(--accent);border-radius:3px;
    transition:width .2s;
  }
  .exp-break-val{
    text-align:right;font-variant-numeric:tabular-nums;
    font-weight:600;font-size:13.5px;color:var(--ink);
    white-space:nowrap;
  }
  .exp-break-val small{
    display:block;font-size:10.5px;font-weight:500;
    color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;
    margin-top:2px;
  }

  /* Existing-receipt indicator inside the expense modal */
  .exp-current-receipt{
    display:inline-flex;align-items:center;gap:6px;
    padding:5px 10px;border-radius:6px;
    background:var(--panel-2);border:1px solid var(--line-soft);
    font-size:12.5px;color:var(--ink-soft);
  }
  .exp-current-receipt small{color:var(--ink-faint);}

  /* ============ EXPENSE MODAL ============ */
  /* Matches modal-lg max-width set in the compact pass */
  .exp-modal{max-width:560px;}

  /* Hero — the amount is the headline. Big tabular number, currency
     ghosted ahead of it, with a quieter title line beneath. */
  .exp-hero{
    padding:26px 28px 22px;
    background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel) 100%);
    border-bottom:1px solid var(--line);
    text-align:center;
  }
  .exp-hero-amount{
    display:inline-flex;align-items:baseline;justify-content:center;gap:6px;
    margin-bottom:12px;
  }
  .exp-hero-cur{
    font-family:'Fraunces',serif;font-size:34px;color:var(--ink-soft);
    font-weight:400;line-height:1;
  }
  .exp-hero-amount input{
    font-family:'IBM Plex Mono',monospace;
    font-size:46px;font-weight:600;line-height:1;
    color:var(--ink);background:transparent;border:none;outline:none;
    width:auto;min-width:140px;max-width:280px;padding:4px 0;
    text-align:center;
    font-variant-numeric:tabular-nums;
    letter-spacing:-1px;
  }
  .exp-hero-amount input::placeholder{color:var(--ink-faint);}
  .exp-hero-amount input:focus{
    border-bottom:2px solid var(--accent);
    padding-bottom:2px;
  }
  .exp-hero-title{
    width:100%;max-width:480px;
    text-align:center;
    border:none;background:transparent;outline:none;
    font-family:'Fraunces',serif;font-size:16px;color:var(--ink);
    font-weight:500;padding:4px 0;
  }
  .exp-hero-title::placeholder{color:var(--ink-faint);font-style:italic;}
  .exp-hero-title:focus{border-bottom:1px dashed var(--line);}

  /* Sections inside the expense/income/loan/planned modals — same
     compact rhythm as every other modal-section. (Previously this rule
     forced 18×24 and overrode the compact pass — main reason the Money
     modals looked oversized vs the rest of the app.) */
  .exp-section{padding:11px 16px;}
  .exp-section + .exp-section{border-top:1px solid var(--line-soft);}
  .exp-modal .modal-section-h{
    display:flex;align-items:center;
    margin-bottom:7px;
  }
  .exp-scope-hint{
    background:var(--panel-2);
    border-left:3px solid var(--accent);
    padding:8px 12px;border-radius:4px;
    color:var(--ink-soft);font-size:12px;
  }

  /* Category picker — visual pill grid */
  .exp-cat-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  }
  .exp-cat-grid.readonly{opacity:.7;pointer-events:none;}
  .exp-cat-opt{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:11px 6px;border-radius:9px;
    background:var(--panel-2);border:1.5px solid var(--line-soft);
    color:var(--ink-soft);cursor:pointer;
    transition:all .14s ease;
    font-family:inherit;font-size:11.5px;font-weight:500;
  }
  .exp-cat-opt:hover{
    background:color-mix(in srgb, var(--accent) 6%, var(--panel-2));
    border-color:color-mix(in srgb, var(--accent) 25%, var(--line));
    color:var(--ink);
  }
  .exp-cat-opt.on{
    background:color-mix(in srgb, var(--accent) 12%, var(--panel));
    border-color:var(--accent);
    color:var(--accent);
  }
  .exp-cat-opt:disabled{cursor:default;}
  .exp-cat-opt-ic{
    font-size:18px;line-height:1;
  }
  .exp-cat-opt-l{
    letter-spacing:.3px;font-family:'IBM Plex Mono',monospace;
  }
  @media (max-width:540px){
    .exp-cat-grid{grid-template-columns:repeat(3,1fr);}
  }

  /* Receipt dropzone */
  .exp-drop{
    display:flex;align-items:center;gap:14px;
    padding:16px 18px;border-radius:10px;
    background:var(--panel-2);
    border:1.5px dashed var(--line);
    cursor:pointer;
    transition:all .14s ease;
  }
  .exp-drop:hover, .exp-drop.drag{
    background:color-mix(in srgb, var(--accent) 5%, var(--panel-2));
    border-color:var(--accent);
  }
  .exp-drop-ic{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--panel);border:1px solid var(--line-soft);
    font-size:18px;
  }
  .exp-drop-text{flex:1;min-width:0;}
  .exp-drop-title{
    font-size:13.5px;color:var(--ink);font-weight:600;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .exp-drop-sub{
    font-size:11.5px;color:var(--ink-faint);margin-top:2px;
    font-family:'IBM Plex Mono',monospace;letter-spacing:.2px;
  }
  .exp-drop-clear{flex-shrink:0;}

  /* Admin review section */
  .exp-review-section{
    background:color-mix(in srgb, var(--accent) 4%, var(--panel));
  }
  .exp-review-meta{
    font-size:12.5px;color:var(--ink-soft);line-height:1.55;
    padding:9px 12px;background:var(--panel);
    border-radius:6px;border:1px solid var(--line-soft);
  }
  .exp-review-actions{
    display:flex;gap:9px;flex-wrap:wrap;margin-top:12px;
  }

  /* Submitter outcome panel */
  .exp-outcome-section{background:var(--panel-2);}
  .exp-outcome-text{
    font-size:13px;color:var(--ink);line-height:1.55;
    padding:11px 14px;border-radius:6px;
    background:var(--panel);border:1px solid var(--line-soft);
  }

  /* Expenses inline error banner — shown when Firestore returns
     permission-denied or unavailable, so the user sees an actionable
     message instead of an empty table. */
  .exp-err-banner{
    margin:20px;
    padding:18px 20px;
    border-radius:9px;
    background:color-mix(in srgb, #d04a3a 6%, var(--panel));
    border:1.5px solid color-mix(in srgb, #d04a3a 40%, var(--line));
    color:var(--ink);
  }
  .exp-err-title{
    font-weight:600;font-size:14px;color:#b3402e;
    margin-bottom:6px;
  }
  .exp-err-text{
    font-size:13px;line-height:1.6;color:var(--ink-soft);
  }
  .exp-err-text code{
    background:var(--panel-2);padding:1px 6px;border-radius:3px;
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;
    color:var(--ink);
  }
  .exp-err-text b{color:var(--ink);}

  /* ============ SUBSCRIPTIONS + EXPENSE CALENDAR ============ */
  .exp-view-toggle{display:inline-flex;}

  /* Tiny marker on expense rows that came from a subscription template */
  .exp-sub-mark{
    display:inline-block;
    font-size:13px;color:var(--accent);
    margin-right:2px;
    cursor:pointer;
    transition:transform .15s ease;
  }
  .exp-sub-mark:hover{transform:rotate(45deg);}

  /* Cadence row at the top of the sub modal hero — small "/ month" label */
  .su-hero-per{
    font-family:'IBM Plex Mono',monospace;
    font-size:13px;color:var(--ink-faint);
    margin-left:6px;letter-spacing:.4px;
    align-self:baseline;
  }

  /* Calendar virtual-occurrence chip (projected from subscription) */
  .tc-cal-chip.exp-cal-virtual{
    background:color-mix(in srgb, var(--accent) 6%, var(--panel));
    border:1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
    color:var(--ink-soft);
  }
  .tc-cal-chip.exp-cal-virtual .tc-chip-ic{color:var(--accent);}
  .exp-cal-virtual-dot{
    width:8px;height:8px;display:inline-block;border-radius:50%;
    background:color-mix(in srgb, var(--accent) 30%, var(--panel-2));
    border:1px dashed var(--accent);vertical-align:middle;
  }

  /* Cadence pill row has 3 columns instead of 4 */
  .su-cad-grid{grid-template-columns:repeat(3,1fr);}

  /* ============ EXPENSE MODE TOGGLE (One-time vs Recurring) ============ */
  .exp-mode-toggle{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    padding:18px 24px 8px;
  }
  .exp-mode-toggle.readonly{opacity:.75;}
  .exp-mode-opt{
    display:flex;align-items:center;gap:11px;
    padding:13px 14px;border-radius:10px;
    background:var(--panel-2);border:1.5px solid var(--line-soft);
    color:var(--ink-soft);cursor:pointer;
    text-align:left;
    font-family:inherit;
    transition:all .14s ease;
  }
  .exp-mode-opt:hover{
    background:color-mix(in srgb, var(--accent) 6%, var(--panel-2));
    border-color:color-mix(in srgb, var(--accent) 25%, var(--line));
    color:var(--ink);
  }
  .exp-mode-opt.on{
    background:color-mix(in srgb, var(--accent) 12%, var(--panel));
    border-color:var(--accent);
    color:var(--accent);
  }
  .exp-mode-opt:disabled{cursor:default;}
  .exp-mode-opt .exp-mode-ic{
    font-size:22px;width:40px;height:40px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--panel);border:1px solid var(--line-soft);
    border-radius:50%;
    font-family:'Fraunces',serif;font-weight:500;
  }
  .exp-mode-opt.on .exp-mode-ic{
    background:color-mix(in srgb, var(--accent) 18%, var(--panel));
    border-color:var(--accent);
    color:var(--accent);
  }
  .exp-mode-opt .exp-mode-text{flex:1;min-width:0;}
  .exp-mode-opt .exp-mode-title{
    font-size:13.5px;font-weight:600;line-height:1.2;
  }
  .exp-mode-opt .exp-mode-sub{
    font-size:11.5px;color:var(--ink-faint);font-weight:500;
    margin-top:2px;font-family:'IBM Plex Mono',monospace;letter-spacing:.2px;
  }
  @media (max-width:540px){
    .exp-mode-toggle{grid-template-columns:1fr;}
  }


  /* ============================================================
   * MOBILE / NARROW-VIEWPORT LAYER
   * ============================================================
   * Single 780px breakpoint covering everything below tablet width.
   * Focused on making Resources + Messages views usable on phones
   * without disrupting the desktop experience. */

  /* Hamburger button — hidden on desktop, shown on mobile via @media below. */
  .topbar-hamburger{
    display:none;align-items:center;justify-content:center;
    width:38px;height:38px;background:transparent;border:none;cursor:pointer;
    flex-direction:column;gap:4px;padding:0;
  }
  .topbar-hamburger > span{
    display:block;width:20px;height:2px;background:var(--ink);border-radius:1px;
    transition:transform .2s, opacity .2s;
  }
  .app.nav-open .topbar-hamburger > span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .app.nav-open .topbar-hamburger > span:nth-child(2){opacity:0;}
  .app.nav-open .topbar-hamburger > span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1;}

  @media (max-width: 780px){
    /* Hard backstop: never let the page scroll horizontally on mobile.
       Tables that legitimately need horizontal scroll are wrapped in
       `.card-b{overflow-x:auto}` so they get their own scroll context, which
       is unaffected by `body{overflow-x:hidden}`. */
    html, body{overflow-x:hidden;max-width:100vw;}
    .app, .main, .view{min-width:0;max-width:100%;}

    /* ---------- Global shell: collapse sidebar to off-canvas drawer ---------- */
    .app{grid-template-columns:1fr;}
    .side{
      position:fixed;top:0;left:0;bottom:0;z-index:60;
      width:260px;max-width:80vw;
      transform:translateX(-100%);
      transition:transform .22s ease;
      box-shadow:0 0 40px rgba(0,0,0,.25);
    }
    .app.nav-open .side{transform:translateX(0);}
    .app.nav-open::before{
      content:'';position:fixed;inset:0;z-index:59;
      background:rgba(0,0,0,.45);
      animation:fadeIn .18s ease;
    }
    @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

    .topbar-hamburger{display:flex;}
    .topbar{padding:10px 14px;gap:10px;}
    .topbar h1{font-size:17px;}
    .topbar .crumb{font-size:10px;}
    .top-tools{gap:6px;}
    .top-tools .region-pick,
    .top-tools .view-as-pick{display:none;}    /* free space — power-user controls only */
    .top-action .ta-lab{display:none;}          /* keep just the + icon */
    .btn-signout-top span{display:none;}
    .top-tools .btn,
    .top-tools .btn.top-action{padding:0 11px;}

    /* ---------- Inputs + form controls ----------
       16px font kills iOS focus-zoom; bigger padding + softer radius makes
       fields feel tappable; thicker focus ring is visible without glasses
       in bright sunlight. */
    input[type=text],input[type=email],input[type=password],
    input[type=number],input[type=date],input[type=month],
    input[type=tel],input[type=search],input[type=url],
    textarea,select{
      font-size:16px;
      padding:12px 14px;
      border-radius:10px;
      min-height:46px;          /* ~44pt iOS tap-target guideline */
      line-height:1.35;
    }
    /* Select keeps the chevron — restore the right padding so options aren't
       hidden behind it on mobile too. */
    select{padding-right:36px;}
    textarea{min-height:90px;padding:11px 13px;}
    /* File inputs render readably (native style is acceptable, but a dashed
       drop-style hint helps it feel intentional). */
    input[type="file"]{
      padding:11px 13px;font-size:14px;background:var(--panel-2);
      border:1px dashed var(--line);border-radius:10px;width:100%;min-height:46px;
    }
    /* Visible focus ring for accessibility + sunlight visibility */
    input:focus,textarea:focus,select:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    }
    /* Field spacing: more breathing room so adjacent fields don't visually merge */
    .field{margin-bottom:18px;}
    label{font-size:11.5px;margin-bottom:8px;}

    /* Checkboxes / radios — bigger, easier to tap */
    input[type=checkbox],input[type=radio]{
      width:20px;height:20px;accent-color:var(--accent);
    }
    .check-row{font-size:14px;gap:11px;padding:4px 0;margin-top:11px;}

    /* ---------- Touch behavior ----------
       Remove the grey tap-flash, kill the 300ms double-tap-zoom delay, and
       use smooth scrolling inside chat and lists. */
    a, button, [role="button"], .btn, .nav-item, .seg-filter button,
    .st-tab, .msg-row, .uni-row, .rsr-card, .co-card{
      -webkit-tap-highlight-color:transparent;
      touch-action:manipulation;
    }
    .msg-thread-body, .sm-thread, .msg-list, .rsr-grid,
    .modal-b, .modal, .modal-lg{
      scroll-behavior:smooth;
      -webkit-overflow-scrolling:touch;
    }

    /* ---------- Buttons ---------- */
    .btn{
      min-height:42px;padding:10px 16px;border-radius:9px;
      transition:transform .08s ease, filter .12s ease;
    }
    .btn-sm{min-height:34px;padding:7px 12px;border-radius:8px;font-size:12.5px;}
    .btn:active{transform:scale(.97);}
    /* Topbar buttons keep their tight 36px height (already overridden above) */
    .top-tools .btn{min-height:36px;padding:0 11px;}

    /* Larger modal close button (×) so it's easy to dismiss with a thumb */
    .modal-x{
      width:38px;height:38px;border-radius:9px;font-size:18px;
    }

    /* Filter pickers (.region-pick) share the same generous touch size as
       regular inputs. The class beats the element selector on desktop, so we
       restate the dims here to take effect on mobile. */
    .region-pick, .view-as-pick{
      padding:12px 14px;border-radius:10px;min-height:46px;font-size:16px;
    }
    /* Search inputs styled as `.region-pick`: keep the inline `min-width`
       intentional on desktop but ignore it on mobile so they fill the row. */
    .rsr-filters input[type="text"][style*="min-width"],
    .rsr-filters select[style*="min-width"],
    #expFilters input[type="text"][style*="min-width"],
    #expFilters select[style*="min-width"]{min-width:0!important;}

    /* Segmented filter buttons (.seg-filter) get touch height too */
    .seg-filter button{
      padding:10px 14px;font-size:13px;border-radius:8px;min-height:40px;
    }
    .seg{padding:4px;}
    .seg button{padding:10px;font-size:13px;}

    /* All selects on mobile get a custom chevron so they look like the
       rest of the form (topbar selects are display:none here so no clash). */
    select{
      background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238e8a97' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5l3 3 3-3'/></svg>");
      background-repeat:no-repeat;
      background-position:right 12px center;
      background-size:12px 12px;
      -webkit-appearance:none;appearance:none;
      padding-right:36px;
    }

    /* ---------- Login form ---------- */
    .login-overlay input[type=email],
    .login-overlay input[type=password]{
      padding:13px 15px;font-size:16px;border-radius:10px;min-height:48px;
    }
    .login-overlay input[type=email]:focus,
    .login-overlay input[type=password]:focus{
      box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    }
    .login-btn{min-height:50px;font-size:15px;border-radius:10px;}
    .login-card{padding:28px 24px 24px;gap:10px;}
    .login-h{font-size:21px;}
    .login-desc{font-size:13px;}
    .login-label{font-size:11px;margin-top:10px;}
    .login-err{font-size:12.5px;margin-top:6px;}

    /* ---------- View padding tighter so content gets more room ---------- */
    .view{padding:14px 12px 30px;}
    .view-head{flex-direction:column;align-items:flex-start;gap:10px;}
    .view-head .btn{align-self:stretch;text-align:center;}

    /* ---------- Modals: take full width with a small margin ---------- */
    .overlay{padding:10px;align-items:flex-start;}
    .modal,
    .modal-lg{width:100%;max-width:100%;max-height:calc(100vh - 20px);
      overflow-y:auto;display:flex;flex-direction:column;}
    .modal-b{padding:14px;overflow-y:visible;}
    .modal-h{padding:13px 15px;}
    .modal-h h3{font-size:16px;}
    .modal-section{padding:14px 16px;}
    .modal-f{padding:12px 14px;flex-wrap:wrap;gap:8px;}
    .modal-f .btn{flex:1;min-width:0;}
    .modal-f .btn[style*="margin-right:auto"]{flex-basis:100%;margin-right:0!important;}
    .grid2{grid-template-columns:1fr;}
    .perm-grid{grid-template-columns:repeat(2,1fr);}
    .pw-row{flex-direction:column;align-items:stretch;}
    .pw-row > .btn{margin-top:8px;}

    /* ---------- Tables: scroll horizontally inside the card body ---------- */
    .card-b{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .card-b > table{min-width:560px;}
    .card-b{padding:14px;}
    thead th, tbody td{padding:9px 10px;font-size:12.5px;}

    /* ---------- Dashboard ---------- */
    .kpi-row{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px;}
    .kpi{padding:12px 13px;}
    .kpi .val{font-size:26px;}
    .dash-grid-2, .dash-grid{grid-template-columns:1fr;gap:14px;}
    .dash-na-label{width:auto;min-width:74px;padding:3px 6px;font-size:9px;}
    .dash-na-row{gap:10px;padding:11px 14px;}
    .dash-na-row.dash-na-overdue,
    .dash-na-row.dash-na-due-todo,
    .dash-na-row.dash-na-due-progress,
    .dash-na-row.dash-na-daily-pending{padding-left:13px;}
    .dash-na-title{font-size:13px;}
    .dash-na-meta{font-size:11px;}

    /* ---------- Companies ---------- */
    .co-grid{grid-template-columns:1fr;gap:12px;}
    .co-card{padding:15px 16px;}
    .co-detail-head{gap:10px;margin-bottom:16px;}
    .co-detail-title{gap:11px;}
    .co-detail-mark{width:40px;height:40px;font-size:16px;border-radius:9px;}
    .co-detail-name{font-size:19px;}
    .co-detail-meta{font-size:11px;}
    .co-detail-head .btn{font-size:12px;}

    /* ---------- Staff portal hero ---------- */
    .sp-hero{padding:16px 17px;gap:14px;}
    .sp-greet{font-size:18px;}
    .sp-ring{width:78px;height:78px;}
    .sp-ring svg{width:78px;height:78px;}
    .sp-ring-num .big{font-size:18px;}
    .sp-month-kpis{grid-template-columns:repeat(2,1fr);gap:9px;}
    .sp-month-wrap{padding:14px 13px;}
    .sp-month-label{font-size:15px;}
    .sp-cal-grid{gap:4px;}
    .sp-cal-day{min-height:62px;padding:5px 4px;}
    .sp-cal-daynum{font-size:13px;}
    .sp-cal-ring{width:26px;height:26px;}
    .sp-cal-cap{font-size:8.5px;}

    /* ---------- Unified tasks list ---------- */
    .uni-row{padding:11px 13px;gap:10px;flex-wrap:wrap;}
    .uni-title{font-size:13px;gap:6px;}
    .uni-meta{font-size:11px;white-space:normal;}
    .uni-date{
      min-width:0;border-left:none;padding:0;
      text-align:left;margin-left:auto;font-size:11px;
    }
    .uni-state-wrap{margin-left:auto;}
    .uni-state{font-size:10.5px;padding:4px 9px;}
    .uni-badge{width:54px;}

    /* Tasks filter row */
    #view-tasks .card-h{padding:11px 12px;gap:9px;}
    #view-tasks .card-h .seg-filter,
    .rsr-filters .seg-filter,
    .exp-view-toggle{overflow-x:auto;white-space:nowrap;max-width:100%;}
    #view-tasks .card-h select,
    #view-tasks .card-h input{width:100%;min-width:0;}
    #view-tasks .card-h .sub{margin-left:0;}

    /* Tasks calendar — keep grid; just shrink cells/chips */
    .tc-cal-wrap{padding:12px 11px;}
    .tc-cal-label{font-size:16px;}
    .tc-cal-grid{gap:3px;}
    .tc-cal-day{min-height:74px;padding:5px 4px 4px;}
    .tc-cal-daynum{font-size:12px;}
    .tc-cal-chip{font-size:9.5px;padding:2px 4px;}
    .tc-cal-daily{padding:1px 4px;font-size:9px;}

    /* ---------- Resources view (admin AND staff) ---------- */
    .rsr-grid{grid-template-columns:1fr;gap:11px;}
    .rsr-filters{
      gap:7px;
      flex-direction:column;align-items:stretch;
    }
    .rsr-filters > .region-pick,
    .rsr-filters > input[type="text"],
    .rsr-filters > select{width:100%;min-width:0;}
    /* Inline segmented filters scroll horizontally so every type stays reachable */
    .rsr-filters .seg-filter{
      overflow-x:auto;white-space:nowrap;
      -webkit-overflow-scrolling:touch;
      padding-bottom:2px;
    }
    .rsr-filters .seg-filter::-webkit-scrollbar{height:4px;}
    .rsr-filters .seg-filter button{flex-shrink:0;}
    .rsr-filters .sub{margin-left:0;text-align:right;}
    .rsr-banner{font-size:12px;padding:10px 12px;line-height:1.5;}

    /* Resource cards.
       `overflow:hidden` + `min-width:0` on every flex container clips runaway
       content (long URLs, ssh keys, image intrinsic widths) so the card never
       pushes the page horizontally. */
    .rsr-card{padding:13px 14px;gap:10px;overflow:hidden;min-width:0;}
    .rsr-card-h{gap:10px;min-width:0;}
    .rsr-card-info{min-width:0;}
    .rsr-card-peek{min-width:0;}
    .rsr-card-ic{width:34px;height:34px;font-size:16px;border-radius:7px;}
    .rsr-card-title{font-size:13.5px;word-break:break-word;}
    .rsr-card-meta{font-size:10px;gap:6px;}
    .rsr-card-meta .rsr-meta-sep{font-size:9.5px;word-break:break-word;}
    .rsr-card-edit{width:34px;height:34px;font-size:14px;}     /* bigger tap target */
    .rsr-owner{font-size:9.5px;padding:2px 6px;}

    /* Key/value preview rows — let long usernames/passwords ellipsize without
       pushing the reveal/copy buttons off screen. min-width:0 on every direct
       child so flex items can shrink below their intrinsic content width. */
    .rsr-kv{
      flex-wrap:wrap;gap:6px;font-size:12px;
      align-items:center;min-width:0;max-width:100%;
    }
    .rsr-kv > *{min-width:0;max-width:100%;}
    .rsr-kv > span:first-child{
      min-width:64px;font-size:9.5px;flex-shrink:0;
    }
    .rsr-val{
      flex:1 1 0;min-width:0;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    /* Allow link URLs to wrap onto two lines on narrow screens */
    .rsr-link{word-break:break-all;font-size:12px;}
    /* SSH command: let it wrap so the user can read the whole connect string */
    .rsr-cmd{
      white-space:normal;word-break:break-all;
      flex-basis:100%;font-size:11px;line-height:1.45;
      padding:5px 8px;
    }
    .rsr-iconbtn{
      padding:4px 9px;font-size:13px;flex-shrink:0;
    }
    .rsr-note-body{font-size:12.5px;max-height:200px;}
    .rsr-img{min-height:100px;}
    .rsr-img img{max-height:200px;}
    .rsr-doc{padding:10px 12px;font-size:12.5px;}

    /* ---------- Resource modal (Add / Edit) ---------- */
    /* Type picker: 2-col on phones (8 types → 4 rows) */
    #rsType.perm-grid{grid-template-columns:repeat(2,1fr);gap:7px;}
    #rsType .perm-pill{padding:10px 6px;}
    #rsType .perm-pill .pn{font-size:12.5px;}

    /* List view on mobile — single column, slightly tighter rows,
       chips drop to a new line under the name when they don't fit */
    .rs-staff-list{padding:3px;max-height:300px;}
    .rs-staff-row{flex-wrap:wrap;padding:8px 10px;gap:10px;}
    .rs-staff-ava{width:26px;height:26px;font-size:10px;}
    .rs-staff-name{font-size:13px;}
    .rs-staff-meta{font-size:10.5px;}
    .rs-staff-cos{
      flex-basis:100%;margin-top:4px;max-width:100%;
      justify-content:flex-start;padding-left:53px;
    }
    .rs-staff-co{font-size:9.5px;padding:1px 7px;max-width:none;}

    /* Mode toggle — already a stacked single-line list, just tighten paddings */
    .rs-mode-opt{padding:6px 9px;gap:9px;}
    .rs-mode-opt strong{font-size:12px;}

    /* Header above the staff list has "Linked Staff …" on the left and two
       small buttons on the right. The inline `display:flex` keeps that row;
       wrap + flex-basis push the buttons to their own line so labels can
       breathe on narrow phones. */
    #rsAccessSection .field > label,
    #exVisSpecificFields > label{flex-wrap:wrap;gap:6px;}
    #rsAccessSection .field > label > span:last-child,
    #exVisSpecificFields > label > span:last-child{
      flex-basis:100%;justify-content:flex-start;flex-wrap:wrap;
    }

    /* Server key textarea: keep scrollable, shorter on phone, monospace
       small so PEMs don't dominate the modal */
    #rsSrvKey{min-height:130px;font-size:11px;}

    /* ---------- Expenses ---------- */
    .exp-mode-toggle{grid-template-columns:1fr;}
    .exp-cat-grid{grid-template-columns:repeat(3,1fr);}
    .exp-hero{padding:18px 16px 16px;}
    .exp-hero-amount input{font-size:34px;min-width:80px;max-width:170px;letter-spacing:0;}
    .exp-hero-cur{font-size:26px;}
    .exp-hero-title{font-size:14px;}
    .exp-section{padding:14px 16px;}
    .exp-review-actions{flex-direction:column;align-items:stretch;}
    .exp-review-actions .btn{width:100%;}
    .exp-review-section .field{margin-bottom:0;}
    /* Expense calendar reuses the tasks calendar styles already shrunk above. */

    /* ---------- Messages — admin two-column → single column with swap ----------
       The msg-wrap toggles a `.thread-open` class on mobile so we can swap which
       column is visible. List view fills the screen; thread view fills the
       screen with a back action in the header. */
    #view-messages{padding:0;}              /* full-bleed: chat should use entire width */
    .msg-wrap{
      grid-template-columns:1fr;gap:0;
      /* dvh = dynamic viewport — shrinks when the soft keyboard opens so the
         compose bar stays in the visible area instead of being pushed below. */
      height:calc(100dvh - 102px);min-height:0;
      border-radius:0;
    }
    @supports not (height: 100dvh){
      .msg-wrap{height:calc(100vh - 102px);}
    }
    /* List-only (no thread selected) and thread-only (thread open) modes. */
    .msg-wrap:not(.thread-open) .msg-thread{display:none;}
    .msg-wrap.thread-open .msg-side{display:none;}
    .msg-side, .msg-thread{border:none;border-radius:0;}

    /* min-width:0 + overflow guards on every flex container so a stray long
       URL, image, or task-ref pill in a bubble can't push the thread wider
       than the viewport. */
    .msg-wrap, .msg-side, .msg-thread{min-width:0;max-width:100%;}
    .msg-side, .msg-thread{overflow:hidden;}
    .msg-thread-body{overflow-x:hidden;min-width:0;}
    .msg-bubble-row{min-width:0;max-width:100%;}
    .msg-bubble{min-width:0;}
    .msg-bubble-text{
      word-break:break-word;overflow-wrap:anywhere;min-width:0;
    }
    .msg-row-body{min-width:0;}
    .msg-row-preview, .msg-row-name{min-width:0;}
    /* Inline pills (task/resource refs) shouldn't refuse to wrap or shrink */
    .msg-taskref, .msg-resref{max-width:100%;}
    .msg-taskref{white-space:normal;word-break:break-word;}
    .msg-resref{white-space:normal;word-break:break-word;}

    /* Sidebar (list view) */
    .msg-side-h{padding:13px 15px;}
    .msg-side-h h2{font-size:17px;}
    .msg-row{padding:13px 14px;gap:12px;min-height:64px;}  /* generous tap target */
    .msg-row-ava{width:42px;height:42px;font-size:14px;}
    .msg-row.active{
      /* keep highlight, but no need for the left accent strip when only one column */
      border-left:none;padding-left:14px;
    }
    .msg-row-name{font-size:14px;}
    .msg-row-when{font-size:10px;}
    .msg-row-preview{font-size:12.5px;}

    /* Thread header gets a clear back arrow on the left so the user can return
       to the list. We re-order the existing buttons so Close (now styled as a
       back chevron) sits before the title via flex order. */
    .msg-thread-h{padding:9px 12px;gap:8px;}
    .msg-thread-h > div[style*="display:flex"]{gap:6px;flex-shrink:0;}
    .msg-thread-name{
      font-size:16px;min-width:0;flex:1;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      order:1;
    }
    .msg-thread-h > div:last-child{order:2;}
    #msgThreadClose{
      order:0;flex-shrink:0;
      padding:6px 9px;font-size:0;line-height:1;
      background:transparent;border-color:transparent;
    }
    #msgThreadClose::before{
      content:"←";font-size:20px;color:var(--ink);
      font-family:'IBM Plex Sans',sans-serif;
    }
    #msgThreadMedia{padding:6px 10px;font-size:11.5px;}

    .msg-thread-body{padding:12px 12px;gap:8px;}
    .msg-bubble{max-width:88%;padding:8px 11px;font-size:13px;}
    .msg-bubble-meta{font-size:9.5px;}

    /* Compose row — tighter buttons so the textarea gets useful room. */
    .msg-compose{padding:8px 9px;gap:7px;}
    .msg-compose textarea{padding:8px 10px;min-height:40px;font-size:16px;}
    .msg-att-btn, .msg-ref-btn{
      width:38px;height:38px;border-radius:8px;
    }
    .msg-compose .btn[type="submit"]{padding:0 14px;height:38px;}

    /* Attachments inside bubbles fit the bubble width and don't blow the row. */
    .msg-att.msg-att-img{max-width:100%;}
    .msg-att.msg-att-img img{max-height:280px;}
    .msg-att.msg-att-file{max-width:100%;}
    .msg-att-list{gap:5px;}
    .msg-att-previews{padding:7px 9px;gap:6px;}
    .msg-att-preview{max-width:100%;flex:1 1 200px;}

    /* Media side-panel becomes full-screen */
    .msg-media-overlay{background:rgba(8,9,12,.7);}
    .msg-media-panel{
      width:100%;max-width:100%;
      animation:msg-media-slidein .22s ease-out;
    }
    .msg-media-h{padding:13px 16px;}
    .msg-media-title{font-size:16px;}
    .msg-media-body{padding:12px 14px 22px;}
    .msg-media-grid{grid-template-columns:repeat(2,1fr);gap:6px;}

    /* Lightbox */
    .msg-lightbox{padding:14px;}
    .msg-lightbox img{max-width:96vw;max-height:78vh;}
    .msg-lightbox-x{top:12px;right:14px;}

    /* ---------- Floating # / @ ref picker ----------
       On desktop the picker is positioned above the textarea via inline JS
       styles. On mobile that calculation fights with the soft keyboard and
       the bottom-anchored compose bar, so we forcibly anchor the picker to
       the bottom of the viewport (just above the compose) and override the
       JS-set inline `top`/`left`/`width` with `!important`. */
    .msg-ref-picker{
      position:fixed!important;
      left:8px!important;
      right:8px!important;
      bottom:calc(72px + env(safe-area-inset-bottom))!important;
      top:auto!important;
      width:auto!important;
      max-width:calc(100vw - 16px);
      max-height:min(46vh, 340px);

      background:var(--panel);
      border:none;border-radius:16px 16px 12px 12px;
      box-shadow:0 -12px 40px rgba(0,0,0,.22),
                 0 0 0 1px var(--line-soft);
      padding:6px;
      animation:refpicker-up .22s cubic-bezier(.2,.85,.3,1);
    }
    @keyframes refpicker-up{
      from{transform:translateY(14px);opacity:0;}
      to{transform:translateY(0);opacity:1;}
    }
    /* Drag-handle visual at the very top of the picker — matches modal sheets */
    .msg-ref-picker::before{
      content:'';display:block;
      width:32px;height:4px;border-radius:3px;
      background:var(--line);
      margin:4px auto 6px;
      flex-shrink:0;
    }
    /* Picker rows: bigger tap targets + cleaner layout */
    .msg-ref-row{
      padding:11px 12px;gap:11px;
      border-radius:10px;font-size:14px;
      min-height:56px;
    }
    .msg-ref-row + .msg-ref-row{
      border-top:1px solid var(--line-soft);
      border-radius:0;
    }
    .msg-ref-row:first-of-type{border-radius:10px 10px 0 0;}
    .msg-ref-row:last-of-type{border-radius:0 0 10px 10px;}
    .msg-ref-row.on{
      background:color-mix(in srgb, var(--accent) 14%, var(--panel));
    }
    .msg-ref-row:active{background:var(--panel-2);}
    .msg-ref-title{font-size:14px;font-weight:600;}
    .msg-ref-meta{font-size:11.5px;}
    .msg-ref-status{font-size:10px;letter-spacing:.4px;}
    .msg-ref-empty{padding:24px 14px;font-size:13px;}

    /* @resource inline popover modal: keep tight margins, no max-width fighting */
    .msg-resref-popover .modal{max-height:calc(100vh - 24px);}

    /* ---------- Messages — staff (single-panel) ---------- */
    #view-staff-messages{padding:0;}              /* full-bleed on mobile */
    .sm-wrap{
      /* dvh keeps the compose bar visible when the keyboard opens. */
      height:calc(100dvh - 156px);min-height:0;
      border-radius:0;border-left:none;border-right:none;
      min-width:0;max-width:100%;overflow:hidden;
    }
    @supports not (height: 100dvh){
      .sm-wrap{height:calc(100vh - 156px);}
    }
    .sm-thread{overflow-x:hidden;min-width:0;}
    .sm-h-info{min-width:0;}
    .sm-bubble, .sm-compose textarea{min-width:0;}
    .sm-head{padding:11px 13px;gap:11px;}
    .sm-ava{width:40px;height:40px;font-size:16px;}
    .sm-h-info{min-width:0;}
    .sm-h-name{
      font-size:16px;gap:8px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
    .sm-h-sub{font-size:11px;}
    #smMediaBtn{padding:6px 9px;font-size:0;flex-shrink:0;}
    #smMediaBtn::before{
      content:"▣";font-size:14px;
      font-family:'IBM Plex Sans',sans-serif;line-height:1;
    }
    .sm-thread{padding:12px 12px;gap:8px;}
    .sm-compose{padding:8px 9px;gap:7px;}
    .sm-compose textarea{padding:8px 10px;min-height:42px;font-size:16px;}
    .sm-compose .btn[type="submit"]{padding:0 14px;height:42px;}
    /* The same attachment styles + ref pickers above apply to staff too. */

    /* Nav-badge dot on the staff Messages tab stays visible even in tab-scroll. */
    .st-tab .st-badge{font-size:9.5px;padding:1px 6px;}

    /* Staff portal tabs — let them scroll horizontally if cramped */
    .staff-tabs{overflow-x:auto;padding:0 12px;}
    .st-tab{padding:12px 14px;font-size:13px;white-space:nowrap;}

    /* Preview banner */
    .preview-banner{padding:8px 14px;gap:9px;flex-wrap:wrap;font-size:12px;}
    .preview-banner > span:nth-child(2){display:none;}
    #previewBannerExit{margin-left:auto;}

    /* ============================================================
     * NATIVE-FEEL POLISH
     * Heavy visual upgrade so the app reads as a designed mobile UI,
     * not a responsive desktop site. Bottom-sheet modals, native chrome,
     * iOS-style lists, refined cards. */

    /* ---------- Topbar: clean single-row app header with subtle elevation ---------- */
    .topbar{
      padding:10px 12px;gap:8px;
      border-bottom:none;
      box-shadow:0 1px 0 rgba(0,0,0,.04), 0 4px 14px rgba(28,27,34,.04);
      background:rgba(255,255,255,.92);
      -webkit-backdrop-filter:saturate(180%) blur(14px);
      backdrop-filter:saturate(180%) blur(14px);
    }
    .topbar h1{font-size:16.5px;font-weight:600;letter-spacing:-.2px;line-height:1.15;}
    .topbar .crumb{display:none;}    /* breadcrumb is desktop-only chrome */
    .topbar-left{gap:6px;}
    .topbar-hamburger{
      width:42px;height:42px;border-radius:10px;
      transition:background .15s;
    }
    .topbar-hamburger:active{background:var(--panel-2);}
    .topbar-hamburger > span{width:18px;}

    /* Topbar action button: rounded, primary feels native */
    .btn.top-action{
      min-height:38px;padding:0 13px;border-radius:10px;font-size:13px;
      box-shadow:0 2px 10px rgba(196,109,51,.28);
    }
    .btn.top-action .ta-ic{width:13px;height:13px;}

    /* ---------- Drawer: bigger nav items, native list feel ---------- */
    .side{
      width:280px;max-width:84vw;padding:20px 12px 16px;
      border-right:none;
      box-shadow:6px 0 30px rgba(28,27,34,.22);
    }
    .brand{padding:4px 8px 18px;}
    .nav-label{padding:18px 12px 8px;font-size:10px;}
    .nav-item{
      padding:13px 14px;font-size:15px;border-radius:11px;gap:14px;
      margin-bottom:2px;
    }
    .nav-item .ic{font-size:16px;width:22px;}
    .nav-item.on{
      background:linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 20%, var(--panel)),
        color-mix(in srgb, var(--accent) 10%, var(--panel)));
      box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
    }
    .side-foot{padding:14px 8px 0;}
    .who .ava{width:36px;height:36px;font-size:12px;}
    .who .nm{font-size:14px;}
    .who .rl{font-size:11.5px;}

    /* ---------- View padding ---------- */
    .view{padding:14px 14px 90px;}    /* room at bottom so floating actions don't cover content */

    /* ---------- Cards: softer borders, refined shadows ---------- */
    .card{
      border:none;border-radius:14px;
      box-shadow:0 1px 0 rgba(28,27,34,.04), 0 4px 16px rgba(28,27,34,.05);
    }
    .card-h{padding:14px 16px;border-bottom:1px solid var(--line-soft);}
    .card-h h2{font-size:15px;}

    /* ---------- Section header above lists ---------- */
    .view-head h2{font-size:22px!important;font-weight:600;letter-spacing:-.3px;}
    .view-head .desc{font-size:12.5px;}

    /* ============================================================
     * BOTTOM-SHEET MODALS
     * Slide up from the bottom, anchored to viewport bottom with
     * rounded top corners and a small drag-handle visual cue. */
    .overlay{
      padding:0;
      align-items:flex-end;justify-content:center;
      background:rgba(20,18,26,.45);
      backdrop-filter:blur(2px);
      overflow:hidden;        /* the .modal-b scrolls; overlay itself stays still */
    }
    .modal, .modal-lg{
      width:100%;max-width:100%;
      max-height:92vh;
      border-radius:18px 18px 0 0;
      border:none;
      box-shadow:0 -8px 40px rgba(0,0,0,.25);
      animation:sheet-up .28s cubic-bezier(.2,.85,.3,1);
      display:flex;flex-direction:column;
      overflow:hidden;          /* clip rounded corners */
      position:relative;
    }
    @keyframes sheet-up{
      from{transform:translateY(100%);opacity:.6;}
      to{transform:translateY(0);opacity:1;}
    }
    /* Drag-handle pill at the top — a visual cue this is dismissible */
    .modal::before, .modal-lg::before{
      content:'';display:block;
      width:38px;height:4px;border-radius:3px;
      background:var(--line);
      margin:9px auto 0;
      flex-shrink:0;
    }
    .modal-h{
      padding:12px 16px 14px;border-bottom:1px solid var(--line-soft);
      flex-shrink:0;
    }
    .modal-h h3{font-family:'Fraunces',serif;font-size:18px;font-weight:600;}
    .modal-b{
      flex:1;min-height:0;
      overflow-y:auto;-webkit-overflow-scrolling:touch;
      padding:16px;
    }
    .modal-section{
      padding:16px 16px;
      border-bottom:1px solid var(--line-soft);
    }
    .modal-section:last-child{border-bottom:none;}
    .modal-section-h{font-size:11px;margin-bottom:12px;letter-spacing:1px;}
    .modal-f{
      padding:12px 16px calc(12px + env(safe-area-inset-bottom));
      border-top:1px solid var(--line-soft);
      flex-shrink:0;background:var(--panel);
      gap:8px;
    }
    .modal-f .btn{min-height:46px;font-size:14px;font-weight:600;}
    .modal-x{
      width:36px;height:36px;border-radius:50%;
      background:var(--panel-2);border:none;color:var(--ink-soft);
      font-size:18px;line-height:1;
    }
    .modal-x:active{background:var(--panel-3);}

    /* ---------- Inputs: cleaner filled style on mobile ---------- */
    input[type=text],input[type=email],input[type=password],
    input[type=number],input[type=date],input[type=month],
    input[type=tel],input[type=search],input[type=url],
    textarea,select{
      background:var(--panel-2);
      border:1px solid transparent;
      border-radius:11px;
    }
    input:focus,textarea:focus,select:focus{
      background:var(--panel);
      border-color:var(--accent);
    }

    /* Placeholder text: smaller than the typed value (which must stay 16px to
       prevent iOS focus-zoom). Lighter weight + faint color keeps it
       unobtrusive while still readable. */
    input::placeholder,
    textarea::placeholder{
      font-size:13.5px;
      color:var(--ink-faint);
      font-weight:400;
      opacity:1;        /* override iOS/Firefox default opacity reduction */
    }
    /* Search-shaped filter inputs feel cleaner with slightly muted-italic hint */
    input[type="search"]::placeholder,
    .region-pick::placeholder{
      font-size:13.5px;font-style:normal;
    }
    /* Chat compose: placeholder is long ("Type a message… (# to reference …)") —
       keep it really small so the textarea looks empty, not stuffed. */
    .msg-compose textarea::placeholder,
    .sm-compose textarea::placeholder{
      font-size:13px;color:var(--ink-faint);
    }
    /* The expense hero amount placeholder ("0.00") should mirror the value
       size so it doesn't look like the field is broken. */
    .exp-hero-amount input::placeholder{
      font-size:inherit;color:var(--ink-faint);opacity:.55;
    }
    /* Expense hero title placeholder stays subtle/italic at small size */
    .exp-hero-title::placeholder{
      font-size:13.5px;font-style:italic;
    }
    label{
      font-size:11px;letter-spacing:.4px;
      color:var(--ink-soft);font-weight:600;
      text-transform:none;font-family:'IBM Plex Sans',sans-serif;
    }
    .field{margin-bottom:16px;}

    /* ---------- Segmented controls: pill-style ---------- */
    .seg-filter{gap:5px;}
    .seg-filter button{
      background:var(--panel-2);border:none;color:var(--ink-soft);
      font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:600;
      letter-spacing:0;text-transform:none;
      padding:9px 14px;border-radius:999px;min-height:38px;
    }
    .seg-filter button.on{
      background:var(--ink);color:var(--bg);border:none;
      box-shadow:0 2px 8px rgba(28,27,34,.15);
    }

    /* ---------- MESSAGES — refined chat look ---------- */
    /* List rows: native-feel separator instead of card chunks */
    .msg-side{background:var(--panel);box-shadow:none;}
    .msg-row{
      padding:12px 14px;border-bottom:1px solid var(--line-soft);
      background:transparent;
    }
    .msg-row:active{background:var(--panel-2);}
    .msg-row.active{
      background:color-mix(in srgb, var(--accent) 10%, var(--panel));
      border-left:none;padding-left:14px;
    }
    .msg-row-ava{
      width:46px;height:46px;font-size:15px;font-weight:700;
      background:linear-gradient(135deg, var(--accent), #b35f33);
      color:#fff;
    }
    .msg-row-name{font-size:14.5px;font-weight:600;}
    .msg-row-when{font-size:10.5px;color:var(--ink-faint);}
    .msg-row-preview{font-size:12.5px;color:var(--ink-soft);}
    .msg-row-unread{
      background:var(--accent);color:#fff;
      box-shadow:0 0 0 2px var(--panel);
      min-width:22px;height:22px;border-radius:50%;
      display:inline-flex;align-items:center;justify-content:center;
      padding:0 6px;font-size:11px;
    }

    /* Thread header — clean app-bar style */
    .msg-thread, .sm-wrap{box-shadow:none;background:var(--panel);}
    .msg-thread-h, .sm-head{
      background:var(--panel);
      border-bottom:1px solid var(--line-soft);
      padding:8px 10px;min-height:54px;
    }
    .msg-thread-name, .sm-h-name{
      font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:16px;
      letter-spacing:-.1px;
    }

    /* Bubbles — tighter, iMessage-style radii */
    .msg-thread-body, .sm-thread{
      padding:14px 12px 18px;gap:3px;
      background:var(--bg);
    }
    .msg-bubble-row, .sm-bubble-row{margin-top:5px;}
    /* When two consecutive bubbles are from the same sender, collapse gap */
    .msg-bubble-row + .msg-bubble-row.mine,
    .msg-bubble-row + .msg-bubble-row.theirs{margin-top:2px;}
    .msg-bubble, .sm-bubble{
      padding:9px 13px;font-size:14px;line-height:1.35;
      border-radius:18px;max-width:82%;
      box-shadow:0 1px 1px rgba(0,0,0,.03);
    }
    .msg-bubble-mine{
      background:var(--accent);color:#fff;
      border-bottom-right-radius:5px;
    }
    .msg-bubble-mine .msg-bubble-meta{color:rgba(255,255,255,.75);}
    .msg-bubble-theirs{
      background:var(--panel);border:none;
      border-bottom-left-radius:5px;
    }
    .msg-bubble-meta{font-size:10px;}

    /* Compose bar — flat, native */
    .msg-compose, .sm-compose{
      background:var(--panel);
      border-top:1px solid var(--line-soft);
      padding:10px 10px calc(10px + env(safe-area-inset-bottom));
      gap:8px;align-items:flex-end;
    }
    .msg-compose textarea, .sm-compose textarea{
      background:var(--panel-2);border:1px solid transparent;
      border-radius:20px;padding:10px 14px;min-height:42px;
      font-size:16px;
    }
    .msg-compose textarea:focus, .sm-compose textarea:focus{
      background:var(--panel);border-color:var(--accent);
    }
    .msg-att-btn, .msg-ref-btn{
      width:42px;height:42px;border-radius:50%;
      background:var(--panel-2);border:none;color:var(--ink-soft);
      flex-shrink:0;
    }
    .msg-att-btn:active, .msg-ref-btn:active{background:var(--panel-3);}
    .msg-compose .btn[type="submit"],
    .sm-compose .btn[type="submit"]{
      width:42px;height:42px;border-radius:50%;
      padding:0;font-size:0;flex-shrink:0;
      background:var(--accent);color:#fff;
      box-shadow:0 2px 10px rgba(196,109,51,.35);
      position:relative;
    }
    .msg-compose .btn[type="submit"]::before,
    .sm-compose .btn[type="submit"]::before{
      content:"↑";
      position:absolute;inset:0;
      display:flex;align-items:center;justify-content:center;
      font-size:20px;font-weight:700;line-height:1;
      color:#fff;font-family:'IBM Plex Sans',sans-serif;
    }
    /* Close button on thread header — circular ghost */
    #msgThreadClose{
      width:38px;height:38px;border-radius:50%;
      padding:0;background:var(--panel-2);border:none;
    }
    #msgThreadClose::before{font-size:18px;color:var(--ink);}
    #msgThreadMedia, #smMediaBtn{
      width:38px;height:38px;border-radius:50%;padding:0;font-size:0;
      background:var(--panel-2);border:none;color:var(--ink-soft);
      flex-shrink:0;position:relative;
    }
    #msgThreadMedia::before, #smMediaBtn::before{
      content:"▣";
      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      font-size:15px;color:var(--ink-soft);
      font-family:'IBM Plex Sans',sans-serif;
    }

    /* ---------- RESOURCES — refined card design ---------- */
    .rsr-banner{
      background:color-mix(in srgb, var(--accent) 9%, var(--panel));
      border:none;border-radius:12px;
      padding:12px 14px;
      box-shadow:0 1px 0 rgba(28,27,34,.04);
    }
    .rsr-filters{
      background:transparent;
      padding:0;margin-bottom:14px;
    }
    .rsr-filters .seg-filter{
      padding:4px;background:var(--panel-2);
      border-radius:999px;gap:2px;
      display:inline-flex;
    }
    .rsr-filters .seg-filter button{
      background:transparent;border-radius:999px;
      padding:7px 13px;min-height:34px;font-size:12.5px;
    }
    .rsr-filters .seg-filter button.on{
      background:var(--panel);color:var(--ink);
      box-shadow:0 1px 4px rgba(28,27,34,.1);
    }
    .rsr-grid{gap:10px;}
    .rsr-card{
      border:none;border-radius:14px;
      padding:14px 15px;
      box-shadow:0 1px 0 rgba(28,27,34,.04), 0 4px 14px rgba(28,27,34,.05);
      gap:11px;
    }
    .rsr-card-h{gap:11px;}
    .rsr-card-ic{
      width:40px;height:40px;border-radius:10px;font-size:18px;
      background:linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 14%, var(--panel-2)),
        var(--panel-2));
    }
    .rsr-card-title{font-size:14.5px;font-weight:600;letter-spacing:-.1px;}
    .rsr-card-meta{font-size:10px;color:var(--ink-faint);gap:5px;}
    .rsr-card-edit{
      width:36px;height:36px;border-radius:50%;
      background:var(--panel-2);border:none;
      font-size:14px;
    }
    .rsr-card-edit:active{background:var(--panel-3);}
    .rsr-card-byadmin, .rsr-card-bystaff{border-left:none;}
    .rsr-card-byadmin{border-top:3px solid rgba(76,114,176,0.55);}
    .rsr-card-bystaff{border-top:3px solid rgba(196,124,46,0.65);}
    .rsr-kv{
      padding:5px 0;
      border-top:1px solid var(--line-soft);
    }
    .rsr-card-peek > .rsr-kv:first-child{border-top:none;padding-top:0;}
    .rsr-link{font-size:13px;color:var(--accent);font-weight:500;}
    .rsr-note-body{
      background:var(--panel-2);border-left:none;
      border-radius:9px;padding:11px 13px;
    }
    .rsr-img{border:none;background:var(--panel-2);border-radius:10px;}
    .rsr-doc{
      border:none;background:var(--panel-2);border-radius:10px;
      padding:12px 14px;
    }

    /* ---------- Resource modal: cleaner type picker ---------- */
    #rsType.perm-grid{gap:8px;}
    #rsType .perm-pill{
      border:1.5px solid transparent;background:var(--panel-2);
      border-radius:12px;padding:12px 8px;
    }
    #rsType .perm-pill.on{
      background:color-mix(in srgb, var(--accent) 13%, var(--panel));
      border-color:var(--accent);
    }
    /* Keep the pill grid container subtle on mobile */
    .rs-staff-list{
      background:var(--panel);
      border:1px solid color-mix(in srgb, var(--line) 50%, transparent);
      border-radius:11px;padding:8px;
      box-shadow:0 1px 0 rgba(28,27,34,.03);
    }
    /* Segmented mode toggle stays as a clear control on mobile too */

    /* ---------- Sidebar list rows generic — iOS-style cards-no-border ---------- */
    .uni-row, .sp-task-item, .sp-daily-item{
      border:none;
      box-shadow:0 1px 0 rgba(28,27,34,.04), 0 2px 8px rgba(28,27,34,.04);
      border-radius:12px;
    }
    .uni-row.uni-overdue{
      border-left:3px solid var(--red);padding-left:13px;
    }

    /* ---------- Toast: floating pill at the bottom ---------- */
    #toast{
      bottom:calc(24px + env(safe-area-inset-bottom));
      border-radius:999px;padding:11px 22px;
      box-shadow:0 8px 24px rgba(0,0,0,.18);
    }
  }

  /* ============================================================
   * Extra-narrow phones (≤ 480px)
   * Pushes a couple of grids down one more step and shrinks the
   * tightest controls. Everything else inherits the 780px layer. */
  @media (max-width: 480px){
    .topbar{padding:9px 11px;}
    .topbar h1{font-size:15.5px;letter-spacing:-.2px;}
    .top-tools .btn{padding:0 9px;}

    .view{padding:12px 10px 26px;}

    .kpi-row{grid-template-columns:1fr;gap:9px;}
    .kpi .val{font-size:24px;}

    .exp-cat-grid{grid-template-columns:repeat(2,1fr);}
    .perm-grid{grid-template-columns:1fr;}
    .exp-hero-amount input{font-size:30px;max-width:150px;}
    .exp-hero-cur{font-size:22px;}

    .sp-hero{flex-direction:column;align-items:flex-start;text-align:left;}
    .sp-ring{align-self:center;}

    .co-detail-head{flex-wrap:wrap;}
    .co-detail-head .btn{flex:1;min-width:120px;}

    /* Tighter login card */
    .login-card{padding:24px 22px 22px;}
    .login-h{font-size:19px;}

    /* Toast: keep inside viewport */
    #toast{left:12px;right:12px;transform:translateY(20px);max-width:none;text-align:center;}
    #toast.show{transform:translateY(0);}
  }

  /* =====================================================================
   * MONEY (Expenses + Income) — top-of-page month bar
   * Single source of truth for the visible month. Left side has prev / month
   * label / next; right side shows Income / Expenses / Net for that month.
   * Used on both admin (#expMonthBar) and staff (#seMonthBar) views.
   * ===================================================================== */
  .ledger-month-bar{
    display:flex;align-items:stretch;gap:24px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 20px;
    margin-bottom:16px;
    flex-wrap:wrap;
  }
  .ledger-mb-nav{
    display:flex;align-items:center;gap:10px;
    min-width:0;
  }
  .ledger-mb-monthwrap{
    display:flex;flex-direction:column;gap:2px;align-items:center;
    min-width:170px;
  }
  .ledger-mb-month{
    font-family:'Fraunces',serif;font-weight:500;font-size:22px;color:var(--ink);
    line-height:1.1;
  }
  .ledger-mb-jump{
    background:none;border:none;
    color:var(--ink-faint);
    font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;
    cursor:pointer;padding:0;margin:0;
    text-decoration:underline dotted;text-underline-offset:3px;
  }
  .ledger-mb-jump:hover{color:var(--ink-soft);}
  .ledger-mb-stats{
    display:flex;align-items:stretch;gap:18px;
    margin-left:auto;flex-wrap:wrap;
  }
  .ledger-mb-stat{
    display:flex;flex-direction:column;justify-content:center;
    padding:0 18px;border-left:1px solid var(--line);
    min-width:130px;
  }
  .ledger-mb-stat:first-child{border-left:none;padding-left:0;}
  .ledger-mb-lab{
    font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
    color:var(--ink-faint);font-weight:600;
    margin-bottom:4px;
  }
  .ledger-mb-val{
    font-family:'IBM Plex Mono',monospace;
    font-size:22px;font-weight:600;letter-spacing:-0.5px;
    color:var(--ink);line-height:1.1;
  }
  .ledger-mb-sub{
    font-size:11px;color:var(--ink-faint);
    margin-top:3px;
  }
  .ledger-mb-income .ledger-mb-val{color:var(--green,#2c8a4e);}
  .ledger-mb-expense .ledger-mb-val{color:var(--red,#c14848);}
  .ledger-mb-net .ledger-mb-val.ledger-net-pos{color:var(--green,#2c8a4e);}
  .ledger-mb-net .ledger-mb-val.ledger-net-neg{color:var(--red,#c14848);}

  /* Hero gradient flipped to a green hint for the income modal — visually
     reinforces "money coming in" vs the expense modal's neutral gradient. */
  .exp-hero-income{
    background:linear-gradient(180deg, color-mix(in srgb, var(--green,#2c8a4e) 12%, var(--panel)) 0%, var(--panel) 100%);
  }

  @media (max-width: 760px){
    .ledger-month-bar{padding:12px 14px;gap:14px;}
    .ledger-mb-stats{margin-left:0;width:100%;justify-content:space-between;}
    .ledger-mb-stat{min-width:0;flex:1;padding:0 8px;}
    .ledger-mb-stat:first-child{padding-left:0;}
    .ledger-mb-val{font-size:18px;}
    .ledger-mb-monthwrap{min-width:120px;}
    .ledger-mb-month{font-size:18px;}
  }

  /* Calendar income chips — distinct green palette so income reads as money
     coming IN at a glance, separate from any expense status. */
  .tc-cal-chip.tc-chip-inc{
    background:color-mix(in srgb, var(--green,#2c8a4e) 18%, transparent);
    border-color:color-mix(in srgb, var(--green,#2c8a4e) 48%, transparent);
    color:var(--green,#2c8a4e);font-weight:600;
  }
  .tc-cal-chip.tc-chip-inc-pending{
    background:color-mix(in srgb, var(--accent) 12%, transparent);
    border-color:color-mix(in srgb, var(--accent) 35%, transparent);
    color:var(--ink-soft);
    font-style:italic;
  }
  .tc-cal-chip.tc-chip-inc-rejected{
    background:color-mix(in srgb, var(--red,#c14848) 12%, transparent);
    border-color:color-mix(in srgb, var(--red,#c14848) 40%, transparent);
    color:var(--ink-soft);text-decoration:line-through;
  }
  .tc-chip-dot.tc-chip-inc{background:var(--green,#2c8a4e);}

  /* Scheduled (not-yet-paid) loan EMI: distinct from approved/pending expense
     so the user reads it as "coming up". Subtle outline + crosshair icon. */
  .tc-cal-chip.tc-chip-emi{
    background:color-mix(in srgb, var(--accent) 10%, transparent);
    border:1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
    color:var(--ink);font-weight:500;
  }
  .tc-chip-dot.tc-chip-emi{
    background:transparent;
    border:1px dashed color-mix(in srgb, var(--accent) 60%, var(--ink-soft));
  }

  /* Money — direction-coded amount pill (income green, expense neutral red) */
  .exp-cat-pill.plan-amt-inc{
    background:color-mix(in srgb, var(--green,#2c8a4e) 15%, transparent);
    color:var(--green,#2c8a4e);
    border:1px solid color-mix(in srgb, var(--green,#2c8a4e) 35%, transparent);
  }
  .exp-cat-pill.plan-amt-exp{
    background:color-mix(in srgb, var(--red,#c14848) 15%, transparent);
    color:var(--red,#c14848);
    border:1px solid color-mix(in srgb, var(--red,#c14848) 35%, transparent);
  }
  .co-detail-mark.plan-amt-inc{background:var(--green,#2c8a4e);color:#fff;}
  .co-detail-mark.plan-amt-exp{background:var(--red,#c14848);color:#fff;}

  /* Money-due rows on the Dashboard's Needs Attention card */
  .dash-na-row.dash-na-money-overdue{
    border-left:3px solid var(--red,#c14848);
  }
  .dash-na-row.dash-na-money-today{
    border-left:3px solid var(--amber,#c78a2c);
  }

  /* Stack income (+green) and expense (-red) day-totals when both exist.
     The original .tc-cal-daily was a single absolute-positioned badge; we
     now wrap it so both can sit side by side. */
  .tc-cal-daily-row{
    position:absolute;top:6px;right:6px;
    display:flex;flex-direction:column;gap:2px;align-items:flex-end;
  }
  .tc-cal-daily-row .tc-cal-daily{
    position:static;             /* override the single-badge absolute pos */
    padding:1px 6px;
  }
  .tc-cal-daily.tc-cal-daily-inc{
    background:var(--green,#2c8a4e);color:#fff;
  }
  .tc-cal-daily.tc-cal-daily-exp{
    background:var(--red,#c14848);color:#fff;
  }

  /* =====================================================================
   * PARTIES — list grid + detail page + auto-complete picker
   * ===================================================================== */
  .party-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;
  }
  .party-card{
    background:var(--panel);border:1px solid var(--line);border-radius:12px;
    padding:14px 16px;cursor:pointer;
    transition:border-color .15s, transform .1s;
  }
  .party-card:hover{border-color:var(--ink-soft);transform:translateY(-1px);}
  .party-card-h{display:flex;gap:11px;align-items:flex-start;}
  .party-card-mark{
    width:36px;height:36px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    background:var(--panel-2);font-size:17px;font-weight:600;color:var(--ink);
    flex-shrink:0;
  }
  .party-card-mark.pt-bank    {background:color-mix(in srgb, var(--amber,#c78a2c) 30%, var(--panel-2));}
  .party-card-mark.pt-business{background:color-mix(in srgb, var(--ink-soft) 25%, var(--panel-2));}
  .party-card-mark.pt-person  {background:color-mix(in srgb, var(--accent) 20%, var(--panel-2));}
  .party-card-info{flex:1;min-width:0;}
  .party-card-name{
    font-family:'Fraunces',serif;font-weight:500;font-size:15px;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .party-card-meta{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
  .party-card-contact{
    margin-top:10px;font-size:12px;color:var(--ink-soft);
    font-family:'IBM Plex Mono',monospace;
  }
  .party-card-notes{
    margin-top:8px;font-size:12px;color:var(--ink-faint);font-style:italic;
    line-height:1.5;
  }

  /* Auto-complete picker (reused in every transaction modal) */
  .party-pick-wrap{position:relative;}
  .party-pick-input{
    /* inherits .field input styling already; nothing else needed */
  }
  .party-pick-dropdown{
    display:none;
    position:absolute;left:0;right:0;top:100%;margin-top:4px;
    background:var(--panel);border:1px solid var(--line);border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    z-index:1000;max-height:280px;overflow-y:auto;
  }
  .party-pick-dropdown.show{display:block;}
  .party-pick-item{
    display:flex;align-items:center;gap:10px;
    padding:9px 12px;cursor:pointer;
    border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
  }
  .party-pick-item:last-child{border-bottom:none;}
  .party-pick-item.on{background:var(--panel-2);}
  .party-pick-ic{
    width:22px;height:22px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    background:var(--panel-2);font-size:12px;font-weight:600;flex-shrink:0;
  }
  .party-pick-text{flex:1;min-width:0;}
  .party-pick-name{
    font-size:13px;font-weight:500;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .party-pick-sub{font-size:11px;color:var(--ink-faint);margin-top:1px;}

/* ============================================================
 * V2 ACCOUNTING UI
 * ============================================================ */

/* Book picker in topbar */
.book-pick{min-width:200px;background:var(--panel-2);}

/* m2-bookbar: header strip for every v2 page */
.m2-bookbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 20px;margin-bottom:18px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;
}
.m2-bookbar-l .m2-book-name{
  font-family:'Fraunces',serif;font-size:19px;font-weight:500;color:var(--ink);
}
.m2-bookbar-l .m2-book-sub{
  font-size:12px;color:var(--ink-soft);margin-top:2px;
}
.m2-bookbar-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.m2-tot{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);
  padding:6px 12px;background:var(--panel-2);border-radius:8px;border:1px solid var(--line);
}

/* Money KPI variants */
.kpi-income{border-left:3px solid var(--green);}
.kpi-expense{border-left:3px solid var(--red);}
.kpi-net-pos{border-left:3px solid var(--green);}
.kpi-net-neg{border-left:3px solid var(--red);}
.kpi-cash{border-left:3px solid var(--blue);}
.kpi-pending{border-left:3px solid var(--accent);}
.kpi-l{font-size:11px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.5px;}
.kpi-v{font-family:'Fraunces',serif;font-size:24px;font-weight:500;margin-top:5px;line-height:1.1;color:var(--ink);}
.kpi-s{font-size:11px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;margin-top:5px;}

/* Month navigation bar */
.m2-monthbar{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:10px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
}
.m2-monthbar .day-nav{
  border:1px solid var(--line);background:var(--panel-2);width:34px;height:34px;
  border-radius:8px;cursor:pointer;font-size:18px;color:var(--ink-soft);
}
.m2-monthbar .day-nav:hover{color:var(--ink);}
.m2-month-wrap{display:flex;flex-direction:column;align-items:center;}
.m2-month{font-family:'Fraunces',serif;font-size:17px;font-weight:500;}
.ledger-mb-jump{
  background:none;border:none;color:var(--accent);font-size:11px;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;margin-top:1px;
}

/* Account strip */
.m2-acct-strip{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;
  margin-bottom:18px;
}
.acct-tile{
  display:flex;align-items:center;gap:10px;padding:11px 13px;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;cursor:pointer;
  transition:border-color .12s;
}
.acct-tile:hover{border-color:var(--accent);}
.acct-tile-i{font-size:20px;}
.acct-tile-body{flex:1;min-width:0;}
.acct-tile-name{font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-tile-sub{font-size:11px;color:var(--ink-faint);}
.acct-tile-bal{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;}
.acct-strip-empty{
  padding:14px;background:var(--panel-2);border:1px dashed var(--line);
  border-radius:9px;color:var(--ink-soft);font-size:13px;text-align:center;
}

/* Transaction table */
.m2-tx td.num,table .num{text-align:right;font-family:'IBM Plex Mono',monospace;}
.m2-tx tr.day-row td{
  background:var(--panel-2);font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  color:var(--ink-faint);padding:6px 18px;text-transform:uppercase;letter-spacing:.5px;
}
.m2-tx tr[data-id]{cursor:pointer;}
.m2-tx tr[data-id]:hover{background:var(--panel-2);}
.m2-tx .m2-narr-t{font-size:13px;font-weight:500;color:var(--ink);}
.m2-tx .m2-narr-s{font-size:11px;color:var(--ink-faint);margin-top:1px;font-family:'IBM Plex Mono',monospace;}
.m2-tx .m2-party{color:var(--accent);font-weight:500;}
.m2-tx .m2-from,.m2-tx .m2-to{font-size:12.5px;color:var(--ink-soft);}
.m2-tx .m2-arrow{color:var(--ink-faint);text-align:center;width:24px;}
.m2-tx .m2-amt{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;}
.m2-tx .m2-amt.pos{color:var(--green);}
.m2-tx .m2-amt.neg{color:var(--red);}
.empty-row{padding:30px;text-align:center;color:var(--ink-faint);font-size:13px;}
.totals-row td{background:var(--panel-2);font-weight:600;}

/* Calendar */
.m2-cal{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:14px;
}
.m2-cal-h{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);
  text-align:center;padding:6px 0;
}
.m2-cal-cell{
  min-height:90px;padding:8px 9px;border:1px solid var(--line-soft);border-radius:8px;
  background:var(--panel);
}
.m2-cal-cell.has{background:var(--panel-2);}
.m2-cal-blank{background:transparent;}
.m2-cal-d{font-size:11.5px;font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);margin-bottom:4px;}
.m2-cal-row{font-size:10.5px;font-family:'IBM Plex Mono',monospace;}
.m2-cal-row.pos{color:var(--green);}
.m2-cal-row.neg{color:var(--red);}
.m2-cal-net{margin-top:3px;font-size:11px;font-weight:600;font-family:'IBM Plex Mono',monospace;}
.m2-cal-net.pos{color:var(--green);}
.m2-cal-net.neg{color:var(--red);}

/* Books page — CoA */
.b2-acct-tree{display:inline-flex;align-items:center;gap:8px;}
.b2-acct-code{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);min-width:38px;}
.b2-acct-name{color:var(--ink);}
.b2-acct-flag{color:var(--accent);font-size:10px;margin-left:6px;}
.b2-acct-flag.arch{color:var(--ink-faint);}
.b2-acct-type{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;
}
.b2-acct-type.t-asset{background:var(--blue-soft);color:var(--blue);}
.b2-acct-type.t-liability{background:var(--red-soft);color:var(--red);}
.b2-acct-type.t-equity{background:var(--accent-soft);color:var(--accent);}
.b2-acct-type.t-income{background:var(--green-soft);color:var(--green);}
.b2-acct-type.t-expense{background:var(--accent-soft);color:var(--accent);}
.b2-jr-accs{font-size:12px;color:var(--ink-soft);}
.ops{display:flex;gap:6px;justify-content:flex-end;}
.btn-xs{padding:4px 10px;font-size:11px;border-radius:6px;}

/* Journal entry editor */
.je-input{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;
  padding:6px 8px;font-size:13px;font-family:'IBM Plex Sans',sans-serif;
}
.je-input.num{text-align:right;font-family:'IBM Plex Mono',monospace;}
.je-bal{color:var(--green);font-weight:500;}
.je-imbal{color:var(--red);font-weight:500;}

/* Invoice/bill modal */
.modal-xl{max-width:1100px;}
.dc-kind-lab{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1px;
  padding:3px 9px;border-radius:5px;text-transform:uppercase;
}
.dc-kind-lab.is-inv{background:var(--green-soft);color:var(--green);}
.dc-kind-lab.is-bill{background:var(--red-soft);color:var(--red);}
.dc-input{
  width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;
  padding:5px 7px;font-size:12.5px;font-family:'IBM Plex Sans',sans-serif;
}
.dc-input.dc-sm{padding:5px 5px;}
.dc-input.num{text-align:right;font-family:'IBM Plex Mono',monospace;}
.dc-lines th{font-size:11px;color:var(--ink-soft);}
.dc-totals{
  display:flex;flex-direction:column;gap:6px;align-items:flex-end;max-width:340px;margin-left:auto;
}
.dc-tot-row{display:flex;gap:24px;width:100%;justify-content:space-between;font-size:13px;color:var(--ink-soft);}
.dc-tot-row .num{font-family:'IBM Plex Mono',monospace;}
.dc-tot-grand{font-family:'Fraunces',serif;font-size:17px;color:var(--ink);font-weight:500;padding-top:6px;border-top:1px solid var(--line);margin-top:6px;}
.dc-tot-grand span:first-child{font-family:'IBM Plex Sans',sans-serif;}
.py-alloc{
  display:flex;justify-content:space-between;padding:9px 12px;background:var(--panel-2);
  border-radius:7px;border:1px solid var(--line);margin-bottom:6px;font-size:13px;
}
.py-alloc .num{font-family:'IBM Plex Mono',monospace;font-weight:600;}

/* Reports */
.rp-tbl{margin:0;}
.rp-tbl th{font-size:11px;color:var(--ink-soft);}
.rp-tbl tr[data-acct]{cursor:pointer;}
.rp-tbl tr[data-acct]:hover{background:var(--panel-2);}
.rp-section{background:var(--panel-2);color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;}
.report-head{margin-bottom:14px;}
.report-head h3{font-family:'Fraunces',serif;font-size:21px;font-weight:500;color:var(--ink);}
.report-sub{font-size:12px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;margin-top:3px;}
.pl-net{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Fraunces',serif;font-size:24px;font-weight:500;
}
.pl-net span{font-family:'IBM Plex Mono',monospace;}
.pl-net.pos{color:var(--green);}
.pl-net.neg{color:var(--red);}
.pos{color:var(--green);}
.neg{color:var(--red);}
.tb-bal td{color:var(--green);text-align:center;font-weight:500;padding:14px;}
.tb-imbal td{color:var(--red);text-align:center;font-weight:500;padding:14px;}

/* Loans/Schedules */
.l2-progress{
  width:90px;height:6px;border-radius:3px;background:var(--panel-3);overflow:hidden;
}
.l2-progress div{height:100%;background:var(--accent);}
.l2-progress-l{font-size:10.5px;font-family:'IBM Plex Mono',monospace;color:var(--ink-faint);margin-top:3px;}
.sch-paid{background:var(--panel-2);opacity:.7;}

/* Party autocomplete dropdown */
.pp-row{
  padding:8px 12px;cursor:pointer;display:flex;justify-content:space-between;
  font-size:13px;border-bottom:1px solid var(--line-soft);
}
.pp-row:hover{background:var(--panel-2);}
.pp-row.pp-new{color:var(--accent);font-weight:500;}
.pp-type{font-size:10.5px;color:var(--ink-faint);font-family:'IBM Plex Mono',monospace;}

/* Reconciliation */
.rn-chk{width:16px;height:16px;cursor:pointer;}

/* Misc shared */
.tag.t-orange{background:#fbe6d4;color:#a35a25;}
.tag.t-asset{background:var(--blue-soft);color:var(--blue);}
.tag.t-liability{background:var(--red-soft);color:var(--red);}
.tag.t-equity{background:var(--accent-soft);color:var(--accent);}
.tag.t-income{background:var(--green-soft);color:var(--green);}
.tag.t-expense{background:var(--accent-soft);color:var(--accent);}

/* ============================================================
 * V2 UI CLARITY PASS — activity feed, summary view, friendly groups
 * ============================================================ */

/* Activity feed container — replaces the dense transaction table */
.feed-body{padding:0;}
.feed-day-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 22px;background:var(--panel-2);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--ink-faint);
}
.feed-day-head:first-child{border-top:none;}
.feed-day-net{font-family:'IBM Plex Mono',monospace;font-weight:600;letter-spacing:0;}
.feed-day-net.pos{color:var(--green);}
.feed-day-net.neg{color:var(--red);}

.activity-card{
  display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center;
  padding:14px 22px;border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:background .12s;
}
.activity-card:last-child{border-bottom:none;}
.activity-card:hover{background:var(--panel-2);}

.ac-amt{
  font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:600;
  text-align:right;display:flex;align-items:baseline;justify-content:flex-end;gap:1px;
  letter-spacing:-0.3px;
}
.ac-amt.pos{color:var(--green);}
.ac-amt.neg{color:var(--red);}
.ac-amt.neu{color:var(--ink-soft);}
.ac-amt-sign{font-size:15px;margin-right:2px;}
.ac-amt-cur{font-size:13px;margin-left:3px;opacity:.55;}

.ac-body{min-width:0;}
.ac-head{
  font-family:'Fraunces',serif;font-size:15px;font-weight:500;color:var(--ink);
  line-height:1.3;
}
.ac-flow{
  font-size:12px;color:var(--ink-soft);margin-top:3px;
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
}
.feed-acct{
  background:var(--panel-2);padding:2px 8px;border-radius:5px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--ink);
  border:1px solid var(--line);
}
.feed-flow-arrow{color:var(--ink-faint);font-size:13px;}
.feed-narr{
  font-size:12.5px;color:var(--ink-soft);margin-top:4px;font-style:italic;
}
.ac-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:7px;
}
.feed-chip{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.3px;
  padding:2px 7px;border-radius:5px;
  background:var(--panel-2);color:var(--ink-soft);border:1px solid var(--line);
}
.feed-chip.c-pend{background:#fbe6d4;color:#a35a25;border-color:#f0c89a;}
.feed-chip.c-rej{background:var(--red-soft);color:var(--red);border-color:#e9b5b5;}
.feed-chip.c-draft{background:var(--panel-3);color:var(--ink-soft);}
.feed-chip.c-void{background:var(--red-soft);color:var(--red);text-decoration:line-through;}
.feed-chip.c-done{background:var(--green-soft);color:var(--green);}
.feed-chip.c-src{background:var(--panel-2);color:var(--ink-faint);font-style:normal;}
.feed-ref{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-faint);
}

/* Empty state for feeds */
.feed-empty{
  padding:40px 30px;text-align:center;
}
.feed-empty-i{font-size:38px;margin-bottom:10px;}
.feed-empty-t{
  font-family:'Fraunces',serif;font-size:17px;color:var(--ink);margin-bottom:6px;
}
.feed-empty-s{font-size:13px;color:var(--ink-soft);line-height:1.5;}

/* Journal view modal — summary section */
.jv-summary{
  padding:24px 22px 18px;border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;align-items:flex-start;
}
.jv-amt{
  font-family:'IBM Plex Mono',monospace;font-size:32px;font-weight:600;
  letter-spacing:-0.5px;display:flex;align-items:baseline;
}
.jv-amt.pos{color:var(--green);}
.jv-amt.neg{color:var(--red);}
.jv-amt.neu{color:var(--ink-soft);}
.jv-amt .ac-amt-sign{font-size:24px;margin-right:4px;}
.jv-head{
  font-family:'Fraunces',serif;font-size:21px;font-weight:500;color:var(--ink);
  margin-top:6px;
}
.jv-flow{
  margin-top:10px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;
}
.jv-meta{
  margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  color:var(--ink-faint);text-transform:uppercase;letter-spacing:.5px;
}
.jv-narr{
  margin-top:10px;font-size:13px;color:var(--ink-soft);font-style:italic;
  padding:10px 14px;background:var(--panel-2);border-radius:8px;
}

/* Accounting-view toggle */
.jv-toggle-row{
  padding:12px 22px;border-bottom:1px solid var(--line-soft);
}
.jv-toggle{
  background:none;border:none;color:var(--accent);font-size:12.5px;
  cursor:pointer;font-family:'IBM Plex Mono',monospace;letter-spacing:.2px;
  padding:6px 0;display:inline-flex;align-items:center;gap:6px;
}
.jv-toggle:hover{color:var(--ink);}
.jv-toggle-i{font-size:14px;}
.jv-acct{padding-top:8px;}

/* Friendly CoA group cards */
.coa-group{
  margin-bottom:18px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;overflow:hidden;
}
.coa-group-h{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 18px;background:var(--panel-2);border-bottom:1px solid var(--line);
}
.coa-group-l{
  font-family:'Fraunces',serif;font-size:16px;font-weight:500;color:var(--ink);
}
.coa-group-s{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.coa-group-bal{
  font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;color:var(--ink);
}
.coa-tbl{margin:0;}
.coa-tbl td{padding:9px 18px;font-size:13px;}
.coa-tbl tr{cursor:pointer;}
.coa-tbl tr:hover{background:var(--panel-2);}
.coa-tbl tr.is-arch{opacity:.55;}
.coa-tbl .coa-name{width:50%;}
.coa-tbl .coa-code{
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-faint);
}
.coa-tbl .coa-bal{font-family:'IBM Plex Mono',monospace;font-weight:600;}

/* Journal entry editor — Simple / Advanced mode toggle */
.je-mode-toggle{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:18px 22px 0;
}
.je-mode{
  text-align:left;background:var(--panel-2);border:1.5px solid var(--line);
  border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .12s;
}
.je-mode:hover{border-color:var(--ink-faint);}
.je-mode.on{background:var(--accent-soft);border-color:var(--accent);}
.je-mode-t{
  font-family:'Fraunces',serif;font-size:15px;font-weight:500;color:var(--ink);
}
.je-mode-s{font-size:11.5px;color:var(--ink-soft);margin-top:3px;}

/* New Transaction modal — "Money out of [HDFC] → Into [Rent]" row */
.tx-arrow-row{display:flex;align-items:flex-end;gap:14px;}
.tx-arrow{
  font-size:24px;color:var(--accent);padding-bottom:10px;
  font-family:'IBM Plex Sans',sans-serif;
}
.tx-eg{
  text-transform:none;letter-spacing:0;font-size:11px;color:var(--ink-faint);
  margin-left:6px;font-weight:400;font-family:'IBM Plex Mono',monospace;
}

/* Responsive KPI grid (original is repeat(4,1fr) — kept for desktop) */
@media (max-width: 1100px){ .kpi-row{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 600px) { .kpi-row{grid-template-columns:1fr;} }

/* Activity card breathes on narrow widths */
@media (max-width: 700px){
  .activity-card{grid-template-columns:110px 1fr;padding:12px 14px;gap:12px;}
  .ac-amt{font-size:15px;}
  .feed-day-head{padding:9px 14px;}
}

/* Compact bookbar — no gradient, no over-padding */
.m2-bookbar{padding:13px 18px;}
.m2-bookbar-l .m2-book-name{font-size:18px;}
.m2-bookbar-l .m2-book-sub{font-size:12px;}

/* Autocomplete: divider + global/legacy chips */
.pp-divider{
  padding:6px 12px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  color:var(--ink-faint);text-transform:uppercase;letter-spacing:.6px;
  background:var(--panel-2);border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.pp-tag-global{color:var(--blue);font-style:italic;}
.pp-tag-legacy{color:var(--ink-faint);font-style:italic;}

/* Parties v2 list rows */
.party-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 22px;border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:background .12s;
}
.party-row:last-child{border-bottom:none;}
.party-row:hover{background:var(--panel-2);}
.party-row-l{min-width:0;flex:1;}
.party-row-name{
  font-family:'Fraunces',serif;font-size:15px;font-weight:500;color:var(--ink);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.party-row-meta{
  font-size:12px;color:var(--ink-soft);margin-top:3px;
  font-family:'IBM Plex Mono',monospace;
}
.party-row-r{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* "What is the chart of accounts?" collapsible explainer */
.coa-explain{
  margin-bottom:14px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:9px;padding:0 14px;
}
.coa-explain summary{
  list-style:none;cursor:pointer;padding:11px 0;
  font-size:13px;color:var(--ink-soft);font-weight:500;
  display:flex;align-items:center;gap:8px;
}
.coa-explain summary::-webkit-details-marker{display:none;}
.coa-explain-i{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--panel);color:var(--accent);font-size:11px;font-weight:600;
  border:1px solid var(--line);
}
.coa-explain[open] summary{color:var(--ink);}
.coa-explain-body{
  padding:4px 0 14px 28px;font-size:13px;color:var(--ink-soft);line-height:1.55;
}

/* "Show all" toggle button */
#b2ShowAllToggle{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;text-transform:none;
  letter-spacing:0;color:var(--ink-soft);
}
#b2ShowAllToggle.on{color:var(--accent);border-color:var(--accent);}

/* Canonical input styles (padding, font, focus halo, hover, disabled)
 * live near the top of this file under `input[type=...]`. The previous
 * `.overlay .modal input...` block here was a duplicate with bigger
 * paddings/fonts that overrode the compact pass on specificity. It's
 * been removed; only the number-spinner hide stays — it's purely
 * cosmetic and doesn't conflict with anything. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}
input[type="number"]{-moz-appearance:textfield;}

/* Field margin + label styling now live in the global rules near the top
 * of the file (.field, label{}). The previous `.overlay .modal …` overrides
 * here were forcing the old oversized spacing and clashed with the modal
 * compact pass, so they've been removed. */

/* In-row inputs (invoice/bill line items, journal entry lines) — slimmer
 * since they live inside table cells. Override the modal defaults. */
.overlay .modal .dc-input,
.overlay .modal .je-input,
.overlay .modal .py-alloc-amt {
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  background: var(--panel-2);
}
.overlay .modal .dc-input.num,
.overlay .modal .je-input.num,
.overlay .modal .py-alloc-amt {
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
}

/* Payment allocation row — editable amount inline */
.py-alloc {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; background: var(--panel-2);
  border-radius: 8px; border: 1px solid var(--line); margin-bottom: 8px;
}
.py-alloc-l { min-width: 0; flex: 1; }
.py-alloc-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.py-alloc-sub { font-size: 11px; color: var(--ink-faint); margin-top: 2px;
  font-family: 'IBM Plex Mono', monospace; }
.py-alloc-r {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.py-alloc-cur { color: var(--ink-soft); font-size: 14px; }
.py-alloc-amt { width: 130px !important; }
.py-alloc-summary {
  margin-top: 10px; padding: 9px 14px; text-align: right;
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
  border-radius: 7px;
}
.py-sum-ok    { color: var(--green); }
.py-sum-warn  { color: var(--accent); }
.py-sum-err   { color: var(--red); }

/* Field hint inline (the small grey label-suffix we use) */
.tx-eg,
.field label .hint {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-faint);
  margin-left: 6px;
  font-family: 'IBM Plex Mono', monospace;
}

/* Checkbox rows align nicely */
.overlay .modal .check-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 0; font-size: 13px; color: var(--ink); cursor: pointer;
}
.overlay .modal .check-row input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent);
  cursor: pointer; flex-shrink: 0;
}

/* Removed: the `.overlay .modal .modal-section / .modal-section-h /
 * .modal-h / .modal-f` overrides that lived here were the oversized
 * defaults from a previous design pass. They beat the compact rules
 * earlier in this file on specificity and were the root cause of the
 * "everything looks big" mess. Compact values now live near the top
 * of the file under their canonical selectors. */


/* ============================================================
 * TEXTBOOK JOURNAL ENTRY VIEW (inside jvModal)
 * Matches the format you'd see in an accounting book / B.Com textbook:
 *   Date    Dr Account              ₹Amount      —
 *           To Other Account                ₹Amount
 *                  (Being: narration)
 * ============================================================ */

.jv-book {
  margin: 0 22px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.jv-book-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.jv-book-tbl thead th {
  background: var(--panel-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-weight: 500;
}
.jv-book-tbl thead th.num { text-align: right; }
.jv-book-tbl .jv-row td {
  padding: 9px 16px;
  border-bottom: 1px dotted var(--line-soft);
}
.jv-book-tbl .jv-row:last-of-type td { border-bottom: none; }
.jv-book-tbl .jv-dr .jv-acct {
  font-family: 'Fraunces', serif;
  font-size: 14.5px;
  color: var(--ink);
}
.jv-book-tbl .jv-cr .jv-acct {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  color: var(--ink-soft);
}
.jv-book-tbl .jv-indent {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  margin-right: 4px;
  padding-left: 28px;
}
.jv-book-tbl .jv-party {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  margin-left: 4px;
}
.jv-book-tbl .jv-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.jv-book-tbl .jv-cr .jv-num { color: var(--ink-soft); }
.jv-book-tbl .jv-desc {
  font-size: 11.5px;
  color: var(--ink-faint);
  font-style: italic;
}
.jv-book-tbl .jv-narr-row td {
  padding: 8px 16px 8px 60px;
  background: var(--panel-2);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  font-size: 12px;
}
.jv-book-tbl .jv-totals td {
  padding: 11px 16px;
  background: var(--panel-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13.5px;
  border-top: 2px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* Party detail — contact info grid */
.party-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  font-size: 13px;
  color: var(--ink-soft);
}
.party-contact-grid b {
  color: var(--ink);
  font-weight: 500;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

  /* ============================================================
   * SOCIAL — brand accounts, posts, and per-post daily metrics.
   * ============================================================ */
  #socFilters{margin-top:14px;}

  /* ----- account grid ----- */
  .soc-grid{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(286px,1fr));gap:14px;
  }
  .soc-card{
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    padding:15px 16px;box-shadow:var(--shadow);
    display:flex;flex-direction:column;gap:13px;cursor:pointer;transition:all .13s;
  }
  .soc-card:hover{border-color:var(--accent);transform:translateY(-2px);}
  .soc-card-top{display:flex;align-items:center;gap:11px;}
  .soc-card-id{flex:1;min-width:0;}
  .soc-card-handle{font-weight:650;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .soc-card-sub{font-size:11.5px;color:var(--ink-faint);margin-top:1px;}
  .soc-card-stats{
    display:grid;grid-template-columns:1fr 1fr 1fr;
    border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;
  }
  .soc-card-stats>div{
    padding:8px 4px;text-align:center;border-right:1px solid var(--line-soft);
  }
  .soc-card-stats>div:last-child{border-right:none;}
  .soc-card-stats b{display:block;font-size:15px;font-weight:650;color:var(--ink);}
  .soc-card-stats span{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);}
  .soc-card-team{display:flex;align-items:center;flex-wrap:wrap;gap:4px;}

  /* ----- platform icon badge ----- */
  .soc-ic{
    width:40px;height:40px;border-radius:9px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:19px;background:var(--panel-2);color:var(--ink);
  }
  .soc-ic-lg{width:52px;height:52px;border-radius:11px;font-size:25px;}
  .soc-ic-instagram{background:#fce4ec;color:#c2185b;}
  .soc-ic-youtube{background:#fbe0e0;color:#c0322b;}
  .soc-ic-facebook{background:#e2ebf7;color:#2f5b9c;}
  .soc-ic-tiktok{background:#e6e6ea;color:#1c1b22;}
  .soc-ic-twitter{background:#e6e6ea;color:#1c1b22;}
  .soc-ic-linkedin{background:#dde9f1;color:#1d6091;}

  /* ----- status dot + avatars ----- */
  .soc-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
  .soc-dot-ok{background:var(--green);box-shadow:0 0 0 3px var(--green-soft);}
  .soc-dot-miss{background:var(--panel-3);box-shadow:0 0 0 3px var(--line-soft);}
  .soc-dot-partial{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
  .soc-ava{
    width:23px;height:23px;border-radius:50%;background:var(--ink);color:var(--bg);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:9.5px;font-weight:650;flex-shrink:0;
  }
  .soc-team-none{font-size:11.5px;color:var(--ink-faint);font-style:italic;}

  /* ----- account detail ----- */
  .soc-detail-bar{display:flex;gap:8px;margin-bottom:14px;}
  .soc-head{
    display:flex;align-items:center;gap:15px;flex-wrap:wrap;
    background:var(--panel);border:1px solid var(--line);border-radius:11px;
    padding:16px 18px;box-shadow:var(--shadow);
  }
  .soc-head-id{flex:1;min-width:160px;}
  .soc-head-handle{font-family:'Fraunces',serif;font-size:21px;font-weight:550;color:var(--ink);}
  .soc-head-sub{font-size:12.5px;color:var(--ink-faint);margin-top:3px;}
  .soc-ext{font-size:12px;color:var(--accent);text-decoration:none;font-weight:600;}
  .soc-ext:hover{text-decoration:underline;}
  .soc-foll{display:flex;flex-direction:column;align-items:flex-end;gap:7px;}
  .soc-foll-now b{font-size:22px;font-weight:700;color:var(--ink);}
  .soc-foll-now span{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);margin-left:5px;}
  .soc-foll-edit{display:flex;gap:6px;}
  .soc-foll-edit input{
    width:120px;padding:5px 9px;border:1px solid var(--line);border-radius:7px;
    font-size:12.5px;background:var(--panel);color:var(--ink);
  }
  .soc-delta{font-size:12px;font-weight:700;}
  .soc-delta.up{color:var(--green);}
  .soc-delta.down{color:var(--red);}

  .soc-team-row{
    display:flex;align-items:center;flex-wrap:wrap;gap:8px;
    margin:14px 0;padding:0 2px;
  }
  .soc-team-lbl{
    font-size:10px;text-transform:uppercase;letter-spacing:.6px;
    color:var(--ink-faint);font-weight:700;margin-right:4px;
  }
  .soc-teamchip{
    display:inline-flex;align-items:center;gap:6px;
    background:var(--panel-2);border:1px solid var(--line-soft);border-radius:20px;
    padding:3px 11px 3px 3px;font-size:12.5px;color:var(--ink);
  }

  .soc-posts-head{
    display:flex;align-items:center;justify-content:space-between;
    margin:20px 0 12px;
  }
  .soc-posts-head h3{font-family:'Fraunces',serif;font-weight:500;font-size:16px;color:var(--ink);}

  /* ----- monthly report table ----- */
  .soc-monthbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
  .soc-mnav{
    width:30px;height:30px;border-radius:7px;border:1px solid var(--line);
    background:var(--panel);color:var(--ink-soft);cursor:pointer;font-size:12px;
  }
  .soc-mnav:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
  .soc-mnav:disabled{opacity:.35;cursor:default;}
  .soc-month-label{
    font-family:'Fraunces',serif;font-size:16px;font-weight:550;color:var(--ink);
    min-width:140px;text-align:center;
  }
  .soc-month-sum{
    margin-left:auto;font-size:12px;color:var(--ink-faint);
    font-family:'IBM Plex Mono',monospace;
  }
  .soc-rep{
    border:1px solid var(--line);border-radius:10px;background:var(--panel);
    box-shadow:var(--shadow);overflow:hidden;
  }
  .soc-rep-head,.soc-repday-row{
    display:grid;
    grid-template-columns:28px minmax(96px,1.15fr) 74px 1.4fr 84px 88px;
    align-items:center;
  }
  .soc-rd-spend{
    font-size:12.5px;font-weight:700;color:var(--accent);
    font-family:'IBM Plex Mono',monospace;text-align:right;
  }
  .soc-rep-head{
    padding:8px 14px;background:var(--panel-2);border-bottom:1px solid var(--line);
  }
  .soc-rep-head span{
    font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--ink-faint);font-weight:700;
  }
  .soc-repday{border-bottom:1px solid var(--line-soft);}
  .soc-repday:last-child{border-bottom:none;}
  .soc-repday-row{padding:9px 14px;}
  .soc-repday:not(.is-empty) .soc-repday-row{cursor:pointer;}
  .soc-repday:not(.is-empty) .soc-repday-row:hover{background:var(--panel-2);}
  .soc-repday.is-today{background:color-mix(in srgb, var(--accent) 6%, var(--panel));}
  .soc-repday.has-review{background:color-mix(in srgb, var(--red) 6%, var(--panel));}
  .soc-day-chev{font-size:9px;color:var(--ink-faint);transition:transform .15s;}
  .soc-repday.open .soc-day-chev{transform:rotate(90deg);}
  .soc-rd-date{font-size:13px;font-weight:600;color:var(--ink);}
  .soc-repday.is-empty .soc-rd-date{color:var(--ink-faint);font-weight:500;}
  .soc-rd-date em{
    font-style:normal;font-size:9px;font-weight:700;text-transform:uppercase;
    letter-spacing:.4px;color:var(--accent);margin-left:6px;
  }
  .soc-rd-flag{
    font-size:10px;font-weight:800;color:var(--red);margin-left:6px;
    background:var(--red-soft);border-radius:5px;padding:1px 5px;white-space:nowrap;
  }
  .soc-rd-posts{
    font-size:12.5px;font-weight:700;font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);
  }
  .soc-rd-posts.met{color:var(--green);}
  .soc-rd-posts.partial{color:var(--accent);}
  .soc-rd-posts.none{color:var(--ink-faint);}
  .soc-rd-links{display:flex;flex-wrap:wrap;gap:4px;}
  .soc-linkchip{
    width:21px;height:21px;border-radius:5px;border:1px solid var(--line);
    background:var(--panel-2);color:var(--accent);text-decoration:none;
    display:inline-flex;align-items:center;justify-content:center;font-size:11px;
  }
  .soc-linkchip:hover{border-color:var(--accent);background:var(--accent-soft);}
  .soc-linkchip-off{color:var(--ink-faint);cursor:default;}
  .soc-rd-dash{color:var(--ink-faint);font-size:13px;}
  .soc-rd-views{
    font-size:13px;font-weight:700;color:var(--ink);
    font-family:'IBM Plex Mono',monospace;text-align:right;
  }
  .soc-day-body{padding:3px 14px 9px 40px;background:var(--panel-2);}
  .soc-repday:not(.open) .soc-day-body{display:none;}

  /* ----- post row (collapsible, inside a day group) ----- */
  .soc-post{border-top:1px solid var(--line-soft);}
  .soc-post-h{
    display:flex;align-items:center;gap:9px;padding:9px 2px;cursor:pointer;
  }
  .soc-post-h:hover .soc-post-title{color:var(--accent);}
  .soc-post-chev{font-size:9px;color:var(--ink-faint);transition:transform .15s;flex-shrink:0;}
  .soc-post.open .soc-post-chev{transform:rotate(90deg);}
  .soc-post-title{flex:1;min-width:0;font-weight:600;font-size:13px;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .12s;}
  .soc-post-sum{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;flex-shrink:0;}
  .soc-post.open .soc-post-sum{display:none;}
  .soc-post-body{padding:2px 2px 11px 20px;}
  .soc-post:not(.open) .soc-post-body{display:none;}
  .soc-post-meta{font-size:11.5px;color:var(--ink-faint);margin:0 0 9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
  .soc-iconbtn{
    width:26px;height:26px;border-radius:6px;border:1px solid var(--line);
    background:var(--panel-2);color:var(--ink-soft);cursor:pointer;font-size:12px;flex-shrink:0;
  }
  .soc-iconbtn:hover{border-color:var(--accent);color:var(--accent);}
  .soc-tag{
    font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;
    padding:2px 7px;border-radius:5px;background:var(--panel-3);color:var(--ink-soft);
  }
  .soc-tag-live{background:var(--accent-soft);color:var(--accent);}
  .soc-tag-frozen{background:var(--panel-3);color:var(--ink-faint);}
  .soc-post-actions{margin-top:10px;}
  .soc-post-frozen{margin-top:9px;font-size:11.5px;color:var(--ink-faint);font-style:italic;}

  /* ----- boost (paid promotion) ----- */
  .soc-tag-boost{background:var(--accent-soft);color:var(--accent);}
  .soc-tag-boosted{background:var(--green-soft);color:var(--green);}
  .soc-tag-review{background:var(--red-soft);color:var(--red);}
  .soc-boostbox{
    margin-top:6px;padding:12px 13px;border:1px solid var(--line);
    border-radius:9px;background:var(--panel-2);
  }
  .soc-boost-line{
    margin:9px 0;padding:10px 12px;border:1px solid var(--line-soft);
    border-radius:8px;background:var(--panel-2);
  }
  .soc-boost-grid{
    display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;
  }
  .soc-boost-grid span{
    font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--ink-faint);font-weight:700;
  }
  .soc-boost-grid b{font-size:12.5px;color:var(--ink);font-weight:600;}

  /* the two compulsory checkpoints */
  .soc-boost-checks{
    margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);
    display:flex;flex-direction:column;gap:5px;
  }
  .soc-cp{
    display:flex;justify-content:space-between;gap:10px;align-items:baseline;
    font-size:11.5px;
  }
  .soc-cp span{color:var(--ink-soft);}
  .soc-cp b{font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;}
  .soc-cp.cp-ok span{color:var(--ink-soft);}
  .soc-cp.cp-ok b{color:var(--green);}
  .soc-cp.cp-due span{color:var(--red);font-weight:600;}
  .soc-cp.cp-due b{color:var(--red);}
  .soc-cp.cp-wait b{color:var(--ink-faint);}

  /* update history log */
  .soc-log{
    margin:9px 0;border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;
  }
  .soc-log-h{
    padding:7px 11px;background:var(--panel-2);font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;color:var(--ink-faint);
  }
  .soc-logrow{
    display:grid;grid-template-columns:auto auto 1fr;gap:10px;
    padding:6px 11px;border-top:1px solid var(--line-soft);font-size:11.5px;
    align-items:baseline;
  }
  .soc-log-when{color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;font-size:11px;}
  .soc-log-by{color:var(--ink);font-weight:600;}
  .soc-log-nums{color:var(--ink-soft);text-align:right;}

  /* actionable "needs update" panel */
  .soc-needs{
    margin:12px 0;border:1px solid var(--red);border-radius:10px;
    background:var(--red-soft);overflow:hidden;
  }
  .soc-needs-h{
    padding:10px 14px;font-size:13px;font-weight:800;color:var(--red);
    border-bottom:1px solid var(--red);
  }
  .soc-needs-row{
    display:flex;align-items:center;gap:12px;padding:9px 14px;
    border-bottom:1px solid color-mix(in srgb, var(--red) 25%, transparent);
  }
  .soc-needs-row:last-child{border-bottom:none;}
  .soc-needs-info{flex:1;min-width:0;}
  .soc-needs-info b{font-size:13px;color:var(--ink);font-weight:650;display:block;}
  .soc-needs-info span{font-size:11px;color:var(--ink-soft);}
  .soc-needs-act{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .soc-needs-link{
    font-size:12px;color:var(--accent);text-decoration:none;font-weight:600;
    white-space:nowrap;
  }
  .soc-needs-link:hover{text-decoration:underline;}
  .soc-needs-muted{font-size:11.5px;color:var(--ink-faint);font-style:italic;}

  .soc-card-review{
    font-size:11px;font-weight:700;color:var(--red);
    background:var(--red-soft);border-radius:6px;padding:5px 9px;
  }
  .sf-soc-review{color:var(--red);font-weight:700;}

  /* boosted posts stand out — tinted card + accent edge */
  .soc-post.is-boosted{
    background:color-mix(in srgb, var(--accent) 6%, var(--panel-2));
    border-left:3px solid var(--accent);
  }
  .soc-post.is-boosted.needs-update{
    background:color-mix(in srgb, var(--red) 8%, var(--panel-2));
    border-left-color:var(--red);
  }
  .soc-linkchip.is-boosted{border-color:var(--accent);background:var(--accent-soft);}

  /* ----- per-post daily metric grid ----- */
  .soc-metrics{border:1px solid var(--line-soft);border-radius:8px;overflow:hidden;}
  .soc-mrow{
    display:grid;grid-template-columns:90px 1fr 1fr 1fr;
    border-bottom:1px solid var(--line-soft);
  }
  .soc-mrow:last-child{border-bottom:none;}
  .soc-mrow>span{padding:7px 10px;font-size:12.5px;color:var(--ink);}
  .soc-mhead>span{
    font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;
    color:var(--ink-faint);font-weight:700;background:var(--panel-2);
  }
  .soc-mdate{color:var(--ink-soft)!important;font-weight:600;}
  .soc-mcell{display:flex;align-items:baseline;gap:6px;}
  .soc-mcell .soc-delta{font-size:10.5px;}
  .soc-metrics-empty{
    padding:14px;text-align:center;font-size:12px;color:var(--ink-faint);
    font-style:italic;border:1px dashed var(--line);border-radius:8px;
  }

  /* ----- modal: staff picker + number rows ----- */
  .soc-staffpick{
    max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;
  }
  .soc-pick-empty{padding:14px;font-size:12.5px;color:var(--ink-faint);text-align:center;}
  .soc-staffrow{
    display:flex;align-items:center;gap:9px;padding:7px 11px;cursor:pointer;
    border-bottom:1px solid var(--line-soft);
  }
  .soc-staffrow:last-child{border-bottom:none;}
  .soc-staffrow.on{background:var(--accent-soft);}
  .soc-staffrow input{flex-shrink:0;}
  .soc-staffname{flex:1;font-size:13px;color:var(--ink);font-weight:550;}
  .soc-staffrole{font-size:11px;color:var(--ink-faint);}
  .soc-startnums{
    margin-top:6px;padding-top:12px;border-top:1px solid var(--line-soft);
  }
  .soc-numrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
  .soc-numrow label{
    display:flex;flex-direction:column;gap:4px;
    font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-faint);font-weight:700;
  }
  .soc-numrow input{
    padding:7px 9px;border:1px solid var(--line);border-radius:7px;
    font-size:13px;background:var(--panel);color:var(--ink);
  }

  /* ----- staff modal "Social Media" section ----- */
  .sf-soc-row{
    display:flex;align-items:center;gap:11px;padding:9px 11px;cursor:pointer;
    border:1px solid var(--line);border-radius:9px;margin-bottom:7px;background:var(--panel);
  }
  .sf-soc-row:hover{border-color:var(--accent);}
  .sf-soc-info{flex:1;min-width:0;}
  .sf-soc-handle{font-size:13.5px;font-weight:600;color:var(--ink);}
  .sf-soc-plat{font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.4px;margin-left:4px;}
  .sf-soc-meta{font-size:11.5px;color:var(--ink-faint);margin-top:2px;}