/* Financeshu client portal — same navy, gold and sand palette as the website. */
:root{
  --bg:#f5eee2; --surface:#fffaf2; --ink:#1b2230; --muted:#5f6573; --line:#e2d4bd;
  --navy:#1f2733; --navy-ink:#efe2c9; --gold:#b98745; --gold-2:#d8aa68; --gold-soft:#ecd9b8;
  --ok:#2f7a55; --ok-soft:#dcefe3; --prog:#9a5d08; --prog-soft:#f6e3bf; --wait:#7a3fb0; --wait-soft:#ece0f7;
  --bad:#b42318; --bad-soft:#f9dcd7; --mute-soft:#ece6da;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif; --body:"Figtree",ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#12161d; --surface:#1a2029; --ink:#ece4d6; --muted:#a3a7b0; --line:#2c3440; --navy:#0c1016; --navy-ink:#efe2c9;
  --gold:#d8aa68; --gold-soft:#3a3122; --ok:#5cc18f; --ok-soft:#173a2a; --prog:#e6b45c; --prog-soft:#3b2e14;
  --wait:#c9a3ee; --wait-soft:#2e2240; --bad:#f08a7a; --bad-soft:#3f1d19; --mute-soft:#232a35; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);min-height:100vh;display:flex;flex-direction:column}
.wrap{max-width:1120px;margin:0 auto;width:100%;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main.wrap{flex:1;padding-top:32px;padding-bottom:48px}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.eyebrow{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.fine{font-size:.86rem;color:var(--muted)}
/* header / footer */
.top{background:var(--navy);color:var(--navy-ink);position:sticky;top:0;z-index:5}
.top .in{display:flex;align-items:center;gap:14px;padding-block:13px}
.brand{font-family:var(--display);font-weight:800;letter-spacing:.14em;color:var(--gold-2);text-decoration:none}
.where{opacity:.75;font-size:.9rem;margin-right:auto}
.out{color:var(--navy-ink);text-decoration:none;border:1px solid #efe2c955;border-radius:999px;padding:6px 14px;font-size:.88rem}
.out:hover{border-color:var(--gold-2)}
footer{background:var(--navy);color:var(--navy-ink);font-size:.85rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;padding-block:18px;opacity:.85}
/* forms */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;min-width:0}
label.f{display:grid;gap:6px;font-size:.86rem;font-weight:600;color:var(--muted)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;width:100%}
textarea{min-height:76px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0;display:grid;gap:10px}
legend{font-weight:700;font-size:.9rem;padding:0 6px}
.btn{display:inline-block;border:0;border-radius:999px;background:var(--navy);color:var(--navy-ink);font:inherit;font-weight:700;padding:12px 22px;cursor:pointer;text-decoration:none;justify-self:start}
.btn.gold{background:var(--gold);color:#1b1408}
.btn.sm{padding:7px 14px;font-size:.88rem}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.danger{background:var(--bad);color:#fff}
.alert{border-radius:12px;padding:11px 14px;font-size:.94rem;font-weight:600;margin-bottom:12px}
.alert.ok{background:var(--ok-soft);color:var(--ok)}.alert.err{background:var(--bad-soft);color:var(--bad)}.alert.info{background:var(--gold-soft);color:var(--ink)}
.secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.25rem;font-weight:700;letter-spacing:.06em;background:var(--bg);border:1.5px dashed var(--gold);border-radius:12px;padding:12px 14px;user-select:all;overflow-wrap:anywhere}
/* sign-in */
.auth{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:20px}
@media (max-width:860px){.auth{grid-template-columns:1fr;gap:24px}}
.auth-intro h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;margin-top:8px}
.lede{color:var(--muted);font-size:1.08rem;max-width:52ch}
.auth-card{display:grid;gap:14px}
.auth-card h2{font-size:1.5rem}
.ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.ticks li{padding-left:26px;position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:11px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.steps-mini{margin:18px 0 0;padding-left:20px;display:grid;gap:6px;color:var(--muted)}
/* dashboard */
.hello{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:center;margin-bottom:20px}
.me{display:flex;gap:16px;align-items:center;min-width:0}
.hello h1{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800;margin-top:4px}
.meta{color:var(--muted);margin:4px 0 0;font-size:.94rem}
.meta.right{text-align:right}
@media (max-width:640px){.meta.right{text-align:left}}
.notice{display:grid;gap:4px;background:var(--gold-soft);border-radius:14px;padding:14px 16px;margin-bottom:18px}
.tiles{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile.big{grid-column:1/-1}}
@media (max-width:440px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:6px;align-content:start;min-width:0}
.tile.alert{border-color:var(--bad)}
.tile .k{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.tile .v{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1.1;overflow-wrap:anywhere}
.tile .v.sm{font-size:1.2rem}
.tile .s{font-size:.86rem;color:var(--muted)}
.tile.big{grid-template-columns:auto 1fr;align-items:center;column-gap:16px}
.tile.big .k{grid-column:1/-1}
.ring{--p:0;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center}
.ring span{width:72px;height:72px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem}
.pill{display:inline-block;justify-self:start;font-size:.74rem;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.prog{background:var(--prog-soft);color:var(--prog)}.pill.wait{background:var(--wait-soft);color:var(--wait)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}.pill.mute{background:var(--mute-soft);color:var(--muted)}
.block{margin-top:36px}
.block h2{font-size:1.45rem;margin-bottom:12px}
.bhead{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:end;margin-bottom:12px}
.bhead h2{margin:0}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:inherit;font-size:.86rem;font-weight:600;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--navy);color:var(--navy-ink);border-color:var(--navy)}
.search{max-width:220px;padding:7px 12px;font-size:.92rem}
.needs{display:grid;gap:8px}
.need{display:flex;justify-content:space-between;gap:14px;background:var(--wait-soft);border-radius:14px;padding:14px 16px}
.need p{margin:4px 0 0}
.need .side{display:grid;gap:6px;justify-items:end;align-content:start}
@media (max-width:560px){.need{flex-direction:column}.need .side{justify-items:start}}
.tasks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:820px){.tasks{grid-template-columns:1fr}}
.task{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:10px;align-content:start;min-width:0}
.task.s-ok{border-left-color:var(--ok)}.task.s-prog{border-left-color:var(--prog)}.task.s-wait{border-left-color:var(--wait)}.task.s-bad{border-left-color:var(--bad)}
.th{display:flex;justify-content:space-between;gap:10px;align-items:start}
.th h3{font-size:1.08rem}
.area{display:inline-block;margin-top:4px;font-size:.78rem;color:var(--muted);font-weight:600}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok);border-radius:99px}
.task.s-prog .bar i{background:var(--gold)}.task.s-wait .bar i{background:var(--wait)}.task.s-bad .bar i{background:var(--bad)}
.dates{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.84rem;color:var(--muted)}
.dates b{color:var(--ink);font-weight:600}
.ask{background:var(--wait-soft);border-radius:10px;padding:10px 12px;font-size:.92rem}
.ask b{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wait);margin-bottom:2px}
.remark{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:.92rem;color:var(--muted)}
.chan{font-size:.74rem;font-weight:700;border-radius:999px;padding:3px 10px;background:var(--gold-soft);color:var(--ink);white-space:nowrap}
.chan.whatsapp{background:#d9f2e3;color:#1d6b43}.chan.email{background:#dde8f7;color:#1f4e8c}.chan.call{background:var(--prog-soft);color:var(--prog)}
@media (prefers-color-scheme:dark){.chan.whatsapp{background:#173a2a;color:#8fe0b5}.chan.email{background:#1b2a40;color:#9cc3f5}}
.empty{color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:18px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line)}
td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
.r{text-align:right}
/* toons */
.toon{flex:none;width:44px;height:44px;border-radius:14px;display:inline-grid;place-items:center;overflow:hidden;border:1px solid #00000014;background:var(--gold-soft)}
.toon svg{width:100%;height:100%;display:block}
.toon.md{width:58px;height:58px;border-radius:16px}.toon.lg{width:84px;height:84px;border-radius:22px}
.picker summary{cursor:pointer;display:flex;gap:12px;align-items:center;font-weight:700}
.toons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
@media (max-width:560px){.toons{grid-template-columns:repeat(3,minmax(0,1fr))}}
.toons button{display:grid;justify-items:center;gap:4px;font:inherit;font-size:.84rem;font-weight:600;border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px;padding:8px 4px;cursor:pointer}
.toons button[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-soft)}
/* admin */
.adm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.adm-grid{grid-template-columns:1fr}}
.adm-grid .full{grid-column:1/-1}
.row-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.94rem}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:600}
details.edit{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
details.edit>summary{cursor:pointer;padding:12px 14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
details.edit>summary b{margin-right:auto}
details.edit form{padding:0 14px 14px}
.stack{display:grid;gap:10px}
.cred{display:grid;gap:8px;background:var(--gold-soft);border-radius:14px;padding:16px;margin-bottom:16px}
.cred textarea{background:var(--surface);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;min-height:120px}
@media (prefers-reduced-motion:no-preference){.task,.tile{transition:border-color .2s}}