@font-face{
  font-family:'Inter';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url('fonts/inter.woff2') format('woff2');
}
:root{
  --bg:#06010f;
  --bg-2:#0b0418;
  --panel:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.13);
  --text:#f3f1ff;
  --soft:rgba(255,255,255,.84);
  --mute:rgba(255,255,255,.72);
  --indigo:#6366f1;
  --violet:#8b5cf6;
  --rose:#ef4444;
  --amber:#f59e0b;
  --cyan:#06b6d4;
  --lime:#10f981;
  --amount-pos:#10f981;  /* balances/totals/indicators: positive */
  --amount-neg:#ff9d9d;  /* balances/totals/indicators: negative */
  --grad:linear-gradient(120deg,#6366f1,#8b5cf6,#ef4444,#f59e0b); /* @kind color */
  /* Brand for ACTIONS: a calm 2-stop indigo→violet (no red/amber). The full --grad is
     reserved for brand moments (logo, active nav highlight) — never plain buttons. Rule:
     one primary action per view; everything else is secondary or ghost. */
  --brand:linear-gradient(135deg,#6366f1,#7c5cf0); /* @kind color */
  --brand-hover:linear-gradient(135deg,#7178f4,#8a6bf5); /* @kind color */
  --font:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* Surfaces / overlays — one fill scale, flipped per theme (was scattered white-overlay literals). */
  --surf-1:rgba(255,255,255,.04);      /* subtle card fills (detail/event/timeline items, public cards) */
  --surf-2:rgba(255,255,255,.06);      /* raised controls, inputs, default buttons, badges */
  --hover:rgba(255,255,255,.09);       /* interactive hover fill */
  --divider:rgba(255,255,255,.08);     /* hairline dividers (nav groups, table cells, panel foot) */
  --border-soft:rgba(255,255,255,.1);  /* softer card border than --border */
  /* Status hues as RGB triplets so one source feeds badges, flash, danger, etc. */
  --ok-rgb:16,249,129;
  --info-rgb:6,182,212;
  --warn-rgb:245,158,11;
  --err-rgb:239,68,68;
  --accent-rgb:139,92,246;
  --brand-rgb:99,102,241;
  /* Radii scale — replaces ad-hoc 6/7/8/10/14/999px literals. */
  --r-sm:6px; --r:8px; --r-lg:10px; --r-xl:14px; --r-pill:999px;
  /* Elevation — shadow-1 subtle raise, shadow-2 popovers/modals */
  --shadow-1:0 1px 2px rgba(0,0,0,.18);
  --shadow-2:0 12px 32px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{overflow-x:hidden}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 18%,rgba(var(--brand-rgb),.24),transparent 32rem),
    radial-gradient(circle at 90% 8%,rgba(var(--err-rgb),.18),transparent 30rem),
    radial-gradient(circle at 54% 90%,rgba(var(--info-rgb),.16),transparent 34rem),
    var(--bg);
  font-family:var(--font);
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit}
button,input,select,textarea{font:inherit;min-width:0}
img,svg{max-width:100%}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(var(--info-rgb),.82);
  outline-offset:3px;
}
.shell{
  width:min(1440px,100%);
  margin:0 auto;
  padding:20px;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:18px;
}
.content{
  display:grid;
  gap:18px;
  align-content:start;
  min-width:0;
}
.sidebar{
  position:sticky;
  top:20px;
  height:calc(100vh - 40px);
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:rgba(6,1,15,.72);
  backdrop-filter:blur(18px);
  padding:14px;
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  padding:8px;
  border-radius:var(--r);
  min-width:0;
}
.brand-mark{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:var(--r-lg);
  background:var(--grad);
  font-weight:800;
}
.brand strong,.brand small{display:block;overflow-wrap:anywhere}
.brand small{color:var(--mute);margin-top:2px}
.nav{
  display:grid;
  align-content:start;
  gap:4px;
  margin-top:14px;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
}
.nav-title{
  display:block;
  padding:0 12px 6px;
  color:var(--cyan);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}
.nav-subtitle{
  margin-top:12px;
  padding-top:14px;
  border-top:1px solid var(--divider);
}
.nav a{
  padding:9px 12px;
  border-radius:var(--r);
  color:var(--soft);
  text-decoration:none;
  font-weight:700;
  min-width:0;
  overflow-wrap:anywhere;
}
.nav a:hover,.nav a.active,.nav a.soft-active{background:var(--hover);color:#fff}
.nav a.active{
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(120deg,rgba(var(--brand-rgb),.26),rgba(var(--info-rgb),.14));
}
/* Collapsible "Settings" sub-section (native <details>): a labelled, divided group inside the nav.
   The <details> stays block-level — display:grid/flex on it breaks the native open/close. The links
   live in an inner grid so they stack like the Work links and hide when the group is collapsed. */
.nav-group{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--divider);
}
.nav-group-items{
  display:grid;
  gap:4px;
  margin-top:4px;
}
/* Author styles beat the UA "hide when closed" rule, so hide the items explicitly when
   collapsed — otherwise the grid stays painted outside the closed <details> box. */
