/* MahodBillz brand layer (2026-11).
   Loaded last. Replaces the paper-and-black look with a precise financial
   instrument: cool neutral ground, forest-ink navigation, one Mahod green,
   tighter radii, real weight in headings and numbers, and short purposeful
   motion (page transitions, sliding nav indicator, press feedback).
   CSP-safe: no inline styles, fonts already self-hosted. */

:root{
  --ground:#F5F6F8;--surface:#FFFFFF;--surface-2:#F9FAFB;--sunken:#EEF0F3;
  --ink:#0B1411;--ink-2:#3F4A47;--muted:#66706D;--faint:#98A19E;
  --hair:#E3E6EA;--hair-2:#EEF0F2;--hair-3:#D5D9DE;
  --side:#0A1915;--side-2:#11241F;--side-ink:#A9BAB4;--side-muted:#6E827C;
  --accent:#0C7A58;--accent-deep:#085C42;--accent-bright:#13976D;--mint:#6EE0B2;--mint-soft:#D9F4E8;
  --ok-bg:#E6F5EE;--ok-ink:#0A6247;
  --warn:#C4560F;--warn-bg:#FFF1E6;--warn-ink:#9A3F06;
  --amber-bg:#FFF6E0;--amber-ink:#8A5A00;
  --danger:#D13B2E;--danger-bg:#FDEDEB;--danger-ink:#A52A1F;
  --radius:14px;--radius-md:12px;--radius-sm:9px;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-xs:0 1px 2px rgba(10,25,21,.05);
  --shadow-sm:0 1px 2px rgba(10,25,21,.05),0 2px 6px -2px rgba(10,25,21,.06);
  --shadow-md:0 1px 2px rgba(10,25,21,.04),0 12px 28px -14px rgba(10,25,21,.22);
  --lift:var(--shadow-md);
  --ring:0 0 0 3px rgba(12,122,88,.18);
}

