@font-face{font-family:'Inter';src:url('fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Grotesk';src:url('fonts/grotesk-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Grotesk';src:url('fonts/grotesk-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Ledger';src:url('fonts/plex-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Ledger';src:url('fonts/plex-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --ink:#0B1018; --ink2:#131C29; --ink3:#1B2634;
  --glass:rgba(10,15,23,.56);
  --glass-solid:rgba(15,22,32,.86);
  --line:rgba(255,255,255,.11);
  --line2:rgba(255,255,255,.06);
  --paper:#EDF1F7; --muted:#8FA0B6; --dim:#66748A;
  --brass:#E0B252; --brass-dim:rgba(224,178,82,.16);
  --sage:#6FB08D; --sage-dim:rgba(111,176,141,.16);
  --clay:#D2705F; --clay-dim:rgba(210,112,95,.16);
  --sky:#6BA8D6; --violet:#9A8FD8;
  --r:14px; --r-lg:20px;
  --sh:0 18px 50px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--ink); color:var(--paper);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5;
  min-height:100vh; overflow-x:hidden;
}
a{color:var(--brass);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- figures ---------- */
.fig{font-family:'Ledger',ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.eyebrow{
  font-family:'Ledger',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}

/* ============ BACKGROUND PHOTO LAYER ============ */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(120% 90% at 18% 8%, #1A2A3E 0%, #0B1018 62%, #070A0F 100%)}
#bg .slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;will-change:opacity,transform;
}
#bg .slide.on{opacity:1}
#bg .tile{
  position:absolute;background-size:cover;background-position:center;
  will-change:transform;box-shadow:0 22px 60px rgba(0,0,0,.5);
}
#bg .col{position:absolute;top:0;width:auto;will-change:transform}
#bg .col .ct{display:block;background-size:cover;background-position:center;margin:0 0 14px 0;
  box-shadow:0 18px 44px rgba(0,0,0,.45)}
#scrim{position:fixed;inset:0;z-index:1;pointer-events:none;background:var(--ink)}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(115% 85% at 50% 45%, transparent 38%, rgba(4,7,11,.72) 100%)}
#grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>")}

@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(var(--kbz,1.12)) translate(var(--kbx,-1%),var(--kby,1%))}}
@keyframes driftA{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(2.2vw,-2.6vh,0)}100%{transform:translate3d(0,0,0)}}
@keyframes driftB{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-2.6vw,2.2vh,0)}100%{transform:translate3d(0,0,0)}}
@keyframes marchUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes marchDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}

/* ============ SHELL ============ */
.shell{position:relative;z-index:5;min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 22px}
.wrap.narrow{max-width:640px}

/* ---------- top bar ---------- */
.topbar{
  position:relative;z-index:20;display:flex;align-items:center;flex-wrap:wrap;
  padding:16px 22px;border-bottom:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(6,10,16,.62),rgba(6,10,16,.08));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;margin:0 auto 0 0}
