:root{
  /* Dark mode (default) */
  --bg:#0b0f14;
  --surface:#0f172a;
  --surface-2:#111c33;
  --border:rgba(255,255,255,.10);
  --text:#e5e7eb;
  --muted:#9ca3af;

  /* Chrome + accents (img.zip-ish) */
  --nav:#0b1220;
  --nav-border:rgba(255,255,255,.12);
  --primary:#3b82f6;
  --primary-hover:#2563eb;
  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;

  /* Conditional value colours */
  --val-pos: var(--success);
  --val-neg: var(--danger);
  --val-zero: var(--warning);

  --radius:14px;
  --radius-sm:10px;
  --shadow: 0 10px 28px rgba(0,0,0,.45);
  --shadow-sm: 0 6px 16px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{ color: var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Top navigation */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav);
  border-bottom: 1px solid var(--nav-border);
}
.topbar-inner{
  width: min(1180px, 94vw);
  margin: 0 auto;
  padding: 10px 0;
  display:flex;
  align-items:center;
  gap:16px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  flex:0 0 auto;
}
.brand:hover{ text-decoration:none; }

.brand-logo{
  width:34px;
  height:34px;
  display:block;
  flex:0 0 34px;
  object-fit:cover;
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 7px 18px rgba(0,0,0,.28);
}
.brand-dot{
  width:30px;
  height:30px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(13,110,253,1), rgba(25,135,84,1));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 7px 18px rgba(0,0,0,.22);
}
.brand-text{ font-weight:800; letter-spacing:.2px; }

.nav{
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.nav-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:3px;
  flex-wrap:nowrap;
}
.nav-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.desktop-nav-links{
  padding:4px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

/* Mobile hamburger */
.nav-toggle{
  display:none;
  appearance:none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  width: 44px;
  height: 40px;
  cursor:pointer;
}
.nav-toggle:hover{ background: rgba(255,255,255,.12); }
.burger{
  display:block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: rgba(255,255,255,.92);
  border-radius: 99px;
  position: relative;
}
.burger::before,.burger::after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 99px;
}
.burger::before{ top: -6px; }
.burger::after{ top: 6px; }

.mobile-menu{
  position:absolute;
  right: 3vw;
  top: calc(100% + 10px);
  width: min(420px, 94vw);
  background:var(--theme-menu, var(--surface));
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.40);
  padding: 10px;
}
.mobile-menu-head{ padding: 8px; }
.mobile-menu-links{ display:flex; flex-direction:column; gap:6px; padding: 6px; }
.mobile-menu-foot{ padding: 8px; }
.mobile-menu-sep{ height:1px; background: rgba(255,255,255,.10); margin: 6px 8px; border-radius:999px; }

.mnav{
  color: rgba(255,255,255,.88);
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-weight: 750;
}
.mnav:hover{ background: rgba(255,255,255,.10); text-decoration:none; }
.mnav.active{
  background: rgba(13,110,253,.22);
  border-color: rgba(13,110,253,.40);
  color: #fff;
}

.navlink{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:rgba(255,255,255,.74);
  font-size:13px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  padding:9px 11px;
  border-radius:10px;
  border:1px solid transparent;
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.navlink:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.08);
  color:#fff;
  text-decoration:none;
}
.navlink.active{
  background:linear-gradient(180deg, rgba(var(--primary-rgb,59,130,246),.24), rgba(var(--primary-rgb,59,130,246),.14));
  border-color:rgba(var(--primary-rgb,59,130,246),.42);
  color:#fff;
  box-shadow:0 7px 18px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
}
.navlink-icon{
  width:16px;
  height:16px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.90;
}

.header-icon-link,
.account-toggle{
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.045);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.header-icon-link:hover,
.account-toggle:hover{
  color:#fff;
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.20);
  text-decoration:none;
}
.header-icon-link{
  width:38px;
  border-radius:11px;
}
.header-icon-link.active,
.account-toggle.active{
  color:#fff;
  background:rgba(var(--primary-rgb,59,130,246),.16);
  border-color:rgba(var(--primary-rgb,59,130,246),.40);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb,59,130,246),.08);
}
.header-icon-link svg,
.header-customize svg,
.account-caret,
.account-menu-link svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.header-icon-link svg{ width:18px; height:18px; }
.header-customize{
  height:38px;
  gap:7px;
  border-radius:11px;
  white-space:nowrap;
}
.header-customize svg{ width:16px; height:16px; }

.account-menu-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.account-toggle{
  gap:8px;
  padding:4px 9px 4px 5px;
  border-radius:12px;
  font:inherit;
}
.account-avatar{
  width:28px;
  height:28px;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:9px;
  background:linear-gradient(135deg, var(--primary), var(--theme-secondary, var(--success)));
  color:#fff;
  font-size:12px;
  font-weight:850;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
}
.account-name{
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
  font-size:13px;
  font-weight:750;
}
.account-caret{
  width:14px;
  height:14px;
  transition:transform .15s ease;
}
.account-toggle[aria-expanded="true"] .account-caret{ transform:rotate(180deg); }

.account-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:250px;
  padding:9px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--theme-menu, var(--surface));
  box-shadow:0 20px 55px rgba(0,0,0,.48);
  z-index:70;
}
.account-menu-profile{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
}
.account-avatar-large{
  width:36px;
  height:36px;
  border-radius:11px;
  font-size:14px;
}
.account-profile-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.account-profile-copy strong{
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text);
  font-size:13px;
}
.account-profile-copy span{
  color:var(--muted);
  font-size:11px;
}
.account-menu-divider{
  height:1px;
  margin:7px 5px;
  background:var(--border);
}
.account-menu-label{
  padding:4px 9px 6px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.account-menu-link{
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:rgba(255,255,255,.82);
  font:inherit;
  font-size:13px;
  font-weight:700;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.account-menu-link:hover{
  background:rgba(var(--primary-rgb,59,130,246),.10);
  color:var(--text);
  text-decoration:none;
}
.account-menu-link.active{
  background:rgba(var(--primary-rgb,59,130,246),.15);
  border-color:rgba(var(--primary-rgb,59,130,246),.28);
  color:var(--text);
}
.account-menu-link svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
}
.account-logout-form{ margin:0; }
.account-menu-logout{ color:var(--danger-text, var(--danger)); }
.account-menu-logout:hover{ background:color-mix(in srgb,var(--danger) 10%,transparent); color:var(--danger-text, var(--danger)); }

.nav-sep{ width:1px; height:22px; background: rgba(255,255,255,.18); border-radius:999px; margin:0 4px; }

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size: 13px;
}
.chip .dot{ width:8px; height:8px; border-radius:999px; background: var(--success); box-shadow: 0 0 0 3px rgba(25,135,84,.22); }

/* Page container */
.app{ width: min(1180px, 94vw); margin: 26px auto 60px; }

/* Panels / cards */
.panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px;
}

/* Card value conditional formatting */
.val-pos{ color: var(--val-pos); }
.val-neg{ color: var(--val-neg); }
.val-zero{ color: var(--val-zero); }

/* Refined heading system */
h1,
h2,
h3,
h4{
  position: relative;
  max-width: 100%;
  color: var(--text);
  font-family: inherit;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.022em;
  text-transform: none;
  text-wrap: balance;
}

h1,
h2,
h3{
  display: block;
  width: fit-content;
}

h1{
  margin: 0 0 10px;
  padding: 0 0 12px;
  font-size: clamp(34px, 3.2vw, 42px);
  font-weight: 850;
  letter-spacing: -.045em;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* Page titles stay solid and theme-safe; the accent line carries the colour. */
h1::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--theme-secondary, var(--success)));
  box-shadow: 0 0 18px rgba(var(--primary-rgb, 59,130,246), .38);
}

h1::after{
  content: "";
  position: absolute;
  left: 54px;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--theme-secondary, var(--success));
  box-shadow: 0 0 12px rgba(var(--theme-secondary-rgb, 34,197,94), .42);
}

h2{
  margin: 0 0 10px;
  padding-left: 15px;
  font-size: 20px;
  letter-spacing: -.025em;
}

h2::before{
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  bottom: .12em;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--primary), var(--theme-secondary, var(--success)));
  box-shadow: 0 0 12px rgba(var(--primary-rgb, 59,130,246), .26);
}

h3{
  margin: 0 0 8px;
  padding-left: 15px;
  font-size: 18px;
  letter-spacing: -.018em;
}

h3::before{
  content: "";
  position: absolute;
  left: 1px;
  top: .36em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--primary), var(--theme-secondary, var(--success)));
  box-shadow: 0 0 12px rgba(var(--primary-rgb, 59,130,246), .30);
  transform: rotate(45deg);
}

