/* ============ ETimelines theme ============
   ink     #0B1120  background
   panel   #131C2E  cards
   line    #24304A  hairlines
   paper   #E9EDF5  text
   muted   #8A97B1  secondary text
   inflow  #3DDC97  income
   outflow #FF5D73  payments
   pending #F5B54A  predictions / today seam
   accent  #6EA8FF  interactive
============================================= */
:root{
  --ink:#0B1120; --panel:#131C2E; --panel-2:#0F1626; --line:#24304A;
  --paper:#E9EDF5; --muted:#8A97B1;
  --in:#3DDC97; --out:#FF5D73; --pending:#F5B54A; --accent:#6EA8FF;
  --radius:12px;
  --font-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:"Instrument Sans", system-ui, sans-serif;
  --font-mono:"Spline Sans Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display); font-weight:600; letter-spacing:0}
a{color:var(--accent)}
code,.mono{font-family:var(--font-mono); font-size:.9em}
.text-dim{color:var(--muted)}
.ta-r{text-align:right}
.linklike{background:none;border:0;color:var(--accent);padding:0;cursor:pointer;text-decoration:underline;font:inherit}

/* Buttons */
.btn{border-radius:8px; font-weight:600; border:1px solid transparent}
.btn-accent{background:var(--accent); color:#0A1220}
.btn-accent:hover{background:#8CBBFF; color:#0A1220}
.btn-ghost{background:transparent; color:var(--paper); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-danger-ghost{background:transparent; color:var(--out); border:1px solid var(--out)}
.btn-danger-ghost:hover{background:var(--out); color:#fff}

/* Forms (Bootstrap overrides) */
.form-control,.form-select{
  background:var(--panel-2); border:1px solid var(--line); color:var(--paper); border-radius:8px;
}
.form-control:focus,.form-select:focus{
  background:var(--panel-2); color:var(--paper); border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(110,168,255,.2);
}
.form-control::placeholder{color:#5B6880}
label{display:block; margin-bottom:14px; font-weight:500}
label .form-control,label .form-select{margin-top:6px}
.code-input{font-family:var(--font-mono); letter-spacing:.4em; text-align:center; font-size:1.3rem}

/* ---------- Public pages ---------- */
.public-body{display:flex; flex-direction:column; min-height:100vh}
.topnav{display:flex; justify-content:space-between; align-items:center; padding:18px 32px}
.brand{font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--paper); text-decoration:none}
.brand-tick{color:var(--pending); font-weight:400}
.topnav-links{display:flex; gap:20px; align-items:center}
.topnav-links a{color:var(--muted); text-decoration:none}
.topnav-links a:hover{color:var(--paper)}
.topnav-links .btn{color:#0A1220}

.hero{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center;
  max-width:1140px; margin:0 auto; padding:64px 32px 48px}
.eyebrow{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.25em; text-transform:uppercase; color:var(--pending); margin-bottom:16px}
.hero h1{font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.05; margin:0 0 20px}
.hero h1 em{font-style:normal; color:var(--accent)}
.lede{color:var(--muted); font-size:1.1rem; max-width:52ch}
.hero-cta{display:flex; gap:12px; margin:28px 0}
.hero-points{list-style:none; padding:0; margin:0; color:var(--muted)}
.hero-points li{padding:6px 0 6px 22px; position:relative}
.hero-points li::before{content:""; position:absolute; left:0; top:14px; width:10px; height:2px; background:var(--in)}
.hero-points strong{color:var(--paper)}
.hero-visual{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px}
.hero-svg{width:100%; height:auto; display:block}
.hero-svg-caption{font-family:var(--font-mono); font-size:.72rem; color:var(--muted); text-align:center; margin-top:10px}

.feature-band{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1140px; margin:0 auto; padding:0 32px 72px}
.feature{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px}
.feature h3{font-size:1.15rem; margin:0 0 8px}
.feature p{color:var(--muted); margin:0}

.site-footer{margin-top:auto; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:20px 32px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem}

/* Auth */
.auth-wrap{display:flex; justify-content:center; padding:56px 16px; flex:1}
.auth-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:32px; width:100%; max-width:420px}
.auth-card h1{font-size:1.7rem; margin:0 0 4px}
.auth-sub{color:var(--muted); margin-bottom:20px}
.auth-alt{color:var(--muted); font-size:.9rem; margin:16px 0 0}
.alert-err{background:rgba(255,93,115,.12); border:1px solid var(--out); color:#FFB3C0; border-radius:8px; padding:10px 14px; margin-bottom:16px; font-size:.9rem}

/* ---------- App shell ---------- */
.app-body{display:flex; min-height:100vh}
.rail{width:84px; flex:0 0 84px; background:var(--panel-2); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; padding:18px 0; position:sticky; top:0; height:100vh}
.rail .brand{font-size:1.05rem; margin-bottom:26px}
.rail-nav{display:flex; flex-direction:column; gap:6px; width:100%}
.rail-nav a{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 0;
  color:var(--muted); text-decoration:none; font-size:.68rem; letter-spacing:.04em; border-left:2px solid transparent}
.rail-nav a svg{width:22px; height:22px}
.rail-nav a:hover{color:var(--paper)}
.rail-nav a.active{color:var(--accent); border-left-color:var(--accent)}
.rail-bottom{margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:14px}
.rail-chat-btn{background:var(--accent); color:#0A1220; border:0; border-radius:10px; padding:9px 12px;
  display:flex; flex-direction:column; align-items:center; gap:2px; font-size:.68rem; font-weight:700; cursor:pointer}
.rail-chat-btn svg{width:20px; height:20px}
.rail-logout{color:var(--muted)} .rail-logout svg{width:20px;height:20px} .rail-logout:hover{color:var(--out)}

.app-main{flex:1; padding:24px 32px 64px; max-width:1280px}
.app-header{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px}
.page-title{font-size:1.6rem; margin:0}
.header-user{color:var(--muted); font-size:.9rem}

/* Panels */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:20px}
.panel h2{font-size:1.15rem; margin:0}
.panel-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; flex-wrap:wrap}
.panel-sub{color:var(--muted); font-size:.86rem; margin:4px 0 0; max-width:60ch}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.grid-2 .panel{margin-bottom:20px}
.notice{background:rgba(245,181,74,.1); border:1px solid rgba(245,181,74,.4); color:#FFD98F;
  border-radius:8px; padding:10px 14px; margin-bottom:20px; font-size:.88rem}

/* Dropzone */
.dropzone{border:1.5px dashed var(--line); border-radius:var(--radius); padding:34px 24px; margin-bottom:20px;
  text-align:center; cursor:pointer; transition:border-color .15s, background .15s}
.dropzone:hover,.dropzone.drag{border-color:var(--accent); background:rgba(110,168,255,.06)}
.dropzone-compact{padding:16px 24px}
.dz-inner{display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap}
.dz-icon{width:34px; height:34px; color:var(--accent)}
.dz-inner strong{display:block; font-family:var(--font-display)}
.dz-hint{color:var(--muted); font-size:.86rem}
.dz-status{margin-top:14px; font-size:.88rem; text-align:left; max-width:560px; margin-inline:auto}
.dz-status .ok{color:var(--in)} .dz-status .err{color:var(--out)}
.empty-state{color:var(--muted); text-align:center; padding:48px 0}

/* Stats */
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.stat .k{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.stat .v{font-family:var(--font-mono); font-size:1.5rem; font-weight:600; margin-top:4px}
.stat .v.pos{color:var(--in)} .stat .v.neg{color:var(--out)} .stat .v.amb{color:var(--pending)}
.stat .s{color:var(--muted); font-size:.78rem}

/* Cash river */
.river-controls{display:flex; gap:14px; align-items:center}
.river-wrap{position:relative; width:100%; overflow-x:auto}
.river-wrap svg{display:block}
.river-tip{position:fixed; z-index:40; background:#050A14; border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; font-size:.82rem; pointer-events:none; max-width:280px; box-shadow:0 8px 24px rgba(0,0,0,.5)}
.river-tip .t-amt{font-family:var(--font-mono); font-weight:600}
.legend{display:flex; gap:18px; color:var(--muted); font-size:.8rem; margin-top:10px}
.dot{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.dot-in{background:var(--in)} .dot-out{background:var(--out)}
.dot-fc{background:transparent; border:1.5px dashed var(--pending)}
.switch-label{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.86rem; margin:0; font-weight:500}
.switch-lg{font-size:1rem; color:var(--paper)}

/* Heatmap */
.heatmap{display:flex; gap:3px; overflow-x:auto; padding-bottom:6px}
.hm-col{display:flex; flex-direction:column; gap:3px}
.hm-cell{width:13px; height:13px; border-radius:3px; background:var(--panel-2)}
.hm-lab{font-family:var(--font-mono); font-size:.62rem; color:var(--muted); height:14px; white-space:nowrap}

/* Recurring radar */
.recurring-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.rec-card{border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--panel-2)}
.rec-card .r-top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.rec-card .r-label{font-weight:600}
.rec-card .r-amt{font-family:var(--font-mono); font-weight:600; white-space:nowrap}
.rec-card .r-amt.in{color:var(--in)} .rec-card .r-amt.out{color:var(--out)}
.rec-card .r-meta{color:var(--muted); font-size:.8rem; margin-top:4px}
.rec-card .r-next{color:var(--pending); font-family:var(--font-mono); font-size:.8rem; margin-top:6px}
.conf-bar{height:3px; background:var(--line); border-radius:2px; margin-top:8px; overflow:hidden}
.conf-bar i{display:block; height:100%; background:var(--accent)}

/* Ledger */
.ledger-tools{display:flex; gap:10px}
.table-scroll{overflow-x:auto}
.ledger{width:100%; border-collapse:collapse; font-size:.9rem}
.ledger th{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line)}
.ledger td{padding:9px 10px; border-bottom:1px solid rgba(36,48,74,.5); vertical-align:top}
.ledger tr:hover td{background:rgba(110,168,255,.05)}
.ledger .amt{font-family:var(--font-mono); white-space:nowrap; text-align:right}
.ledger .amt.in{color:var(--in)} .ledger .amt.out{color:var(--out)}
.ledger .raw{color:var(--muted); font-size:.8rem; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ledger .needs{color:var(--pending); font-style:italic}
.badge-src{font-family:var(--font-mono); font-size:.62rem; padding:2px 6px; border-radius:4px; border:1px solid var(--line); color:var(--muted)}
.badge-src.ai{border-color:var(--accent); color:var(--accent)}
.badge-src.user{border-color:var(--in); color:var(--in)}
.edit-btn{background:none; border:1px solid var(--line); color:var(--muted); border-radius:6px; padding:2px 10px; cursor:pointer; font-size:.78rem}
.edit-btn:hover{border-color:var(--accent); color:var(--accent)}

/* Modal */
.modal-veil{position:fixed; inset:0; background:rgba(4,8,16,.7); display:flex; align-items:center; justify-content:center; z-index:60; padding:16px}
.modal-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:26px; width:100%; max-width:440px}
.modal-card h3{margin-top:0}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px}

/* Chat drawer */
.chat-drawer{position:fixed; top:0; right:0; height:100vh; width:min(420px,100vw); background:var(--panel-2);
  border-left:1px solid var(--line); z-index:80; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease}
.chat-drawer.open{transform:translateX(0)}
.chat-backdrop{position:fixed; inset:0; background:rgba(4,8,16,.5); z-index:70}
.chat-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line)}
.chat-title{font-family:var(--font-display); font-weight:600}
.chat-sub{color:var(--muted); font-size:.78rem}
.chat-close{background:none; border:0; color:var(--muted); font-size:1.6rem; line-height:1; cursor:pointer}
.chat-log{flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:12px}
.chat-empty{color:var(--muted); font-size:.86rem; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.chat-suggest{background:var(--panel); border:1px solid var(--line); color:var(--accent); border-radius:16px; padding:6px 12px; font-size:.82rem; cursor:pointer; text-align:left}
.chat-suggest:hover{border-color:var(--accent)}
.msg{max-width:88%; padding:10px 14px; border-radius:12px; font-size:.9rem; white-space:pre-wrap; word-break:break-word}
.msg-user{align-self:flex-end; background:var(--accent); color:#0A1220; border-bottom-right-radius:4px}
.msg-ai{align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:4px}
.msg-ai.thinking{color:var(--muted); font-style:italic}
.chat-input-row{display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--line)}
.chat-input-row input{flex:1; background:var(--panel); border:1px solid var(--line); color:var(--paper); border-radius:8px; padding:9px 12px}
.chat-input-row input:focus{outline:none; border-color:var(--accent)}

/* Settings */
.settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.settings-grid .panel:last-child{grid-column:1/-1}
.ok-badge{display:inline-block; color:var(--in); border:1px solid var(--in); border-radius:6px; padding:2px 10px; font-size:.8rem}
.off-badge{display:inline-block; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:2px 10px; font-size:.8rem}
.svc-list{list-style:none; padding:0; margin:0 0 12px}
.svc-list li{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(36,48,74,.5)}
.setup-steps{padding-left:18px; color:var(--muted)} .setup-steps li{margin-bottom:16px}
.qr-box{background:#fff; padding:12px; border-radius:8px; width:fit-content; margin:10px 0}

/* Focus + motion */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .feature-band{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .rail{width:64px; flex-basis:64px}
  .rail-nav a span,.rail-chat-btn span{display:none}
  .app-main{padding:16px 14px 48px}
  .panel{padding:16px}
}

/* ---- AI briefing ---- */
.summary-box{white-space:pre-wrap; line-height:1.65; font-size:.95rem; padding:4px 2px 0}
.summary-time{color:var(--muted); font-size:.75rem; margin-top:10px; font-family:'Spline Sans Mono',monospace}

/* ---- Two-column name fields (register + profile) ---- */
.name-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .name-row{grid-template-columns:1fr} }

/* ---- Honeypot: parked far off-screen, never display:none (bots check that) ---- */
.hp-field{position:absolute; left:-9999px; top:-9999px; height:1px; width:1px; overflow:hidden}

/* ---- Chat bubbles keep the model's line breaks ---- */
.msg{white-space:pre-wrap}

/* ---- Chat header actions + clear ---- */
.chat-head-actions{display:flex; align-items:center; gap:14px}
.chat-clear{color:var(--muted); font-size:.8rem; text-decoration:none}
.chat-clear:hover{color:var(--out); text-decoration:underline}

/* ---- Bill price check ---- */
.pc-btn{margin-top:10px; background:none; border:1px solid var(--line); color:var(--accent);
  border-radius:6px; padding:4px 10px; font-size:.78rem; cursor:pointer}
.pc-btn:hover{border-color:var(--accent)}
.pc-btn:disabled{color:var(--muted); cursor:wait}
.pc-result{margin-top:10px; padding:10px 12px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; font-size:.83rem; line-height:1.55; white-space:pre-wrap; color:var(--paper)}