/* ============================= TOKENS ============================= */
:root{
  --paper:      #E9E6DC;
  --page:       #FFFDF8;
  --page-2:     #F5F2E9;
  --ink:        #1E2A38;
  --ink-dim:    #5B6472;
  --rule:       #D9D3C1;
  --rule-soft:  #E4DFD0;
  --green:      #2F6B4F;
  --green-bg:   #E7F0EA;
  --red:        #9C4A3C;
  --red-bg:     #F3E7E4;
  --brass:      #B4832A;
  --brass-bg:   #F2E9D5;
  --teal:       #2E7C86;
  --teal-bg:    #E0EEF0;
  --violet:     #6B4E9C;
  --violet-bg:  #ECE5F5;
  --shadow:     0 1px 2px rgba(30,42,56,.05), 0 6px 20px rgba(30,42,56,.06);
  --radius:     6px;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --paper:    #14181D;
    --page:     #1B2028;
    --page-2:   #20262F;
    --ink:      #EDEAE0;
    --ink-dim:  #9BA3AE;
    --rule:     #333B46;
    --rule-soft:#2A313B;
    --green:    #6FBF95;
    --green-bg: #1D3327;
    --red:      #D98A7A;
    --red-bg:   #3A2422;
    --brass:    #D9AE5C;
    --brass-bg: #3A311E;
    --teal:     #5FB8C2;
    --teal-bg:  #163237;
    --violet:   #B197E0;
    --violet-bg:#2A2140;
    --shadow:   0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --paper:    #14181D;
  --page:     #1B2028;
  --page-2:   #20262F;
  --ink:      #EDEAE0;
  --ink-dim:  #9BA3AE;
  --rule:     #333B46;
  --rule-soft:#2A313B;
  --green:    #6FBF95;
  --green-bg: #1D3327;
  --red:      #D98A7A;
  --red-bg:   #3A2422;
  --brass:    #D9AE5C;
  --brass-bg: #3A311E;
  --teal:     #5FB8C2;
  --teal-bg:  #163237;
  --violet:   #B197E0;
  --violet-bg:#2A2140;
  --shadow:   0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
}

/* ============================= SEPIA THEME ============================= */
:root[data-theme="sepia"]{
  --paper:    #EDE4D0;
  --page:     #FBF4E4;
  --page-2:   #F1E9D5;
  --ink:      #3A2E1E;
  --ink-dim:  #7A6A50;
  --rule:     #D9CCAE;
  --rule-soft:#E6DAC0;
  --green:    #4A6B3A;
  --green-bg: #E4EDD9;
  --red:      #9C4A2E;
  --red-bg:   #F3E0D6;
  --brass:    #A06024;
  --brass-bg: #F0DEC2;
  --teal:     #2E6A78;
  --teal-bg:  #DCEAEC;
  --violet:   #6B4E7A;
  --violet-bg:#EBDFF0;
  --shadow:   0 1px 2px rgba(58,46,30,.06), 0 6px 20px rgba(58,46,30,.08);
}

/* ============================= OCEAN THEME ============================= */
:root[data-theme="ocean"]{
  --paper:    #DCE5EC;
  --page:     #F4F9FC;
  --page-2:   #E4EEF5;
  --ink:      #16303F;
  --ink-dim:  #5A6F80;
  --rule:     #C0D2DF;
  --rule-soft:#D3E1EB;
  --green:    #2C7A5A;
  --green-bg: #DCEFE5;
  --red:      #B84A3C;
  --red-bg:   #F4DCD8;
  --brass:    #C78A2E;
  --brass-bg: #F5E6C9;
  --teal:     #1E7A8C;
  --teal-bg:  #D4EBEF;
  --violet:   #5B55A8;
  --violet-bg:#E3E1F3;
  --shadow:   0 1px 2px rgba(22,48,63,.06), 0 6px 20px rgba(22,48,63,.09);
}