h4{
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -.012em;
  color: color-mix(in srgb, var(--text) 92%, var(--primary-soft-text, #bfdbfe));
}
.muted{ color: var(--muted); }
.small{ font-size: 13px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.stack{ display:flex; flex-direction:column; gap:14px; }
.inline{ display:inline-flex; align-items:center; gap:10px; }
.row-between{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.pad{ padding: 10px 0; }

/* Dashboard grids */
.cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.cards .k{ color: var(--muted); font-size: 12px; }
.cards .v{ font-weight: 850; font-size: 20px; margin-top: 6px; }
.cards .v.big{ font-size: 24px; }


.dash-groups{ display:flex; flex-direction:column; gap:14px; }

.cards.cards-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.cards-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px){
  .cards.cards-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .cards.cards-2, .cards.cards-3{ grid-template-columns: 1fr; }
}

.layout{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .layout{ grid-template-columns: 1fr; }
}

/* Keep the desktop header polished at laptop widths without wrapping. */
@media (min-width: 861px) and (max-width: 1120px){
  .topbar-inner{
    width:min(1180px, 94vw);
    gap:10px;
  }
  .brand-text{ display:none; }
  .desktop-nav-links{ gap:1px; padding:3px; }
  .navlink{
    gap:5px;
    padding:8px 8px;
    font-size:12px;
  }
  .navlink-icon{ width:15px; height:15px; }
  .nav-right{ gap:6px; }
  .account-name{ display:none; }
  .account-toggle{ padding-right:6px; }
}

@media (min-width: 861px) and (max-width: 960px){
  .header-customize > span{ display:none; }
  .header-customize{
    width:38px;
    padding:0;
  }
}

/* Switch to dropdown navigation on mobile */
@media (max-width: 860px){
  /* Make the topbar + app span the full viewport width on mobile
     (prevents the "tables are wider than panels/nav" look when panning/zooming) */
  .topbar-inner{
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 14px 14px;
  }
  .app{
    width: 100vw;
    max-width: 100vw;
    margin: 18px 0 60px;
    padding: 0 14px;
  }

  .nav-left{ display:none; }
  .nav-right{
    order:1;
    display:flex;
    margin-left:auto;
  }
  .nav-right .customize,
  .nav-right .account-menu-wrap{
    display:none;
  }
  .nav-toggle{
    order:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .nav{ justify-content:flex-end; gap:8px; }

  /* Align the dropdown with the same gutters as the container */
  .mobile-menu{
    left: 14px;
    right: 14px;
    width: auto;
  }

  .notification-menu{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 70px);
    right:14px;
    left:14px;
    width:auto;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 86px);
  }
  .notification-menu-list{
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 196px);
  }

  body.nav-open .mobile-menu{ display:block; }
}

/* Forms */
label{ display:block; font-size: 12px; color: var(--muted); }
.form .field{ display:flex; flex-direction:column; gap:6px; }
input, select{
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
}
select option{
  background: #111827;
  color: #f9fafb;
}
select option:checked,
select option:hover{
  background: #2563eb;
  color: #ffffff;
}
input:focus, select:focus{
  border-color: rgba(13,110,253,.55);
  box-shadow: 0 0 0 4px rgba(13,110,253,.15);
}
.actions{ display:flex; align-items:center; gap:10px; }

/* Buttons (no more default white rectangles) */
.btn{
  appearance:none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor:pointer;
  transition: transform .05s ease, filter .12s ease, background-color .12s ease;
}
.btn:active{ transform: translateY(1px); }

.btn.primary{
  background: var(--primary);
  color:#fff;
}
.btn.primary:hover{ background: var(--primary-hover); }

.btn.ghost{
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn.ghost:hover{ background: rgba(255,255,255,.06); }

/* On dark nav, keep ghost buttons readable */
.topbar .btn.ghost{
  border-color: rgba(255,255,255,.22);
  color:#fff;
}
.topbar .btn.ghost:hover{ background: rgba(255,255,255,.10); }

.btn.gray{
  background: #6c757d;
  color:#fff;
}
.btn.gray:hover{ filter: brightness(1.03); }

.btn.ok{ background: var(--success); color:#fff; }
.btn.ok:hover{ filter: brightness(1.03); }

.btn.danger{ background: var(--danger); color:#fff; }
.btn.danger:hover{ filter: brightness(1.03); }

.btn.tiny{ padding: 7px 10px; border-radius: 9px; font-size: 12px; }

.btn:disabled,
.btn[disabled]{
  pointer-events:none;
  cursor:not-allowed;
  opacity:.55;
  filter: grayscale(.35);
  transform:none;
}

.btn.primary:disabled,
.btn.primary[disabled]{
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.72);
}

/* Dashboard panel drag handle */
.panel{ position: relative; }
.drag-handle{
  position: absolute;
  top: 10px;
  right: 64px; /* leaves room for the Hide button */
  width: 34px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.hideable.has-top-action > .drag-handle{ right: 140px; }
.drag-handle:hover{ filter: brightness(1.12); }
.drag-handle:active{ cursor: grabbing; }

.panel.is-dragging{
  opacity: .75;
  outline: 2px dashed rgba(255,255,255,.22);
  outline-offset: 3px;
}

/* Modern toggle switch (used in bulk edit) */
.switch{
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
}
.switch input{
  opacity: 0;
  width: 0;
  height: 0;
}
.slider{
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.14);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background-color .16s ease, border-color .16s ease, filter .16s ease;
}
.slider:before{
  content:"";
  position:absolute;
  height: 24px;
  width: 24px;
  left: 3px;
  top: 2px;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  transition: transform .16s ease, filter .16s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.switch input:checked + .slider{
  background: rgba(74, 144, 226, .85);
  border-color: rgba(255,255,255,.18);
}
.switch input:checked + .slider:before{
  transform: translateX(22px);
}

.bulk-grid{ display:flex; flex-direction:column; gap: 10px; }
.bulk-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.bulk-left{ flex:1; min-width:0; }
.bulk-right{ flex:0 0 auto; display:flex; align-items:center; }

/* Tables (standings-style spacing) */
.table-wrap{ width:100%; overflow-x:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; border-radius: var(--radius); border:1px solid var(--border); }
table{ width:100%; border-collapse: separate; border-spacing: 0; background: var(--surface); }
.table-wrap table{ min-width: 680px; }

thead th{
  position: sticky;
  top: 0;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
  font-size: 13px;
  text-align:left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space:nowrap;
}
tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}
tbody tr:nth-child(even){ background: rgba(255,255,255,.02); }
tbody tr:hover{ background: rgba(59,130,246,.10); }

/* Little status pills */
.badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.badge.ok{ background:color-mix(in srgb,var(--success) 14%,transparent); border-color:color-mix(in srgb,var(--success) 25%,var(--border)); color:color-mix(in srgb,var(--success) 72%,var(--text)); }
.badge.warn{ background:color-mix(in srgb,var(--warning) 16%,transparent); border-color:color-mix(in srgb,var(--warning) 28%,var(--border)); color:color-mix(in srgb,var(--warning) 74%,var(--text)); }

.due-cell{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.due-badge{
  display:inline-flex;
  align-items:center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(148,163,184,.10);
  color: #cbd5e1;
}
.due-badge.ok{ background:color-mix(in srgb,var(--success) 14%,transparent); border-color:color-mix(in srgb,var(--success) 25%,var(--border)); color:color-mix(in srgb,var(--success) 72%,var(--text)); }
.due-badge.warn{ background:color-mix(in srgb,var(--warning) 16%,transparent); border-color:color-mix(in srgb,var(--warning) 28%,var(--border)); color:color-mix(in srgb,var(--warning) 74%,var(--text)); }
.due-badge.bad{ background:color-mix(in srgb,var(--danger) 16%,transparent); border-color:color-mix(in srgb,var(--danger) 30%,var(--border)); color:color-mix(in srgb,var(--danger) 74%,var(--text)); }
.due-badge.neutral{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.24); color: #bfdbfe; }
.due-badge.paid-ahead{ background:rgba(var(--primary-rgb),.12); border-color:rgba(var(--primary-rgb),.26); color:var(--primary-soft-text); }


.check-row label{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}
.check-row input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--primary);
}

.right{ text-align:right; }
.center{ text-align:center; }
.hidden{ display:none !important; }

.tag{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
}

.row-dim{ opacity: .72; }

/* Simple dialogs used by bills/transactions */
.dialog{
  border: none;
  padding: 0;
  border-radius: var(--radius);
  width: min(720px, 94vw);
  box-shadow: 0 22px 70px rgba(0,0,0,.25);
  color: var(--text);
}
.dialog::backdrop{ background: rgba(17,24,39,.55); }
.dialog-body{
  margin:0;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}

.grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .grid2{ grid-template-columns: 1fr; }
}

/* --- Hideable panels/cards + Customize dropdown --- */
.hideable{ position: relative; }
.hide-btn{
  position:absolute;
  top: 10px;
  right: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.hide-btn:hover{ background: rgba(255,255,255,.10); }

/* If there's already a top-right action button/link in the panel header (e.g. "All", "Open"),
   shift Hide left so the controls don't overlap. */
.hideable.has-top-action > .hide-btn{ right: 86px; }

.customize{ position: relative; display:inline-flex; align-items:center; }
.customize-menu{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(360px, 90vw);
  background: #11161b;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.40);
  padding: 10px;
  z-index: 60;
}
.customize-title{ font-weight: 700; padding: 8px 8px 6px; }
.customize-list{ display:flex; flex-direction:column; gap:6px; padding: 6px; }
.customize-item{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.customize-item .label{ color: rgba(255,255,255,.88); font-size: 13px; }

/* Reversible UI polish: delete this block to restore the previous skin. */
body{
  background: #090d13;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

html{
  background: #090d13;
}

.topbar{
  background: rgba(11,18,32,.92);
  backdrop-filter: blur(12px);
}

.panel{
  background: linear-gradient(180deg, rgba(17,28,51,.84), rgba(15,23,42,.96));
  border-color: rgba(148,163,184,.18);
}

.card{
  background: rgba(15,23,42,.74);
  border-color: rgba(148,163,184,.16);
}

.panel,
.card,
.dialog-body{
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}

.cards .k,
label{
  color: #b6c2d3;
}

.cards .v.big{
  font-size: 26px;
  line-height: 1.1;
}

.card .muted.small{
  margin-top: 6px;
}

input,
select{
  min-height: 44px;
  background: rgba(15,23,42,.82);
  border-color: rgba(148,163,184,.22);
}

input::placeholder{
  color: rgba(203,213,225,.48);
}

select{
  color-scheme: dark;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 36px;
  text-decoration:none;
}

.btn:hover{
  text-decoration:none;
  filter: brightness(1.05);
}

.btn.ghost{
  background: rgba(255,255,255,.03);
  border-color: rgba(148,163,184,.20);
}

.hide-btn,
.drag-handle{
  background: rgba(30,41,59,.82);
  border-color: rgba(148,163,184,.24);
}

.hide-btn:hover,
.drag-handle:hover{
  background: rgba(51,65,85,.92);
}

.table-wrap{
  border-color: rgba(148,163,184,.18);
  background: rgba(15,23,42,.64);
}

table{
  background: transparent;
}

thead th{
  background: rgba(17,28,51,.96);
  color: #dbeafe;
}

tbody tr:nth-child(even){
  background: rgba(255,255,255,.025);
}

tbody tr:hover{
  background: rgba(59,130,246,.13);
}

.tag,
.badge{
  border-color: rgba(148,163,184,.20);
}

.dialog::backdrop{
  background: rgba(3,7,18,.68);
  backdrop-filter: blur(4px);
}

.dialog-body{
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  border-color: rgba(148,163,184,.24);
}

@media (max-width: 720px){
  .row-between{
    flex-wrap:wrap;
  }

  .actions,
  .inline{
    flex-wrap:wrap;
  }
}

/* Dashboard control tidy-up: compact toolbar, quiet card controls. */
.dash > .stack > .dash-groups > .panel,
.dash > .stack > .layout .panel{
  overflow: hidden;
}

.panel.hideable > .row-between{
  align-items:center;
}

.panel.hideable.has-top-action > .row-between > :last-child{
  position:absolute;
  top: 18px;
  right: 82px;
  z-index: 4;
  display:flex;
  align-items:center;
  gap:6px;
}

.panel.hideable.has-top-action:has(> .drag-handle) > .row-between > :last-child{
  right: 124px;
}

.panel.hideable > .hide-btn,
.panel.hideable > .drag-handle,
.panel.hideable.has-top-action > .row-between > :last-child.btn,
.panel.hideable.has-top-action > .row-between > :last-child .btn{
  height: 34px;
  min-height: 34px;
  border-radius: 11px;
  background: rgba(15,23,42,.68);
  border: 1px solid rgba(148,163,184,.20);
  color: #e5edf7 !important;
  box-shadow: none;
  line-height: 1;
}

.panel.hideable > .hide-btn,
.panel.hideable > .drag-handle{
  top: 18px;
  z-index: 4;
}

.panel.hideable > .hide-btn{
  right: 18px;
  padding: 0 13px;
}

.panel.hideable > .drag-handle{
  right: 18px;
  width: 34px;
  padding: 0;
}

.panel.hideable:has(> .drag-handle) > .hide-btn{
  right: 58px;
}

.panel.hideable.has-top-action > .row-between > :last-child.btn,
.panel.hideable.has-top-action > .row-between > :last-child .btn{
  padding: 0 13px;
  font-weight: 750;
  background: rgba(30,41,59,.86);
  border-color: rgba(148,163,184,.28);
}

.panel.hideable.has-top-action > .row-between > :last-child.btn,
.panel.hideable.has-top-action > .row-between > :last-child .btn,
.panel.hideable > .hide-btn,
.panel.hideable > .drag-handle{
  opacity: .88;
}

.panel.hideable > .hide-btn,
.panel.hideable > .drag-handle{
  opacity: .62;
}

.panel.hideable:hover > .hide-btn,
.panel.hideable:hover > .drag-handle,
.panel.hideable:focus-within > .hide-btn,
.panel.hideable:focus-within > .drag-handle{
  opacity: .88;
}

.panel.hideable.has-top-action > .row-between > :last-child.btn:hover,
.panel.hideable.has-top-action > .row-between > :last-child .btn:hover,
.panel.hideable > .hide-btn:hover,
.panel.hideable > .drag-handle:hover{
  opacity: 1;
  background: rgba(30,41,59,.94);
  border-color: rgba(148,163,184,.34);
  filter: none;
}

.panel.hideable > .drag-handle span{
  opacity: .7;
  font-size: 14px;
}

.dash-groups > .panel.hideable{
  padding-top: 30px;
}

.dash-groups > .panel.hideable > .row-between{
  margin-bottom: 18px;
  padding-right: 220px;
}

.dash-groups > .panel.hideable > .pad{
  display:none;
}

.layout .panel.hideable.has-top-action > .row-between{
  padding-right: 136px;
}

.card > .hide-btn{
  top: 12px;
  right: 12px;
  height: 28px;
  min-height: 28px;
  padding: 0 9px;
  opacity: 0;
  pointer-events:none;
  transform: scale(.92);
  transform-origin: top right;
}

.card:hover > .hide-btn,
.card:focus-within > .hide-btn{
  opacity: .72;
  pointer-events:auto;
}

.card > .card-drag-handle{
  position:absolute;
  top:12px;
  right:58px;
  width:30px;
  height:28px;
  min-height:28px;
  border:1px solid rgba(148,163,184,.24);
  border-radius:9px;
  background:rgba(30,41,59,.82);
  color:rgba(255,255,255,.82);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
  opacity:0;
  pointer-events:none;
  transform:scale(.92);
  transform-origin:top right;
  z-index:2;
}

.card > .card-drag-handle span{
  opacity:.72;
  font-size:14px;
  line-height:1;
}

.card:hover > .card-drag-handle,
.card:focus-within > .card-drag-handle{
  opacity:.72;
  pointer-events:auto;
}

.card > .card-drag-handle:hover{
  opacity:1;
  background:rgba(51,65,85,.94);
  border-color:rgba(148,163,184,.34);
}

.card > .card-drag-handle:active,
.card.is-card-draggable > .card-drag-handle{
  cursor:grabbing;
}

.card.is-card-dragging{
  opacity:.58;
  outline:2px dashed rgba(255,255,255,.26);
  outline-offset:3px;
}

@media (pointer: coarse){
  .card > .card-drag-handle{
    display:none;
  }
}

@media (max-width: 720px){
  .dash-groups > .panel.hideable > .row-between,
  .layout .panel.hideable.has-top-action > .row-between{
    padding-right: 0;
    padding-top: 46px;
  }

  .panel.hideable.has-top-action > .row-between > :last-child,
  .panel.hideable.has-top-action:has(> .drag-handle) > .row-between > :last-child{
    left: 18px;
    right: auto;
  }
}

/* Bills page: give the bill table the full working width. */
.bills-layout{
  grid-template-columns: 1fr;
}

.bills-layout > aside,
.bills-layout > main{
  min-width: 0;
}

.bills-layout #add{
  padding: 24px 28px;
}

.bills-layout #add > .pad{
  padding: 6px 0 10px;
}

.bills-layout #add form{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px;
  row-gap: 18px;
  align-items:end;
}

.bills-layout #add form > input[type="hidden"]{
  display:none;
}