html{background:var(--ground)}
body{background:var(--ground);font-size:14.5px;letter-spacing:-.003em}
::selection{background:rgba(110,224,178,.4)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* ---------- Navigation ---------- */
.sidebar{background:
  radial-gradient(120% 60% at 100% 0%,rgba(19,151,109,.22) 0%,rgba(19,151,109,0) 55%),
  linear-gradient(180deg,var(--side) 0%,#081310 100%);
  border-inline-start:1px solid rgba(255,255,255,.04);gap:22px;padding:22px 14px 18px}
.brand{padding:2px 8px 4px}
.brand-mark rect{fill:var(--accent-bright)}
.brand-product strong{font-size:16px;font-weight:600;letter-spacing:-.01em}
.brand-product small{color:#7E938C;font-size:11.5px}
.nav-caption{color:#5E736C;font-size:11px;font-weight:500;letter-spacing:.06em;padding:0 12px 6px}
.nav-list{gap:1px}
.nav-list a{position:relative;height:40px;border-radius:9px;color:var(--side-ink);font-size:14px;transition:background-color .18s,color .18s}
.nav-list a:hover{background:rgba(255,255,255,.045);color:#F2F6F4}
.nav-list a:hover .icon{transform:none}
.nav-list a.active{background:rgba(110,224,178,.09);color:#fff;font-weight:500}
.nav-list a.active .icon{color:var(--mint)}
/* The active marker is one named element, so a page change slides it
   from the old item to the new one instead of blinking. */
.nav-list a.active::before{content:"";position:absolute;inset-inline-start:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--mint);box-shadow:0 0 12px rgba(110,224,178,.55);view-transition-name:nav-marker}
.nav-dot{display:none}
.nav-divider{background:rgba(255,255,255,.06);margin:12px}
.nav-count{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.nav-count.is-critical{background:var(--danger);box-shadow:0 0 0 3px rgba(209,59,46,.2)}
.sidebar-security{border-color:rgba(255,255,255,.06);background:rgba(255,255,255,.025)}
.avatar{background:linear-gradient(135deg,#1C3A31,#0F241E);color:var(--mint);box-shadow:inset 0 0 0 1px rgba(110,224,178,.25)}

.topbar{min-height:64px;padding:12px 40px;background:rgba(245,246,248,.78);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);view-transition-name:topbar}
.topbar.is-scrolled{border-bottom-color:var(--hair);box-shadow:0 1px 0 rgba(10,25,21,.02)}
.topbar h1{font-weight:600;font-size:14.5px}
.topbar-search{height:42px;border-radius:10px;border-color:var(--hair);box-shadow:var(--shadow-xs);padding:0 14px}
.topbar-search:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.topbar-search kbd{background:var(--sunken);border-color:transparent;color:var(--muted)}
.icon-button{width:40px;height:40px;border-radius:10px;transition:background-color .18s,color .18s,transform .18s var(--ease)}
.icon-button:hover{background:var(--sunken)}
.icon-button:active{transform:scale(.94)}
.alert-bell-count{background:var(--ink);font-weight:600}
.alert-bell.is-critical .alert-bell-count{background:var(--danger)}
.alert-bell.is-critical .icon{transform-origin:50% 2px;animation:mb-bell 1.1s var(--ease) .5s 1}
.sidebar{view-transition-name:sidebar}
.content{max-width:1240px;padding:28px 40px 64px}

/* ---------- Type ---------- */
.page-hero,.page-lead{margin:4px 0 24px;align-items:flex-end}
.page-hero h2,.page-lead h2,.compact-lead h2,.page-lead.compact-lead h2{font-size:28px;font-weight:600;letter-spacing:-.022em;line-height:1.2}
.page-hero p,.page-lead p{font-size:14.5px;color:var(--muted);line-height:1.6}
.hero-date{font-size:12.5px;color:var(--faint);font-weight:500}
.panel-head h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.panel-head p{color:var(--muted)}
.eyebrow,.section-kicker{font-size:12px;font-weight:500;color:var(--faint);letter-spacing:.01em}

/* ---------- Buttons ---------- */
.button{min-height:38px;padding:0 14px;border-radius:9px;font-size:13.5px;font-weight:500;border-color:var(--hair-3);background:var(--surface);box-shadow:var(--shadow-xs);transition:transform .16s var(--ease),background-color .18s,border-color .18s,box-shadow .18s,color .18s}
.button:hover{transform:none;border-color:#C3C9CF;background:#FCFCFD;box-shadow:var(--shadow-sm)}
.button:active{transform:scale(.975);box-shadow:none}
.button.primary,.button.dark{background:linear-gradient(180deg,var(--accent-bright) 0%,var(--accent) 100%);border-color:var(--accent-deep);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(8,92,66,.35),0 4px 10px -4px rgba(8,92,66,.45);text-shadow:0 1px 0 rgba(0,0,0,.12)}
.button.primary:hover,.button.dark:hover{background:linear-gradient(180deg,#17A577 0%,#0D8560 100%);border-color:var(--accent-deep);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(8,92,66,.35),0 8px 18px -8px rgba(8,92,66,.6)}
.button.primary::after{background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%)}
.button.ghost{background:var(--surface);color:var(--ink);border-color:var(--hair-3)}
.button.mini{min-height:32px;padding:0 11px;border-radius:8px;font-size:12.5px}
.button.danger{background:var(--danger);border-color:#B5301F;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(165,42,31,.3)}
.topbar-upload{min-height:40px}

/* ---------- Inputs ---------- */
input,select,textarea{border-color:var(--hair-3);border-radius:9px;background:var(--surface)}
input:hover,select:hover,textarea:hover{border-color:#C3C9CF}
input:focus,select:focus,textarea:focus,.form-panel input:focus,.form-panel select:focus,.filter-bar input:focus,.filter-bar select:focus{border-color:var(--accent);box-shadow:var(--ring);background:var(--surface)}
.form-panel input,.form-panel select,.form-panel textarea,.filter-bar input,.filter-bar select,.search-advanced input,.search-advanced select{min-height:40px;padding:8px 12px;border-radius:9px;background:var(--surface);font-size:14px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.field-shell{height:46px;border-radius:10px;background:var(--surface)}
.field-shell:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.login-submit{height:46px;border-radius:10px}

/* ---------- Surfaces ---------- */
.form-panel,.panel,.account-card{border-color:var(--hair);border-radius:var(--radius);box-shadow:var(--shadow-xs)}
.panel{padding:22px 24px}
.card-lift,.panel.card-lift{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .2s}
.card-lift:hover{transform:translateY(-2px);border-color:var(--hair-3);box-shadow:var(--shadow-md)}
.notice{border-radius:10px;box-shadow:none;font-size:13.5px}
.notice.warning{background:var(--amber-bg);border-color:#F3DFAE;color:#6B4700}
.status-pill{height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:500;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.status-pill.neutral,.status-pill.disabled,.status-pill.unavailable{background:var(--sunken)}
.provider-badge,.api-provider-mark{border-radius:9px;background:var(--sunken);box-shadow:inset 0 0 0 1px rgba(10,25,21,.05)}
.messages .message{border-radius:10px;box-shadow:var(--shadow-sm);animation:mb-toast .5s var(--ease-out) backwards}

/* Tables: quiet header, row hover, numbers aligned. */
table th{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:.01em}
table tbody tr{transition:background-color .15s}
table tbody tr:hover{background:#F8FAF9}


/* ---------- Dashboard ---------- */
.dashboard-alert-banner{position:relative;gap:12px;margin:0 0 18px;padding:10px 12px 10px 10px;padding-inline-start:44px;border:1px solid #F6CFCA;border-radius:12px;background:linear-gradient(90deg,#FFF7F6,#FDEDEB);color:var(--danger-ink);box-shadow:var(--shadow-xs)}
.dashboard-alert-banner::before{content:"";position:absolute;inset-inline-start:18px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 4px rgba(209,59,46,.14);animation:mb-pulse 2s ease-in-out infinite}
.dashboard-alert-banner p{font-size:13.5px}
.dashboard-alert-banner .button{background:var(--surface);border-color:#F0BDB6;color:var(--danger-ink);box-shadow:var(--shadow-xs);text-shadow:none}
.dashboard-alert-banner .button:hover{background:#fff;border-color:var(--danger);color:var(--danger)}
.analytics-filter-panel{padding:12px 14px;border-radius:12px}
.analytics-filter-form{gap:8px 10px;align-items:flex-end}
.analytics-filter-form>label{font-size:11.5px;color:var(--faint);gap:4px}
.analytics-filter-form select{min-width:0;min-height:36px;height:36px;padding:0 10px;font-size:13.5px}
.analytics-filter-form .analytics-filter-submit{margin-top:0}
.analytics-filter-actions{align-items:center;gap:6px}
.analytics-filter-actions .button{min-height:36px;height:36px}
.active-filter-summary{margin-top:10px;padding-top:10px;border-top:1px dashed var(--hair)}
.hero-card{padding:26px 28px;border-radius:16px;box-shadow:var(--shadow-sm);background:
  radial-gradient(90% 120% at 100% 0%,rgba(110,224,178,.10),rgba(110,224,178,0) 60%),var(--surface)}
.hero-label{font-size:12.5px;font-weight:500;color:var(--muted)}
.hero-amount{font-weight:600;letter-spacing:-.04em;font-size:clamp(40px,5vw,60px)}
.kpi-strip{gap:12px;border:0}
.kpi-strip article,.kpi-strip article+article{padding:16px 18px;border:1px solid var(--hair);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-xs);transition:border-color .2s,box-shadow .3s var(--ease-out),transform .3s var(--ease-out)}
.kpi-strip article:hover{border-color:var(--hair-3);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kpi-strip strong{font-size:24px;font-weight:600;letter-spacing:-.025em}
.kpi-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--mint-soft);color:var(--accent)}
@keyframes mb-pulse{0%,100%{box-shadow:0 0 0 3px rgba(209,59,46,.16)}50%{box-shadow:0 0 0 7px rgba(209,59,46,.05)}}

/* ---------- Invoices ---------- */
.month-chips{gap:2px;padding:3px;margin:0 0 16px;border:1px solid var(--hair);border-radius:11px;background:var(--sunken);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.month-chips::-webkit-scrollbar{display:none}
.month-chip{height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;font-size:12.5px;color:var(--ink-2);transition:background-color .18s,color .18s,box-shadow .18s}
.month-chip:hover{transform:none;background:rgba(255,255,255,.6);color:var(--ink)}
.month-chip[aria-current=page]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm)}
.month-chip[aria-current=page] small,.month-chip[aria-current=page] b{color:var(--accent)}

/* ---------- Accounts ---------- */
.account-alerts{position:relative;padding:14px 16px;padding-inline-start:20px;border:1px solid var(--hair);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-xs);overflow:hidden}
.account-alerts::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--danger)}
.account-alerts header{color:var(--danger-ink);font-size:12.5px;letter-spacing:.01em}
.account-alerts header a{color:var(--muted)}
.account-alerts header a:hover{color:var(--accent)}
.account-next-action{position:relative;border:1px solid var(--hair);border-right:1px solid var(--hair);border-radius:12px;background:var(--surface-2);padding-inline-start:20px;overflow:hidden}
.account-next-action.success,.account-next-action.action_required,.account-next-action.pending,.account-next-action.awaiting_user{border-color:var(--hair);background:var(--surface-2)}
.account-next-action::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--faint)}
.account-next-action.success::before{background:var(--accent)}
.account-next-action.action_required::before{background:var(--danger)}
.account-next-action.pending::before{background:#D4912A}
.account-next-action.awaiting_user::before{background:#4E7FD0}
.account-health-grid{border-color:var(--hair);border-radius:12px;background:var(--hair)}
.account-health-grid>div{background:var(--surface)}
.account-health-grid .integrity-health.limited,.account-health-grid .integrity-health.verified,.account-health-grid .integrity-health.error,.account-health-grid .integrity-health.action_required{background:var(--surface)}
.route-item{border-radius:10px;transition:background-color .18s,box-shadow .18s}
.route-item:hover{background:var(--surface-2)}

/* ---------- API ---------- */
.api-overview-summary article.primary{position:relative;overflow:hidden;border:0;background:
  radial-gradient(120% 140% at 0% 100%,rgba(19,151,109,.35),rgba(19,151,109,0) 55%),
  linear-gradient(160deg,#10261F 0%,var(--side) 70%);box-shadow:0 18px 40px -22px rgba(10,25,21,.7)}
.api-overview-summary article.primary strong{font-weight:600;letter-spacing:-.03em}
.api-overview-summary article{border-radius:14px}

/* ---------- Alerts ---------- */
.alerts-summary{gap:12px}
.alerts-summary-item{position:relative;overflow:hidden;padding:16px 18px;border-radius:12px;box-shadow:var(--shadow-xs);flex-direction:column;gap:4px;align-items:flex-start}
.alerts-summary-item strong{font-size:30px;font-weight:600;letter-spacing:-.03em}
.alerts-summary-item::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--hair);transform-origin:right;animation:mb-growx .8s var(--ease-out) .2s backwards}
.alerts-summary-item.is-critical::after{background:var(--danger)}
.alerts-summary-item.is-resolved::after{background:var(--accent)}
.alert-card{border-radius:12px;border-inline-start-width:1px;box-shadow:var(--shadow-xs);position:relative;transition:box-shadow .25s var(--ease-out),border-color .2s,transform .25s var(--ease-out)}
.alert-card::before{content:"";position:absolute;inset-inline-start:-1px;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--faint)}
.alerts-critical .alert-card::before{background:var(--danger)}
.alerts-warning .alert-card::before{background:var(--warn)}
.alerts-info .alert-card::before{background:#4E7FD0}
.alert-card:hover{border-color:var(--hair-3);box-shadow:var(--shadow-md)}
.alert-card.is-seen{opacity:.82}
.alert-tag{border-radius:6px;font-size:11.5px}
.alerts-severity-dot{position:relative}
.alerts-critical .alerts-severity-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:mb-ping 2s cubic-bezier(0,0,.2,1) infinite}

/* ---------- Motion ---------- */
@keyframes mb-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:none}}
@keyframes mb-toast{from{opacity:0;translate:0 -8px;scale:.98}to{opacity:1;translate:none;scale:1}}
@keyframes mb-bell{0%,100%{rotate:0deg}20%{rotate:14deg}40%{rotate:-10deg}60%{rotate:6deg}80%{rotate:-3deg}}
/* Fast, light entrance: content is readable almost immediately. */
.content>*,.rise{animation:mb-in .38s var(--ease-out) backwards}
.content>*:nth-child(2){animation-delay:.03s}.content>*:nth-child(3){animation-delay:.06s}
.content>*:nth-child(4){animation-delay:.09s}.content>*:nth-child(5){animation-delay:.12s}
.content>*:nth-child(6){animation-delay:.15s}.content>*:nth-child(n+7){animation-delay:.18s}
.sidebar .nav-list a{animation:none}
.alerts-list>.alert-card{animation:mb-in .4s var(--ease-out) backwards}
.alerts-list>.alert-card:nth-child(2){animation-delay:.04s}.alerts-list>.alert-card:nth-child(3){animation-delay:.08s}
.alerts-list>.alert-card:nth-child(4){animation-delay:.12s}.alerts-list>.alert-card:nth-child(n+5){animation-delay:.16s}

/* Cross-page transitions: sidebar and top bar stay put, the page content
   cross-fades with a short lift, and the nav marker slides. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mb-vt-out .16s ease-in both}
::view-transition-new(root){animation:mb-vt-in .3s var(--ease-out) both}
::view-transition-group(nav-marker){animation-duration:.38s;animation-timing-function:var(--ease-out)}
::view-transition-group(sidebar),::view-transition-group(topbar){animation:none}
@keyframes mb-vt-out{to{opacity:0}}
@keyframes mb-vt-in{from{opacity:0;translate:0 6px}}
/* The page fades in through the view transition; skip the second entrance. */
html:active-view-transition .content>*{animation:none}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

@media (max-width:1100px){
  .content{padding:22px 24px 56px}
  .topbar{padding:10px 24px}
}
@media (max-width:760px){
  .page-hero h2,.page-lead h2,.compact-lead h2{font-size:23px}
  .content{padding:18px 16px 96px}
  .topbar{padding:10px 16px}
  .nav-list a.active::before{display:none}
}