/* ============================= FOREST THEME ============================= */
:root[data-theme="forest"]{
  --paper:    #DEE7DC;
  --page:     #F6FAF4;
  --page-2:   #E8F0E4;
  --ink:      #1E3320;
  --ink-dim:  #5A6E58;
  --rule:     #C2D2BE;
  --rule-soft:#D5E1D1;
  --green:    #2C6B3F;
  --green-bg: #DCEBDE;
  --red:      #A04434;
  --red-bg:   #F1DCD6;
  --brass:    #B07A24;
  --brass-bg: #F1E2C2;
  --teal:     #2E7268;
  --teal-bg:  #D8E9E4;
  --violet:   #6B4E80;
  --violet-bg:#E9E0F0;
  --shadow:   0 1px 2px rgba(30,51,32,.06), 0 6px 20px rgba(30,51,32,.09);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer;}
input,select{font-family:inherit;}
::selection{background:var(--brass-bg);}

/* ============================= SHELL ============================= */
.shell{display:flex; min-height:100vh;}
.nav{
  width:210px; flex-shrink:0; background:var(--page); border-right:1px solid var(--rule);
  display:flex; flex-direction:column; padding:1.4rem 0;
}
.brand{
  font-family:var(--serif); font-weight:700; font-size:1.3rem; color:var(--ink);
  padding:0 1.4rem 1.1rem; border-bottom:1px solid var(--rule); margin-bottom:.6rem;
  display:flex; align-items:baseline; gap:.4rem;
}
.brand small{font-family:var(--sans); font-size:.68rem; color:var(--ink-dim); font-weight:500;}
.navlist{list-style:none; display:flex; flex-direction:column; gap:.1rem; padding:.4rem 0;}
.sidenav-link{
  display:flex; align-items:center; gap:.65rem; padding:.55rem 1.4rem; color:var(--ink-dim);
  font-size:.87rem; font-weight:500; border-left:2px solid transparent; transition:background .12s,color .12s;
  background:none; border-top:none; border-right:none; border-bottom:none; width:100%; text-align:left;
  text-decoration:none;
}
.sidenav-link svg{width:16px; height:16px; flex-shrink:0;}
.sidenav-link:hover{background:var(--page-2); color:var(--ink);}
.sidenav-link.active{color:var(--ink); border-left-color:var(--brass); background:var(--page-2); font-weight:600;}
.navfoot{margin-top:auto; padding:0 1.4rem; display:flex; flex-direction:column; gap:.5rem;}

.subnav{display:flex; gap:.3rem; background:var(--page); border:1px solid var(--rule); border-radius:var(--radius); padding:.3rem; margin-bottom:1.6rem; overflow-x:auto;}
.subtab{
  background:none; border:none; color:var(--ink-dim); font-size:.82rem; font-weight:600; padding:.5rem .9rem;
  border-radius:5px; white-space:nowrap;
}
.subtab:hover{background:var(--page-2); color:var(--ink);}
.subtab.active{background:var(--ink); color:var(--page);}
.themebtn{
  background:none; border:1px solid var(--rule); border-radius:var(--radius); color:var(--ink-dim);
  font-size:.78rem; padding:.4rem .7rem; display:flex; align-items:center; gap:.4rem;
}
.themebtn:hover{border-color:var(--brass); color:var(--ink);}

.main{flex:1; min-width:0; padding:2rem 2.4rem 4rem; max-width:1180px;}
.view{display:none;}
.view.active{display:block;}

/* ============================= HEADER / MONTH NAV ============================= */
.pagehead{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.6rem;}
.pagehead h1, .pagehead h2{font-family:var(--serif); font-weight:600; font-size:1.7rem; letter-spacing:-.01em;}
.pagehead p{color:var(--ink-dim); font-size:.85rem; margin-top:.15rem;}
.monthnav{display:flex; align-items:center; gap:.5rem; background:var(--page); border:1px solid var(--rule); border-radius:var(--radius); padding:.3rem .3rem;}
.monthnav button{background:none; border:none; color:var(--ink-dim); width:28px; height:28px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:1rem;}
.monthnav button:hover{background:var(--page-2); color:var(--ink);}
.monthnav .label{font-family:var(--serif); font-weight:600; font-size:.98rem; min-width:118px; text-align:center;}