.bills-layout #add .field,
.bills-layout #add .bill-form-row,
.bills-layout #add .actions{
  min-width:0;
}

.bills-layout #add .bill-form-row{
  grid-column: 1 / -1;
  display:grid;
  gap: 18px;
  align-items:end;
}

.bills-layout #add .bill-form-required-row{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bills-layout #add .bill-form-optional-row{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bills-layout #add .field .muted.small{
  margin-top: 6px;
  line-height: 1.35;
}

.bills-layout #add form > .field{
  grid-column: 1;
}

.bills-layout #add .actions{
  grid-column: 2;
  align-self:end;
  padding-bottom: 0;
}

.bills-layout #add .actions .btn{
  width:100%;
  min-height:44px;
  border-radius: 12px;
}

.bills-summary-cards{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bills-layout .table-wrap table{
  min-width: 920px;
}

@media (max-width: 980px){
  .bills-summary-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bills-layout #add .bill-form-required-row,
  .bills-layout #add .bill-form-optional-row{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bills-layout #add .actions{
    grid-column: 2;
  }
}

@media (max-width: 620px){
  .bills-summary-cards{
    grid-template-columns: 1fr;
  }

  .bills-layout #add form,
  .bills-layout #add .bill-form-required-row,
  .bills-layout #add .bill-form-optional-row{
    grid-template-columns: 1fr;
  }

  .bills-layout #add form > .field,
  .bills-layout #add .actions{
    grid-column: 1;
  }
}


/* Bills page search/filter controls */
.bills-filter-panel{
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb,var(--surface-2) 58%,transparent);
}

.bills-filter-head{
  align-items:center;
  margin-bottom: 12px;
}

.bills-filter-head h3{
  margin: 0 0 4px;
}

.bills-filter-grid{
  display:grid;
  grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(150px, 1fr));
  gap: 12px;
  align-items:end;
}

.bills-filter-grid .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.bills-filter-search input{
  min-height: 42px;
}

