:root{
  --bg:#0f172a; --bg2:#111827; --card:#1e293b; --card2:#111827; --line:#334155;
  --text:#e5e7eb; --muted:#94a3b8; --primary:#3b82f6; --primary2:#2563eb; --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(180deg,#0b1220 0%, #0f172a 180px, #111827 100%);color:var(--text)}
a{color:#93c5fd;text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px 110px}
.topbar{position:sticky;top:0;z-index:40;background:rgba(2,6,23,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(148,163,184,.15)}
.topbar .inner{max-width:1280px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-size:24px;font-weight:800;color:#fff}
.nav,.subnav{display:flex;gap:10px;flex-wrap:wrap}
.nav a,.subnav a{color:#fff;background:rgba(255,255,255,.06);padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.05);font-size:14px;line-height:1}
.nav a.active,.subnav a.active{background:rgba(59,130,246,.25);border-color:rgba(59,130,246,.35)}
.subnav-wrap{max-width:1280px;margin:0 auto;padding:0 20px 14px}
.subnav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
.subnav::-webkit-scrollbar{display:none}
.hero{padding:26px 0 8px}
.hero h1{margin:0 0 10px;font-size:clamp(34px,6vw,60px);letter-spacing:-.04em}
.hero p{margin:0;color:var(--muted);font-size:16px}
.card{background:rgba(30,41,59,.92);border:1px solid rgba(148,163,184,.14);border-radius:24px;box-shadow:0 18px 40px rgba(0,0,0,.25);padding:22px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.metric{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(148,163,184,.12);border-radius:22px;padding:18px}
.metric .label{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.metric .value{font-size:34px;font-weight:800;letter-spacing:-.04em;margin-top:10px}
.metric .sub{color:var(--muted);font-size:14px;margin-top:8px}
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{display:block;background:linear-gradient(180deg,rgba(59,130,246,.14),rgba(255,255,255,.02));border:1px solid rgba(59,130,246,.18);border-radius:24px;padding:22px;color:#fff;text-decoration:none;min-height:150px}
.tile h3{margin:0 0 8px;font-size:28px;letter-spacing:-.03em}
.tile p{margin:0;color:#cbd5e1;line-height:1.5}
.list-clean{list-style:none;padding:0;margin:0}
.list-clean li{padding:12px 0;border-bottom:1px solid rgba(148,163,184,.12)}
.badge{display:inline-block;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700}
.badge-ok{background:rgba(22,163,74,.18);color:#86efac}
.badge-warn{background:rgba(217,119,6,.18);color:#fcd34d}
.badge-bad{background:rgba(220,38,38,.18);color:#fca5a5}
.badge-soft{background:rgba(59,130,246,.18);color:#bfdbfe}
input[type=text],input[type=password],input[type=date],input[type=datetime-local],input[type=number],textarea,select{
 width:100%;min-height:54px;border-radius:18px;border:1px solid rgba(148,163,184,.22);background:#0f172a;color:#fff;padding:0 16px;font-size:16px
}
textarea{padding:14px 16px;min-height:120px}
label{display:block;font-weight:700;color:#cbd5e1;margin:12px 0 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 18px;border:0;border-radius:18px;background:linear-gradient(180deg,#3b82f6 0%, #2563eb 100%);color:#fff;font-weight:800;text-decoration:none;cursor:pointer}
.btn-secondary{background:#334155}.btn-success{background:linear-gradient(180deg,#22c55e 0%, #16a34a 100%)} .btn-danger{background:linear-gradient(180deg,#ef4444 0%, #dc2626 100%)}
.btn + .btn{margin-left:8px}
.filterbar a{display:inline-block;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);color:#fff;margin-right:8px;margin-bottom:8px}
table{width:100%;border-collapse:collapse} th,td{text-align:left;padding:12px 8px;border-bottom:1px solid rgba(148,163,184,.12);vertical-align:top} th{color:#cbd5e1;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(148,163,184,.1)}
.switch{position:relative;display:inline-block;width:54px;height:30px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#334155;transition:.2s;border-radius:999px}
.slider:before{position:absolute;content:"";height:22px;width:22px;left:4px;top:4px;background:#fff;transition:.2s;border-radius:50%}
.switch input:checked + .slider{background:#2563eb}
.switch input:checked + .slider:before{transform:translateX(24px)}
.progress-wrap{background:#334155;border-radius:999px;height:18px;overflow:hidden}.progress-bar{background:#3b82f6;height:100%}
.small{font-size:12px;color:var(--muted)}
.kicker{color:#93c5fd;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.card h2{margin-top:0;font-size:28px;letter-spacing:-.03em}
.msg{padding:14px 16px;border-radius:18px;margin-top:14px}.err{background:rgba(220,38,38,.18);color:#fecaca}.ok{background:rgba(22,163,74,.18);color:#bbf7d0}

/* finance-style lists */
.list{display:grid;gap:12px}
.item{background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.14);border-radius:22px;padding:16px}
.item-head,.item-meta,.item-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.item-title{font-size:20px;line-height:1.15;font-weight:700;letter-spacing:-.02em;flex:1;min-width:0}
.item-amount{font-size:22px;font-weight:800;letter-spacing:-.02em;text-align:right}
.item-meta{margin-top:10px;color:var(--muted);font-size:14px}
.item-actions{margin-top:14px}
.action-pill{border-radius:999px;padding:10px 16px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;min-height:40px;text-decoration:none;border:1px solid rgba(59,130,246,.18);background:rgba(59,130,246,.10);color:#bfdbfe}
.action-pill-secondary{border-color:rgba(148,163,184,.18);background:rgba(148,163,184,.08);color:#e5e7eb}
.empty-state{color:var(--muted);text-align:center;padding:26px 20px;border:1px dashed rgba(148,163,184,.2);border-radius:22px;background:rgba(255,255,255,.02)}

.mobile-bottom-nav{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;background:rgba(15,23,42,.94);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:10px;box-shadow:0 18px 40px rgba(15,23,42,.25);backdrop-filter:blur(18px)}
.mobile-bottom-nav .nav{display:flex;overflow-x:auto;flex-wrap:nowrap;gap:8px}
.mobile-bottom-nav .nav a{flex:1;min-width:max-content;text-align:center;padding:12px 12px}
.desktop-only{display:block}
.mobile-only{display:none}
@media (max-width: 980px){.grid,.grid-2,.grid-3,.tile-grid{grid-template-columns:1fr}}
@media (max-width: 767px){
  .wrap{padding-bottom:96px}
  .topbar .inner{align-items:flex-start;flex-direction:column}
  .nav{overflow-x:auto;flex-wrap:nowrap;width:100%}
  .nav a{white-space:nowrap}
  .desktop-only{display:none}
  .mobile-only{display:block}
}
@media (min-width:768px){
  .mobile-bottom-nav{display:none}
}


/* touch scaling patch */
body{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 900px){
  .hero h1{font-size: clamp(38px, 10vw, 56px);}
  .hero p{font-size:18px;line-height:1.55}
  .wrap{padding:0 16px 110px}
  .card{padding:18px;border-radius:22px}
  .metric{padding:18px}
  .metric .label{font-size:14px}
  .metric .value{font-size:40px}
  .metric .sub{font-size:16px}
  .tile{min-height:auto;padding:20px}
  .tile h3{font-size:30px}
  .tile p{font-size:17px;line-height:1.55}
  .filterbar a{padding:12px 16px;font-size:15px}
  input[type=text],input[type=password],input[type=date],input[type=datetime-local],input[type=number],textarea,select{
    min-height:60px;
    font-size:18px;
    border-radius:16px;
    padding:0 16px;
  }
  textarea{padding:16px}
  .btn{
    min-height:60px;
    padding:0 20px;
    font-size:18px;
    border-radius:16px;
  }
  .small{font-size:14px}
  .item{padding:18px;border-radius:20px}
  .item-title{font-size:24px;line-height:1.2}
  .item-amount{font-size:26px}
  .item-meta{font-size:15px;line-height:1.5}
  .action-pill{min-height:46px;padding:12px 16px;font-size:15px}
  table th, table td{padding:14px 8px}
}

@media (max-width: 767px){
  .topbar .inner{padding:12px 16px}
  .brand{font-size:26px}
  .nav a,.subnav a{
    padding:12px 16px;
    font-size:15px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .subnav-wrap{padding:0 16px 12px}
  .hero{padding:20px 0 8px}
  .hero h1{font-size: clamp(40px, 11vw, 54px); line-height:1.02}
  .hero p{font-size:18px}
  .grid,.grid-2,.grid-3,.tile-grid{grid-template-columns:1fr !important;gap:14px}
  .list-clean li{padding:14px 0}
  .badge{font-size:13px;padding:6px 10px}
  .switch-row{padding:12px 0}
  .switch{width:58px;height:32px}
  .slider:before{height:24px;width:24px}
  .switch input:checked + .slider:before{transform:translateX(26px)}
  .mobile-bottom-nav{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:10px}
  .mobile-bottom-nav .nav a{
    min-height:48px;
    font-size:15px;
    padding:12px 14px;
  }
}


/* finance layout restoration */
.page-title{
  font-size: clamp(30px, 7vw, 56px);
  line-height: 1.02;
  margin: 10px 0 18px;
  letter-spacing: -.03em;
}
.page-subtitle{
  color: var(--muted);
  margin: -6px 0 18px;
  font-size: 15px;
}
.section-title{
  font-size: clamp(24px, 5vw, 34px);
  margin: 28px 0 14px;
  letter-spacing: -.02em;
}
.dashboard-layout{
  display:grid;
  gap:16px;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-areas:
    "pay available fd"
    "bills outgoing incoming";
}
.area-pay{grid-area:pay}
.area-available{grid-area:available}
.area-fd{grid-area:fd}
.area-bills{grid-area:bills}
.area-outgoing{grid-area:outgoing}
.area-incoming{grid-area:incoming}
.metric-card h3{
  font-size:18px;
  margin:0 0 14px;
  letter-spacing:-.02em;
}
.metric-primary{
  background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}
.metric-primary h3,.metric-primary .metric-body,.metric-primary .metric-hero{color:#fff}
.metric-success{
  background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}
.metric-success h3,.metric-success .metric-body,.metric-success .metric-value{color:#fff}
.metric-dark{
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}
.metric-dark h3,.metric-dark .metric-body,.metric-dark .metric-value{color:#fff}
.metric-hero{
  font-size: clamp(42px, 9vw, 72px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.05em;
  margin-bottom: 10px;
}
.metric-value{
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.04em;
  margin-bottom: 10px;
}
.metric-body-strong{font-size:18px;opacity:.96}
.card-link{text-decoration:none;color:inherit;display:block}
.dashboard-layout .metric-card{min-height:220px}
@media (max-width: 980px){
  .dashboard-layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "pay"
      "available"
      "fd"
      "bills"
      "outgoing"
      "incoming";
  }
}

/* cleaner pantry layout */
.pantry-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:18px}
@media (max-width: 980px){.pantry-layout{grid-template-columns:1fr}}