.nav-group:not([open]) .nav-group-items{display:none}
.nav-group>summary.nav-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  list-style:none;
  user-select:none;
  margin:0;
}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary.nav-title::after{
  content:"";
  width:7px;
  height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  opacity:.7;
  transition:transform .15s ease;
  margin-bottom:6px;
}
.nav-group[open]>summary.nav-title::after{transform:rotate(45deg)}
.main{display:grid;gap:18px;min-width:0}
.topbar{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:12px 14px;
  background:rgba(6,1,15,.62);
  backdrop-filter:blur(18px);
}
.topbar-crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0 0 2px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}
.topbar-crumbs a{color:var(--mute);text-decoration:none}
.topbar-crumbs a:hover{color:var(--text);text-decoration:underline}
.topbar-crumbs [aria-current="page"]{color:var(--cyan)}
.topbar-crumbs .crumb-sep{color:var(--mute);opacity:.55;font-weight:600}
.topbar-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.user-menu{
  position:relative;
  display:inline-block;
}
.user-menu-toggle{
  min-height:32px;
  display:flex;
  align-items:center;
  gap:6px;
  border:0;
  border-radius:var(--r-sm);
  padding:5px 8px;
  color:var(--soft);
  background:transparent;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.user-menu-toggle:hover,
.user-menu-toggle[aria-expanded="true"]{
  color:#fff;
  background:var(--surf-2);
}
.topbar-user{
  color:inherit;
  font-size:.8rem;
  line-height:1;
  white-space:nowrap;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.user-menu-caret{
  color:var(--mute);
  flex:0 0 auto;
}
.user-menu-panel{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:20;
  min-width:210px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:var(--r-lg);
  padding:6px;
  background:#1e293b;
  box-shadow:var(--shadow-2);
}
.user-menu-head{
  display:grid;
  gap:2px;
  padding:8px 10px 9px;
  border-bottom:1px solid #334155;
  margin-bottom:6px;
}
.user-menu-head strong{
  color:#fff;
  font-size:.8rem;
  line-height:1.2;
}
.user-menu-head span{
  color:#94a3b8;
  font-size:.75rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.user-menu-panel a,
.user-menu-panel button{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  border:0;
  border-radius:var(--r-sm);
  padding:8px 12px;
  color:#cbd5e1;
  background:transparent;
  font:inherit;
  font-size:.8rem;
  font-weight:700;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.user-menu-panel a:hover,
.user-menu-panel button:hover{
  color:#fff;
  background:#334155;
}
.user-menu-panel form{
  margin:0;
  padding-top:4px;
  border-top:1px solid #334155;
}
.user-menu-panel form button{
  color:#f87171;
}
.user-menu-panel form button:hover{
  background:#3f0f0f;
}
.auth-main{
  width:min(720px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:24px;
  display:grid;
  align-content:center;
  gap:18px;
}
/* Legacy class retained for older markup if any cached view renders it. */
.user-box{
  display:none;
  gap:8px;
  margin-top:18px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surf-1);
}
.user-box strong,.user-box small{display:block}
.user-box small{color:var(--mute)}
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:22px;
  background:var(--panel);
}
.eyebrow{
  margin:0 0 8px;
  color:var(--cyan);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
h1,h2{
  margin:0;
  line-height:1.05;
  letter-spacing:0;
}
h1{font-size:clamp(28px,3.2vw,42px)}
h2{font-size:24px}
.lede,.panel p{color:var(--soft);max-width:104ch}
.record-code{
  display:inline-flex;
  gap:6px;
  align-items:center;
  margin:10px 0 0;
  color:var(--mute);
  font-size:13px;
  font-weight:800;
}
.record-code strong{
  color:var(--cyan);
  letter-spacing:0;
}
.record-link{
  color:var(--cyan);
  font-weight:800;
  text-decoration:none;
}
.record-link:hover{text-decoration:underline}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
}
/* Monthly summary: 3 columns (income / expense / net) × rows for actual, committed,
   variance — wider cards so larger amounts fit. */
.month-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat,.panel{
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--panel);
  backdrop-filter:blur(18px);
}
.stat{padding:8px 10px;min-width:0}
.stat span{display:block;color:var(--mute);font-size:11px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.stat strong{display:block;margin-top:3px;font-size:18px;line-height:1.05;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.stat-link{
  display:inline-block;
  margin-top:12px;
  color:var(--cyan);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}
.panel{padding:18px}
.panel-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}
/* Collapsible panels (.panel.js-collapsible): a labelled toggle BAR (injected after the head) folds
   the list away — "Show N entries ▾" / "Hide entries ▴", so a hidden list is obvious. Processed
   sections can default collapsed (server adds .collapsed); state persists per panel. Empty sections
   are not made collapsible (the normal empty message shows instead). */
.panel-toggle{
  width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 12px;
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--surf-1);color:var(--soft);cursor:pointer;
  font-family:inherit;font-weight:600;font-size:13px;
}
.panel-toggle:hover{background:var(--hover);color:var(--text)}
.panel-toggle::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .15s ease;
}
.panel.js-collapsible:not(.collapsed) .panel-toggle::after{transform:translateY(2px) rotate(-135deg)}
.panel.js-collapsible:not(.collapsed) .panel-toggle{margin-bottom:14px}
.panel.js-collapsible.collapsed > .panel-head{margin-bottom:14px}
.panel.js-collapsible.collapsed > :not(.panel-head):not(.panel-toggle){display:none}
/* Tabs (sub-pages): for multi-section pages where pagination would break running totals/balances —
   organise into tabs instead of one long scroll. Active tab persists in the URL hash. */
/* Segmented control: a visible holder (filled bar) with a clearly highlighted active tab. */
/* Underline tabs: a strip with a baseline the content sits under, active tab marked by a brand
   underline (not a filled pill) so tabs read as navigation, not action buttons. */
.tab-bar{display:flex;flex-wrap:wrap;gap:2px;max-width:100%;margin:0 0 16px;border-bottom:2px solid var(--border)}
.tab{
  appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-2px;
  color:var(--mute);font:inherit;font-weight:600;padding:9px 16px;cursor:pointer;border-radius:var(--r-sm) var(--r-sm) 0 0;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
}
.tab:hover{color:var(--text);background:var(--panel-2)}
.tab.active{color:var(--brand);background:transparent;border-bottom-color:var(--brand);font-weight:700}
.tab-panel[hidden]{display:none}
.actions,.row-actions,.form-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.button{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:9px 13px;
  background:var(--surf-2);
  color:var(--text);
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
  text-align:center;
  max-width:100%;
  white-space:normal;
  line-height:1.2;
}
.button:hover{background:var(--hover)}
.button:disabled,button:disabled{opacity:.45;cursor:not-allowed}
.button:disabled:hover,button:disabled:hover{background:var(--surf-2)}
/* Hierarchy: .primary (one per view) > default (secondary) > .ghost (tertiary). */
.button.primary{background:var(--brand);border-color:transparent;color:#fff}
.button.primary:hover{background:var(--brand-hover)}
.button.ghost{background:transparent;border-color:transparent;color:var(--soft);font-weight:700}
.button.ghost:hover{background:var(--hover)}
.button.danger{color:#ffd7d7;border-color:rgba(var(--err-rgb),.28)}
.button.ghost.danger{color:#ff9d9d}
.button.ghost.danger:hover{background:rgba(var(--err-rgb),.12)}
.button.small{min-height:40px;padding:8px 10px;font-size:12px}

/* Row overflow menu (§11): one inline action + a "⋯" trigger that opens a fixed-position
   popover (fixed so the table's overflow can't clip it). JS in layout.php positions it. */
.row-menu{position:relative;display:inline-flex}
.row-menu-trigger{min-height:20px;min-width:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--r);background:var(--surf-2);color:var(--soft);cursor:pointer;font-weight:800;font-size:18px;line-height:1;letter-spacing:1px}
.row-menu-trigger:hover,.row-menu-trigger[aria-expanded="true"]{background:var(--hover)}
.row-menu-list{position:fixed;z-index:60;min-width:172px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.row-menu-list form{width:100%;margin:0}
.row-menu-item{display:block;width:100%;text-align:left;padding:9px 11px;border:0;border-radius:var(--r);background:transparent;color:var(--soft);font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.row-menu-item:hover{background:var(--hover)}
.row-menu-item.danger{color:#ff9d9d}
.row-menu-item.danger:hover{background:rgba(var(--err-rgb),.14)}

/* Modal dialog (native <dialog>): centered card + dimmed backdrop. */
dialog.modal{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-2);color:var(--text);padding:0;max-width:min(440px,92vw);width:100%;box-shadow:var(--shadow-2)}
dialog.modal::backdrop{background:rgba(2,1,10,.64)}
.modal-card{padding:20px;display:flex;flex-direction:column;gap:12px}
.modal-card h2{margin:0;font-size:18px}
.modal-sub{margin:0;color:var(--soft);font-weight:700}
.modal-card textarea{width:100%}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
.flash{
  border:1px solid rgba(var(--ok-rgb),.3);
  background:rgba(var(--ok-rgb),.1);
  color:#c7ffdf;
  border-radius:var(--r);
  padding:12px 14px;
}
.action-link{
  display:grid;
  gap:8px;
}
.action-link span{
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
}
.action-link code{overflow-wrap:anywhere}
.form-note{
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:12px;
  color:var(--soft);
  background:var(--surf-1);
}
.timeline-note-form{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}
.timeline{
  display:grid;
  gap:10px;
}
.timeline-item{
  border:1px solid var(--border-soft);
  border-radius:var(--r);
  padding:12px;
  background:var(--surf-1);
}
.timeline-item p{margin:8px 0 0}
.timeline-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--mute);
  font-size:12px;
  font-weight:800;
}
.stage-pipeline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.stage-step{
  min-height:40px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:7px 11px;
  background:var(--surf-2);
  color:var(--soft);
  font-weight:800;
  cursor:pointer;
}
.stage-step:hover{background:var(--hover);color:#fff}
.stage-step.active{
  color:#fff;
  border-color:transparent;
  background:var(--grad);
}
.stage-settings-table input{
  min-width:120px;
}
.stage-settings-table .compact-input{
  width:90px;
  min-width:90px;
}
.inline-check{
  display:flex;
  align-items:center;
  grid-template-columns:none;
  gap:8px;
  min-height:42px;
}
.inline-check input{
  width:18px;
  min-height:18px;
  accent-color:var(--lime);
}
.share-field{
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:14px;
}
.share-field legend{
  padding:0 6px;
  font-weight:900;
}
.share-field p{
  margin:0 0 12px;
  color:var(--mute);
}
.check-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:8px;
}
.stage-create-form{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--divider);
}
.email-template-list{
  display:grid;
  gap:8px;
}
.template-editor{
  border:1px solid var(--border-soft);
  border-radius:var(--r-lg);
  background:var(--surf-1);
}
.template-editor>summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
}
.template-editor>summary::-webkit-details-marker{display:none}
.template-editor>summary::after{content:"▾";color:var(--mute);flex:0 0 auto;font-size:12px}
.template-editor[open]>summary::after{content:"▴"}
.template-editor>summary:hover{color:var(--text)}
.template-editor-title{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex-wrap:wrap;
}
.template-editor-title strong{font-size:15px}
.template-editor-body{
  display:grid;
  gap:12px;
  padding:4px 14px 14px;
}
/* A closed <details> child with an explicit display can leak open in some browsers — force it shut. */
.template-editor:not([open]) .template-editor-body{display:none}
/* Template category groups (collapsed by default) — scan a few headers instead of every template. */
.template-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 2px;font-weight:500;font-size:15px}
.template-group>summary::-webkit-details-marker{display:none}
.template-group>summary::after{content:"▾";color:var(--mute);margin-left:auto;font-size:12px}
.template-group[open]>summary::after{content:"▴"}
.template-group>summary:hover{color:var(--text)}
.template-group-count{color:var(--mute);font-weight:400;font-size:13px}
.template-group-body{display:grid;gap:8px;padding:0 0 10px 12px}
.template-group:not([open]) .template-group-body{display:none}
.auth-card{
  width:min(560px,100%);
  margin:8vh auto;
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:26px;
  background:var(--panel);
  backdrop-filter:blur(18px);
}
.public-portfolio-body{
  min-height:100vh;
}
.public-portfolio{
  width:min(1120px,100%);
  margin:0 auto;
  padding:24px;
  display:grid;
  gap:18px;
}
.public-hero{
  min-height:56vh;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:32px;
  background:
    linear-gradient(120deg,rgba(6,1,15,.2),rgba(6,1,15,.7)),
    radial-gradient(circle at 78% 20%,rgba(var(--ok-rgb),.2),transparent 24rem),
    var(--panel);
  backdrop-filter:blur(18px);
}
.public-hero h1{
  max-width:780px;
  font-size:clamp(34px,6vw,64px);
}
.public-headline{
  max-width:760px;
  color:var(--soft);
  font-size:22px;
  font-weight:700;
}
.public-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.public-meta span{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:5px 9px;
  color:var(--soft);
  font-size:12px;
  font-weight:800;
}
.public-contact{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.public-section{
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px;
  background:var(--surf-2);
  backdrop-filter:blur(18px);
}
.public-section > p{
  color:var(--soft);
  max-width:820px;
}
.public-section-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
}
.public-project-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.public-card{
  border:1px solid var(--border-soft);
  border-radius:var(--r);
  padding:16px;
  background:var(--surf-1);
}
.public-card h3{
  margin:10px 0 6px;
  font-size:21px;
  line-height:1.15;
}
.public-card,.public-section,.panel,.stat,.page-head,.topbar,.auth-card,.timeline-item,.template-editor{
  min-width:0;
}
.public-card p,.panel p,.lede,.empty,.muted,td,th,label,code{
  overflow-wrap:anywhere;
}
.public-card p{
  color:var(--soft);
}
.public-card-subtitle{
  margin:0;
  color:#fff;
  font-weight:800;
}
.public-project-card{
  display:grid;
  gap:14px;
}
.public-project-card img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:var(--r);
  border:1px solid var(--border-soft);
  background:var(--surf-2);
}
.public-skill-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.public-skill{
  display:grid;
  gap:3px;
  border:1px solid var(--border-soft);
  border-radius:var(--r);
  padding:12px;
  background:var(--surf-1);
}
.public-skill span,.public-skill small{
  color:var(--mute);
  font-size:12px;
  font-weight:800;
}
.public-timeline{
  display:grid;
  gap:12px;
}
.login-form{
  display:grid;
  gap:14px;
  margin-top:22px;
}
.empty{color:var(--mute)}
.table-wrap{overflow:auto}
/* Dashboard "recent" widgets: a quiet right-aligned footer linking to the full lists. */
.panel-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.panel-foot a{color:var(--soft);font-weight:700;font-size:13px;text-decoration:none}
.panel-foot a:hover{color:var(--text)}
/* Report account trees: indent leaves by depth; parent rows (with a subtotal) read as headers. */
.coa-acct{display:inline-block;padding-left:calc(var(--coa-depth, 0) * 18px)}
.coa-group-row td{font-weight:700}
/* Shared pagination control (list pages): size selector + status + page links. */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.pagination-size{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pagination-show{display:inline-flex;align-items:center;gap:6px;color:var(--mute);font-size:13px;margin:0}
.pagination-show select{width:auto;min-height:34px;padding:4px 26px 4px 8px}
.pagination-status{color:var(--mute);font-size:13px}
.pagination-nav{display:flex;flex-wrap:wrap;gap:4px}
.pagination-nav .button.small{min-width:36px;justify-content:center}
.pagination-nav [aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.pagination-nav [aria-current="page"]{pointer-events:none}
.check-col{width:1%;white-space:nowrap;text-align:center}
.check-col input{cursor:pointer;width:16px;height:16px}
td.row-actions{display:table-cell;white-space:nowrap}
/* Grouped section tables (monthly review): clear column heads, a group header row that
   carries the group name + its subtotal, and a section-net footer. */
td.num{text-align:right;white-space:nowrap}
th.num{text-align:right}
thead th{vertical-align:middle;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:11px;font-weight:800;color:var(--mute);padding:10px 12px 8px}
.col-date{white-space:nowrap}
.col-wrap{white-space:normal;word-break:break-word;max-width:34ch}
table.grouped{min-width:0}
tbody td{padding-top:4px;padding-bottom:4px}
table.grouped thead th{font-size:11px;font-weight:800;color:var(--mute);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:10px 12px 8px}
table.grouped tr.group-row th{background:var(--panel);text-align:left;font-size:13px;font-weight:800;color:var(--text);padding:9px 12px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
table.grouped tr.group-row .group-sub{color:var(--mute);font-weight:700}
tr.empty-row td{color:var(--mute);font-style:italic}
table.grouped tfoot td{border-top:2px solid var(--border);font-weight:800;font-size:14px;padding-top:12px}
.section-net{font-weight:800}
.section-net.pos,.amount-pos{color:var(--amount-pos)}
.section-net.neg,.amount-neg{color:var(--amount-neg)}
.check-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.check-list li{display:flex;gap:10px;align-items:flex-start;color:var(--soft)}
.check-list .ck{flex:0 0 auto;font-weight:800}
.check-list .ck.ok{color:var(--lime)}
.check-list .ck.no{color:#ffb27a}
table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
th,td{
  padding:12px;
  border-bottom:1px solid var(--divider);
  text-align:left;
  vertical-align:middle;
  overflow-wrap:break-word;
}
th{
  color:var(--mute);
  font-size:12px;
  letter-spacing:.06em;
}
.badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:4px 8px;
  color:var(--soft);
  font-size:12px;
  font-weight:800;
  line-height:1.15;
  background:var(--surf-2);
}
.badge-status-paid,
.badge-status-active,
.badge-status-accepted,
.badge-status-completed,
.badge-status-shortlisted,
.badge-status-offer,
.badge-status-featured,
.badge-stage-offer,
.badge-priority-low{
  color:#c8ffe1;
  border-color:rgba(var(--ok-rgb),.34);
  background:rgba(var(--ok-rgb),.14);
}
.badge-status-interesting,
.badge-status-in-progress,
.badge-status-sent,
.badge-status-applied,
.badge-stage-applied,
.badge-stage-screening,
.badge-event-email,
.badge-event-call,
.badge-event-note,
.badge-event-admin-notification,
.badge-type-application,
.badge-type-opportunity,
.badge-type-course{
  color:#c7f5ff;
  border-color:rgba(var(--info-rgb),.36);
  background:rgba(var(--info-rgb),.14);
}
.badge-status-partial,
.badge-priority-medium,
.badge-status-planned,
.badge-status-researching,
.badge-status-invited,
.badge-stage-draft,
.badge-event-task,
.badge-event-field-changed,
.badge-event-password-reset-generated,
.badge-event-invite-generated{
  color:#ffefbf;
  border-color:rgba(var(--warn-rgb),.38);
  background:rgba(var(--warn-rgb),.15);
}
.badge-priority-high,
.badge-event-interview,
.badge-event-follow-up,
.badge-event-deadline,
.badge-event-reminder,
.badge-event-request{
  color:#ffe0c2;
  border-color:rgba(var(--warn-rgb),.48);
  background:rgba(var(--warn-rgb),.2);
}
.badge-status-overdue,
.badge-status-rejected,
.badge-status-dropped,
.badge-status-inactive,
.badge-stage-rejected,
.badge-status-failed,
.badge-event-error{
  color:#ffd7d7;
  border-color:rgba(var(--err-rgb),.42);
  background:rgba(var(--err-rgb),.15);
}
.badge-status-archived,
.badge-status-paused,
.badge-status-withdrawn,
.badge-stage-withdrawn,
.badge-status-skipped,
.badge-role-admin,
.badge-role-user{
  color:#ded9ff;
  border-color:rgba(var(--accent-rgb),.34);
  background:rgba(var(--accent-rgb),.14);
}
.muted{
  display:block;
  color:var(--mute);
  margin-top:4px;
  font-size:12px;
}
.field-note{
  display:block;
  color:var(--mute);
  margin-top:2px;
  font-size:12px;
  font-weight:400;
}
.base-amount-hint{display:block;margin-top:6px;font-size:13px;font-weight:800;color:var(--soft)}
.base-amount-hint:empty{display:none}
/* Field help: a "?" after a label opens a floating bubble with on-demand help. */
.field-help{position:relative;display:inline-flex;vertical-align:middle;margin-left:4px}
.field-help-btn{
  width:16px;height:16px;flex:none;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--surf-2);color:var(--mute);
  font:800 11px/1 var(--font);cursor:pointer;
}
.field-help-btn:hover{color:var(--text);border-color:var(--border-soft)}
.field-help-btn[aria-expanded="true"]{color:var(--cyan);border-color:var(--cyan)}
.help-bubble{
  position:absolute;z-index:50;top:24px;left:0;
  width:min(300px,78vw);
  padding:10px 12px;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow-2);
  color:var(--text);font:400 13px/1.6 var(--font);
  text-align:left;white-space:normal;cursor:default;
}
.help-bubble strong{display:block;margin-bottom:4px;font-weight:800}
.help-bubble .help-b{display:block;position:relative;padding-left:14px;margin-top:6px}
.help-bubble .help-b::before{content:"\2022";position:absolute;left:3px;color:var(--mute)}
.help-bubble .help-note{display:block;margin-top:8px;color:var(--mute)}
tr.row-inactive td{opacity:.55}
tr.row-inactive td.row-actions{opacity:1}
.coa-group{border:1px solid var(--border);border-radius:var(--r);background:var(--panel);overflow:hidden}
.coa-group>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 16px;cursor:pointer;list-style:none;font-weight:800}
.coa-group>summary::-webkit-details-marker{display:none}
.coa-group>summary::before{content:"\25B8";font-size:11px;color:var(--mute);transition:transform .15s ease}
.coa-group[open]>summary::before{transform:rotate(90deg)}
.coa-group>summary:hover{background:var(--panel-2)}
.coa-root-code{color:var(--mute);font-variant-numeric:tabular-nums}
.coa-root-name{flex:1;min-width:0}
.coa-root-count{color:var(--mute);font-size:12px;font-weight:600;white-space:nowrap}
.coa-group .table-wrap{margin:0;border-top:1px solid var(--border)}
.coa-group>.empty{padding:13px 16px;margin:0}
.locked-field{display:flex;gap:8px;align-items:center}
.locked-field>select,.locked-field>input{flex:1;min-width:0}
.lock-edit{flex:none;width:38px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--r);background:var(--panel);color:var(--mute);cursor:pointer}
.lock-edit:hover{color:var(--text)}
.more-options{grid-column:1 / -1;border-top:1px solid var(--border);padding-top:6px}
.more-options>summary{cursor:pointer;list-style:none;font-weight:800;color:var(--mute);padding:8px 0;display:inline-flex;align-items:center;gap:8px}
.more-options>summary::-webkit-details-marker{display:none}
.more-options>summary::before{content:"\25B8";font-size:11px;transition:transform .15s ease}
.more-options[open]>summary::before{transform:rotate(90deg)}
.more-options>.form-grid{margin-top:12px}
.month-switcher{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:10px;margin-bottom:18px}
.month-nav{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--panel);color:var(--mute);text-decoration:none}
.month-nav:hover{color:var(--text);background:var(--panel-2)}
.month-nav.next{align-items:flex-end;text-align:right}
.month-nav-dir{font-size:11px;font-weight:800}
.month-nav-label{font-size:14px;font-weight:800}
.month-current{display:flex;align-items:center;justify-content:center;padding:10px 28px;border:1px solid var(--violet);border-radius:var(--r);background:var(--panel-2)}
.month-current-label{font-size:19px;font-weight:800;color:var(--text)}
@media (max-width:560px){
  .month-current{padding:10px 12px}
  .month-current-label{font-size:15px}
  .month-nav{padding:10px 12px}
  .month-nav-label{font-size:12px}
  .month-nav-dir{font-size:10px}
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px 16px;
  align-items:start; /* cells size to content + top-align, so inputs line up across a row even
                        when one field carries a note or a longer label underneath */
}
/* Field span on a 12-col grid. Default is half-width; short fields auto-size to a compact
   span by their control type (via :has) so small values don't get long boxes — this covers
   bespoke and config-driven forms with no per-field markup. .field-* are explicit escape
   hatches; .wide / a textarea span the full row. Collapses to one column on small screens. */
