:root{
  --bg:#2c352f;
  --panel:#37423b;
  --panel-2:#404c43;
  --line:#525f54;
  --text:#ece6d8;
  --muted:#a7ae9f;
  --iron:#c9b88a;
  --iron-dim:#8f8262;
  --money:#8fae7f;
  --danger:#c07a6a;
  --warning:#d7a85c;
  --info:#7fa5b8;
  --radius:10px;
  font-size:16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{overflow-x:clip;}
body{width:100%;overflow-x:clip;}
#app,main,.view,.card,.grid>*,.quick-grid>*,.notice>*,.ledger-entry>*{min-width:0;}
.addr,.sub,.notice,.ledger-entry,.stat .value{overflow-wrap:anywhere;}
body{
  background:
    radial-gradient(ellipse at top left, #333e37 0%, var(--bg) 55%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand,.tabbtn,.stagebar-label{font-family:'Cormorant Garamond',serif; letter-spacing:.03em; font-weight:600;}
.mono{font-family:'IBM Plex Mono',monospace;}
button{font-family:inherit; cursor:pointer;}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(201,184,138,.45);outline-offset:2px;}
::selection{background:var(--iron); color:#232b26;}

/* ---------- LOGIN ---------- */
#loginScreen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding:24px;
}
.gate-wrap{width:280px; max-width:80vw; margin-bottom:12px;}
.logo-img{width:100%; height:auto; display:block; border-radius:6px;}
.header-logo{width:30px; height:30px; object-fit:cover; border-radius:5px;}
#loginCard{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 32px; width:100%; max-width:360px; text-align:center;
}
#loginCard h1{font-size:1.5rem; font-weight:600; margin-bottom:2px; text-transform:uppercase;}
#loginCard .tag{color:var(--muted); font-size:.8rem; margin-bottom:24px; letter-spacing:.08em; text-transform:uppercase;}
.field{text-align:left; margin-bottom:14px; min-width:0;}
.field label{display:block; font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;}
input,select,textarea{
  width:100%; min-width:0; max-width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
  padding:10px 12px; border-radius:8px; font-size:1rem; font-family:inherit;
}
input[type="date"]{display:block;appearance:none;-webkit-appearance:none;height:46px;min-width:0;width:100%;}
input::-webkit-date-and-time-value{min-width:0;text-align:left;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--iron-dim); border-color:var(--iron);}
.btn{
  background:var(--iron); color:#232b26; border:none; padding:11px 18px; border-radius:8px;
  font-weight:600; font-size:.9rem; text-transform:uppercase; letter-spacing:.04em;
}
.btn:hover{background:#d97f36;}
.btn:active{transform:translateY(1px);}
.btn.full{width:100%;}
.btn.ghost{background:transparent; border:1px solid var(--line); color:var(--text);}
.btn.ghost:hover{border-color:var(--iron);}
.btn.danger{background:var(--danger); color:#fff;}
.btn.small{padding:7px 12px; font-size:.78rem;}
#loginErr{color:var(--danger); font-size:.82rem; min-height:18px; margin-top:8px;}
.hint{color:var(--muted); font-size:.72rem; margin-top:16px; line-height:1.5;}

/* ---------- APP SHELL ---------- */
#app{display:none; min-height:100vh; flex-direction:column;}
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; border-bottom:1px solid var(--line); background:rgba(27,33,43,.6);
  position:sticky; top:0; z-index:30; backdrop-filter:blur(6px);
}
.brand{display:flex; align-items:center; gap:10px; font-size:1.15rem; font-weight:600; text-transform:uppercase;}
.brand svg{width:26px; height:26px;}
.brand small{display:block; font-family:'Inter'; font-size:.62rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; font-weight:400;}
.headerRight{display:flex; align-items:center; gap:14px;}
.whoami{font-size:.8rem; color:var(--muted); text-align:right;}
.whoami b{color:var(--text); font-weight:600;}
.iconbtn{background:transparent; border:1px solid var(--line); color:var(--text); width:36px; height:36px; border-radius:8px; font-size:1rem;}
.iconbtn:hover{border-color:var(--iron);}

nav#tabs{
  display:flex; gap:4px; padding:0 22px; overflow-x:auto; border-bottom:1px solid var(--line);
  background:var(--panel);
}
.tabbtn{
  background:none; border:none; color:var(--muted); padding:12px 14px; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.03em; border-bottom:2px solid transparent; white-space:nowrap;
}
.tabbtn.active{color:var(--iron); border-bottom-color:var(--iron);}
.tabbtn:hover{color:var(--text);}