/* ============================= KPI ROW ============================= */
.kpirow{display:flex; background:var(--page); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:1.8rem; overflow:hidden;}
.kpi{flex:1; padding:1.1rem 1.4rem; border-right:1px solid var(--rule-soft);}
.kpi:last-child{border-right:none;}
.kpi .lbl{font-size:.72rem; color:var(--ink-dim); font-weight:600; margin-bottom:.35rem;}
.kpi .val{font-family:var(--mono); font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums;}
.kpi .val.pos{color:var(--green);}
.kpi .val.neg{color:var(--red);}

/* ============================= SECTION / PANEL ============================= */
.panel{background:var(--page); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:1.6rem;}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.3rem; border-bottom:1px solid var(--rule);}
.panel-head h2{font-family:var(--serif); font-size:1.02rem; font-weight:600;}
.panel-body{padding:1.1rem 1.3rem;}
.twocol{display:grid; grid-template-columns:1.15fr .85fr; gap:1.6rem;}
@media (max-width:900px){.twocol{grid-template-columns:1fr;}}

/* ============================= BUDGET ROWS ============================= */
.budgetrow{display:grid; grid-template-columns:1fr auto; align-items:center; gap:.3rem 1rem; padding:.65rem 0; border-bottom:1px solid var(--rule-soft);}
.budgetrow:last-child{border-bottom:none;}
.budgetrow .name{font-size:.86rem; font-weight:500;}
.budgetrow .amounts{font-family:var(--mono); font-size:.8rem; color:var(--ink-dim); font-variant-numeric:tabular-nums; text-align:right;}
.budgetrow .amounts b{color:var(--ink); font-weight:600;}
.bar{grid-column:1/-1; height:6px; background:var(--rule-soft); border-radius:3px; overflow:hidden; position:relative;}
.bar > span{display:block; height:100%; background:var(--brass); border-radius:3px;}
.bar > span.over{background:var(--red);}
.status-tag{font-size:.68rem; font-weight:600; padding:.12rem .5rem; border-radius:20px; white-space:nowrap;}
.status-tag.ok{color:var(--green); background:var(--green-bg);}
.status-tag.over{color:var(--red); background:var(--red-bg);}
.status-tag.none{color:var(--ink-dim); background:var(--rule-soft);}
.status-tag.idea{color:var(--brass); background:var(--brass-bg);}
.status-tag.teal{color:var(--teal); background:var(--teal-bg);}
.status-tag.violet{color:var(--violet); background:var(--violet-bg);}