@media (max-width: 980px){
  .bills-filter-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bills-filter-search{
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px){
  .bills-filter-panel{
    padding: 14px;
    border-radius: 14px;
  }

  .bills-filter-head{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .bills-filter-head .btn{
    width:100%;
  }

  .bills-filter-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* Mobile-first usability pass: dense tables become readable record cards. */
@media (max-width: 700px){
  h1{
    padding-bottom: 11px;
    font-size: clamp(30px, 9vw, 36px);
    line-height: 1.04;
  }

  h1::before{
    width: 42px;
  }

  h1::after{
    left: 48px;
  }

  h2{
    font-size: 19px;
  }

  .app{
    padding: 0 12px;
  }

  .dash-header{
    gap: 12px;
    margin-bottom: 14px;
  }

  .dash-header > .inline,
  .dash-header .actions{
    width: 100%;
  }

  .dash-header .btn{
    flex: 1 1 auto;
  }

  .panel{
    padding: 16px;
    border-radius: 14px;
  }

  .card{
    padding: 14px;
  }

  .cards,
  .cards.cards-2,
  .cards.cards-3,
  .bills-summary-cards{
    grid-template-columns: 1fr;
  }

  .btn{
    min-height: 42px;
  }

  .btn.tiny{
    min-height: 38px;
    padding: 9px 12px;
    font-size: 13px;
  }

  .table-wrap{
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .table-wrap table,
  .bills-layout .table-wrap table{
    min-width: 0;
    width: 100%;
  }

  .table-wrap thead{
    display:none;
  }

  .table-wrap table,
  .table-wrap tbody,
  .table-wrap tr,
  .table-wrap td{
    display:block;
  }

  .table-wrap tbody tr{
    margin: 0 0 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--theme-card);
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
  }

  .bills-layout .table-wrap tbody tr.bill-card-due-bad{
    border-color:color-mix(in srgb,var(--danger) 55%,var(--border));
    box-shadow:
      0 0 0 4px color-mix(in srgb,var(--danger) 72%,transparent),
      0 10px 24px rgba(0,0,0,.22);
  }

  .bills-layout .table-wrap tbody tr.bill-card-due-warn{
    border-color:color-mix(in srgb,var(--warning) 55%,var(--border));
    box-shadow:
      0 0 0 4px color-mix(in srgb,var(--warning) 72%,transparent),
      0 10px 24px rgba(0,0,0,.22);
  }

  .bills-layout .table-wrap tbody tr.bill-card-due-ok{
    border-color:color-mix(in srgb,var(--success) 55%,var(--border));
    box-shadow:
      0 0 0 4px color-mix(in srgb,var(--success) 72%,transparent),
      0 10px 24px rgba(0,0,0,.22);
  }

  .bills-layout .table-wrap tbody tr.bill-card-due-neutral{
    border-color:rgba(var(--primary-rgb),.50);
    box-shadow:
      0 0 0 4px rgba(var(--primary-rgb),.72),
      0 10px 24px rgba(0,0,0,.22);
  }

  .table-wrap tbody tr:hover{
    background: var(--theme-card-strong);
  }

  .table-wrap tbody td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 16px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--border);
    text-align:right;
    min-width: 0;
  }

  .table-wrap tbody td:last-child{
    border-bottom:0;
  }

  .table-wrap tbody td::before{
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-align:left;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .table-wrap tbody td:not([data-label])::before,
  .table-wrap tbody td[data-label=""]::before{
    display:none;
  }

  .table-wrap tbody td[data-label="Description"]{
    align-items:flex-start;
    flex-direction:column;
    text-align:left;
    gap: 5px;
  }

  .table-wrap tbody td[data-label="Description"]::before{
    width:100%;
  }

  .table-wrap .inline,
  .table-wrap form.inline{
    justify-content:flex-end;
  }

  .table-actions{
    align-items:stretch !important;
    flex-direction:column;
  }

  .table-actions::before{
    width:100%;
  }

  .table-actions > button,
  .table-actions > form,
  .table-actions .btn{
    width:100%;
  }

  .mobile-select-cell{
    flex-direction:row;
  }

  .tag,
  .badge{
    white-space:normal;
    text-align:left;
  }

  .dialog{
    width: 94vw;
    max-height: 88vh;
  }

  .dialog-body{
    max-height: 88vh;
    overflow:auto;
  }

  .bulk-row{
    align-items:flex-start;
    gap: 12px;
  }
}

/* Bills page: split the old busy all-in-one block into clearer panels. */
.bills-stack{
  gap: 16px;
}

.bills-heading-panel h2,
.bills-list-head h3{
  margin: 0 0 6px;
}

.panel-kicker{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.bills-filter-shell .bills-filter-panel{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.bills-list-panel .table-wrap{
  margin-top: 0;
}

.bulk-actions-panel[hidden]{
  display: none !important;
}

.bulk-actions-panel{
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb,var(--surface-2) 58%,transparent);
}

@media (max-width: 700px){
  .bills-stack{
    gap: 14px;
  }

  .bills-heading-panel .row-between,
  .bills-list-head,
  .bulk-actions-panel{
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .bulk-actions-panel .inline{
    width: 100%;
  }

  .bulk-actions-panel .inline:last-child{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .bulk-actions-panel .btn{
    width: 100%;
  }
}

/* Bills page V2: make the split panels visually obvious instead of one large block. */
.bills-stack{
  gap: 22px !important;
}

.bills-stack > .panel{
  padding: 20px !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg,var(--theme-panel-top),var(--theme-panel-bottom)) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}

.bills-heading-panel{
  padding: 16px 20px !important;
}

.bills-heading-panel h2{
  margin-bottom: 6px !important;
}

.bills-summary-panel,
.bills-filter-shell,
.bills-list-panel{
  position: relative;
}

.bills-summary-panel{
  padding-top: 18px !important;
}

.bills-summary-cards{
  gap: 16px !important;
}

.bills-summary-cards .card{
  background: color-mix(in srgb,var(--theme-card) 78%,transparent) !important;
  border-color: var(--border) !important;
}

.bills-filter-shell{
  padding: 18px !important;
}

.bills-filter-shell .bills-filter-panel{
  padding: 0 !important;
}

.bills-list-panel{
  padding: 18px !important;
}

.bills-list-panel .table-wrap{
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: auto;
  background: color-mix(in srgb,var(--theme-card) 58%,transparent);
}

.bills-list-panel .bulk-actions-panel{
  margin-top: 2px;
}

@media (max-width: 700px){
  .bills-stack{
    gap: 18px !important;
  }

  .bills-stack > .panel{
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .bills-filter-head{
    align-items: stretch;
    flex-direction: column;
  }

  .bills-filter-head .btn{
    width: 100%;
  }

  .bills-list-panel .table-wrap{
    border: 0;
    background: transparent;
    overflow: visible;
  }
}

/* Pay forecast grouping */
.payday-forecast-subsection{
  min-width:0;
}

.payday-forecast-subtitle{
  margin:0 0 10px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.payday-forecast-subsection-following{
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid rgba(var(--theme-border-rgb),.28);
}

/* Keep the installed iPhone PWA header below the status bar and Dynamic Island. */
@supports (padding-top: env(safe-area-inset-top)) {
  .topbar {
    padding-top: env(safe-area-inset-top);
  }
}

/* Desktop notification centre */
.notification-menu-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.notification-toggle{
  position:relative;
  appearance:none;
  padding:0;
  font:inherit;
}
.notification-toggle[aria-expanded="true"]{
  color:#fff;
  background:rgba(var(--primary-rgb,59,130,246),.16);
  border-color:rgba(var(--primary-rgb,59,130,246),.40);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb,59,130,246),.08);
}
.notification-badge{
  position:absolute;
  top:-5px;
  right:-6px;
  min-width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  padding:0 5px;
  border:2px solid var(--nav);
  border-radius:999px;
  background:var(--danger);
  color:var(--danger-contrast,#111);
  font-size:9px;
  font-weight:900;
  line-height:1;
  letter-spacing:-.02em;
  box-shadow:0 4px 12px color-mix(in srgb,var(--danger) 38%,transparent);
}
.notification-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:min(390px, calc(100vw - 28px));
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:17px;
  background:var(--theme-menu, var(--surface));
  box-shadow:0 22px 65px rgba(0,0,0,.52);
  z-index:75;
}
.notification-menu-head{
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
}
.notification-menu-head > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.notification-menu-head strong{
  color:var(--text);
  font-size:14px;
  letter-spacing:-.01em;
}
.notification-menu-head span{
  color:var(--muted);
  font-size:11px;
}
.notification-clear{
  appearance:none;
  flex:0 0 auto;
  padding:6px 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--primary-soft-text, #bfdbfe);
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.notification-clear:hover{
  background:rgba(var(--primary-rgb,59,130,246),.12);
  color:#fff;
}
.notification-clear:disabled{
  opacity:.5;
  cursor:wait;
}
.notification-menu-list{
  max-height:min(440px, 58vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.notification-menu-item{
  position:relative;
  display:flex;
  align-items:stretch;
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:opacity .15s ease, transform .15s ease, background-color .15s ease;
}
.notification-menu-item:hover{
  background:rgba(255,255,255,.035);
}
.notification-menu-item.is-removing{
  opacity:.4;
  transform:translateX(8px);
  pointer-events:none;
}
.notification-item-main{
  min-width:0;
  flex:1;
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 8px 13px 14px;
  color:inherit;
  text-decoration:none;
}
.notification-item-main:hover{
  color:inherit;
  text-decoration:none;
}
.notification-item-marker{
  width:9px;
  height:9px;
  flex:0 0 auto;
  margin-top:4px;
  border-radius:50%;
  background:rgba(148,163,184,.28);
  box-shadow:none;
}
.notification-menu-item.is-unread .notification-item-marker,
.notification-menu-item.was-unread-on-open .notification-item-marker{
  background:var(--danger);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 16%,transparent),
             0 0 12px color-mix(in srgb,var(--danger) 34%,transparent);
}
.notification-item-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.notification-item-copy strong{
  overflow:hidden;
  color:rgba(255,255,255,.94);
  font-size:12px;
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
}
.notification-item-body{
  display:-webkit-box;
  overflow:hidden;
  color:rgba(255,255,255,.62);
  font-size:11px;
  line-height:1.45;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.notification-item-time{
  color:rgba(255,255,255,.38);
  font-size:10px;
  font-weight:650;
}
.notification-dismiss{
  appearance:none;
  width:34px;
  min-width:34px;
  align-self:stretch;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.36);
  font:inherit;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.notification-dismiss:hover{
  background:color-mix(in srgb,var(--danger) 9%,transparent);
  color:color-mix(in srgb,var(--danger) 74%,var(--text));
}
.notification-menu-state,
.notification-menu-empty{
  min-height:176px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  color:rgba(255,255,255,.50);
  font-size:12px;
  text-align:center;
}
.notification-menu-empty{
  flex-direction:column;
  gap:5px;
}
.notification-menu-empty strong{
  color:rgba(255,255,255,.88);
  font-size:13px;
}
.notification-menu-empty > span:last-child{
  color:rgba(255,255,255,.43);
  font-size:11px;
}
.notification-empty-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  margin-bottom:5px;
  border:1px solid rgba(var(--primary-rgb,59,130,246),.24);
  border-radius:13px;
  background:rgba(var(--primary-rgb,59,130,246),.10);
  color:var(--primary-soft-text, #bfdbfe);
  font-size:18px;
  font-weight:900;
}
.notification-menu-error{
  color:color-mix(in srgb,var(--danger) 74%,var(--text));
}
.notification-settings-link{
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-top:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.70);
  font-size:12px;
  font-weight:750;
  text-decoration:none;
}
.notification-settings-link:hover{
  background:rgba(255,255,255,.055);
  color:#fff;
  text-decoration:none;
}
.notification-settings-link svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Mobile notification centre: full-width panel beneath the app header.
   Kept after the desktop notification rules so these declarations win. */
.notification-badge[hidden]{
  display:none !important;
}

@media (max-width: 860px){
  .notification-menu-wrap{
    position:static;
  }

  .notification-menu{
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 82px);
    right:14px;
    left:14px;
    width:auto;
    max-width:none;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 96px);
    border-radius:18px;
    z-index:120;
  }

  .notification-menu-list{
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - 206px);
  }
}

/* Money runway: current-pay-cycle centrepiece */
.money-runway-panel{
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% -12%, rgba(var(--primary-rgb,59,130,246),.22), transparent 34%),
    radial-gradient(circle at -8% 118%, rgba(var(--theme-secondary-rgb,34,197,94),.14), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb,var(--theme-panel-top,var(--surface)) 96%,var(--primary) 4%), var(--theme-panel-bottom,var(--surface)));
}
.money-runway-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(rgba(var(--theme-border-rgb,148,163,184),.035) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--theme-border-rgb,148,163,184),.035) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 72%);
}
.money-runway-heading{
  position:relative;
  z-index:2;
}
.money-runway-heading h2{
  margin-top:4px;
}
.runway-alert{
  margin:0 0 14px;
}
.runway-overview{
  display:grid;
  grid-template-columns:minmax(260px,330px) minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}