.form-grid > label{grid-column:span 6}
.form-grid > label:has(.js-money),
.form-grid > label:has(.js-base-amount),
.form-grid > label:has(.js-currency-select),
.form-grid > label:has(.js-pay-via),
.form-grid > label:has(.date-picker),
.form-grid > label:has(input[type="number"]){grid-column:span 3}
.form-grid > label:has(textarea),
.form-grid > .wide{grid-column:1 / -1}
.form-grid > .field-sm{grid-column:span 3}
.form-grid > .field-md{grid-column:span 4}
.form-grid > .field-lg{grid-column:span 6}
.form-grid > .field-xl{grid-column:span 8}
/* A group of related fields kept together on their own line (e.g. the money block:
   Amount · Currency · [Exchange rate] · Amount in base). Flexbox so widths can differ and
   still fill the row with no gaps: fields grow equally by default; .field-narrow (the rate)
   is slimmer and .field-wide (amount in base) grows more so its note fits on one line.
   Wraps on small screens. */
.form-grid > .field-row{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:14px 16px;
  align-items:start;
}
.field-row > label{flex:1 1 150px;min-width:0}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.detail-item{
  display:grid;
  gap:6px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surf-1);
  min-width:0;
}
.detail-item.wide{grid-column:1/-1}
.detail-item span{
  color:var(--mute);
  font-size:12px;
  font-weight:800;
}
.detail-item strong{
  color:var(--soft);
  font-size:14px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.event-list{
  display:grid;
  gap:10px;
}
.event-item{
  display:grid;
  gap:6px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surf-1);
}
.event-item div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.event-item strong{color:var(--soft)}
.event-item span{color:var(--cyan);font-size:13px;font-weight:800}
.event-item p{margin:0}
.setup-steps{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.setup-steps li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surf-1);
}
.setup-steps li > div{min-width:0}
.setup-steps strong{color:var(--soft);display:block}
.setup-steps p{margin:4px 0 0;color:var(--mute);font-size:13px}
.setup-steps .step-done{color:var(--lime);font-weight:800;font-size:13px}
.setup-steps .step-wait{color:var(--mute);font-size:13px}
.rate-cell{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
/* An explicit display (.button / .rate-edit-form / label{display:grid}) would otherwise
   defeat [hidden]; enforce the HTML semantic globally. */
[hidden]{display:none !important}
.list-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.list-toolbar-label{color:var(--mute);font-size:12px;font-weight:800}
.list-toolbar-field{display:flex;align-items:center;gap:8px;margin:0}
.list-toolbar-field > span{color:var(--mute);font-size:12px;font-weight:800}
.list-toolbar select{width:auto;min-width:130px}
.list-toolbar input[type=search]{width:auto;flex:1 1 220px;min-width:0}
.list-toolbar input[type=date]{width:auto;min-width:0}
/* A readonly field that a pencil button unlocks for editing (e.g. a bank account's opening balance). */
.field-lock{display:flex;gap:8px;align-items:stretch}
.field-lock input{flex:1 1 auto;min-width:0}
.field-lock-toggle{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;background:transparent;border:1px solid var(--border);border-radius:var(--r-lg);color:var(--mute);cursor:pointer}
.field-lock-toggle:hover{color:var(--text);border-color:var(--cyan)}
/* Plain-text email preview (partner notification review). */
.email-preview{white-space:pre-wrap;word-break:break-word;font:13px/1.6 ui-monospace,"SF Mono",Menlo,Consolas,monospace;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;margin:0 0 16px;color:var(--soft);overflow-x:auto}
.rate-edit{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--panel);color:var(--mute);cursor:pointer;
}
.rate-edit:hover{color:var(--text);border-color:rgba(255,255,255,.24)}
.rate-edit:focus-visible{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(var(--info-rgb),.12)}
.rate-edit-form{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.rate-edit-form input[name=rate]{width:140px}
.date-picker{
  position:relative;
  display:block;
}
.date-picker .js-date-display{
  padding-right:44px;
}
.date-picker .js-date-native{
  position:absolute;
  right:0;
  bottom:0;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.date-picker-button{
  position:absolute;
  right:6px;
  top:50%;
  width:32px;
  height:32px;
  min-height:32px;
  transform:translateY(-50%);
  border:0;
  border-left:1px solid var(--border);
  background:transparent;
  color:var(--cyan);
  cursor:pointer;
}
.date-picker-button::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:15px;
  height:14px;
  transform:translate(-50%,-45%);
  border:2px solid currentColor;
  border-radius:3px;
}
.date-picker-button::after{
  content:"";
  position:absolute;
  left:50%;
  top:9px;
  width:11px;
  height:2px;
  transform:translateX(-50%);
  background:currentColor;
  box-shadow:-4px -3px 0 -1px currentColor,4px -3px 0 -1px currentColor;
}
.date-picker-button:hover{color:var(--soft)}
.date-picker-button:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
label{display:grid;gap:7px;color:var(--mute);font-size:12px;font-weight:800}
label span{letter-spacing:.05em}
label small{color:var(--mute);font-weight:600;line-height:1.4;text-transform:none;letter-spacing:0}
.check-field{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:10px 0;
}
.check-field input{width:18px;min-height:18px;accent-color:var(--lime)}
input,select,textarea{
  width:100%;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:rgba(6,1,15,.58);
  color:var(--text);
  padding:10px 11px;
  outline:none;
}
textarea{resize:vertical}
/* Auto-growing textarea: starts one line, grows to fit its content (JS sets the height). */
textarea.js-autogrow{resize:none;overflow:hidden}
/* Inline "(optional)" marker that stays on the label line (unlike .muted, which is block). */
.field-optional{font-weight:600;color:var(--mute);font-size:11px;letter-spacing:0}
/* Searchable select (combobox): a filter input over a floating option list. */
.combo{position:relative}
.combo-input{width:100%}
.combo-list{
  position:absolute;z-index:50;top:calc(100% + 4px);left:0;right:0;
  margin:0;padding:4px;list-style:none;max-height:240px;overflow:auto;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-2);
}
.combo-option,.combo-empty{padding:8px 10px;border-radius:var(--r-sm);font-size:14px}
.combo-option{cursor:pointer}
.combo-option:hover,.combo-option.active{background:var(--hover)}
.combo-empty{color:var(--mute);cursor:default}
/* Searchable native <select> (enhanced in place — the real select stays the source of truth,
   visually hidden, while this overlay provides type-to-filter). */