/* ============================= TABLE ============================= */
.tablewrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:.85rem;}
thead th{
  text-align:left; font-size:.68rem; font-weight:600; color:var(--ink-dim);
  padding:.5rem .6rem; border-bottom:1px solid var(--rule); white-space:nowrap;
}
tbody td{padding:.55rem .6rem; border-bottom:1px solid var(--rule-soft); vertical-align:middle;}
tbody tr:hover{background:var(--page-2);}
td.amt{font-family:var(--mono); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
td.amt.income{color:var(--green);}
td.amt.expense{color:var(--ink);}
.pill{font-size:.72rem; padding:.15rem .55rem; border-radius:20px; background:var(--rule-soft); color:var(--ink-dim); white-space:nowrap;}
.rowbtn{background:none; border:none; color:var(--ink-dim); padding:.2rem .35rem; border-radius:4px; font-size:.9rem;}
.rowbtn:hover{background:var(--page-2); color:var(--ink);}

/* ============================= FORMS ============================= */
.field{display:flex; flex-direction:column; gap:.3rem;}
.field label{font-size:.72rem; font-weight:600; color:var(--ink-dim);}
.field input, .field select{
  border:1px solid var(--rule); background:var(--page); color:var(--ink); border-radius:var(--radius);
  padding:.5rem .6rem; font-size:.86rem; width:100%;
}
.field input:focus, .field select:focus{outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass);}
.formgrid{display:grid; grid-template-columns:repeat(6,1fr); gap:.8rem; align-items:end;}
.formgrid .field.wide{grid-column:span 2;}
@media (max-width:900px){.formgrid{grid-template-columns:repeat(2,1fr);} .formgrid .field.wide{grid-column:span 2;}}
.btn{
  background:var(--ink); color:var(--page); border:none; border-radius:var(--radius); padding:.55rem 1rem;
  font-size:.83rem; font-weight:600; display:inline-flex; align-items:center; gap:.4rem; justify-content:center;
}
.btn:hover{opacity:.88;}
.btn.ghost{background:none; color:var(--ink); border:1px solid var(--rule);}
.btn.ghost:hover{border-color:var(--brass); background:var(--page-2);}
.btn.danger{background:var(--red); color:#fff;}
.btn.teal{background:var(--teal); color:#fff;}
.btn.violet{background:var(--violet); color:#fff;}
.toolbar{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem;}
.toolbar input, .toolbar select{
  border:1px solid var(--rule); background:var(--page); color:var(--ink); border-radius:var(--radius);
  padding:.45rem .6rem; font-size:.82rem;
}
.searchbox{flex:1; min-width:160px; border:1px solid var(--rule); background:var(--page); color:var(--ink); border-radius:var(--radius); padding:.45rem .6rem; font-size:.82rem;}

.chartbox{position:relative; height:230px;}
.emptynote{color:var(--ink-dim); font-size:.85rem; padding:1.5rem 0; text-align:center;}

.catgrid{display:flex; flex-direction:column; gap:.4rem;}
.catrow{display:grid; grid-template-columns:1fr 110px 32px; gap:.5rem; align-items:center;}
.catrow input{border:1px solid var(--rule); background:var(--page); color:var(--ink); border-radius:4px; padding:.4rem .55rem; font-size:.83rem;}
.catrow select{border:1px solid var(--rule); background:var(--page); color:var(--ink); border-radius:4px; padding:.4rem .3rem; font-size:.78rem;}

.hint{font-size:.78rem; color:var(--ink-dim); line-height:1.5;}
.hint code{background:var(--page-2); padding:.05rem .3rem; border-radius:3px; font-family:var(--mono); font-size:.76rem;}
.divider{height:1px; background:var(--rule); margin:1.2rem 0;}

.toast{
  position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--page); padding:.6rem 1.1rem; border-radius:var(--radius); font-size:.82rem;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:50; box-shadow:var(--shadow);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============================= HUB CARDS ============================= */
.hero{margin-bottom:2rem;}
.hero h1{font-family:var(--serif); font-weight:600; font-size:2rem; letter-spacing:-.01em; margin-bottom:.4rem;}
.hero p{color:var(--ink-dim); font-size:.95rem; max-width:60ch;}
.hubgrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1.1rem; margin-bottom:2rem;}
.hubcard{
  background:var(--page); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.3rem; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:.5rem;
  transition:transform .12s, box-shadow .12s; border-left:3px solid var(--rule);
}
.hubcard:hover{transform:translateY(-2px); box-shadow:0 4px 24px rgba(30,42,56,.1); border-left-color:var(--brass);}
.hubcard .hc-label{font-size:.68rem; font-weight:700; color:var(--ink-dim);}
.hubcard h3{font-family:var(--serif); font-size:1.15rem; font-weight:600;}
.hubcard .hc-stat{font-family:var(--mono); font-size:1.3rem; font-weight:600; color:var(--brass); margin-top:.2rem;}
.hubcard .hc-desc{font-size:.8rem; color:var(--ink-dim); line-height:1.5;}

/* ============================= PROGRESS METER ============================= */
.meter{background:var(--page-2); border-radius:20px; height:10px; overflow:hidden; margin:.5rem 0;}
.meter > span{display:block; height:100%; background:var(--brass); border-radius:20px; transition:width .3s ease;}
.meterrow{display:flex; justify-content:space-between; font-size:.78rem; color:var(--ink-dim); font-family:var(--mono);}

/* ============================= LINE-ITEM ROWS ============================= */
.itemrow{display:grid; grid-template-columns:1fr 110px 32px; gap:.7rem; align-items:start; padding:.65rem 0; border-bottom:1px solid var(--rule-soft);}
.itemrow:last-child{border-bottom:none;}
.itemrow .it-name{font-size:.87rem; font-weight:500;}
.itemrow .it-note{font-size:.76rem; color:var(--ink-dim); margin-top:.15rem; line-height:1.4;}
.itemrow input.it-amount{
  font-family:var(--mono); text-align:right; border:1px solid var(--rule); border-radius:5px; padding:.35rem .5rem;
  background:var(--page); color:var(--ink); font-size:.85rem; width:100%;
}
.itemrow .it-del{background:none;border:none;color:var(--ink-dim); padding:.2rem; border-radius:4px; font-size:.85rem;}
.itemrow .it-del:hover{background:var(--page-2); color:var(--red);}

/* ============================= CHECKLIST ============================= */
.checkrow{display:grid; grid-template-columns:24px 1fr auto; gap:.7rem; align-items:start; padding:.6rem 0; border-bottom:1px solid var(--rule-soft);}
.checkrow:last-child{border-bottom:none;}
.checkrow input[type="checkbox"]{width:17px; height:17px; margin-top:.15rem; accent-color:var(--brass);}
.checkrow .ck-name{font-size:.85rem; font-weight:500;}
.checkrow.have .ck-name{color:var(--ink-dim); text-decoration:line-through;}
.checkrow .ck-source{font-size:.74rem; color:var(--ink-dim); margin-top:.1rem;}
.checkrow .ck-range{font-family:var(--mono); font-size:.8rem; color:var(--ink-dim); text-align:right; white-space:nowrap;}
.checkrow .ck-del{background:none;border:none;color:var(--ink-dim); padding:.15rem .3rem; border-radius:4px; font-size:.8rem;}
.checkrow .ck-del:hover{background:var(--page-2); color:var(--red);}

details.accordion{border:1px solid var(--rule); border-radius:var(--radius); margin-bottom:.6rem; background:var(--page); overflow:hidden;}
details.accordion summary{
  list-style:none; cursor:pointer; padding:.75rem 1rem; font-family:var(--serif); font-weight:600; font-size:.92rem;
  display:flex; justify-content:space-between; align-items:center; background:var(--page-2);
}
details.accordion summary::-webkit-details-marker{display:none;}
details.accordion summary .count{font-family:var(--mono); font-size:.72rem; color:var(--ink-dim); font-weight:400;}
details.accordion .accordion-body{padding:.3rem 1rem 1rem;}

.cattabs{display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.2rem;}
.cattab{background:var(--page); border:1px solid var(--rule); border-radius:20px; padding:.4rem .9rem; font-size:.78rem; font-weight:600; color:var(--ink-dim);}
.cattab:hover{border-color:var(--brass); color:var(--ink);}
.cattab.active{background:var(--ink); color:var(--page); border-color:var(--ink);}

.addrow{display:grid; grid-template-columns:1fr 100px 100px 1fr auto; gap:.5rem; margin-top:.8rem;}
.addrow input, .addrow select{border:1px solid var(--rule); background:var(--page); color:var(--ink); border-radius:5px; padding:.4rem .55rem; font-size:.8rem;}
@media (max-width:760px){.addrow{grid-template-columns:1fr 1fr;}}

/* ============================= HERO BALANCE ============================= */
.herobalance{
  background:var(--page); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.8rem 2rem; margin-bottom:1.6rem; text-align:center;
}
.herobalance .hb-label{font-size:.78rem; font-weight:600; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem;}
.herobalance .hb-amount{font-family:var(--mono); font-size:2.6rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
.herobalance .hb-sub{font-size:.82rem; color:var(--ink-dim); margin-top:.3rem;}

/* ============================= TRANSACTION LIST ============================= */
.txrow{
  display:grid; grid-template-columns:1fr auto 32px; gap:.8rem; align-items:center;
  padding:.8rem 1.3rem; border-bottom:1px solid var(--rule-soft);
}
.txrow:last-child{border-bottom:none;}
.txrow:hover{background:var(--page-2);}
.txrow .txmain{min-width:0;}
.txrow .txtitle{font-size:.92rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.txrow .txmeta{font-size:.74rem; color:var(--ink-dim); margin-top:.15rem;}
.txrow .txamt{
  font-family:var(--mono); font-weight:600; font-size:.95rem;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.txrow .txamt.income{color:var(--green);}
.txrow .txamt.expense{color:var(--ink);}

/* ============================= PROGRESS COMPARE ROWS ============================= */
.comparerow{
  padding:.9rem 1.3rem; border-bottom:1px solid var(--rule-soft);
}
.comparerow:last-child{border-bottom:none;}
.comparerow .cmp-top{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5rem; gap:1rem;
}
.comparerow .cmp-name{font-size:.9rem; font-weight:500;}
.comparerow .cmp-amt{font-family:var(--mono); font-size:.85rem; font-variant-numeric:tabular-nums; white-space:nowrap;}
.comparerow .cmp-note{font-size:.74rem; color:var(--ink-dim); font-style:italic;}

/* ============================= LOGIN PAGE ============================= */
.authwrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--paper);}
.authcard{background:var(--page); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); padding:2rem; max-width:340px; width:100%;}
.autherror{background:var(--red-bg); color:var(--red); font-size:.82rem; padding:.6rem .8rem; border-radius:var(--radius); margin-bottom:1rem;}

/* mobile nav */
.mobilebar{display:none;}
@media (max-width:760px){
  .shell{flex-direction:column;}
  .nav{
    width:100%; flex-direction:row; align-items:center; padding:.6rem .8rem; border-right:none; border-bottom:1px solid var(--rule);
    position:sticky; top:0; z-index:20; background:var(--page);
  }
  .brand{border-bottom:none; padding:0; margin:0; font-size:1.05rem;}
  .navlist{display:none;}
  .navfoot{display:none;}
  .mobilebar{display:flex; gap:.3rem; margin-left:auto; flex-wrap:wrap; justify-content:flex-end;}
  .mobilebar a{background:none;border:1px solid var(--rule);border-radius:6px;padding:.3rem .5rem;font-size:.68rem;color:var(--ink-dim); text-decoration:none; white-space:nowrap;}
  .mobilebar a.active{color:var(--ink); border-color:var(--brass); font-weight:600;}
  .main{padding:1.2rem 1rem 3rem;}
  .formgrid{grid-template-columns:1fr 1fr;}
  .kpirow{flex-wrap:wrap;}
  .kpi{flex:1 1 50%; border-bottom:1px solid var(--rule-soft);}
  .txrow{grid-template-columns:1fr auto 28px; padding:.7rem 1rem;}
  .herobalance .hb-amount{font-size:2rem;}
}

/* ============================= ACCENT COLOURS (teal + violet) ============================= */
.accent-teal  { color: var(--teal); }
.accent-violet{ color: var(--violet); }
.accent-brass { color: var(--brass); }

.bg-teal  { background: var(--teal-bg);   color: var(--teal);   border-color: var(--teal); }
.bg-violet{ background: var(--violet-bg); color: var(--violet); border-color: var(--violet); }
.bg-brass { background: var(--brass-bg);  color: var(--brass);  border-color: var(--brass); }

.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.68rem; font-weight:600; padding:.15rem .6rem;
  border-radius:20px; white-space:nowrap;
  background:var(--rule-soft); color:var(--ink-dim);
}
.chip.teal  { background: var(--teal-bg);   color: var(--teal); }
.chip.violet{ background: var(--violet-bg); color: var(--violet); }
.chip.brass { background: var(--brass-bg);  color: var(--brass); }
.chip.green { background: var(--green-bg);  color: var(--green); }
.chip.red   { background: var(--red-bg);    color: var(--red); }

.card-teal  { border-left:3px solid var(--teal); }
.card-violet{ border-left:3px solid var(--violet); }
.card-brass { border-left:3px solid var(--brass); }
.card-green { border-left:3px solid var(--green); }
.card-red   { border-left:3px solid var(--red); }

.meter > span.teal  { background: var(--teal); }
.meter > span.violet{ background: var(--violet); }
.meter > span.green { background: var(--green); }
.meter > span.red   { background: var(--red); }

/* ============ CATTOTAL CARD AS ACCORDION ============ */
.cattotal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1rem;
  align-items:start;
}

