:root{
  --ink:#1B2A41;
  --ink-soft:#465569;
  --paper:#EFEBE1;
  --paper-raised:#F8F5EC;
  --rule:#C9C2AE;
  --forest:#2F6F4E;
  --rust:#B0413E;
  --gold:#B8892B;
  --shadow: 0 1px 2px rgba(27,42,65,.08), 0 4px 14px rgba(27,42,65,.06);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',sans-serif;
     background-image: repeating-linear-gradient(180deg, rgba(27,42,65,0.02) 0px, rgba(27,42,65,0.02) 1px, transparent 1px, transparent 32px);}
.mono{font-family:'IBM Plex Mono',monospace;}
h1,h2,h3{font-family:'Fraunces',serif; margin:0;}
button{font-family:'Inter',sans-serif; cursor:pointer;}
input,select{font-family:'Inter',sans-serif;}

/* ---------- LOGIN ---------- */
#login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px;}
.ledger-mark{font-family:'Fraunces',serif; font-size:42px; font-weight:600; letter-spacing:.5px;}
.ledger-mark span{color:var(--gold);}
#login-card{background:var(--paper-raised); border:1px solid var(--rule); box-shadow:var(--shadow); padding:36px 40px; width:320px; border-radius:2px;}
#login-card p{font-size:13px; color:var(--ink-soft); margin:0 0 18px;}
#login-card input{width:100%; padding:11px 12px; border:1px solid var(--rule); background:#fff; font-size:14px; border-radius:2px;}
#login-card button{width:100%; margin-top:14px; padding:11px; background:var(--ink); color:var(--paper-raised); border:none; font-weight:600; letter-spacing:.03em; border-radius:2px;}
#login-card button:hover{background:#0f1a2b;}
#login-error{color:var(--rust); font-size:12.5px; margin-top:8px; min-height:14px;}

/* ---------- APP SHELL ---------- */
#app{display:none;}
header.top{padding:26px 40px 0; display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px;}
header.top .brand{font-size:26px; font-weight:600;}
header.top .brand span{color:var(--gold);}
#logout{background:none; border:1px solid var(--rule); padding:7px 14px; font-size:12.5px; border-radius:2px; color:var(--ink-soft);}
#logout:hover{border-color:var(--ink);}

nav.tabs{display:flex; gap:2px; padding:22px 40px 0; border-bottom:1px solid var(--rule);}
nav.tabs button{background:none; border:none; padding:12px 18px; font-size:13.5px; font-weight:500; color:var(--ink-soft); border-bottom:2px solid transparent; letter-spacing:.02em;}
nav.tabs button.active{color:var(--ink); border-bottom-color:var(--gold); font-weight:600;}

main{padding:30px 40px 60px; max-width:1180px; margin:0 auto;}
.view{display:none;}
.view.active{display:block;}

/* summary cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(198px,1fr)); gap:16px; margin-bottom:30px;}
.card{background:var(--paper-raised); border:1px solid var(--rule); border-radius:2px; padding:20px 22px; box-shadow:var(--shadow);}
.card .label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:8px;}
.card .value{font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600;}
.card .value.rust{color:var(--rust);}
.card .value.forest{color:var(--forest);}
.card .sub{margin-top:6px; font-size:11.5px; color:var(--ink-soft);}

/* ---------- BRAND LOGOS ---------- */
.logo{position:relative; display:inline-block; width:var(--logo-size,30px); height:var(--logo-size,30px);
      flex-shrink:0; border-radius:5px; overflow:hidden; background:#fff; vertical-align:middle;
      box-shadow:inset 0 0 0 1px rgba(27,42,65,.10);}
.logo img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:2px; background:#fff;}
.logo-mono{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
           color:#fff; font-weight:600; font-size:calc(var(--logo-size,30px) * .40); letter-spacing:.02em;}
.with-logo{display:flex; align-items:center; gap:10px;}
.name-row{display:flex; align-items:center; gap:10px;}
.name-row input{flex:1;}
.when{display:block; font-size:11px; color:var(--ink-soft); margin-top:2px;}

section.block{background:var(--paper-raised); border:1px solid var(--rule); border-radius:2px; box-shadow:var(--shadow); margin-bottom:26px;}
section.block h3{padding:16px 22px; border-bottom:1px solid var(--rule); font-size:16px; font-weight:600; display:flex; justify-content:space-between; align-items:center;}

/* bills table */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); padding:10px 16px; border-bottom:1px solid var(--rule);}
td{padding:12px 16px; border-bottom:1px solid rgba(201,194,174,.5); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(184,137,43,.05);}
.amt{font-family:'IBM Plex Mono',monospace; font-weight:600;}
.cat-pill{font-size:10.5px; padding:3px 9px; border-radius:20px; background:rgba(27,42,65,.07); color:var(--ink-soft); letter-spacing:.02em;}