.ss{position:relative;flex:1 1 auto;min-width:0}
.locked-field>.ss{flex:1}
.ss-native{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.ss-input{width:100%}
.ss-disabled .ss-input{opacity:.6;cursor:not-allowed;background:rgba(6,1,15,.32)}
.ss-list{
  position:absolute;z-index:50;top:calc(100% + 4px);left:0;right:0;
  margin:0;padding:4px;list-style:none;max-height:240px;overflow:auto;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-2);
}
.ss-option{padding:8px 10px;border-radius:var(--r-sm);font-size:14px;cursor:pointer}
.ss-option:hover,.ss-option.active{background:var(--hover)}
/* Touch devices: comfortable tap targets for the searchable-dropdown rows, the "?" help and
   the row "⋯" trigger (kept compact on mouse/pointer-fine devices). */
@media (pointer:coarse){
  .combo-option,.combo-empty,.ss-option,.row-menu-item{min-height:44px;display:flex;align-items:center}
  .field-help-btn{width:24px;height:24px;font-size:13px}
  .row-menu-trigger{min-height:36px;min-width:36px}
}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(var(--info-rgb),.12)}
input:disabled,select:disabled,textarea:disabled{opacity:.6;cursor:not-allowed;background:rgba(6,1,15,.32)}
/* A locked (readonly) rate field reads the same as a locked currency field — it still
   submits its value, the pencil unlocks it for a manual override. */