details.cattotal-card{
  border:1px solid var(--rule);
  border-radius:var(--radius);
  background:var(--page-2);
  overflow:hidden;
  transition:border-color .12s, background .12s;
}
details.cattotal-card:hover{ border-color:var(--brass); }
details.cattotal-card[open]{
  grid-column: 1 / -1;
  background: var(--page);
  border-color: var(--brass);
}

details.cattotal-card > summary{
  list-style:none;
  cursor:pointer;
  padding:1rem 1.1rem;
  display:block;
  background:none;
  border:none;
}
details.cattotal-card > summary::-webkit-details-marker{ display:none; }
details.cattotal-card > summary::marker{ content:""; }

details.cattotal-card > summary .ct-tag{
  display:block;
  font-size:.65rem;
  font-weight:700;
  color:var(--brass);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.4rem;
}
details.cattotal-card > summary .ct-name{
  display:block;
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
  margin-bottom:.6rem;
}
details.cattotal-card > summary .ct-footer{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.5rem;
}
details.cattotal-card > summary .ct-amt{
  font-family:var(--mono);
  font-size:1.15rem;
  font-weight:600;
  color:var(--ink);
}
details.cattotal-card > summary .ct-count{
  font-size:.74rem;
  color:var(--ink-dim);
  font-family:var(--mono);
  white-space:nowrap;
}

