:root{
    --brand-green:#7BC143; --deep-green:#489041; --charcoal:#2D2D2D;
    --slate:#595959; --magenta:#A74683; --amber:#BF8F00; --red:#C00000;
    --light-green:#E2EFDA; --light-amber:#FFF2CC; --light-gray:#EDEDED; --page-gray:#F5F5F5;
    /* Height of the sticky chrome. Measured at runtime by sizeChrome() so
       anything else that pins to the top — the Log table's column headers —
       can sit just below it instead of hiding underneath. */
    --chrome-h:116px;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:-apple-system,"Segoe UI",system-ui,sans-serif;color:var(--charcoal);background:var(--page-gray);font-size:15px;line-height:1.5;}

  /* ---- Sticky app chrome ------------------------------------------------
     One unit that stays pinned: brand row (logo, page title, plan name, status
     badge, file buttons, the header-color button), then the tab row, closed by
     the green accent rule.
     The unit is white or charcoal, whichever the person opening the app chose —
     both are canon per 00_resources/branding.md, and the charcoal option uses the
     white knockout of the logo rather than a white chip behind it. Printed and
     client-facing output keeps the charcoal band either way; the chrome does not
     print. */
  .chrome{position:sticky;top:0;z-index:100;background:#fff;transition:box-shadow .18s ease;}
  .chrome.scrolled{box-shadow:0 3px 12px rgba(0,0,0,.10);}
  .chrome-row{max-width:1120px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;
    gap:14px;flex-wrap:wrap;}
  .chrome-brand{display:flex;align-items:center;gap:14px;min-width:0;}
  .chrome-brand img{width:175px;height:auto;display:block;}
  .chrome-brand h1{font-size:17px;margin:0;font-weight:700;color:var(--charcoal);white-space:nowrap;
    padding-left:14px;border-left:1px solid #dcdcdc;}
  .chrome-tools{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;}
  .chrome-tools .who{font-weight:700;color:var(--charcoal);}
  @media (max-width:760px){
    .chrome-brand h1{padding-left:0;border-left:none;}
    .chrome-tools{margin-left:0;}
  }
  .rule{height:4px;background:var(--brand-green);}

/* ---- Chrome color: white or charcoal ---------------------------------------
   Both are canon — see 00_resources/branding.md. White is brighter and reads
   friendlier, and lets the master logo sit directly on the background. Charcoal
   reads more formal and uses New Logo White.png, the proper knockout of the
   wordmark, never a white chip behind the charcoal wordmark (which is what these
   apps used to do and what branding.md rules out). The person opening the app is
   asked once and the answer is remembered in their browser, so this is a personal
   preference, not a firm-wide switch.
   Everything below is scoped to #chrome. No document, no tab body, and no printed
   page changes with the theme — the chrome is display:none in print either way. */
.chrome-brand .logo-knockout { display: none; }
.chrome[data-chrome="charcoal"] { background: var(--charcoal); }
.chrome[data-chrome="charcoal"] .chrome-brand .logo-master { display: none; }
.chrome[data-chrome="charcoal"] .chrome-brand .logo-knockout { display: block; }
.chrome[data-chrome="charcoal"] .chrome-brand h1 { color: #fff; border-left-color: rgba(255,255,255,.28); }
.chrome[data-chrome="charcoal"] .chrome-tools { color: #d4d4d4; }
.chrome[data-chrome="charcoal"] .chrome-tools .who,
.chrome[data-chrome="charcoal"] .savestate { color: #f0f0f0; }
.chrome[data-chrome="charcoal"] .tabbar { background: transparent; }
.chrome[data-chrome="charcoal"] .tab { color: #c3c3c3; }
.chrome[data-chrome="charcoal"] .tab:hover { color: #fff; }
.chrome[data-chrome="charcoal"] .tab-n,
.chrome[data-chrome="charcoal"] .tab-c { background: rgba(255,255,255,.15); color: #e2e2e2; }
/* The active tab is marked in white plus the brand green underline. Deep green on
   charcoal is too close in value to read as "selected" from across a room. */
.chrome[data-chrome="charcoal"] .tab.on { color: #fff; border-bottom-color: var(--brand-green); }
.chrome[data-chrome="charcoal"] .tab.on .tab-n { background: var(--brand-green); color: var(--charcoal); }
.chrome[data-chrome="charcoal"] .tabbar-note { color: #c3c3c3; }
/* Open File is charcoal on white, which would vanish on a charcoal bar. */
.chrome[data-chrome="charcoal"] .act-open,
.chrome[data-chrome="charcoal"] button.ghost { background: #575757; border-color: #575757; color: #fff; }
.chrome[data-chrome="charcoal"] .act-open:hover,
.chrome[data-chrome="charcoal"] button.ghost:hover { background: #6a6a6a; }

/* The header button that switches the two. Deliberately the quietest control in
   the chrome: it changes nothing about the plan, only how the app looks. */
.chrome .act-theme, .chrome button.chrome-theme {
  background: transparent; color: var(--slate); border: 1px solid #c9c9c9;
  font-weight: 600; cursor: pointer;
}
.chrome .act-theme:hover, .chrome button.chrome-theme:hover { background: rgba(0,0,0,.05); color: var(--charcoal); }
.chrome[data-chrome="charcoal"] .act-theme,
.chrome[data-chrome="charcoal"] button.chrome-theme { color: #d4d4d4; border-color: rgba(255,255,255,.32); }
.chrome[data-chrome="charcoal"] .act-theme:hover,
.chrome[data-chrome="charcoal"] button.chrome-theme:hover { background: rgba(255,255,255,.12); color: #fff; }

/* The one-time question. Sits under the chrome, scrolls away with the page. */
.theme-ask { max-width: 1120px; margin: 18px auto 0; padding: 0 20px; }
.theme-ask-inner { background: #fff; border-left: 5px solid var(--brand-green); border-radius: 0 6px 6px 0;
  padding: 12px 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.theme-ask-txt { flex: 1; min-width: 260px; font-size: 13px; line-height: 1.5; }
.theme-ask-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.chrome-theme-hidden { display: none; }
button.theme-pick { background: var(--deep-green); color: #fff; border: none; border-radius: 6px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
button.theme-pick:hover { background: var(--brand-green); }
  /* Anything the app scrolls to (a missing required field, the generated
     document) stops below the chrome instead of underneath it. */
  [id]{scroll-margin-top:calc(var(--chrome-h) + 14px);}
  .wrap{max-width:1120px;margin:0 auto;padding:24px 20px 90px;}
  .wrap.narrow{max-width:940px;}
  .intro{background:#fff;border-left:5px solid var(--brand-green);padding:14px 20px;border-radius:0 6px 6px 0;margin-bottom:20px;}
  .intro p{margin:5px 0;}
  section{background:#fff;border-radius:8px;padding:20px 24px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.08);}
  h2{font-size:19px;margin:0 0 4px;color:var(--charcoal);border-bottom:3px solid var(--brand-green);display:inline-block;padding-bottom:3px;}
  .hint{color:var(--slate);font-size:13px;margin:6px 0 14px;}
  label{display:block;font-weight:600;margin:12px 0 4px;font-size:13.5px;}
  label .opt{font-weight:400;color:var(--slate);font-size:12px;}
  input[type=text],input[type=number],input[type=date],select,textarea{
    width:100%;padding:8px 10px;border:1px solid #c9c9c9;border-radius:5px;font-size:14px;font-family:inherit;background:#fff;color:var(--charcoal);}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-green);border-color:var(--brand-green);}
  input:disabled,select:disabled,textarea:disabled{background:#f2f2f2;color:#6b6b6b;cursor:not-allowed;}
  textarea{min-height:52px;resize:vertical;}
  .row{display:flex;gap:14px;flex-wrap:wrap;}
  .row>div{flex:1;min-width:150px;}
  .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
  button{background:var(--deep-green);color:#fff;border:none;border-radius:6px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;}
  button:hover{background:var(--brand-green);}
  button.ghost{background:var(--charcoal);}
  button.small{padding:6px 12px;font-size:12.5px;}
  button.danger{background:var(--red);}
  button.danger:hover{background:#e23434;}
  button:disabled{background:#b9b9b9;cursor:not-allowed;}
  button:disabled:hover{background:#b9b9b9;}
  footer{color:var(--slate);font-size:12px;text-align:center;padding:18px;}
  .warn{background:var(--light-amber);border-left:4px solid var(--amber);padding:9px 13px;border-radius:0 5px 5px 0;font-size:13px;margin-top:12px;}
  .note{background:var(--page-gray);border-left:4px solid var(--slate);padding:9px 13px;border-radius:0 5px 5px 0;font-size:13px;margin-top:12px;}
  .good{background:var(--light-green);border-left:4px solid var(--deep-green);padding:9px 13px;border-radius:0 5px 5px 0;font-size:13px;margin-top:12px;}
  .bad{background:#fde7e7;border-left:4px solid var(--red);padding:9px 13px;border-radius:0 5px 5px 0;font-size:13px;margin-top:12px;}
  .ok{color:var(--deep-green);font-weight:700;}
  .over{color:var(--red);font-weight:700;}
  .pill{display:inline-block;padding:2px 8px;border-radius:11px;font-size:11.5px;font-weight:700;}
  .pill.paid{background:var(--light-green);color:var(--deep-green);}
  .pill.unpaid{background:#fde7e7;color:var(--red);}

  /* ---- Tab row (second row of the sticky chrome; the chrome owns the
         stickiness now, so this is just layout) ---- */
  .tabbar{background:#fff;}
  .tabbar-inner{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;gap:2px;align-items:center;}
  .tabbar-note{margin-left:auto;padding-left:18px;color:var(--slate);font-size:12px;text-align:right;}
  @media (max-width:900px){ .tabbar-note{display:none;} }
  .tab{font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;background:none;border:none;
    border-bottom:2px solid transparent;color:var(--slate);padding:12px 15px 10px;display:flex;
    align-items:center;gap:8px;transition:.15s;white-space:nowrap;border-radius:0;}
  .tab:hover{color:var(--charcoal);background:none;}
  .tab.on{color:var(--deep-green);border-bottom-color:var(--deep-green);background:none;}
  .tab-n{width:19px;height:19px;border-radius:5px;background:var(--light-gray);color:var(--slate);font-size:11px;
    font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .tab.on .tab-n{background:var(--deep-green);color:#fff;}
  .tab-c{font-size:11px;font-weight:700;padding:1px 6px;border-radius:10px;background:var(--light-gray);color:var(--slate);}
  .tab.on .tab-c{background:var(--light-green);color:var(--deep-green);}
  .tab-c.alert{background:#fde7e7;color:var(--red);}
  @media (max-width:620px){
    .tabbar-inner{overflow-x:auto;}
    .tab{padding:11px 10px 9px;font-size:13px;}
    .tab-lbl-long{display:none;}
  }
  .pane{display:none;} .pane.on{display:block;}

  /* ---- Status badge (now lives in the chrome's brand row) ---- */
  .badge{display:inline-block;padding:3px 10px;border-radius:11px;font-size:11.5px;font-weight:700;letter-spacing:.02em;}
  .badge.draft{background:var(--light-amber);color:var(--amber);}
  .badge.partial{background:#e8eef7;color:#2f5c96;}
  .badge.signed{background:var(--light-green);color:var(--deep-green);}
  .badge.altered{background:#fde7e7;color:var(--red);}

  /* ---- Expense category cards ---- */
  .xcat{border:1px solid var(--light-gray);border-radius:7px;padding:10px 14px;margin:8px 0;}
  .xcat.on{border-color:var(--brand-green);background:var(--light-green);}
  .xcat .chk{margin:0;}
  .roleblock{display:none;margin:10px 0 2px 26px;padding-top:8px;border-top:1px dashed #c7d8bd;}
  .xcat.on .roleblock{display:block;}
  .rolerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:5px 0;font-size:13.5px;}
  .rolerow .rolebox{display:flex;align-items:center;gap:6px;min-width:110px;font-weight:600;}
  .rolerow input[type=number]{width:110px;padding:6px 8px;font-size:14px;}
  .rolerow select{width:150px;padding:6px 8px;font-size:14px;}
  .rolerow .lim{display:none;align-items:center;gap:8px;flex-wrap:wrap;color:var(--slate);}
  .rolerow.on .lim{display:flex;}
  .grp{margin:18px 0 6px;font-weight:700;color:var(--deep-green);font-size:15px;border-bottom:1px dotted var(--light-gray);padding-bottom:3px;}

  /* ---- Participants ---- */
  table.parts{width:100%;border-collapse:collapse;margin-top:8px;}
  table.parts th{background:var(--charcoal);color:#fff;text-align:left;padding:7px 9px;font-size:13px;}
  table.parts td{padding:5px 8px;border-bottom:1px solid var(--light-gray);vertical-align:middle;}
  table.parts input,table.parts select{padding:6px 8px;font-size:14px;}
  table.parts td.pctcol input{width:80px;}
  .delrow{background:var(--red);padding:6px 11px;font-size:13px;}
  .delrow:hover{background:#e23434;}

  /* ---- Log ---- */
  table.log{width:100%;border-collapse:collapse;margin-top:12px;font-size:12.5px;}
  /* Pinned to just under the sticky chrome, not to the top of the viewport,
     otherwise these headers slide behind the chrome and vanish. */
  table.log th{background:var(--charcoal);color:#fff;text-align:left;padding:7px 8px;
    position:sticky;top:var(--chrome-h);z-index:10;}
  table.log td{padding:6px 8px;border-bottom:1px solid var(--light-gray);vertical-align:top;}
  table.log tr:hover td{background:#fafcf7;}
  table.log td.num{text-align:right;white-space:nowrap;}
  table.log input[type=date]{padding:4px 6px;font-size:12px;width:135px;}
  .tablewrap{overflow-x:auto;}
  .flag{display:inline-block;padding:1px 6px;border-radius:9px;font-size:10.5px;font-weight:700;margin:1px 3px 1px 0;white-space:nowrap;}
  .flag.pre{background:#e8eef7;color:#2f5c96;}
  .flag.rcpt{background:var(--light-amber);color:var(--amber);}
  .flag.late{background:#fde7e7;color:var(--red);}
  .flag.plan{background:var(--light-green);color:var(--deep-green);}

  /* Required fields. The asterisk is always visible; the red outline only
     appears once someone has tried to generate with something missing, so a
     blank form doesn't open covered in errors. */
  .req{color:var(--red);font-weight:700;margin-left:2px;}
  .missing{border-color:var(--red)!important;background:#fff7f7!important;}
  table.parts.missing{background:transparent!important;border:1px solid var(--red);border-radius:6px;}
  #reqBox ul{margin:6px 0 0 18px;padding:0;}
  #reqBox li{margin:2px 0;}
  #reqBox a{color:var(--red);font-weight:600;}

  .cards{display:flex;gap:14px;flex-wrap:wrap;}
  .stat{flex:1;min-width:150px;background:var(--light-green);border-radius:7px;padding:12px 16px;}
  .stat .lbl{color:var(--slate);font-size:12.5px;}
  .stat .val{font-size:24px;font-weight:700;color:var(--deep-green);}
  .stat.amber{background:var(--light-amber);} .stat.amber .val{color:var(--amber);}
  .stat.red{background:#fde7e7;} .stat.red .val{color:var(--red);}

  .policybox{background:var(--light-green);border-radius:6px;padding:12px 16px;font-size:13.5px;}
  .policybox .biz{font-size:16px;font-weight:700;color:var(--deep-green);}

  details.calc{border:1px solid var(--light-gray);border-radius:7px;padding:4px 14px;margin:10px 0;}
  details.calc summary{cursor:pointer;font-weight:700;color:var(--deep-green);padding:8px 0;}
  table.ho{width:100%;border-collapse:collapse;margin-top:8px;}
  table.ho th{background:var(--charcoal);color:#fff;text-align:left;padding:7px 9px;font-size:13px;}
  table.ho td{padding:5px 9px;border-bottom:1px solid var(--light-gray);}
  table.ho td:last-child{width:150px;}
  .calcbox{background:var(--light-green);border-radius:6px;padding:12px 16px;margin-top:12px;}
  .calcbox .big{font-size:24px;font-weight:700;color:var(--deep-green);}
  .calcbox .lbl{color:var(--slate);font-size:12.5px;}
  .chk{display:flex;align-items:flex-start;gap:8px;margin:6px 0;font-weight:400;font-size:13.5px;}
  .chk input{margin-top:3px;width:15px;height:15px;accent-color:var(--deep-green);}
  .radio-line{display:flex;gap:22px;flex-wrap:wrap;margin:6px 0;}
  .radio-line label{display:flex;align-items:center;gap:7px;font-weight:400;margin:0;}
  .radio-line input{accent-color:var(--deep-green);width:16px;height:16px;}
  .uploadbtn{display:inline-block;background:var(--deep-green);color:#fff;border-radius:6px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;}
  .uploadbtn:hover{background:var(--brand-green);}
  select.paymethod{padding:3px 6px;font-size:11.5px;margin-top:4px;max-width:150px;}
  table.docs{width:100%;border-collapse:collapse;margin-top:12px;font-size:12.5px;}
  table.docs th{background:var(--charcoal);color:#fff;text-align:left;padding:7px 8px;}
  table.docs td{padding:6px 8px;border-bottom:1px solid var(--light-gray);vertical-align:middle;}
  table.docs img.thumb{max-width:54px;max-height:54px;border-radius:4px;border:1px solid var(--light-gray);vertical-align:middle;margin-right:8px;}
  table.docs .filemeta{color:var(--slate);font-size:11.5px;}
  table.docs select,table.docs input[type=text]{font-size:12px;padding:5px 7px;}

  /* ---- Generated policy document ---- */
  #docOutput{display:none;background:#fff;margin:26px auto;max-width:900px;padding:46px 56px;box-shadow:0 1px 6px rgba(0,0,0,.14);}
  #docOutput h1{font-size:19px;text-align:center;margin:0 0 2px;color:var(--charcoal);}
  #docOutput .sub{text-align:center;color:var(--slate);font-size:13.5px;margin:0 0 4px;}
  #docOutput h3{font-size:15px;color:var(--deep-green);margin:20px 0 4px;border-bottom:1px solid var(--light-gray);padding-bottom:2px;}
  #docOutput p{margin:7px 0;text-align:justify;}
  #docOutput ul{margin:6px 0 6px 22px;}
  #docOutput table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px;}
  #docOutput table th{background:var(--light-gray);text-align:left;padding:6px 8px;border:1px solid #d0d0d0;}
  #docOutput table td{padding:6px 8px;border:1px solid #d0d0d0;vertical-align:top;}
  #docOutput .sig{margin-top:26px;display:flex;flex-wrap:wrap;gap:36px;}
  .sigblock{width:330px;}
  .sigpad{height:56px;border-bottom:1px solid var(--charcoal);display:flex;align-items:flex-end;padding-bottom:2px;}
  .sigpad img{max-height:52px;max-width:320px;}
  .sigpad .sigtyped{font-family:"Segoe Script","Snell Roundhand","Brush Script MT",cursive;font-size:30px;color:#12324d;line-height:1;padding-bottom:2px;}
  .sigpad .sigph{color:#bbb;font-size:12px;font-style:italic;}
  .sigmeta{display:flex;justify-content:space-between;font-size:12px;color:var(--slate);margin-top:3px;}
  .signame{font-size:12.5px;color:var(--slate);margin-top:4px;}
  .sigwho{font-size:11.5px;color:var(--charcoal);margin-top:2px;font-weight:600;}
  .sigstamp{font-size:10.5px;color:var(--slate);margin-top:2px;font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all;}
  .sigctrl{margin-top:8px;display:flex;gap:8px;}
  .sigmodal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:200;}
  .sigmodal-inner{background:#fff;border-radius:10px;padding:22px 24px;width:540px;max-width:92vw;max-height:94vh;overflow-y:auto;box-shadow:0 8px 30px rgba(0,0,0,.3);}
  .sigtabs{display:flex;gap:8px;margin-bottom:12px;}
  .sigtab{background:var(--light-gray);color:var(--charcoal);padding:8px 18px;font-size:13.5px;}
  .sigtab.on{background:var(--deep-green);color:#fff;}
  #sigCanvas{border:1px dashed #9c9c9c;border-radius:6px;width:100%;height:150px;touch-action:none;background:#fff;cursor:crosshair;}
  #sigTypeInput{margin-bottom:8px;}
  .sigtypepreview{min-height:52px;border:1px dashed #9c9c9c;border-radius:6px;display:flex;align-items:center;padding:0 14px;font-family:"Segoe Script","Snell Roundhand","Brush Script MT",cursive;font-size:32px;color:#12324d;}
  .consent{background:var(--page-gray);border:1px solid var(--light-gray);border-radius:6px;padding:10px 12px;margin-top:14px;font-size:12.5px;color:var(--slate);}
  .pagebreak{page-break-before:always;}
  .auditwrap{margin-top:34px;border-top:2px solid var(--light-gray);padding-top:14px;}
  table.audit{width:100%;border-collapse:collapse;font-size:11.5px;}
  table.audit th{background:var(--light-gray);text-align:left;padding:5px 7px;border:1px solid #d0d0d0;}
  table.audit td{padding:5px 7px;border:1px solid #d0d0d0;vertical-align:top;word-break:break-word;}

  @media print{
    body{background:#fff;}
    .chrome,.rule,.intro,.tabbar,footer,.no-print{display:none!important;}
    #docOutput{display:block!important;box-shadow:none;margin:0;padding:0;max-width:none;}
    .wrap{padding:0;max-width:none;}
    section{box-shadow:none;}
    .pane{display:none!important;}
  }

/* ═══════════════════════════════════════════════════════════════════════
   HOSTED-APP ADDITIONS — login screen, staff dashboard, per-client chrome
   extras. Added for the Firebase-backed multi-user version; everything
   above this line is ported unchanged from the original single-file tool
   so the plan/log/docs experience looks and behaves the same way.
   ═══════════════════════════════════════════════════════════════════════ */

.hidden{display:none!important;}

/* ---- Login screen ---- */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--page-gray);padding:20px;}
.loginbox{background:#fff;border-radius:10px;padding:36px 34px;width:380px;max-width:100%;box-shadow:0 4px 20px rgba(0,0,0,.10);text-align:center;}
.loginbox h1{font-size:20px;margin:14px 0 4px;color:var(--charcoal);}
.loginbox .sub{color:var(--slate);font-size:13.5px;margin-bottom:20px;}
.loginbox label{text-align:left;}
.loginbox .btns{margin-top:18px;}
.loginbox .btns button{width:100%;}
.login-badge{width:46px;height:46px;border-radius:11px;background:var(--deep-green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;margin:0 auto;}
.login-error{background:#fde7e7;color:var(--red);border-radius:6px;padding:9px 12px;font-size:13px;margin-top:12px;text-align:left;display:none;}

/* ---- Staff dashboard ---- */
.dashwrap{max-width:1120px;margin:0 auto;padding:28px 20px 90px;}
.dash-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
.dash-head h1{font-size:21px;margin:0;color:var(--charcoal);}
.dash-head p{color:var(--slate);font-size:13.5px;margin:2px 0 0;}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.dash-card{background:#fff;border-radius:9px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:pointer;transition:box-shadow .15s,transform .15s;border:1px solid transparent;}
.dash-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-1px);border-color:var(--brand-green);}
.dash-card h3{margin:0 0 6px;font-size:15.5px;color:var(--charcoal);}
.dash-card .dc-meta{color:var(--slate);font-size:12.5px;margin-bottom:10px;}
.dash-card .dc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
.dash-empty{color:var(--slate);font-size:13.5px;padding:30px 0;text-align:center;}
.dash-search{flex:0 0 260px;}

/* ---- Modals (new client, confirm) ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:300;padding:20px;}
.modal-box{background:#fff;border-radius:10px;padding:26px 26px;width:420px;max-width:100%;box-shadow:0 8px 30px rgba(0,0,0,.3);}
.modal-box h2{margin:0 0 4px;font-size:17px;color:var(--charcoal);}
.modal-box .sub{color:var(--slate);font-size:13px;margin-bottom:16px;}
.modal-box .btns{margin-top:18px;}
.credbox{background:var(--light-green);border-radius:6px;padding:12px 14px;font-size:13px;margin-top:12px;word-break:break-all;}
.credbox b{color:var(--deep-green);}

/* ---- Dashboard/chrome-only buttons on the plan view ---- */
.chrome-tools .role-pill{background:var(--light-green);color:var(--deep-green);font-weight:700;font-size:11px;
  padding:2px 9px;border-radius:10px;}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--charcoal);
  color:#fff;padding:11px 20px;border-radius:8px;font-size:13.5px;opacity:0;pointer-events:none;transition:.2s;z-index:400;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media print{
  .loginwrap,.dashwrap,.modal-overlay,.toast{display:none!important;}
}