input.js-rate[readonly]{opacity:.6;cursor:not-allowed;background:rgba(6,1,15,.32)}
.inline-amount{max-width:130px;min-height:36px;padding:6px 9px;display:inline-block;text-align:right}
.wide{grid-column:1 / -1}
code{
  padding:2px 6px;
  border-radius:var(--r-sm);
  background:var(--hover);
}
/* App shell: the sidebar is a fixed column on desktop and an off-canvas drawer on mobile
   (toggled by the topbar hamburger). The Career/Finance toggle lives at the sidebar top. */
.topbar-lead{display:flex;align-items:center;gap:12px;min-width:0}
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--surf-1);color:var(--text);cursor:pointer;
}
.nav-toggle:hover{background:var(--hover)}
.sidebar .module-toggle{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px}
.sidebar .module-toggle .button{width:100%;justify-content:center}
.sidebar .admin-zone{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:7px 11px;border:1px solid var(--border);border-radius:var(--r);background:var(--surf-2);color:var(--soft);font-size:12px;font-weight:700}
.sidebar .admin-zone svg{color:rgb(var(--brand-rgb));flex:0 0 auto}
.nav-backdrop{display:none}

@media (max-width:980px){
  .shell{grid-template-columns:1fr;padding:16px}
  .nav-toggle{display:inline-flex}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;
    width:min(280px,84vw);height:100%;
    border:0;border-right:1px solid var(--border);border-radius:0;
    z-index:60;overflow-y:auto;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:var(--shadow-2);
  }
  .shell.nav-open .sidebar{transform:translateX(0)}
  .nav-backdrop{
    display:block;position:fixed;inset:0;z-index:55;
    background:rgba(2,0,8,.55);backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;
  }
  .shell.nav-open .nav-backdrop{opacity:1;visibility:visible}
  .nav{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
  .month-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .shell{padding:10px;gap:12px}
  .content,.main{gap:12px}
  .sidebar{padding:10px}
  .brand{padding:6px}
  .brand-mark{width:36px;height:36px;border-radius:var(--r);flex:0 0 auto}
  .nav{gap:5px;margin-top:12px}
  .nav a{padding:10px;font-size:13px}
  .nav-title{padding:0 10px 4px}
  .auth-main{padding:14px;align-content:start}
  .auth-card{margin:2vh auto;padding:18px}
  .panel,.page-head,.topbar,.public-section{padding:14px}
  .public-portfolio{padding:12px;gap:12px}
  .actions,.form-actions{justify-content:flex-start;width:100%}
  .actions .button,.form-actions .button,.form-actions a{width:100%}
  h1{font-size:30px;line-height:1.08}
  h2{font-size:21px}
  .lede{font-size:14px}
  .stat{padding:9px}
  .stat strong{font-size:17px}
  .button{width:100%}
  .button.small{min-height:40px}
  .public-hero{min-height:auto;align-items:flex-start;flex-direction:column;padding:18px}
  .public-hero h1{font-size:clamp(34px,10vw,48px)}
  .public-headline{font-size:18px}
  .public-contact{justify-content:flex-start}
  .public-contact .button{width:auto}
  .public-project-grid,.public-skill-list{grid-template-columns:1fr}
  .page-head,.panel-head{align-items:flex-start;flex-direction:column}
  .panel-head .button,.page-head .button{width:100%}
  .nav,.stats-grid,.form-grid,.detail-grid{grid-template-columns:1fr}
  .form-grid > .field-row{flex-direction:column}
  .field-row > label{flex-basis:auto}
  /* Help bubble: on narrow screens anchor it to the field (not the inline "?") so it spans the
     field width and can't clip the screen edge. */
  .form-grid label:has(.field-help){position:relative}
  .form-grid label:has(.field-help) .field-help{position:static}
  .form-grid label:has(.field-help) .help-bubble{left:0;right:0;width:auto}
  .stage-pipeline{display:grid;grid-template-columns:1fr;gap:8px}
  .stage-pipeline form,.stage-step{width:100%}
  .template-editor-head{flex-direction:column}
  .template-editor .inline-check{width:100%}
  .table-wrap{overflow:visible}
  table{min-width:0}
  table,thead,tbody,tr,th,td{display:block}
  thead{display:none}
  tr{
    border:1px solid var(--border-soft);
    border-radius:var(--r);
    margin-bottom:10px;
    background:var(--surf-1);
    overflow:hidden;
  }
  td{
    display:grid;
    grid-template-columns:minmax(100px,42%) minmax(0,1fr);
    align-items:start;
    gap:14px;
    border-bottom:1px solid var(--divider);
    padding:10px;
    min-width:0;
  }
  td:last-child{border-bottom:0}
  td::before{
    content:attr(data-label);
    color:var(--mute);
    font-size:12px;
    font-weight:800;
    min-width:0;
  }
  td.check-col:empty,td.row-actions:empty,td.num:empty{display:none}
  td.check-col{display:flex;align-items:center;gap:10px}
  td.row-actions{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
    justify-content:stretch;
  }
  td.row-actions::before{grid-column:1}
  td.row-actions .button,td.row-actions form,td.row-actions button,td form .button{width:100%}
  .row-menu-trigger{min-height:40px;min-width:40px}
  td form{width:100%}
}
@media (max-width:420px){
  .shell{padding:8px}
  .nav a{font-size:12px;padding:9px}
  .panel,.page-head,.topbar,.public-section,.auth-card{padding:12px}
  h1{font-size:27px}
  .public-hero h1{font-size:34px}
  td{grid-template-columns:1fr;gap:6px}
  td::before{display:block}
  .public-meta span{width:100%;justify-content:center}
}