.runway-primary,
.runway-chart-shell{
  min-width:0;
  border:1px solid rgba(var(--theme-border-rgb,148,163,184),.22);
  border-radius:18px;
  background:linear-gradient(155deg,rgba(var(--primary-rgb,59,130,246),.10),color-mix(in srgb,var(--theme-card,var(--surface)) 90%,transparent) 46%,color-mix(in srgb,var(--theme-card-strong,var(--surface)) 96%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 16px 34px rgba(0,0,0,.18);
}
.runway-primary{
  display:flex;
  flex-direction:column;
  padding:20px;
}
.runway-status{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  padding:5px 10px;
  border:1px solid rgba(var(--primary-rgb,59,130,246),.28);
  border-radius:999px;
  background:rgba(var(--primary-rgb,59,130,246),.10);
  color:color-mix(in srgb,var(--primary-soft-text,var(--text)) 88%,#fff);
  font-size:12px;
  font-weight:850;
  letter-spacing:.015em;
}
.runway-status-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(var(--primary-rgb,59,130,246),.14),0 0 14px rgba(var(--primary-rgb,59,130,246),.45);
}
.runway-status-covered,
.runway-status-clear{
  border-color:color-mix(in srgb,var(--success) 34%,transparent);
  background:color-mix(in srgb,var(--success) 11%,transparent);
  color:color-mix(in srgb,var(--success) 74%,var(--text));
}
.runway-status-covered .runway-status-dot,
.runway-status-clear .runway-status-dot{
  background:var(--success);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 15%,transparent),0 0 14px color-mix(in srgb,var(--success) 46%,transparent);
}
.runway-status-buffer-risk{
  border-color:color-mix(in srgb,var(--warning) 38%,transparent);
  background:color-mix(in srgb,var(--warning) 11%,transparent);
  color:color-mix(in srgb,var(--warning) 78%,var(--text));
}
.runway-status-buffer-risk .runway-status-dot{
  background:var(--warning);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--warning) 15%,transparent),0 0 14px color-mix(in srgb,var(--warning) 46%,transparent);
}
.runway-status-shortfall{
  border-color:color-mix(in srgb,var(--danger) 40%,transparent);
  background:color-mix(in srgb,var(--danger) 11%,transparent);
  color:color-mix(in srgb,var(--danger) 78%,var(--text));
}
.runway-status-shortfall .runway-status-dot{
  background:var(--danger);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 15%,transparent),0 0 14px color-mix(in srgb,var(--danger) 46%,transparent);
}
.runway-primary-label{
  margin-top:24px;
  color:var(--muted);
  font-size:13px;
  font-weight:750;
}
.runway-primary-value{
  margin-top:7px;
  font-size:clamp(42px,5.2vw,66px);
  font-weight:900;
  line-height:.98;
  letter-spacing:-.065em;
  text-shadow:0 10px 30px rgba(0,0,0,.24);
}
.runway-primary-note{
  margin-top:10px;
  min-height:38px;
  color:var(--muted);
  font-size:13px;
  line-height:1.42;
}
.runway-primary-note-warning{
  color:color-mix(in srgb,var(--warning) 78%,var(--text));
}
.runway-primary-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:auto;
  padding-top:18px;
}
.runway-primary-stats > div{
  min-width:0;
  padding:10px;
  border:1px solid rgba(var(--theme-border-rgb,148,163,184),.16);
  border-radius:12px;
  background:color-mix(in srgb,var(--theme-card,var(--surface)) 84%,transparent);
}
.runway-primary-stats > div:last-child{
  grid-column:1 / -1;
}
.runway-primary-stats span,
.runway-primary-stats strong{
  display:block;
}
.runway-primary-stats span{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.runway-primary-stats strong{
  margin-top:5px;
  overflow:hidden;
  color:var(--text);
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.runway-chart-shell{
  padding:17px 18px 14px;
}
.runway-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.runway-chart-title{
  margin-bottom:4px;
  color:var(--text);
  font-size:15px;
  font-weight:850;
}
.runway-chart-payday{
  flex:0 0 auto;
  text-align:right;
}
.runway-chart-payday span,
.runway-chart-payday strong{
  display:block;
}
.runway-chart-payday span{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.runway-chart-payday strong{
  margin-top:4px;
  color:var(--text);
  font-size:14px;
}
.runway-chart{
  height:230px;
  margin-top:8px;
}
.runway-chart svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.runway-grid-line{
  stroke:rgba(var(--theme-border-rgb,148,163,184),.13);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
.runway-buffer-line{
  stroke:color-mix(in srgb,var(--warning) 64%,transparent);
  stroke-width:1.25;
  stroke-dasharray:6 7;
  vector-effect:non-scaling-stroke;
}
.runway-zero-line{
  stroke:color-mix(in srgb,var(--danger) 52%,transparent);
  stroke-width:1.35;
  stroke-dasharray:3 6;
  vector-effect:non-scaling-stroke;
}
.runway-caution-zone{
  fill:color-mix(in srgb,var(--warning) 6%,transparent);
}
.runway-danger-zone{
  fill:color-mix(in srgb,var(--danger) 7%,transparent);
}
.runway-area-stop-start{
  stop-color:var(--primary);
  stop-opacity:.30;
}
.runway-area-stop-end{
  stop-color:var(--primary);
  stop-opacity:.015;
}
.runway-chart-area{
  fill:url(#runway-area-gradient);
}
.runway-chart-line{
  fill:none;
  stroke:var(--primary);
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.money-runway-panel[data-runway-state="covered"] .runway-chart-line,
.money-runway-panel[data-runway-state="clear"] .runway-chart-line{
  stroke:var(--success);
}
.money-runway-panel[data-runway-state="buffer-risk"] .runway-chart-line{
  stroke:var(--warning);
}
.money-runway-panel[data-runway-state="shortfall"] .runway-chart-line{
  stroke:var(--danger);
}
.runway-chart-point{
  fill:var(--surface);
  stroke:var(--primary);
  stroke-width:3;
  vector-effect:non-scaling-stroke;
}
.runway-chart-point-start,
.runway-chart-point-payday{
  fill:var(--text);
}
.money-runway-panel[data-runway-state="covered"] .runway-chart-point,
.money-runway-panel[data-runway-state="clear"] .runway-chart-point{
  stroke:var(--success);
}
.money-runway-panel[data-runway-state="buffer-risk"] .runway-chart-point{
  stroke:var(--warning);
}
.money-runway-panel[data-runway-state="shortfall"] .runway-chart-point{
  stroke:var(--danger);
}
.runway-chart-point.is-lowest{
  fill:var(--warning);
  stroke:#fff;
  stroke-width:3.5;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--warning) 58%,transparent));
}
.runway-chart-axis{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:12px;
  margin-top:-2px;
}
.runway-chart-axis > span{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.runway-chart-axis > span:last-child{
  align-items:flex-end;
  text-align:right;
}
.runway-chart-axis strong{
  font-size:13px;
}
.runway-chart-axis small{
  color:var(--muted);
  font-size:10px;
}
.runway-chart-axis-buffer{
  align-items:center;
  text-align:center;
}
.runway-chart-axis-buffer i{
  width:28px;
  height:2px;
  border-top:2px dashed color-mix(in srgb,var(--warning) 72%,transparent);
}
.runway-facts{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.runway-fact{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:4px 10px;
  align-items:center;
  min-width:0;
  padding:12px;
  border:1px solid rgba(var(--theme-border-rgb,148,163,184),.16);
  border-radius:14px;
  background:rgba(15,23,42,.34);
}
.runway-fact-icon{
  grid-row:1 / span 2;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--primary-rgb,59,130,246),.22);
  border-radius:11px;
  background:rgba(var(--primary-rgb,59,130,246),.10);
  color:var(--primary-soft-text,var(--text));
  font-size:17px;
  font-style:normal;
  font-weight:900;
}
.runway-fact-icon-out{
  color:color-mix(in srgb,var(--danger) 76%,var(--text));
  border-color:color-mix(in srgb,var(--danger) 24%,transparent);
  background:color-mix(in srgb,var(--danger) 9%,transparent);
}
.runway-fact-icon-in{
  color:color-mix(in srgb,var(--success) 76%,var(--text));
  border-color:color-mix(in srgb,var(--success) 24%,transparent);
  background:color-mix(in srgb,var(--success) 9%,transparent);
}
.runway-fact span:not(.runway-fact-icon){
  min-width:0;
}
.runway-fact small,
.runway-fact strong{
  display:block;
}
.runway-fact small{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.runway-fact strong{
  margin-top:3px;
  overflow:hidden;
  color:var(--text);
  font-size:16px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.runway-fact em{
  grid-column:2;
  overflow:hidden;
  color:var(--muted);
  font-size:11px;
  font-style:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.runway-message{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:10px;
  padding:11px 13px;
  border:1px solid rgba(var(--primary-rgb,59,130,246),.20);
  border-radius:13px;
  background:rgba(var(--primary-rgb,59,130,246),.075);
  color:color-mix(in srgb,var(--text) 90%,var(--primary-soft-text,var(--text)));
  font-size:13px;
  line-height:1.45;
}
.runway-message-icon{
  flex:0 0 auto;
  width:9px;
  height:9px;
  margin-top:5px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(var(--primary-rgb,59,130,246),.12);
}
.runway-message-covered,
.runway-message-clear{
  border-color:color-mix(in srgb,var(--success) 24%,transparent);
  background:color-mix(in srgb,var(--success) 7%,transparent);
}
.runway-message-covered .runway-message-icon,
.runway-message-clear .runway-message-icon{
  background:var(--success);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 12%,transparent);
}
.runway-message-buffer-risk{
  border-color:color-mix(in srgb,var(--warning) 28%,transparent);
  background:color-mix(in srgb,var(--warning) 7%,transparent);
}
.runway-message-buffer-risk .runway-message-icon{
  background:var(--warning);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--warning) 12%,transparent);
}
.runway-message-shortfall{
  border-color:color-mix(in srgb,var(--danger) 28%,transparent);
  background:color-mix(in srgb,var(--danger) 7%,transparent);
}
.runway-message-shortfall .runway-message-icon{
  background:var(--danger);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 12%,transparent);
}
.runway-timeline{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(var(--theme-border-rgb,148,163,184),.18);
}
.runway-timeline-head{
  align-items:center;
  margin-bottom:10px;
}
.runway-timeline-head h3{
  margin-bottom:5px;
}
.runway-days{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.runway-day{
  overflow:hidden;
  border:1px solid rgba(var(--theme-border-rgb,148,163,184),.16);
  border-radius:14px;
  background:color-mix(in srgb,var(--theme-card,var(--surface)) 78%,transparent);
}
.runway-day.is-lowest{
  border-color:color-mix(in srgb,var(--warning) 36%,transparent);
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--warning) 78%,transparent);
}
.runway-day-head,
.runway-day-net{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
}
.runway-day-head{
  border-bottom:1px solid rgba(var(--theme-border-rgb,148,163,184),.13);
  background:rgba(255,255,255,.018);
}
.runway-day-head > div:first-child{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.runway-day-head > div:first-child > strong{
  font-size:13px;
}
.runway-lowest-pill{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 7px;
  border:1px solid color-mix(in srgb,var(--warning) 35%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--warning) 9%,transparent);
  color:color-mix(in srgb,var(--warning) 80%,var(--text));
  font-size:10px;
  font-weight:800;
}
.runway-day-balance{
  flex:0 0 auto;
  text-align:right;
}
.runway-day-balance small,
.runway-day-balance strong{
  display:block;
}
.runway-day-balance small{
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.runway-day-balance strong{
  margin-top:2px;
  font-size:13px;
}
.runway-day-intraday{
  display:block;
  margin-top:3px;
  color:color-mix(in srgb,var(--warning) 76%,var(--text));
  font-size:9px;
  font-style:normal;
  font-weight:750;
  white-space:nowrap;
}
.runway-order-note{
  margin-top:4px;
  line-height:1.35;
}
.runway-events{
  display:flex;
  flex-direction:column;
}
.runway-event{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  min-width:0;
  padding:10px 12px;
}
.runway-event + .runway-event{
  border-top:1px solid rgba(var(--theme-border-rgb,148,163,184),.10);
}
.runway-event-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex:0 0 40px;
  border:1px solid rgba(var(--theme-border-rgb,148,163,184),.17);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.runway-event-bill-logo.bill-logo{
  width:40px;
  height:40px;
  margin:0;
}
.runway-event-symbol{
  color:var(--primary-soft-text,var(--text));
  font-size:18px;
  font-weight:900;
}
.runway-event-income .runway-event-symbol{
  color:color-mix(in srgb,var(--success) 78%,var(--text));
  border-color:color-mix(in srgb,var(--success) 22%,transparent);
  background:color-mix(in srgb,var(--success) 8%,transparent);
}
.runway-event-expense .runway-event-symbol{
  color:color-mix(in srgb,var(--danger) 76%,var(--text));
  border-color:color-mix(in srgb,var(--danger) 22%,transparent);
  background:color-mix(in srgb,var(--danger) 8%,transparent);
}
.runway-event-copy{
  min-width:0;
}
.runway-event-copy strong,
.runway-event-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.runway-event-copy strong{
  color:var(--text);
  font-size:13px;
}
.runway-event-copy small{
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}
.runway-event-amount{
  font-size:13px;
  white-space:nowrap;
}
.runway-day-net{
  min-height:36px;
  padding-top:8px;
  padding-bottom:8px;
  border-top:1px solid rgba(var(--theme-border-rgb,148,163,184),.12);
  background:rgba(255,255,255,.014);
  color:var(--muted);
  font-size:11px;
}
.runway-day-net strong{
  font-size:12px;
}
.runway-empty-events{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  border:1px dashed rgba(var(--theme-border-rgb,148,163,184),.24);
  border-radius:14px;
  background:color-mix(in srgb,var(--theme-card,var(--surface)) 68%,transparent);
}
.runway-empty-events > span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:color-mix(in srgb,var(--success) 10%,transparent);
  color:var(--success);
  font-size:18px;
  font-weight:900;
}
.runway-empty-events strong,
.runway-empty-events small{
  display:block;
}
.runway-empty-events small{
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
}
.runway-setup{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:24px;
  align-items:center;
  min-height:250px;
  padding:20px;
  border:1px solid rgba(var(--theme-border-rgb,148,163,184),.18);
  border-radius:18px;
  background:color-mix(in srgb,var(--theme-card,var(--surface)) 76%,transparent);
}
.runway-setup p{
  max-width:680px;
  line-height:1.55;
}
.runway-setup-visual{
  position:relative;
  height:150px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--primary-rgb,59,130,246),.12),rgba(15,23,42,.16));
}
.runway-setup-visual::before,
.runway-setup-visual::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
}
.runway-setup-visual::before{
  top:50%;
  border-top:1px dashed rgba(var(--theme-border-rgb,148,163,184),.30);
}
.runway-setup-visual::after{
  left:20px;
  right:20px;
  top:88px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--theme-secondary,var(--success)));
  transform:rotate(-7deg);
  box-shadow:0 0 18px rgba(var(--primary-rgb,59,130,246),.34);
}
.runway-setup-visual span{
  position:absolute;
  z-index:2;
  width:10px;
  height:10px;
  border:3px solid var(--primary);
  border-radius:50%;
  background:var(--surface);
}
.runway-setup-visual span:nth-child(1){left:22px;top:92px;}
.runway-setup-visual span:nth-child(2){left:38%;top:77px;}
.runway-setup-visual span:nth-child(3){left:65%;top:69px;}
.runway-setup-visual span:nth-child(4){right:22px;top:58px;}
.runway-buffer-dialog{
  width:min(520px,94vw);
}
.runway-money-input{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(var(--theme-border-rgb,148,163,184),.22);
  border-radius:12px;
  background:var(--theme-input,rgba(15,23,42,.82));
}
.runway-money-input:focus-within{
  border-color:rgba(var(--primary-rgb,59,130,246),.58);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb,59,130,246),.12);
}
.runway-money-input > span{
  display:grid;
  place-items:center;
  align-self:stretch;
  border-right:1px solid rgba(var(--theme-border-rgb,148,163,184),.18);
  color:var(--muted);
  font-weight:850;
}
.runway-money-input input{
  min-width:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.runway-money-input input:focus{
  outline:0;
  box-shadow:none;
}
.runway-buffer-examples{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

@media (max-width:980px){
  .runway-overview{
    grid-template-columns:1fr;
  }
  .runway-primary{
    min-height:0;
  }
  .runway-facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  .money-runway-panel{
    padding-top:30px !important;
  }
  .panel.money-runway-panel.hideable > .row-between.money-runway-heading{
    padding-top:0 !important;
  }
  .money-runway-heading{
    flex-direction:column;
    align-items:flex-start !important;
    gap:12px;
  }
  .money-runway-heading > :first-child{
    width:100%;
  }
  .panel.money-runway-panel.hideable.has-top-action > .row-between.money-runway-heading > button[data-runway-buffer-open]{
    position:static !important;
    inset:auto !important;
    align-self:flex-start;
    order:2;
    margin:0;
  }
  .runway-overview{
    gap:10px;
  }
  .runway-primary,
  .runway-chart-shell{
    border-radius:15px;
  }
  .runway-primary{
    padding:16px;
  }
  .runway-primary-label{
    margin-top:20px;
  }
  .runway-primary-value{
    font-size:clamp(42px,14vw,58px);
  }
  .runway-chart-shell{
    padding:14px 12px 12px;
  }
  .runway-chart-head{
    align-items:flex-start;
  }
  .runway-chart{
    height:190px;
  }
  .runway-chart-axis{
    gap:6px;
  }
  .runway-chart-axis strong{
    font-size:11px;
  }
  .runway-chart-axis-buffer small{
    font-size:9px;
  }
  .runway-facts{
    grid-template-columns:1fr;
    gap:8px;
  }
  .runway-fact{
    padding:10px;
  }
  .runway-timeline-head{
    align-items:stretch;
  }
  .runway-timeline-head .btn{
    width:100%;
  }
  .runway-day-head{
    align-items:flex-start;
  }
  .runway-event{
    grid-template-columns:36px minmax(0,1fr) auto;
    gap:9px;
    padding:10px;
  }
  .runway-event-icon,
  .runway-event-bill-logo.bill-logo{
    width:36px;
    height:36px;
  }
  .runway-event-amount{
    font-size:12px;
  }
  .runway-setup{
    grid-template-columns:1fr;
    min-height:0;
    padding:16px;
  }
  .runway-setup-visual{
    height:120px;
  }
}

@media (prefers-reduced-motion:no-preference){
  .runway-chart-line{
    stroke-dasharray:1600;
    stroke-dashoffset:1600;
    animation:runway-line-draw .9s cubic-bezier(.2,.75,.3,1) .08s forwards;
  }
  .runway-chart-area{
    opacity:0;
    animation:runway-area-in .55s ease .45s forwards;
  }
  .runway-chart-point{
    opacity:0;
    animation:runway-point-in .35s ease .62s forwards;
  }
}
@keyframes runway-line-draw{to{stroke-dashoffset:0;}}
@keyframes runway-area-in{to{opacity:1;}}
@keyframes runway-point-in{to{opacity:1;}}

/* ========================================================================== */
/* Joint Accounts                                                             */
/* ========================================================================== */

.budget-account-switcher{position:relative;display:flex;align-items:center}
.budget-account-toggle{
  display:flex;align-items:center;gap:9px;min-height:38px;padding:5px 10px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));
  background:color-mix(in srgb,var(--theme-toolbar,var(--surface-2)) 88%,transparent);
  color:var(--text);cursor:pointer;font:inherit;text-align:left;
}
.budget-account-toggle:hover,.budget-account-toggle[aria-expanded="true"]{
  border-color:color-mix(in srgb,var(--primary) 50%,var(--border));
  background:color-mix(in srgb,var(--theme-toolbar-hover,var(--surface-2)) 92%,transparent);
}
.budget-account-icon{font-size:16px;line-height:1}
.budget-account-toggle-copy{display:flex;flex-direction:column;min-width:76px;max-width:132px;line-height:1.05}
.budget-account-toggle-copy small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.budget-account-toggle-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.budget-account-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:110;width:286px;padding:10px;
  background:var(--theme-menu,var(--surface));border:1px solid var(--border);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.34)
}
.budget-account-menu-label{padding:5px 8px 8px;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.budget-account-option{margin:0}
.budget-account-option button,.budget-account-menu-link{
  width:100%;display:grid;grid-template-columns:24px minmax(0,1fr) 18px;align-items:center;gap:9px;
  padding:9px 10px;border:0;border-radius:11px;background:transparent;color:var(--text);font:inherit;text-align:left;text-decoration:none;cursor:pointer
}
.budget-account-option button:hover,.budget-account-menu-link:hover{background:color-mix(in srgb,var(--primary) 10%,transparent)}
.budget-account-option.active button{background:color-mix(in srgb,var(--primary) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 24%,transparent)}
.budget-account-option button > span:nth-child(2),.budget-account-menu-link > span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.budget-account-option strong,.budget-account-menu-link strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.budget-account-option small,.budget-account-menu-link small{font-size:10px;color:var(--muted);margin-top:2px}
.budget-account-option i{font-style:normal;color:var(--primary);font-weight:900;text-align:right}
.budget-account-menu-divider{height:1px;background:var(--border);margin:8px 4px}
.budget-account-menu-link{grid-template-columns:24px minmax(0,1fr)}

.customize-feature-link{
  display:grid;grid-template-columns:34px minmax(0,1fr) 14px;align-items:center;gap:9px;padding:9px 8px;
  border-radius:12px;color:var(--text);text-decoration:none;border:1px solid transparent
}
.customize-feature-link:hover{background:color-mix(in srgb,var(--primary) 8%,transparent);border-color:color-mix(in srgb,var(--primary) 18%,transparent)}
.customize-feature-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 13%,var(--surface-2));font-size:15px}
.customize-feature-arrow{font-size:22px;color:var(--muted);line-height:1}
.customize-feature-link-mobile{margin-top:4px}