.brand .mk{
  width:30px;height:30px;border-radius:9px;margin:0 11px 0 0;flex:0 0 auto;
  background:linear-gradient(145deg,var(--brass),#9C7526);
  display:flex;align-items:center;justify-content:center;
  font-family:'Ledger',monospace;font-weight:500;font-size:14px;color:#1B1305;
}
.brand b{font-family:'Grotesk',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.015em}
.brand span{display:block;font-size:10.5px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;font-family:'Ledger',monospace}
.navlinks{display:flex;align-items:center;flex-wrap:wrap}
.navlinks a{
  display:inline-block;margin:0 0 0 6px;padding:8px 13px;border-radius:10px;
  font-size:13px;font-weight:500;color:var(--muted);border:1.5px solid transparent;
}
.navlinks a:hover{color:var(--paper);background:rgba(255,255,255,.05);text-decoration:none}
.navlinks a.on{color:var(--brass);border-color:rgba(224,178,82,.34);background:var(--brass-dim)}

/* ============ CONTROLS (shared baseline) ============ */
label.lbl{display:block;font-size:12px;font-weight:500;color:var(--muted);margin:0 0 7px 0;letter-spacing:.01em}

.inp,.sel,textarea.inp{
  width:100%;display:block;
  font-family:'Inter',sans-serif;font-size:14px;color:var(--paper);
  background:rgba(255,255,255,.05);
  border:1.5px solid var(--line);border-radius:11px;
  padding:11px 14px;min-height:42px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
  outline:none;
}
.inp::placeholder{color:var(--dim)}
.inp:focus,.sel:focus,textarea.inp:focus{
  border-color:rgba(224,178,82,.62);
  box-shadow:0 0 0 3.5px rgba(224,178,82,.16);
  background:rgba(255,255,255,.075);
}
.inp:disabled{opacity:.5}

/* styled select — never a bare native control */
.selwrap{position:relative;display:block}
.sel{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding:11px 40px 11px 14px;min-height:42px;cursor:pointer;
  background-image:none;
}
.sel option,.sel optgroup{background:#111A26;color:var(--paper)}
.selwrap::after{
  content:'';position:absolute;right:14px;top:50%;width:11px;height:7px;
  transform:translateY(-50%);pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238FA0B6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;letter-spacing:.005em;
  padding:11px 20px;min-height:42px;border-radius:11px;cursor:pointer;
  border:1.5px solid transparent;
  background:linear-gradient(180deg,#EFC470,var(--brass));color:#1B1305;
  transition:transform .12s ease, box-shadow .16s ease, filter .16s ease;
  box-shadow:0 8px 22px rgba(224,178,82,.2);
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3.5px rgba(224,178,82,.32)}
.btn.ghost{background:rgba(255,255,255,.05);color:var(--paper);border-color:var(--line);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.danger{background:rgba(210,112,95,.14);color:#F0A899;border-color:rgba(210,112,95,.4);box-shadow:none}
.btn.danger:hover{background:rgba(210,112,95,.22)}
.btn.sm{font-size:12.5px;padding:7px 13px;min-height:34px;border-radius:9px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.chip{
  display:inline-flex;align-items:center;
  font-family:'Ledger',monospace;font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:7px;margin:0 6px 6px 0;
  border:1.5px solid var(--line);color:var(--muted);background:rgba(255,255,255,.04);
}
.chip.good{color:var(--sage);border-color:rgba(111,176,141,.4);background:var(--sage-dim)}
.chip.bad{color:var(--clay);border-color:rgba(210,112,95,.4);background:var(--clay-dim)}
.chip.warn{color:var(--brass);border-color:rgba(224,178,82,.4);background:var(--brass-dim)}

/* toggle */
.tog{display:inline-flex;align-items:center;cursor:pointer;user-select:none}
.tog input{position:absolute;opacity:0;width:0;height:0}
.tog .tr{
  width:40px;height:23px;border-radius:12px;flex:0 0 auto;margin:0 11px 0 0;position:relative;
  background:rgba(255,255,255,.1);border:1.5px solid var(--line);transition:background .18s ease,border-color .18s ease;
}
.tog .tr::after{
  content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--muted);transition:transform .18s ease,background .18s ease;
}
.tog input:checked + .tr{background:var(--brass-dim);border-color:rgba(224,178,82,.55)}
.tog input:checked + .tr::after{transform:translateX(17px);background:var(--brass)}
.tog input:focus-visible + .tr{box-shadow:0 0 0 3.5px rgba(224,178,82,.22)}
.tog .tl{font-size:13.5px;color:var(--paper)}

/* range */
.rng{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;display:block}
.rng::-webkit-slider-runnable-track{height:4px;border-radius:3px;background:rgba(255,255,255,.13)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--brass);margin-top:-6.5px;border:2.5px solid #14202E;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.rng::-moz-range-track{height:4px;border-radius:3px;background:rgba(255,255,255,.13)}
.rng::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--brass);border:2.5px solid #14202E}
.rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(224,178,82,.28)}

/* ============ SURFACES ============ */
.disp{
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(115%);-webkit-backdrop-filter:blur(18px) saturate(115%);
  border:1.5px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);
  padding:22px;
}
.disp.solid{background:var(--glass-solid)}
.disp.tight{padding:16px}
.card{
  background:rgba(255,255,255,.035);border:1.5px solid var(--line2);border-radius:var(--r);
  padding:16px;
}

.row{display:flex;flex-wrap:wrap;align-items:flex-start;margin:0 -8px}
.row > *{margin:0 8px 16px 8px}
.col-2{flex:1 1 calc(50% - 16px);min-width:230px}
.col-3{flex:1 1 calc(33.333% - 16px);min-width:210px}
.col-4{flex:1 1 calc(25% - 16px);min-width:180px}
.col-6{flex:1 1 calc(16.666% - 16px);min-width:150px}
.col-full{flex:1 1 100%}
.spread{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}

hr.rule{border:none;border-top:1px solid var(--line2);margin:22px 0}

/* section heads */
.sechead{display:flex;align-items:baseline;flex-wrap:wrap;margin:0 0 14px 0}
.sechead h2{font-family:'Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;margin:0 12px 0 0}
.sechead p{font-size:13px;color:var(--muted);margin:0}
.sec{margin:0 0 34px 0}

/* ============ ENTRY PAGE ============ */
.entry{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:34px 22px 46px 22px}
.entrycard{width:100%;max-width:520px}
.entrycard .eyebrow{margin:0 0 6px 0}
.entrycard h1{
  font-family:'Grotesk',sans-serif;font-weight:700;font-size:26px;letter-spacing:-.028em;
  margin:0 0 22px 0;line-height:1.2;
}
.amountbox{position:relative;margin:0 0 18px 0}
.amountbox .cur{
  position:absolute;left:2px;top:50%;transform:translateY(-50%);
  font-family:'Ledger',monospace;font-size:34px;color:var(--dim);pointer-events:none;
}
#amount{
  width:100%;display:block;background:transparent;border:none;
  border-bottom:1.5px solid var(--line);border-radius:0;
  font-family:'Ledger',monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(44px,12vw,68px);font-weight:400;letter-spacing:-.035em;
  color:var(--paper);padding:4px 0 10px 34px;outline:none;
  transition:border-color .18s ease;
}
#amount::placeholder{color:rgba(143,160,182,.28)}
#amount:focus{border-bottom-color:var(--brass)}
#amount::-webkit-outer-spin-button,#amount::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quickrow{display:flex;flex-wrap:wrap;margin:0 -4px 18px -4px}
.quickrow button{
  margin:0 4px 8px 4px;padding:7px 12px;border-radius:9px;cursor:pointer;
  font-family:'Ledger',monospace;font-size:12.5px;
  background:rgba(255,255,255,.05);border:1.5px solid var(--line);color:var(--muted);
  transition:all .14s ease;
}
.quickrow button:hover{color:var(--paper);border-color:rgba(224,178,82,.45);background:var(--brass-dim)}

.whorow{display:flex;flex-wrap:wrap;margin:0 -4px 18px -4px}
.whorow button{
  flex:1 1 auto;margin:0 4px;padding:9px 12px;border-radius:10px;cursor:pointer;
  font-size:13px;font-weight:500;
  background:rgba(255,255,255,.045);border:1.5px solid var(--line);color:var(--muted);
  transition:all .14s ease;
}
.whorow button.on{color:var(--brass);border-color:rgba(224,178,82,.5);background:var(--brass-dim)}

/* confirmation */
.confirm{text-align:center;padding:8px 0 4px 0}
.confirm .tick{
  width:56px;height:56px;border-radius:50%;margin:0 auto 16px auto;
  background:var(--sage-dim);border:1.5px solid rgba(111,176,141,.45);
  display:flex;align-items:center;justify-content:center;
  animation:pop .34s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.confirm h2{font-family:'Grotesk',sans-serif;font-size:22px;font-weight:700;margin:0 0 4px 0;letter-spacing:-.02em}
.confirm p{color:var(--muted);font-size:13.5px;margin:0 0 20px 0}

/* MTD strip */
.strip{display:flex;flex-wrap:wrap;margin:0 -6px}
.strip .cell{flex:1 1 calc(33.333% - 12px);min-width:120px;margin:0 6px 12px 6px;
  padding:13px 14px;border-radius:var(--r);background:rgba(255,255,255,.04);border:1.5px solid var(--line2)}
.strip .cell .k{font-family:'Ledger',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:0 0 6px 0}
.strip .cell .v{font-family:'Ledger',monospace;font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.strip .cell .s{font-size:11.5px;color:var(--muted);margin:4px 0 0 0}
.v.good{color:var(--sage)} .v.bad{color:var(--clay)} .v.warn{color:var(--brass)}

/* recent list */
.recent{margin:0}
.recent .r{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--line2)}
.recent .r:last-child{border-bottom:none}
.recent .r .nm{flex:1 1 auto;font-size:13.5px;margin:0 10px 0 0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent .r .dt{font-family:'Ledger',monospace;font-size:11px;color:var(--dim);margin:0 12px 0 0;flex:0 0 auto}
.recent .r .am{font-family:'Ledger',monospace;font-size:14px;flex:0 0 auto;margin:0 10px 0 0}
.recent .r .x{
  flex:0 0 auto;width:26px;height:26px;border-radius:7px;cursor:pointer;
  background:transparent;border:1.5px solid var(--line2);color:var(--dim);font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:all .14s ease;
}
.recent .r .x:hover{color:var(--clay);border-color:rgba(210,112,95,.45);background:var(--clay-dim)}

/* ============ PACE RING (signature) ============ */
.ring{position:relative;width:200px;height:200px;margin:0 auto}
.ring svg{display:block;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:11}
.ring .arc{fill:none;stroke-width:11;stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.3,.9,.3,1),stroke .4s ease}
.ring .mark{stroke:var(--paper);stroke-width:2.5;stroke-linecap:round;opacity:.85}
.ring .inner{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
}
.ring .inner .big{font-family:'Ledger',monospace;font-size:34px;font-weight:500;letter-spacing:-.035em;line-height:1}
.ring .inner .lil{font-family:'Ledger',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin:7px 0 0 0}
.ringlegend{text-align:center;margin:16px 0 0 0}
.ringlegend .t{font-family:'Grotesk',sans-serif;font-size:15px;font-weight:500;margin:0 0 3px 0}
.ringlegend .d{font-size:12.5px;color:var(--muted)}

/* ============ BARS ============ */
.bars{margin:0}
.bars .b{margin:0 0 15px 0}
.bars .b:last-child{margin-bottom:0}
.bars .b .top{display:flex;align-items:baseline;margin:0 0 6px 0}
.bars .b .top .n{flex:1 1 auto;font-size:13px;margin:0 10px 0 0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bars .b .top .a{font-family:'Ledger',monospace;font-size:12.5px;flex:0 0 auto}
.bars .b .top .a i{color:var(--dim);font-style:normal}
.bars .b .track{position:relative;height:9px;border-radius:5px;background:rgba(255,255,255,.07);overflow:visible}
.bars .b .fill{position:absolute;left:0;top:0;height:9px;border-radius:5px;
  transition:width .8s cubic-bezier(.3,.9,.3,1)}
.bars .b .pin{position:absolute;top:-4px;width:2px;height:17px;border-radius:2px;background:rgba(255,255,255,.55)}
.f-good{background:linear-gradient(90deg,#4E8E6E,var(--sage))}
.f-warn{background:linear-gradient(90deg,#B8873A,var(--brass))}
.f-bad{background:linear-gradient(90deg,#A6503F,var(--clay))}

/* ============ TABLES ============ */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{
  text-align:left;font-family:'Ledger',monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);font-weight:400;
  padding:0 12px 9px 0;border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{text-align:right;font-family:'Ledger',monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl th.num{text-align:right}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* heat map */
.heat{border-collapse:separate;border-spacing:3px;font-size:11px}
.heat th{padding:0 0 6px 0;border:none;font-size:9.5px;letter-spacing:.1em}
.heat th.rowh{text-align:left;padding:0 10px 0 0;font-family:'Inter',sans-serif;font-size:11.5px;
  letter-spacing:0;text-transform:none;color:var(--muted);white-space:nowrap;max-width:150px;
  overflow:hidden;text-overflow:ellipsis}
.heat td{padding:0;border:none;width:30px;height:26px;border-radius:6px;text-align:center;
  font-family:'Ledger',monospace;font-size:10px;color:rgba(255,255,255,.82)}

/* ============ CHARTS ============ */
.chartbox{position:relative;width:100%;height:250px}
.chartbox.tall{height:310px}
.chartbox.short{height:180px}

/* ============ ADMIN ============ */
.tabs{display:flex;flex-wrap:wrap;margin:0 -4px 24px -4px;border-bottom:1px solid var(--line2);padding:0 0 12px 0}
.tabs button{
  margin:0 4px 6px 4px;padding:9px 15px;border-radius:10px;cursor:pointer;
  font-size:13px;font-weight:500;font-family:'Inter',sans-serif;
  background:transparent;border:1.5px solid transparent;color:var(--muted);
  transition:all .14s ease;
}
.tabs button:hover{color:var(--paper);background:rgba(255,255,255,.05)}
.tabs button.on{color:var(--brass);border-color:rgba(224,178,82,.34);background:var(--brass-dim)}
.pane{display:none}
.pane.on{display:block}

.field{margin:0 0 17px 0}
.field .hint{font-size:12px;color:var(--dim);margin:6px 0 0 0}
.ctlrow{display:flex;align-items:center;flex-wrap:wrap;margin:0 0 4px 0}
.ctlrow .lbl{flex:1 1 auto;margin:0 10px 0 0}
.ctlrow .val{font-family:'Ledger',monospace;font-size:12.5px;color:var(--brass);flex:0 0 auto;
  min-width:56px;text-align:right}

/* photo grid */
.pgrid{display:flex;flex-wrap:wrap;margin:0 -6px}
.pgrid .p{
  position:relative;flex:0 0 auto;width:calc(25% - 12px);margin:0 6px 12px 6px;
  aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1.5px solid var(--line);
  background:rgba(255,255,255,.04) center/cover no-repeat;
}
@media(max-width:640px){.pgrid .p{width:calc(50% - 12px)}}
.pgrid .p .del{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:7px;cursor:pointer;
  background:rgba(8,12,18,.8);border:1.5px solid rgba(255,255,255,.2);color:#F0A899;
  font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.pgrid .p .del:hover{background:rgba(210,112,95,.85);color:#fff}

.drop{
  border:1.5px dashed var(--line);border-radius:var(--r);padding:26px 18px;text-align:center;
  background:rgba(255,255,255,.025);transition:all .16s ease;cursor:pointer;
}
.drop.hot{border-color:rgba(224,178,82,.6);background:var(--brass-dim)}
.drop p{margin:0 0 4px 0;font-size:13.5px}
.drop small{color:var(--dim);font-size:12px}

/* category editor rows */
.catrow{display:flex;align-items:center;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--line2)}
.catrow .grab{flex:0 0 auto;width:20px;color:var(--dim);cursor:grab;font-size:14px;margin:0 8px 0 0;text-align:center}
.catrow .cname{flex:1 1 190px;min-width:150px;margin:0 8px 0 0}
.catrow .cbud{flex:0 0 118px;margin:0 8px 0 0}
.catrow .cgrp{flex:0 0 148px;margin:0 8px 0 0}
.catrow .ckind{flex:0 0 128px;margin:0 8px 0 0}
.catrow .cpar{flex:0 0 148px;margin:0 8px 0 0}
.catrow .camt{flex:0 0 152px;margin:0 8px 0 0}
.catrow .cflags{flex:0 0 auto;display:flex;align-items:center;margin:0 8px 0 0}
.catrow .cflags .tog{margin:0 12px 0 0}
.catrow .cdel{flex:0 0 auto}
@media(max-width:820px){
  .catrow{border:1.5px solid var(--line2);border-radius:var(--r);padding:14px;margin:0 0 10px 0}
  .catrow .cname,.catrow .cbud,.catrow .cgrp,.catrow .ckind,.catrow .cpar,.catrow .camt{flex:1 1 100%;margin:0 0 9px 0}
  .catrow .grab{display:none}
}

/* reports toggle list */
.tlist{margin:0}
.tlist .ti{display:flex;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line2)}
.tlist .ti:last-child{border-bottom:none}
.tlist .ti .tw{flex:0 0 auto;margin:1px 13px 0 0}
.tlist .ti .tx{flex:1 1 auto;min-width:0}
.tlist .ti .tx b{display:block;font-size:13.5px;font-weight:500;margin:0 0 2px 0}
.tlist .ti .tx span{font-size:12px;color:var(--dim)}

/* health */
.hcheck{margin:0}
.hcheck .h{display:flex;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line2)}
.hcheck .h:last-child{border-bottom:none}
.hcheck .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin:6px 13px 0 0}
.dot-green{background:var(--sage);box-shadow:0 0 0 3.5px rgba(111,176,141,.16)}
.dot-amber{background:var(--brass);box-shadow:0 0 0 3.5px rgba(224,178,82,.16)}
.dot-red{background:var(--clay);box-shadow:0 0 0 3.5px rgba(210,112,95,.16)}
.hcheck .ht{flex:1 1 auto;min-width:0}
.hcheck .ht b{display:block;font-size:13.5px;font-weight:500;margin:0 0 2px 0}
.hcheck .ht span{font-size:12.5px;color:var(--muted)}

/* login */
.loginwrap{flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:40px 22px}
.loginwrap .disp{width:100%;max-width:390px;text-align:center}
.loginwrap h1{font-family:'Grotesk',sans-serif;font-size:23px;font-weight:700;margin:0 0 6px 0;letter-spacing:-.02em}
.loginwrap p{color:var(--muted);font-size:13.5px;margin:0 0 22px 0}

/* toast */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:9999;
  padding:13px 22px;border-radius:12px;max-width:calc(100vw - 40px);
  background:var(--glass-solid);border:1.5px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  font-size:13.5px;font-weight:500;box-shadow:var(--sh);
  transition:transform .34s cubic-bezier(.2,1.2,.3,1);
}
#toast.up{transform:translate(-50%,0)}
#toast.good{border-color:rgba(111,176,141,.5)}
#toast.bad{border-color:rgba(210,112,95,.5)}

/* misc */
.empty{text-align:center;padding:30px 18px;color:var(--dim);font-size:13.5px}
.mono-note{font-family:'Ledger',monospace;font-size:11.5px;color:var(--dim)}
.footer{padding:26px 22px 34px 22px;text-align:center;color:var(--dim);font-size:11.5px;
  font-family:'Ledger',monospace;letter-spacing:.06em}
.monthnav{display:flex;align-items:center;flex-wrap:wrap}
.monthnav .m{font-family:'Grotesk',sans-serif;font-size:17px;font-weight:500;margin:0 12px;
  min-width:130px;text-align:center;letter-spacing:-.015em}

@media(max-width:560px){
  .wrap{padding:0 15px}
  .disp{padding:17px;border-radius:16px}
  .topbar{padding:12px 15px}
  .brand span{display:none}
  .navlinks a{padding:7px 10px;font-size:12.5px;margin:0 0 0 4px}
  .sechead h2{font-size:18px}
  .strip .cell{flex:1 1 calc(50% - 12px)}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.08s !important}
}
@media print{
  #bg,#scrim,#vignette,#grain,.topbar,.navlinks{display:none !important}
  body{background:#fff;color:#000}
  .disp{background:#fff;border-color:#ccc;box-shadow:none;backdrop-filter:none}
}

/* ============ ENTRY: cents-first amount, inline category ============ */
.amthint{
  font-size:11.5px;color:var(--dim);margin:8px 0 0 34px;
  font-family:'Ledger',monospace;letter-spacing:.02em;
}
.hint{font-size:11.5px;color:var(--dim);margin:7px 0 0 0;line-height:1.5}

.newcat{
  border:1.5px solid var(--line);border-radius:var(--r);
  background:rgba(255,255,255,.035);padding:16px 16px 16px 16px;margin:0 0 18px 0;
}

.datenote{text-align:center;margin:14px 0 0 0;font-size:12.5px;color:var(--muted)}
.datenote strong{color:var(--paper);font-weight:600}
.linky{
  background:none;border:0;padding:0;margin:0 0 0 8px;cursor:pointer;
  color:var(--brass);font-family:'Inter',sans-serif;font-size:12.5px;
  border-bottom:1px solid rgba(224,178,82,.4);
}
.linky:hover{color:#F0C877;border-bottom-color:#F0C877}

/* ============ CONFIRMATION: the category you just spent in ============ */
.catfocus{
  border:1.5px solid var(--line);border-radius:var(--r);
  padding:17px 18px 18px 18px;margin:0 0 6px 0;background:rgba(255,255,255,.035);
}
.catfocus.s-over {border-color:rgba(210,112,95,.5); background:var(--clay-dim)}
.catfocus.s-watch{border-color:rgba(224,178,82,.45);background:var(--brass-dim)}
.catfocus.s-ahead{border-color:rgba(111,176,141,.45);background:var(--sage-dim)}
.cfhead{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em;margin:0 0 6px 0}
.cfbig{font-family:'Ledger',monospace;font-size:30px;color:var(--paper);line-height:1.15;letter-spacing:-.02em}
.cfbig i{font-style:normal;font-size:19px;color:var(--dim)}
.cfline{font-size:14px;color:var(--muted);margin:12px 0 0 0;line-height:1.5}
.cfline b{color:var(--paper);font-weight:600}
.cfline b.bad{color:var(--clay)}
.cfmsg{font-size:13px;line-height:1.6;color:var(--muted);margin:9px 0 0 0}
.striplead{font-family:'Ledger',monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin:20px 0 12px 0}

.track.big{position:relative;height:11px;border-radius:6px;background:rgba(255,255,255,.08);margin:10px 0 0 0}
.track.big .fill{position:absolute;left:0;top:0;height:11px;border-radius:6px;
  transition:width .8s cubic-bezier(.3,.9,.3,1)}
.track.big .marker{position:absolute;top:-4px;width:2px;height:19px;border-radius:2px;
  background:rgba(255,255,255,.5)}

.plainline{
  font-size:13.5px;line-height:1.6;color:var(--muted);
  margin:16px 0 0 0;padding:13px 15px;border-radius:var(--r);
  background:rgba(255,255,255,.04);border:1px solid var(--line2);
}
.plainline b{font-weight:600}
.plainline b.good{color:var(--sage)}
.plainline b.warn{color:var(--brass)}
.plainline b.bad{color:var(--clay)}

/* ============ SPLIT BAR LISTS ============ */
.barlead{
  font-family:'Ledger',monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin:0 0 12px 0;
}
.bars + .barlead{margin-top:22px}
.bars.quiet{opacity:.62}
.bars .b.sub .top .n{color:var(--muted);font-size:12.5px}
.tag{
  font-style:normal;font-family:'Ledger',monospace;font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;
  border-radius:5px;margin:0 0 0 8px;vertical-align:middle;
}
.t-good{background:var(--sage-dim);color:var(--sage)}
.t-warn{background:var(--brass-dim);color:var(--brass)}
.t-bad {background:var(--clay-dim);color:var(--clay)}
.t-dim {background:rgba(255,255,255,.06);color:var(--dim)}

/* ============ PLAIN-ENGLISH MINI STATS ============ */
.minik{font-family:'Ledger',monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin:0 0 6px 0}
.miniv{font-family:'Ledger',monospace;font-size:17px;color:var(--paper);line-height:1.2}
.miniv i{color:var(--dim);font-style:normal;font-size:13px}
.miniv.good{color:var(--sage)}
.miniv.warn{color:var(--brass)}
.miniv.bad {color:var(--clay)}
.minis{font-size:11.5px;color:var(--muted);margin:5px 0 0 0}