/* stamp badges - signature element */
.stamp{display:inline-block; font-family:'Fraunces',serif; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
       padding:4px 10px; border:2px solid currentColor; border-radius:3px; transform:rotate(-3deg); position:relative;}
.stamp.paid{color:var(--forest);}
.stamp.upcoming{color:var(--gold);}
.stamp.overdue{color:var(--rust); transform:rotate(2deg);}
.stamp.unpaid{color:var(--ink-soft);}

.row-actions button{background:none; border:none; color:var(--ink-soft); font-size:12px; margin-right:10px; text-decoration:underline; padding:0;}
.row-actions button:hover{color:var(--ink);}

#add-bill-btn{background:var(--ink); color:var(--paper-raised); border:none; padding:8px 16px; font-size:12.5px; font-weight:600; border-radius:2px;}
#add-bill-btn:hover{background:#0f1a2b;}

.empty{padding:34px 22px; text-align:center; color:var(--ink-soft); font-size:13.5px;}

/* filters */
.filters{display:flex; gap:10px; padding:14px 22px; border-bottom:1px solid var(--rule); flex-wrap:wrap;}
.filters select, .filters input{padding:7px 10px; border:1px solid var(--rule); background:#fff; font-size:12.5px; border-radius:2px;}

/* modal form */
#modal-bg, #card-modal-bg{display:none; position:fixed; inset:0; background:rgba(27,42,65,.45); z-index:50; align-items:flex-start; justify-content:center; padding:40px 20px; overflow:auto;}
#modal, #card-modal{background:var(--paper-raised); width:100%; max-width:520px; border-radius:2px; box-shadow:var(--shadow); border:1px solid var(--rule); height:max-content;}
#modal h3, #card-modal h3{padding:18px 24px; border-bottom:1px solid var(--rule); font-size:17px;}
#modal form, #card-modal form{padding:20px 24px; display:grid; grid-template-columns:1fr 1fr; gap:14px;}
#modal .full, #card-modal .full{grid-column:1/-1;}
#modal label, #card-modal label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:5px;}
#modal input, #modal select, #modal textarea,
#card-modal input, #card-modal select, #card-modal textarea{width:100%; padding:9px 10px; border:1px solid var(--rule); border-radius:2px; font-size:13.5px; background:#fff;}
#modal textarea, #card-modal textarea{resize:vertical; min-height:50px;}
#card-modal input[type=color]{padding:3px; height:38px; cursor:pointer;}
#modal .btn-row, #card-modal .btn-row{grid-column:1/-1; display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}
#modal .btn-row button, #card-modal .btn-row button{padding:9px 18px; border-radius:2px; font-size:13px;}
#modal .cancel, #card-modal .cancel{background:none; border:1px solid var(--rule); color:var(--ink-soft);}
#modal .save, #card-modal .save{background:var(--ink); border:none; color:var(--paper-raised); font-weight:600;}
#modal .delete, #card-modal .delete{background:none; border:1px solid var(--rust); color:var(--rust); margin-right:auto;}

/* ---------- CREDIT CARDS ---------- */
.cc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; padding:22px;}
.cc{background:var(--cc-bg,#1B2A41); color:#fff; border-radius:12px; padding:20px 22px 16px;
    box-shadow:0 2px 4px rgba(27,42,65,.14), 0 10px 26px rgba(27,42,65,.16); position:relative; overflow:hidden;}
.cc::after{content:''; position:absolute; right:-90px; top:-120px; width:280px; height:280px; border-radius:50%;
           background:radial-gradient(circle, rgba(255,255,255,.10), rgba(255,255,255,0) 70%); pointer-events:none;}
.cc-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.cc-issuer{display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; letter-spacing:.02em;}
.net-mark{width:44px; height:28px; flex-shrink:0;}
.cc-name{font-family:'Fraunces',serif; font-size:20px; font-weight:600; margin-top:16px;}
.cc-digits{font-size:13px; letter-spacing:.14em; color:rgba(255,255,255,.72); margin-top:4px;}
.cc-figs{display:flex; gap:18px; margin-top:18px; flex-wrap:wrap;}
.cc-figs div{display:flex; flex-direction:column; gap:3px;}
.cc-figs span{font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.62);}
.cc-figs b{font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600;}
.cc-bar{height:5px; border-radius:3px; background:rgba(255,255,255,.20); margin-top:16px; overflow:hidden;}
.cc-bar i{display:block; height:100%; background:#fff; border-radius:3px;}
.cc-used{font-size:11px; color:rgba(255,255,255,.66); margin-top:7px;}
.cc-foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px;
         border-top:1px solid rgba(255,255,255,.16); padding-top:11px; font-size:11.5px; color:rgba(255,255,255,.76);}