.mobile-account-context{padding:12px 14px 4px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.mobile-account-options{display:grid;gap:5px;margin-top:8px;margin-bottom:8px}
.mobile-account-options form{margin:0}
.mobile-account-option{
  display:grid;grid-template-columns:24px minmax(0,1fr) 18px;align-items:center;gap:8px;width:100%;padding:10px 11px;
  border:1px solid transparent;border-radius:11px;background:transparent;color:var(--text);font:inherit;text-align:left;text-decoration:none
}
.mobile-account-option.active{background:color-mix(in srgb,var(--primary) 13%,transparent);border-color:color-mix(in srgb,var(--primary) 24%,transparent)}
.mobile-account-option i{font-style:normal;color:var(--primary);font-weight:900}

.joint-page{max-width:1440px;margin-inline:auto}
.joint-alert{margin-bottom:14px}
.joint-section-nav{display:flex;align-items:center;gap:5px;width:max-content;max-width:100%;padding:5px;margin:0 0 14px;border-radius:14px;overflow-x:auto}
.joint-section-nav a{flex:0 0 auto;padding:8px 12px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:800;white-space:nowrap}
.joint-section-nav a:hover{color:var(--text);background:color-mix(in srgb,var(--primary) 7%,transparent)}
.joint-section-nav a.is-active{color:var(--text);background:color-mix(in srgb,var(--primary) 13%,var(--surface-2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 25%,var(--border))}
.joint-feature-pill{
  display:inline-flex;align-items:center;width:max-content;padding:6px 9px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);background:color-mix(in srgb,var(--primary) 10%,transparent);
  color:var(--primary-soft-text,var(--primary));font-size:10px;font-weight:850;letter-spacing:.04em;text-transform:uppercase
}
.joint-setup-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr);gap:22px;align-items:start}
.joint-setup-copy{padding:28px 18px 18px 4px;position:sticky;top:96px}
.joint-setup-copy h2{font-size:clamp(30px,4vw,50px);line-height:1.02;letter-spacing:-.035em;margin:14px 0 14px;max-width:680px}
.joint-setup-copy > p{max-width:650px;color:var(--muted);font-size:15px;line-height:1.65}
.joint-privacy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.joint-privacy-grid > div{display:grid;grid-template-columns:26px 1fr;column-gap:8px;row-gap:2px;padding:13px;border-radius:14px;background:color-mix(in srgb,var(--surface-2) 84%,transparent);border:1px solid var(--border)}
.joint-privacy-grid > div > span{grid-row:1 / span 2;color:var(--primary);font-weight:900}
.joint-privacy-grid strong{font-size:12px}.joint-privacy-grid small{font-size:10px;color:var(--muted);line-height:1.4}
.joint-setup-form{padding:22px}
.joint-step-head{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:11px;margin-bottom:14px}
.joint-step-head > span{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--primary) 14%,var(--surface-2));border:1px solid color-mix(in srgb,var(--primary) 27%,transparent);color:var(--primary-soft-text,var(--primary));font-weight:900}
.joint-step-head > div{display:flex;flex-direction:column;gap:2px}.joint-step-head strong{font-size:13px}.joint-step-head small{font-size:10px;color:var(--muted)}
.joint-step-divider{height:1px;background:var(--border);margin:20px 0}
.joint-security-note{display:flex;gap:8px;align-items:flex-start;padding:10px 11px;margin-top:8px;border-radius:11px;background:color-mix(in srgb,var(--primary) 7%,transparent);color:var(--muted);font-size:10px;line-height:1.45}
.joint-cycle-setup{margin-top:14px;padding:13px;border-radius:14px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 58%,transparent)}.joint-cycle-setup-head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.joint-cycle-setup-head strong{font-size:11px}.joint-cycle-setup-head small{font-size:9px;color:var(--muted);line-height:1.4}.joint-cycle-setup .field{margin-bottom:7px}
.joint-create-button{width:100%;min-height:44px}
.joint-bill-picker{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--surface-2) 54%,transparent)}
.joint-bill-picker-head{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;border-bottom:1px solid var(--border);font-size:10px;color:var(--muted)}
.joint-bill-picker-list{max-height:260px;overflow:auto}
.joint-bill-choice{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);cursor:pointer}
.joint-bill-choice:last-child{border-bottom:0}.joint-bill-choice:hover{background:color-mix(in srgb,var(--primary) 6%,transparent)}
.joint-bill-choice-copy{display:flex;flex-direction:column;min-width:0}.joint-bill-choice-copy strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.joint-bill-choice-copy small{font-size:9px;color:var(--muted)}