details.cattotal-card .itemrow{
  display:block;
  padding:.7rem 0;
  border-bottom:1px solid var(--rule-soft);
}
details.cattotal-card .itemrow:last-of-type{ border-bottom:none; }

details.cattotal-card .itemrow > div{
  margin-bottom:.4rem;
}
details.cattotal-card .itemrow input[data-field="name"]{
  font-size:.92rem;
  font-weight:500;
}
details.cattotal-card .itemrow .it-note{
  font-size:.78rem;
  color:var(--ink-dim);
  margin-top:.15rem;
}
details.cattotal-card .itemrow input.it-amount{
  width:110px;
  font-family:var(--mono);
  text-align:right;
  border:1px solid var(--rule);
  border-radius:5px;
  padding:.35rem .5rem;
  background:var(--page);
  color:var(--ink);
  font-size:.85rem;
}
details.cattotal-card .itemrow .it-del{
  margin-left:.4rem;
  vertical-align:middle;
}

/* ============================= SELF ACTUALIZATION ============================= */
.sa-row{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  padding:.9rem 1.3rem;
  border-bottom:1px solid var(--rule-soft);
  background:var(--page);
}
.sa-row:last-child{ border-bottom:none; }
.sa-row:hover{ background:var(--page-2); }
.sa-row.dragging{ opacity:.4; background:var(--brass-bg); }
.sa-row.drop-hint{ box-shadow:inset 0 2px 0 var(--brass); }