.cc-foot button{background:none; border:1px solid rgba(255,255,255,.35); color:#fff; font-size:11.5px;
                padding:4px 12px; border-radius:20px;}
.cc-foot button:hover{background:rgba(255,255,255,.14);}
#add-card-btn{background:var(--ink); color:var(--paper-raised); border:none; padding:8px 16px; font-size:12.5px; font-weight:600; border-radius:2px;}
#add-card-btn:hover{background:#0f1a2b;}

/* ---------- IMPORT BANNER ---------- */
#seed-banner{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
             background:var(--paper-raised); border:1px solid var(--gold); border-left:4px solid var(--gold);
             border-radius:2px; box-shadow:var(--shadow); padding:16px 20px; margin-bottom:20px;}
#seed-banner strong{font-family:'Fraunces',serif; font-size:15px;}
#seed-banner p{margin:5px 0 0; font-size:12.5px; color:var(--ink-soft);}
#seed-btn{background:var(--gold); border:none; color:#fff; font-weight:600; font-size:13px; padding:9px 20px; border-radius:2px;}
#seed-btn:hover{background:#a2781f;}
#seed-btn:disabled{opacity:.6; cursor:default;}

/* calendar */
.cal-header{display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--rule);}
.cal-header .nav-btns button{background:none; border:1px solid var(--rule); width:30px; height:30px; border-radius:2px; color:var(--ink-soft);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr);}
.cal-dow{padding:8px; text-align:center; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); border-bottom:1px solid var(--rule);}
.cal-cell{min-height:100px; border-right:1px solid rgba(201,194,174,.5); border-bottom:1px solid rgba(201,194,174,.5); padding:6px; font-size:11px; position:relative;}
.cal-cell:nth-child(7n){border-right:none;}
.cal-cell .daynum{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); display:flex; justify-content:space-between; align-items:baseline; gap:4px;}
.cal-cell .day-total{font-size:10px; font-weight:600; color:var(--ink);}
.cal-cell.today{background:rgba(184,137,43,.08);}
.cal-cell.empty-cell{background:rgba(27,42,65,.02);}
.cal-bill{display:flex; align-items:center; gap:5px; margin-top:4px; padding:2px 5px; background:rgba(47,111,78,.12); color:var(--forest); border-radius:2px; font-size:10px;}
.cal-bill span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cal-bill.due-soon{background:rgba(184,137,43,.15); color:var(--gold);}

/* chart */
#chart-wrap{padding:26px 22px;}
.bar-row{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.bar-label{width:130px; font-size:12.5px; color:var(--ink-soft); flex-shrink:0;}
.bar-track{flex:1; background:rgba(27,42,65,.06); border-radius:3px; overflow:hidden; height:22px;}
.bar-fill{height:100%; background:linear-gradient(90deg, var(--gold), var(--forest)); border-radius:3px;}
.bar-val{width:90px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; flex-shrink:0;}
#chart-total{padding:14px 22px; border-top:1px solid var(--rule); font-size:13px; color:var(--ink-soft);}

@media (max-width:900px){
  nav.tabs{overflow-x:auto;}
  nav.tabs button{white-space:nowrap;}
  section.block > table{display:block; overflow-x:auto;}
}
@media (max-width:640px){
  header.top, nav.tabs, main{padding-left:18px; padding-right:18px;}
  #modal form, #card-modal form{grid-template-columns:1fr;}
  .cc-grid{grid-template-columns:1fr; padding:16px;}
}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}