/* ============================================================================
   Light theme for ManagerDS / Bawtag app
   ----------------------------------------------------------------------------
   PASTE THIS BLOCK AT THE END of design-system/styles.css
   (and mirror it into public/assets/app.css — they are the same file deployed).

   Activated by  <html data-theme="light">.  Absence of the attribute, or
   data-theme="dark", keeps the shipped dark theme — no change to current
   behaviour. See repo-patch/README.md for the toggle button + no-flash script.

   How it works: the shipped CSS bakes tokens dark in :root and hardcodes white
   overlays (rgba(255,255,255,.0x)) and near-black surfaces in many rules. This
   block (a) redefines the tokens for light and (b) re-states every hardcoded
   color with a dark-on-light equivalent.
   ============================================================================ */

:root[data-theme="light"]{
  --bg:#f3f1fa;
  --bg-2:#ffffff;
  --panel:rgba(20,16,48,.04);
  --panel-2:rgba(20,16,48,.07);
  --border:rgba(20,16,48,.12);
  --text:#191430;
  --soft:rgba(25,20,48,.80);
  --mute:rgba(25,20,48,.56);
  --amount-pos:#15803d;  /* darker green/red for legibility on the light surface */
  --amount-neg:#dc2626;
  /* accent hues (indigo/violet/cyan/amber/rose/lime) read on light — unchanged */
  /* Surface scale flips dark-on-light; most per-rule light overrides below become redundant. */
  --surf-1:rgba(20,16,48,.035);
  --surf-2:rgba(20,16,48,.05);
  --hover:rgba(20,16,48,.09);
  --divider:rgba(20,16,48,.08);
  --border-soft:rgba(20,16,48,.1);
  /* Softer elevation on the light base */
  --shadow-1:0 1px 2px rgba(20,16,48,.1);
  --shadow-2:0 12px 32px rgba(20,16,48,.18);
}

/* Body backdrop: same colored glows, lower alpha so they read on a light base */
:root[data-theme="light"] body{
  background:
    radial-gradient(circle at 16% 18%,rgba(var(--brand-rgb),.14),transparent 32rem),
    radial-gradient(circle at 90% 8%,rgba(var(--accent-rgb),.10),transparent 30rem),
    radial-gradient(circle at 54% 90%,rgba(var(--info-rgb),.10),transparent 34rem),
    var(--bg);
}

/* Frosted shells that hardcode a near-black fill */
:root[data-theme="light"] .sidebar{background:rgba(255,255,255,.70)}
:root[data-theme="light"] .topbar{background:rgba(255,255,255,.62)}