.sa-drag{
  cursor:grab;
  color:var(--ink-dim);
  font-size:.9rem;
  line-height:1;
  padding:.4rem .3rem;
  user-select:none;
  flex-shrink:0;
  letter-spacing:-.1em;
}
.sa-drag:hover{ color:var(--ink); }
.sa-drag:active{ cursor:grabbing; }

.sa-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem; }

.sa-title{
  border:none; background:none;
  font-size:.95rem; font-weight:600; color:var(--ink);
  padding:.1rem 0; width:100%;
}
.sa-title:focus{ outline:none; border-bottom:1px solid var(--brass); }

.sa-subgrid{
  display:grid;
  grid-template-columns:1fr 1.6fr .8fr;
  gap:.5rem;
}
@media (max-width:760px){ .sa-subgrid{ grid-template-columns:1fr; } }

.sa-name, .sa-note, .sa-contact, .sa-step, .sa-status, .sa-target, .sa-current, .sa-unit{
  border:none; background:none;
  font-size:.8rem; color:var(--ink-dim);
  padding:.15rem 0;
  width:100%;
}
.sa-name{ color:var(--ink); font-weight:500; }
.sa-contact{ font-family:var(--mono); font-size:.75rem; }
.sa-status{ font-family:var(--mono); font-size:.78rem; color:var(--ink); text-align:right; max-width:160px; }
.sa-target{ font-family:var(--mono); text-align:right; }
.sa-current{ font-family:var(--mono); text-align:right; color:var(--ink); font-weight:600; }
.sa-unit{ font-size:.72rem; color:var(--ink-dim); max-width:90px; }
.sa-name:focus, .sa-note:focus, .sa-contact:focus, .sa-step:focus, .sa-status:focus,
.sa-target:focus, .sa-current:focus, .sa-unit:focus{
  outline:none; border-bottom:1px solid var(--brass);
}