main{flex:1; padding:22px; max-width:1200px; width:100%; margin:0 auto;}
.view{display:none;}
.view.active{display:block;}
.viewHead{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px;}
.viewHead h2{font-size:1.4rem; text-transform:uppercase; font-weight:600;}
.actions{display:flex; gap:8px; flex-wrap:wrap;}

.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.filters select{width:auto; min-width:120px;}
.searchbox{position:relative;flex:1;min-width:220px;max-width:420px;}
.searchbox input{padding-left:36px;}
.searchbox::before{content:'⌕';position:absolute;left:12px;top:7px;color:var(--muted);font-size:1.25rem;z-index:1;}
.notice{display:flex;align-items:flex-start;gap:10px;background:rgba(127,165,184,.1);border:1px solid rgba(127,165,184,.35);padding:11px 13px;border-radius:9px;margin-bottom:16px;color:#c8d9df;font-size:.78rem;line-height:1.45;}
.notice b{color:var(--text);}
.section-title{display:flex;justify-content:space-between;align-items:center;margin:22px 0 10px;gap:12px;}
.section-title h3{font-size:1rem;text-transform:uppercase;}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:20px;}
.quick{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:left;color:var(--text);}
.quick:hover{border-color:var(--iron);}
.quick b{display:block;margin-bottom:4px;}.quick small{color:var(--muted);}
.mobile-view{display:none;background:var(--panel-2);width:auto;max-width:165px;}
.danger-text{color:var(--danger)!important}.money.negative{color:var(--danger)!important}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warning);margin-right:6px;}
.status-dot.paid{background:var(--money);}
.toast{position:fixed;right:18px;bottom:18px;z-index:300;background:#17201b;color:var(--text);border:1px solid var(--iron-dim);border-radius:9px;padding:12px 16px;box-shadow:0 12px 36px rgba(0,0,0,.35);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;}
.toast.show{opacity:1;transform:none;}
.ledger-entry{display:grid;grid-template-columns:100px 1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:.82rem;}
.ledger-entry:last-child{border-bottom:none}.ledger-entry .muted{color:var(--muted)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:20px;}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
.stat .label{font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;}
.stat .value{font-size:1.5rem; font-weight:600; font-family:'IBM Plex Mono',monospace;}
.stat .value.money{color:var(--money);}

.list{display:flex; flex-direction:column; gap:10px;}
.row{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer;
  flex-wrap:wrap;
}
.row:hover{border-color:var(--iron-dim);}
.row .who{flex:1; min-width:180px;}
.row .who .addr{font-weight:600; font-size:.95rem;}
.row .who .sub{font-size:.78rem; color:var(--muted); margin-top:2px;}
.row .nums{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.row .nums .n{text-align:right;}
.row .nums .n .l{font-size:.65rem; color:var(--muted); text-transform:uppercase;}
.row .nums .n .v{font-family:'IBM Plex Mono',monospace; font-size:.92rem;}

.pill{
  padding:3px 10px; border-radius:999px; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;
  border:1px solid var(--line); color:var(--muted); white-space:nowrap;
}
.pill.stage-Complete,.pill.stage-Completed,.pill.stage-TechPaid{border-color:var(--money); color:var(--money);}
.pill.stage-Signed{border-color:var(--iron-dim); color:var(--iron);}

/* gate picket stage bar */
.stagebar{display:flex; gap:3px; margin-top:6px;}
.stagebar i{width:14px; height:6px; border-radius:2px; background:var(--line); display:block;}
.stagebar i.on{background:var(--iron);}

.empty{
  text-align:center; padding:50px 20px; color:var(--muted); border:1px dashed var(--line); border-radius:var(--radius);
}
.empty .ico{font-size:2rem; margin-bottom:8px; opacity:.6;}

/* modal */
.overlay{
  display:none; position:fixed; inset:0; background:rgba(10,13,18,.7); z-index:100;
  align-items:flex-start; justify-content:center; padding:30px 16px; overflow-y:auto;
}
.overlay.active{display:flex;}
.modal{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  width:100%; max-width:560px; padding:24px; margin-bottom:40px;
}
.modal h3{font-size:1.1rem; text-transform:uppercase; margin-bottom:18px; display:flex; justify-content:space-between; align-items:center;}
.modal h3 button{background:none; border:none; color:var(--muted); font-size:1.2rem;}
.formgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
.formgrid>*{min-width:0;}
.formgrid .span2{grid-column:1/-1;}
.modalFoot{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}
.lineitem{display:flex; gap:8px; margin-bottom:8px; align-items:center;}
.lineitem input{flex:1;}
.lineitem button{background:none; border:none; color:var(--danger); font-size:1rem;}
.project-sub-row select{flex:1.4;}.project-sub-row input{flex:.7;max-width:160px;}.project-sub-row button{width:36px;height:36px;flex:0 0 36px;}
.calcbox{background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:12px; margin-top:6px;}
.calcbox .cr{display:flex; justify-content:space-between; font-size:.85rem; padding:3px 0;}
.calcbox .cr.total{border-top:1px solid var(--line); margin-top:6px; padding-top:8px; font-weight:600;}

footer.legal{padding:16px 22px; text-align:center; color:var(--muted); font-size:.72rem;}
@media(max-width:640px){
  .formgrid{grid-template-columns:1fr;}
  header{position:static;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;} main{padding:14px;}
  .brand{min-width:0;overflow-wrap:anywhere;}.header-logo{flex-shrink:0;}
  .headerRight{min-width:0;gap:10px;}.headerRight .mobile-view{flex:1;max-width:none;min-width:0;}.headerRight .iconbtn{flex:0 0 40px;height:40px;}
  .brand{font-size:.92rem}.brand small,.whoami{display:none}.mobile-view{display:block}
  nav#tabs{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:100%;padding:4px 8px;overflow:visible;border-bottom:1px solid var(--line);background:var(--panel);}
  .tabbtn{display:none;min-width:0;padding:9px 3px;font-family:'Inter';font-size:.75rem;line-height:1.3;border-bottom:0;border-top:2px solid transparent;white-space:normal;overflow-wrap:anywhere;}
  .tabbtn[data-view="dashboard"],.tabbtn[data-view="projects"],.tabbtn[data-view="service"],.tabbtn[data-view="ledger"]{display:block}
  .tabbtn.active{border-top-color:var(--iron);border-bottom:0}
  .viewHead{align-items:flex-start}.viewHead .actions{width:100%}.viewHead .actions .btn{flex:1}
  .filters>*{flex:1 1 145px;min-width:0!important;max-width:100%!important}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));}.quick-grid{grid-template-columns:minmax(0,1fr);}
  .stat{padding:12px;}.stat .value{font-size:clamp(1rem,5vw,1.5rem);}
  .row .who{min-width:0;flex-basis:100%;}.section-title{flex-wrap:wrap;}
  .row{padding:13px}.row .nums{width:100%;gap:12px;justify-content:space-between}.row .nums .n{text-align:left}
  .modal{padding:18px 16px;border-radius:14px 14px 0 0;margin:0;max-height:92vh;overflow:auto}.overlay{align-items:flex-end;padding:0}
  .modalFoot{position:static;flex-wrap:wrap;background:var(--panel);padding:12px 0 max(18px,env(safe-area-inset-bottom));}
  .lineitem{flex-wrap:wrap}.lineitem input,.lineitem select{max-width:none!important;flex:1 1 120px}
  .project-sub-row button{flex:0 0 36px}
  .ledger-entry{grid-template-columns:82px minmax(0,1fr)}.ledger-entry .entry-action{grid-column:2}
  .toast{left:14px;right:14px;bottom:18px;text-align:center}
}