.joint-invite-banner{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;margin-bottom:14px;background:linear-gradient(115deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface))}
.joint-invite-banner-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--primary) 15%,var(--surface-2))}
.joint-invite-banner-copy{display:flex;flex-direction:column;gap:2px}.joint-invite-banner-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}

.joint-invitation-page{min-height:calc(100vh - 180px);display:grid;place-items:center;padding:34px 16px}
.joint-invitation-card{width:min(620px,100%);padding:34px;text-align:center}
.joint-invitation-icon{width:72px;height:72px;margin:0 auto 18px;border-radius:22px;display:grid;place-items:center;font-size:31px;background:color-mix(in srgb,var(--primary) 13%,var(--surface-2));border:1px solid color-mix(in srgb,var(--primary) 28%,transparent)}
.joint-invitation-card h1{font-size:30px;margin:8px 0}.joint-invitation-card > p{color:var(--muted)}
.joint-invitation-permissions{display:grid;gap:9px;margin:22px 0;text-align:left}.joint-invitation-permissions > div{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:11px;border-radius:11px;background:var(--surface-2);font-size:12px}.joint-invitation-permissions > div > span:first-child{color:var(--primary)}
.joint-invitation-actions{justify-content:center}

.joint-manage-hero{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;background:linear-gradient(120deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface))}
.joint-manage-identity{display:flex;gap:13px;align-items:center}.joint-manage-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;font-size:21px;background:color-mix(in srgb,var(--primary) 14%,var(--surface-2));border:1px solid color-mix(in srgb,var(--primary) 25%,transparent)}
.joint-manage-identity h2{margin:2px 0 3px}.joint-manage-links{display:flex;gap:7px;flex-wrap:wrap}
.joint-manage-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(380px,1.12fr);gap:14px;align-items:start}
.joint-contribution-panel{overflow:hidden}.joint-transfer-option{margin-top:2px}
.joint-member-list{display:grid;gap:7px;margin:14px 0}.joint-member{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border)}
.joint-member > span:nth-child(2){display:flex;flex-direction:column}.joint-member strong{font-size:12px}.joint-member small{font-size:9px;color:var(--muted)}.joint-member em{font-style:normal;font-size:9px;color:var(--primary);font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.joint-member-actions{display:flex;align-items:center;justify-content:flex-end}.joint-member-actions form{margin:0}.joint-member-remove{min-height:28px;height:28px;padding:0 9px;font-size:9px;color:var(--muted) !important}.joint-member-remove:hover{color:var(--danger) !important;border-color:color-mix(in srgb,var(--danger) 35%,var(--border)) !important}
.joint-owner-leave-note{margin-top:8px;line-height:1.45}
.joint-invite-form,.joint-rename-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}.joint-invite-form .field,.joint-rename-form .field{margin:0}.joint-account-settings-panel .joint-leave-form{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.joint-activity-panel{min-height:480px}.joint-live-dot{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.joint-live-dot i{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 13%,transparent)}
.joint-activity-list{display:grid}.joint-activity-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;padding:12px 4px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)}.joint-activity-item:hover{background:color-mix(in srgb,var(--primary) 5%,transparent)}.joint-activity-item:last-child{border-bottom:0}
.joint-activity-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,var(--surface-2));font-weight:900;color:var(--primary-soft-text,var(--primary))}.joint-activity-copy{display:flex;flex-direction:column;gap:2px}.joint-activity-copy strong{font-size:11px}.joint-activity-copy > span{font-size:10px;color:var(--muted);line-height:1.4}.joint-activity-copy time{font-size:8px;color:var(--muted);opacity:.78;margin-top:2px}
.joint-empty-activity{min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;color:var(--muted)}.joint-empty-activity > span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--success) 12%,transparent);color:var(--success);margin-bottom:6px}.joint-empty-activity strong{color:var(--text);font-size:12px}.joint-empty-activity small{font-size:10px}
.joint-account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}.joint-account-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center}.joint-account-card-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,var(--surface-2))}.joint-account-card h3{margin:0 0 2px;font-size:13px}

.joint-overview-totals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px}
.joint-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}
.joint-overview-account{overflow:hidden;position:relative}.joint-overview-account::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary);opacity:.75}.joint-overview-name{display:flex;align-items:center;gap:10px}.joint-overview-name > span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 11%,var(--surface-2))}.joint-overview-name h2{margin:0;font-size:16px}
.joint-overview-money{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 12px}.joint-overview-money > div{padding:13px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border);display:flex;flex-direction:column;gap:4px}.joint-overview-money span{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:800}.joint-overview-money strong{font-size:20px}.joint-overview-safe{background:color-mix(in srgb,var(--primary) 7%,var(--surface-2)) !important}
.joint-overview-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:9px}.joint-overview-meta > span{display:flex;align-items:center;gap:5px}.joint-overview-meta .runway-status-dot{position:static;width:6px;height:6px}

@media (max-width:1100px){
  .budget-account-toggle-copy{display:none}.budget-account-toggle{padding-inline:9px}.budget-account-toggle .account-caret{display:none}
  .joint-setup-hero{grid-template-columns:1fr}.joint-setup-copy{position:static;padding:12px 4px 0}.joint-manage-grid{grid-template-columns:1fr}.joint-activity-panel{min-height:0}
}
@media (max-width:720px){
  .budget-account-switcher{display:none}
  .joint-page .dash-header{gap:12px}
  .joint-section-nav{width:100%;margin-bottom:12px}.joint-section-nav a{flex:1;text-align:center}
  .joint-setup-copy h2{font-size:32px}.joint-privacy-grid{grid-template-columns:1fr}.joint-setup-form{padding:16px}.joint-step-head{grid-template-columns:30px minmax(0,1fr)}.joint-step-head > span{width:30px;height:30px}
  .joint-invite-banner{grid-template-columns:38px 1fr}.joint-invite-banner-actions{grid-column:1/-1;justify-content:stretch}.joint-invite-banner-actions .btn{flex:1}
  .joint-invitation-card{padding:22px 16px}.joint-invitation-card h1{font-size:25px}.joint-invitation-actions{display:grid}.joint-invitation-actions .btn{width:100%}
  .joint-manage-hero{align-items:flex-start;flex-direction:column}.joint-manage-links{width:100%}.joint-manage-links .btn{flex:1}
  .joint-invite-form,.joint-rename-form{grid-template-columns:1fr}.joint-invite-form .btn,.joint-rename-form .btn{width:100%}
  .joint-overview-totals{grid-template-columns:1fr}.joint-overview-grid{grid-template-columns:1fr}.joint-overview-money{grid-template-columns:1fr 1fr}.joint-overview-money strong{font-size:17px}
  .joint-account-card{grid-template-columns:42px minmax(0,1fr)}.joint-account-card form{grid-column:1/-1}.joint-account-card .btn{width:100%}
}

/* Joint Account invitation actions inside the existing notification centre. */
.notification-menu-item.has-actions{
  flex-wrap:wrap;
}
.notification-menu-item.has-actions > .notification-item-main{
  padding-bottom:8px;
}
.notification-menu-item.has-actions > .notification-dismiss{
  align-self:flex-start;
  min-height:56px;
}
.notification-invite-actions{
  flex:1 0 100%;
  display:flex;
  justify-content:flex-end;
  gap:7px;
  padding:0 42px 12px 34px;
}
.notification-invite-btn{
  min-height:30px;
  padding:0 11px;
  border:1px solid rgba(148,163,184,.20);
  border-radius:9px;
  background:rgba(15,23,42,.70);
  color:rgba(255,255,255,.72);
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.notification-invite-btn.is-accept{
  border-color:rgba(var(--primary-rgb,59,130,246),.32);
  background:rgba(var(--primary-rgb,59,130,246),.15);
  color:var(--primary-soft-text,#bfdbfe);
}
.notification-invite-btn:hover:not(:disabled){
  border-color:rgba(148,163,184,.38);
  background:rgba(30,41,59,.92);
  color:#fff;
}
.notification-invite-btn.is-accept:hover:not(:disabled){
  border-color:rgba(var(--primary-rgb,59,130,246),.50);
  background:rgba(var(--primary-rgb,59,130,246),.24);
}
.notification-invite-btn:disabled{
  opacity:.48;
  cursor:wait;
}

.joint-move-note{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid rgba(var(--primary-rgb,59,130,246),.16);
  border-radius:11px;
  background:rgba(var(--primary-rgb,59,130,246),.07);
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

/* Income engine: explain forward protection inside the existing Money Runway language. */
.runway-forward-protection{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:11px;align-items:center;margin:12px 0;padding:12px 14px;border:1px solid rgba(var(--primary-rgb),.24);border-radius:14px;background:rgba(var(--primary-rgb),.06)}
.runway-forward-protection-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(var(--primary-rgb),.12);color:var(--primary);font-size:19px}.runway-forward-protection>span:nth-child(2){display:grid;gap:2px}.runway-forward-protection small{color:var(--muted);font-size:12px}
@media(max-width:700px){.runway-forward-protection{grid-template-columns:34px 1fr}.runway-forward-protection>.btn{grid-column:2;justify-self:start}}

/* Joint contribution planning: powerful scheduling, compact shared-account controls. */
.joint-contribution-plan{display:grid;gap:18px}
.joint-plan-form{gap:14px}
.joint-plan-target-amount{max-width:280px}
.joint-plan-members{display:grid;gap:8px}
.joint-plan-member{display:grid;grid-template-columns:auto minmax(120px,1fr) minmax(120px,170px) minmax(110px,150px);gap:12px;align-items:end;padding:11px 12px;border:1px solid color-mix(in srgb,var(--border) 72%,transparent);border-radius:13px;background:color-mix(in srgb,var(--surface) 94%,var(--primary) 6%)}
.joint-plan-member-name{display:grid;gap:2px;align-self:center}.joint-plan-member-name small{color:var(--muted)}
.joint-plan-member label{display:grid;gap:5px;font-size:11px;color:var(--muted);font-weight:750}.joint-plan-member input{width:100%}
.joint-percent-input{position:relative;display:block}.joint-percent-input input{padding-right:30px}.joint-percent-input i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font-weight:800}
.joint-plan-explainer{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border));border-radius:13px;background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--text)}
.joint-plan-explainer>span:last-child{display:grid;gap:3px}.joint-plan-explainer small{color:var(--muted);line-height:1.45}
.joint-plan-privacy{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--border)}
.joint-plan-privacy>div:first-child{display:grid;gap:3px}
.joint-plan-preview{display:grid;gap:9px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--surface) 90%,var(--primary) 10%);border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border))}
.joint-plan-preview-head,.joint-plan-preview-row{display:flex;align-items:center;gap:10px;justify-content:space-between}.joint-plan-preview-head small,.joint-plan-preview-row small{color:var(--muted)}
.joint-plan-preview-row{padding-top:8px;border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent);flex-wrap:wrap}.joint-plan-preview-row span{flex:1;min-width:100px}.joint-plan-preview-row strong{font-size:13px}
.joint-plan-warning{padding:11px 13px;border-radius:12px;border:1px solid color-mix(in srgb,var(--warning) 35%,var(--border));background:color-mix(in srgb,var(--warning) 9%,var(--surface));font-size:13px;color:var(--text)}
@media(max-width:700px){.joint-plan-member{grid-template-columns:auto 1fr}.joint-plan-member label{grid-column:1/-1}.joint-plan-preview-head{align-items:flex-start;flex-direction:column}.joint-plan-preview-row small{width:100%}}