/* Body row — target → current layout */
.sa-body-row{ align-items:center; }
.sa-body-cols{
  display:flex; align-items:center; gap:.5rem;
  flex-shrink:0;
}
.sa-body-arrow{ color:var(--ink-dim); font-family:var(--mono); font-size:.85rem; }
@media (max-width:600px){
  .sa-body-cols{ flex-wrap:wrap; justify-content:flex-end; }
}

/* Education row */
.sa-edu-row{ align-items:center; }
.sa-edu-row .sa-main{ gap:.15rem; }

/* Travel row */
.sa-travel-row{ align-items:center; }
.sa-travel-row.done .sa-title{ color:var(--ink-dim); text-decoration:line-through; }
.sa-check{ display:flex; align-items:center; padding-top:.1rem; }
.sa-check input{ width:17px; height:17px; accent-color:var(--brass); cursor:pointer; }

.sa-del{
  background:none; border:none;
  color:var(--ink-dim); padding:.3rem .4rem;
  border-radius:4px; font-size:.85rem;
  flex-shrink:0;
}
.sa-del:hover{ background:var(--red-bg); color:var(--red); }

/* Add row at bottom of each section */
.sa-addrow{
  display:flex; gap:.5rem; align-items:center;
  padding:.9rem 1.3rem;
  border-top:1px solid var(--rule);
  background:var(--page);
}
.sa-addrow input{
  flex:1;
  border:1px solid var(--rule);
  background:var(--page-2);
  color:var(--ink);
  border-radius:var(--radius);
  padding:.5rem .65rem;
  font-size:.83rem;
}
.sa-addrow input:focus{
  outline:none;
  border-color:var(--brass);
  background:var(--page);
}
@media (max-width:600px){
  .sa-addrow{ flex-wrap:wrap; }
  .sa-addrow input{ flex:1 1 100%; }
}