/* Sidebar nav */
:root[data-theme="light"] .nav a:hover,
:root[data-theme="light"] .nav a.active,
:root[data-theme="light"] .nav a.soft-active{background:rgba(20,16,48,.06);color:var(--text)}
:root[data-theme="light"] .nav a.active{
  border-color:rgba(var(--brand-rgb),.28);
  background:linear-gradient(120deg,rgba(var(--brand-rgb),.16),rgba(var(--info-rgb),.10));
}

/* Topbar user menu trigger (the menu popover itself stays dark slate — fine) */
:root[data-theme="light"] .user-menu-toggle:hover,
:root[data-theme="light"] .user-menu-toggle[aria-expanded="true"]{color:var(--text);background:rgba(20,16,48,.06)}

/* Buttons — keep .primary (brand gradient) and .ghost (transparent) intact */
:root[data-theme="light"] .button:not(.primary):not(.ghost){background:rgba(20,16,48,.05)}
:root[data-theme="light"] .button:not(.primary):not(.ghost):hover{background:rgba(20,16,48,.09)}
:root[data-theme="light"] .button:disabled:hover,
:root[data-theme="light"] button:disabled:hover{background:rgba(20,16,48,.05)}
:root[data-theme="light"] .button.ghost:hover{background:rgba(20,16,48,.06)}
:root[data-theme="light"] .button.danger{color:#b3261e}
:root[data-theme="light"] .button.ghost.danger{color:#c0352c}

/* Row overflow menu */
:root[data-theme="light"] .row-menu-trigger{background:rgba(20,16,48,.05)}
:root[data-theme="light"] .row-menu-trigger:hover,
:root[data-theme="light"] .row-menu-trigger[aria-expanded="true"]{background:rgba(20,16,48,.10)}
:root[data-theme="light"] .row-menu-item:hover{background:rgba(20,16,48,.07)}

/* Flash / notices */
:root[data-theme="light"] .flash{color:#0a7d4a}

/* Misc card-ish surfaces with white overlays */
:root[data-theme="light"] .setup-steps li{background:rgba(20,16,48,.035)}

/* Pipeline stage chips */
:root[data-theme="light"] .stage-step{background:rgba(20,16,48,.05)}
:root[data-theme="light"] .stage-step:hover{background:rgba(20,16,48,.09);color:var(--text)}

/* Public portfolio surfaces */
:root[data-theme="light"] .public-hero{
  background:
    linear-gradient(120deg,rgba(255,255,255,.45),rgba(255,255,255,.82)),
    radial-gradient(circle at 78% 20%,rgba(16,185,129,.18),transparent 24rem),
    var(--panel);
}
:root[data-theme="light"] .public-card-subtitle{color:var(--text)}
:root[data-theme="light"] .public-project-card img{border-color:rgba(20,16,48,.10);background:rgba(20,16,48,.05)}

/* Badges: readable text on each colored variant (surfaces flip via tokens) */
:root[data-theme="light"] .badge-status-active,
:root[data-theme="light"] .badge-status-completed,
:root[data-theme="light"] .badge-status-shortlisted,
:root[data-theme="light"] .badge-status-offer,
:root[data-theme="light"] .badge-status-featured,
:root[data-theme="light"] .badge-stage-offer,
:root[data-theme="light"] .badge-priority-low{color:#0a7d4a}
:root[data-theme="light"] .badge-status-interesting,
:root[data-theme="light"] .badge-status-in-progress,
:root[data-theme="light"] .badge-status-applied,
:root[data-theme="light"] .badge-stage-applied,
:root[data-theme="light"] .badge-stage-screening,
:root[data-theme="light"] .badge-event-email,
:root[data-theme="light"] .badge-event-call,
:root[data-theme="light"] .badge-event-note,
:root[data-theme="light"] .badge-event-admin-notification,
:root[data-theme="light"] .badge-type-application,
:root[data-theme="light"] .badge-type-opportunity,
:root[data-theme="light"] .badge-type-course{color:#0b6e85}
:root[data-theme="light"] .badge-priority-medium,
:root[data-theme="light"] .badge-status-planned,
:root[data-theme="light"] .badge-status-researching,
:root[data-theme="light"] .badge-status-invited,
:root[data-theme="light"] .badge-stage-draft,
:root[data-theme="light"] .badge-event-task,
:root[data-theme="light"] .badge-event-field-changed,
:root[data-theme="light"] .badge-event-password-reset-generated,
:root[data-theme="light"] .badge-event-invite-generated{color:#8a5800}
:root[data-theme="light"] .badge-priority-high,
:root[data-theme="light"] .badge-event-interview,
:root[data-theme="light"] .badge-event-follow-up,
:root[data-theme="light"] .badge-event-deadline,
:root[data-theme="light"] .badge-event-reminder,
:root[data-theme="light"] .badge-event-request{color:#9a4510}
:root[data-theme="light"] .badge-status-rejected,
:root[data-theme="light"] .badge-status-dropped,
:root[data-theme="light"] .badge-status-inactive,
:root[data-theme="light"] .badge-stage-rejected,
:root[data-theme="light"] .badge-status-failed,
:root[data-theme="light"] .badge-event-error{color:#b3261e}
:root[data-theme="light"] .badge-status-archived,
:root[data-theme="light"] .badge-status-paused,
:root[data-theme="light"] .badge-status-withdrawn,
:root[data-theme="light"] .badge-stage-withdrawn,
:root[data-theme="light"] .badge-status-skipped,
:root[data-theme="light"] .badge-role-admin,
:root[data-theme="light"] .badge-role-user{color:#5b3fb8}

/* Inline code */

/* Mobile nav hamburger */

/* Rate inline-edit */
:root[data-theme="light"] .rate-edit:hover{border-color:rgba(20,16,48,.24)}

/* Inputs */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{background:#ffffff}
:root[data-theme="light"] input:disabled,
:root[data-theme="light"] select:disabled,
:root[data-theme="light"] textarea:disabled,
:root[data-theme="light"] input.js-rate[readonly]{background:rgba(20,16,48,.04)}

/* Modal backdrop */
:root[data-theme="light"] dialog.modal::backdrop{background:rgba(20,16,48,.34)}

/* Mobile stacked-table card rows (≤680px) re-use white overlays — fix them too */
@media (max-width:680px){
  :root[data-theme="light"] tr{border-color:rgba(20,16,48,.10);background:rgba(20,16,48,.035)}
  :root[data-theme="light"] td{border-bottom-color:rgba(20,16,48,.07)}
}

/* ============================================================================
   PRINT — print/save-as-PDF the document, not the app chrome. Always on white with
   black text (dark theme prints terribly), flat (no blur/shadow), full width. Hide
   navigation, toolbars, pagination, action buttons and other interactive bits; mark
   anything else page-specific with [data-no-print]. A .js-print button calls print().
   ============================================================================ */
.print-header{display:none}
@media print{
  :root,:root[data-theme="light"]{
    --bg:#fff;--bg-2:#fff;--text:#000;--soft:#1a1a1a;--mute:#444;
    --border:#999;--border-soft:#bbb;--divider:#bbb;
    --panel:#fff;--panel-2:#f4f4f4;--surf-1:#f7f7f7;--surf-2:#f1f1f1;--hover:#eee;
    --amount-pos:#0a6b2f;--amount-neg:#b3261e;
  }
  html,body{background:#fff !important;color:#000}
  /* Compact print typography so section descriptions fit on one line like the wide desktop view
     (the print page is much narrower) and headings aren't oversized on paper. */
  body{font-size:10pt}
  h1{font-size:18pt}
  h2{font-size:13pt}
  h3{font-size:11pt}
  .lede,.panel p,.muted,.empty,p{font-size:10pt}
  .eyebrow{font-size:8.5pt}
  .sidebar,.nav-backdrop,.nav-toggle,.topbar-actions,.topbar-crumbs,.month-switcher,
  .list-toolbar,.pagination,.row-menu,.actions,.form-actions,.field-help,.tab-bar,
  .combo-list,.ss-list,.panel-toggle,.module-toggle,.brand,button,.button,[data-no-print]{
    display:none !important;
  }
  .shell{display:block;width:auto;margin:0;padding:0;gap:0}
  .content,.main{display:block;gap:0}
  .topbar{display:none !important}
  .panel,.stat,.public-card,.public-section,.timeline-item,.template-editor,.detail-item,.event-item{
    border:1px solid #bbb !important;background:#fff !important;backdrop-filter:none !important;box-shadow:none !important;
    break-inside:avoid;
  }
  .panel{padding:10px 12px;margin-bottom:10px}
  a{color:#000;text-decoration:none}
  /* Collapsed sections print in full — you print everything, not the folded view. */
  .panel.js-collapsible.collapsed > :not(.panel-head):not(.panel-toggle){display:block !important}
  .panel-toggle{display:none !important}
  /* Print every tab's content (e.g. an arrangement's schedule AND transactions), not just the
     one on screen; the tab bar itself is hidden above. */
  .tab-panel{display:block !important}
  /* Fit tables to the portrait page: no scroll viewport, smaller text, wrap long values, and
     drop the interactive checkbox/row-action columns so the real columns aren't pushed off.
     Force a real table even when printing from a phone — the ≤680 rules stack rows into cards
     ("prints what's on screen"), so override the whole display chain + the data-label pseudo. */
  .table-wrap{overflow:visible !important}
  /* table-layout:auto proportions columns by content and collapses hidden/empty ones (so the
     dropped checkbox/action columns don't leave gaps); cells wrap (overflow-wrap below) so wide
     lists fit instead of running off the edge. */
  table{display:table !important;width:100% !important;border-collapse:collapse;table-layout:auto !important}
  thead{display:table-header-group !important} /* real header row, repeated per printed page */
  tbody{display:table-row-group !important}
  tr{display:table-row !important}
  th,td{display:table-cell !important;font-size:8.5pt;padding:3px 5px;white-space:normal;overflow-wrap:anywhere;vertical-align:top}
  td::before,th::before{display:none !important} /* drop the mobile "data-label" prefixes */
  td.num,th.num,.col-date{white-space:nowrap}
  .check-col,.row-actions{display:none !important}
  /* Wide statement ledgers (8-col partner/bank ledgers): force fixed layout AND hard-cap the table
     to a portrait printable width, so the last column (Balance/Status) can't run off the page even
     if the print scale or browser margins make the page box wider than expected. */
  .stmt-table{table-layout:fixed !important;width:100% !important;max-width:180mm !important}
  .stmt-table td.num,.stmt-table th.num,.stmt-table .col-date{white-space:normal}
  /* Standalone public statement: drop its 860px <main> cap + inline side padding and fit the page. */
  body>main{max-width:185mm !important;padding:0 !important;margin:0 auto !important}
  tr,article{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  /* a hidden tab-panel stays hidden — you print the tab you're viewing */
  /* Our own header at the top of the document (brand · account · printed date). Turn the
     browser's own headers/footers off in the print dialog to avoid the duplicate date/URL. */
  @page{margin:12mm}
  .print-header{display:flex !important;justify-content:space-between;gap:16px;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid #bbb;font-size:9pt;color:#555}
}

/* ── Server-side SVG charts (P3.1) — tokens only ── */
.chart{width:100%;height:auto;display:block}
.chart-grid{stroke:var(--border);stroke-width:1}
.chart-text{fill:var(--mute);font-size:11px}
.chart-fill-income{fill:var(--amount-pos);opacity:.85}
.chart-fill-expense{fill:var(--amount-neg);opacity:.85}
.chart-line{fill:none;stroke:var(--indigo);stroke-width:2.5;stroke-linejoin:round}
.chart-dot{fill:var(--indigo)}
.chart-donut-wrap{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.chart-donut{max-width:200px;flex:0 0 auto}
.chart-slice{fill:none;stroke-width:26}
.chart-slice-0{stroke:var(--indigo)}.chart-slice-1{stroke:var(--violet)}
.chart-slice-2{stroke:var(--cyan)}.chart-slice-3{stroke:var(--amber)}
.chart-slice-4{stroke:var(--lime)}.chart-slice-5{stroke:var(--rose)}
.chart-slice-6{stroke:var(--soft)}.chart-slice-7{stroke:var(--mute)}
span.chart-swatch.chart-slice-0{background:var(--indigo)}span.chart-swatch.chart-slice-1{background:var(--violet)}
span.chart-swatch.chart-slice-2{background:var(--cyan)}span.chart-swatch.chart-slice-3{background:var(--amber)}
span.chart-swatch.chart-slice-4{background:var(--lime)}span.chart-swatch.chart-slice-5{background:var(--rose)}
span.chart-swatch.chart-slice-6{background:var(--soft)}span.chart-swatch.chart-slice-7{background:var(--mute)}
.chart-legend{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.5rem}
.chart-legend-stack{flex-direction:column;gap:.35rem;margin-top:0}
.chart-legend-item{display:inline-flex;gap:.45em;align-items:center;color:var(--soft);font-size:.85rem}
.chart-legend-value{color:var(--mute)}
.chart-swatch{width:.75em;height:.75em;border-radius:3px;display:inline-block}
.chart-swatch.chart-fill-income{background:var(--amount-pos)}
.chart-swatch.chart-fill-expense{background:var(--amount-neg)}
/* ── Topbar notifications (P3.2) ── */
.notice-menu{position:relative}
.notice-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35em;position:relative}
.notice-menu summary::-webkit-details-marker{display:none}
.notice-count{position:absolute;top:-6px;right:-8px;background:var(--rose);color:#fff;border-radius:999px;font-size:.62rem;line-height:1;padding:.22em .45em;min-width:1.5em;text-align:center}
.notice-panel{position:absolute;right:0;top:calc(100% + .5rem);width:min(340px,86vw);background:var(--bg-2);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.45);padding:.5rem;z-index:60;display:flex;flex-direction:column;gap:.25rem}
.notice-item{display:flex;flex-direction:column;gap:.15rem;padding:.55rem .6rem;border-radius:8px;text-decoration:none;color:var(--text)}
.notice-item:hover{background:var(--panel-2)}
.notice-item span{color:var(--mute);font-size:.82rem}
.notice-item time{color:var(--mute);font-size:.72rem}
.notice-empty{color:var(--mute);padding:.6rem;margin:0;font-size:.85rem}
.notice-readall{border-top:1px solid var(--border);padding-top:.4rem;margin-top:.2rem;display:flex;justify-content:flex-end}
/* RTL (P3.7): Arabic locale flips the document direction. Layout is mostly flex/grid so it
   mirrors automatically; these overrides catch the physical-side properties. */
[dir="rtl"] body{text-align:right}
[dir="rtl"] .sidebar{border-right:0;border-left:1px solid var(--border)}
[dir="rtl"] .nav a{text-align:right}
[dir="rtl"] .row-menu-list{left:0;right:auto}
[dir="rtl"] th, [dir="rtl"] td{text-align:right}
[dir="rtl"] th.num, [dir="rtl"] td.num{text-align:left}
[dir="rtl"] .topbar-crumbs .crumb-sep{transform:scaleX(-1);display:inline-block}
[dir="rtl"] .form-actions{justify-content:flex-start}