/* Progressive disclosure for optional Joint contribution planning. */
.joint-optional-plan{display:block!important;padding:0;overflow:hidden}
.joint-plan-summary{list-style:none;cursor:pointer;padding:19px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.joint-plan-summary::-webkit-details-marker{display:none}
.joint-plan-summary>span:first-child{display:grid;gap:2px;min-width:0}
.joint-plan-summary .panel-kicker{margin:0}
.joint-plan-summary small{color:var(--muted);font-weight:400;line-height:1.4}
.joint-plan-caret{color:var(--muted);transition:transform .15s;font-size:18px}
.joint-optional-plan[open] .joint-plan-caret{transform:rotate(180deg)}
.joint-plan-body{display:grid;gap:18px;padding:18px 20px 20px;border-top:1px solid var(--border)}
.joint-plan-intro{align-items:flex-start}.joint-plan-intro h3{margin:0 0 4px}
@media(max-width:700px){.joint-plan-summary{padding:17px}.joint-plan-body{padding:16px}.joint-plan-intro{align-items:flex-start;flex-direction:column}}

/* Budget Byron 2.0: layout editing is deliberate, never permanent UI furniture. */
body:not(.layout-editing) .hide-btn,
body:not(.layout-editing) .drag-handle,
body:not(.layout-editing) .card-drag-handle{
  display:none !important;
}
.layout-edit-bar{
  width:min(1180px, calc(100% - 32px));
  margin:14px auto 0;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}
.layout-edit-copy{display:flex;flex-direction:column;gap:2px;min-width:210px}
.layout-edit-copy span{font-size:.82rem;color:var(--muted)}
.layout-edit-hidden{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.layout-edit-hidden>span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.layout-edit-hidden .customize-list{display:flex;align-items:center;gap:7px;min-width:0;max-width:520px;overflow:auto}
.layout-edit-hidden .customize-item{display:flex;align-items:center;gap:6px;padding:5px 7px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);white-space:nowrap}
.layout-edit-hidden .customize-item .label{font-size:.8rem}
@media (max-width:760px){
  .layout-edit-bar{width:calc(100% - 20px);margin-top:10px;align-items:flex-start;flex-wrap:wrap}
  .layout-edit-hidden{order:3;margin-left:0;width:100%;align-items:flex-start;flex-direction:column}
  .layout-edit-hidden .customize-list{max-width:100%;width:100%}
  .layout-edit-bar>a{margin-left:auto}
}

/* Guided navigation focus: deep links gently point to the exact thing Byron meant. */
.bb-guided-focus{
  scroll-margin-block:100px;
  border-color:var(--primary) !important;
  background-color:color-mix(in srgb,var(--surface-2,var(--surface)) 88%,var(--primary) 12%) !important;
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.18),0 0 26px rgba(var(--primary-rgb),.13) !important;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
tr.bb-guided-focus{
  background:transparent !important;
  box-shadow:none !important;
}
tr.bb-guided-focus > td{
  background:color-mix(in srgb,var(--surface-2,var(--surface)) 86%,var(--primary) 14%) !important;
  box-shadow:inset 0 1px 0 rgba(var(--primary-rgb),.72),inset 0 -1px 0 rgba(var(--primary-rgb),.72);
}
tr.bb-guided-focus > td:first-child{
  box-shadow:inset 1px 0 0 rgba(var(--primary-rgb),.72),inset 0 1px 0 rgba(var(--primary-rgb),.72),inset 0 -1px 0 rgba(var(--primary-rgb),.72);
}
tr.bb-guided-focus > td:last-child{
  box-shadow:inset -1px 0 0 rgba(var(--primary-rgb),.72),inset 0 1px 0 rgba(var(--primary-rgb),.72),inset 0 -1px 0 rgba(var(--primary-rgb),.72);
}
@keyframes bb-guided-focus-pulse{
  0%,100%{filter:none;}
  45%{filter:drop-shadow(0 0 10px rgba(var(--primary-rgb),.34));}
}
.bb-guided-focus-pulse{
  animation:bb-guided-focus-pulse .9s ease-out 1;
}
@media (prefers-reduced-motion:reduce){
  .bb-guided-focus-pulse{animation:none;}
}


/* Shared page header: every major screen uses one rhythm and mobile collapse. */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}
.page-head>div:first-child{min-width:0}
.page-head h1{margin:2px 0 4px}
.page-head>div:first-child>.muted,.page-head>div:first-child>p{max-width:720px;line-height:1.55}
.page-head>.inline,.page-head>.actions{flex:0 0 auto;align-self:center}
@media (max-width:720px){
  .page-head{align-items:flex-start;flex-direction:column;gap:13px}
  .page-head>.inline,.page-head>.actions{width:100%;align-self:stretch}
  .page-head>.inline>.btn,.page-head>.actions>.btn{flex:1}
}

/* Budget Byron consistency pass: selection controls live before their collection. */
.bills-list-panel .bulk-actions-panel{
  margin-top:14px;
  margin-bottom:0;
}

@media (max-width:700px){
  .bills-list-panel .bulk-actions-panel{
    align-items:stretch;
    gap:10px;
  }
  .bills-list-panel .bulk-actions-panel > .inline:last-child{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
  .bills-list-panel .bulk-actions-panel .btn{
    width:100%;
  }

  /* Normal bills stay quiet. Strong outlines are reserved for attention states. */
  .bills-layout .table-wrap tbody tr.bill-card-due-neutral,
  .bills-layout .table-wrap tbody tr.bill-card-due-ok{
    border-color:var(--border);
    box-shadow:0 8px 20px rgba(0,0,0,.18);
  }
  .bills-layout .table-wrap tbody tr.bill-card-due-warn{
    border-color:color-mix(in srgb,var(--warning) 56%,var(--border));
    box-shadow:0 0 0 2px color-mix(in srgb,var(--warning) 45%,transparent),0 10px 24px rgba(0,0,0,.20);
  }
  .bills-layout .table-wrap tbody tr.bill-card-due-bad{
    border-color:color-mix(in srgb,var(--danger) 60%,var(--border));
    box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 50%,transparent),0 10px 24px rgba(0,0,0,.22);
  }

  /* Edit is the normal action. Delete remains available but visually secondary. */
  .bills-layout .table-actions form[action="/bills/delete"] .btn{
    background:transparent;
    border-color:color-mix(in srgb,var(--danger) 34%,var(--border));
    color:color-mix(in srgb,var(--danger) 76%,var(--text));
    box-shadow:none;
  }
}

/* Destructive bill actions stay available without competing with the primary mobile workflow. */
.bill-mobile-more{display:none}
@media (max-width:700px){
  .bills-layout .table-actions .bill-delete-desktop{display:none}
  .bill-mobile-more{display:block;position:relative}
  .bill-mobile-more>summary{list-style:none;cursor:pointer;user-select:none}
  .bill-mobile-more>summary::-webkit-details-marker{display:none}
  .bill-mobile-more-menu{
    position:absolute;
    right:0;
    top:calc(100% + 6px);
    z-index:8;
    min-width:150px;
    padding:8px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    box-shadow:0 14px 34px rgba(0,0,0,.28);
  }
  .bill-mobile-more-menu form,.bill-mobile-more-menu .btn{width:100%}
}

/* Administration navigation stays one destination; pending approvals remain visible. */
.account-menu-count,.mnav-count{
  display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--primary);color:var(--primary-contrast,#fff);font-size:10px;font-weight:900;
}
.account-menu-link .account-menu-count{margin-left:auto}
.mobile-admin-link{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mobile-primary-links{display:grid;gap:6px}

/* Installed-app quick navigation: primary destinations stay one tap away without
   replacing the normal menu used for Settings, notifications and administration. */
.pwa-quick-nav{display:none}
@media (max-width:860px){
  body.pwa-standalone .mobile-primary-links{display:none}
  body.pwa-standalone .pwa-quick-nav{
    position:fixed;
    left:50%;
    width:min(374px,calc(100% - 34px));
    transform:translateX(-50%);
    bottom:max(14px,env(safe-area-inset-bottom,0px));
    z-index:48;
    display:flex;
    align-items:stretch;
    gap:1px;
    padding:4px;
    overflow:hidden;
    isolation:isolate;
    border:1px solid rgba(255,255,255,.26);
    border-radius:27px;
    /* The shell is the glass. Navigation content stays fully opaque so labels
       remain crisp while the page itself remains visible through the lens. */
    background:rgba(255,255,255,.016);
    box-shadow:
      0 14px 32px rgba(0,0,0,.18),
      0 2px 7px rgba(0,0,0,.07),
      inset 0 1px 0 rgba(255,255,255,.30),
      inset 0 -1px 0 rgba(255,255,255,.07);
    -webkit-backdrop-filter:blur(2px) saturate(118%) brightness(1.015);
    backdrop-filter:blur(2px) saturate(118%) brightness(1.015);
  }
  body.pwa-standalone .pwa-quick-nav::before{
    content:"";
    position:absolute;
    inset:0 0 52% 0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.006) 62%,transparent);
  }
  body.pwa-standalone .pwa-quick-link{
    min-width:0;
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-height:52px;
    padding:5px 2px 4px;
    border:1px solid transparent;
    border-radius:21px;
    color:color-mix(in srgb,var(--text) 82%,var(--muted) 18%);
    opacity:1;
    text-decoration:none;
    font-size:9.75px;
    font-weight:850;
    letter-spacing:.005em;
    line-height:1;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
    text-shadow:0 1px 5px rgba(0,0,0,.78);
    transition:flex-grow .17s ease,background-color .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s;
  }
  body.pwa-standalone .pwa-quick-link:hover{text-decoration:none;color:var(--text)}
  body.pwa-standalone .pwa-quick-link:active{transform:scale(.97)}
  body.pwa-standalone .pwa-quick-link svg{
    width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:1;
  }
  body.pwa-standalone .pwa-quick-link span{opacity:1}
  body.pwa-standalone .pwa-quick-link.active{
    flex-grow:1.35;
    color:var(--primary);
    opacity:1;
    background:
      linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
      color-mix(in srgb,var(--primary) 2%,transparent);
    border-color:color-mix(in srgb,var(--primary) 48%,rgba(255,255,255,.22));
    box-shadow:
      0 6px 14px rgba(0,0,0,.13),
      inset 0 1px 0 rgba(255,255,255,.22),
      0 0 0 1px color-mix(in srgb,var(--primary) 6%,transparent);
  }
  body.pwa-standalone .pwa-quick-link.active svg{filter:drop-shadow(0 2px 5px color-mix(in srgb,var(--primary) 38%,transparent))}
  body.pwa-standalone .app{margin-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
  body.pwa-standalone .app-footer{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:390px){
  body.pwa-standalone .pwa-quick-nav{width:calc(100% - 28px);padding:4px}
  body.pwa-standalone .pwa-quick-link{min-height:50px;font-size:9.25px;padding-inline:1px}
  body.pwa-standalone .pwa-quick-link.active{flex-grow:1.4}
  body.pwa-standalone .pwa-quick-link svg{width:20px;height:20px}
}