/* ===================== NGU CASHFLOW ===================== */
:root{
  --bg:#0c0f1a; --bg2:#121726; --panel:#161c2e; --panel2:#1c2540;
  --line:#27304d; --text:#e7ecf7; --muted:#8a93b0; --dim:#5c6788;
  --green:#3ddc84; --green2:#1f9d57;
  --gold:#ffc83d; --gold2:#e0a316;
  --blue:#4aa8ff; --teal:#2fd9c5; --purple:#b07bff; --red:#ff5d6c;
  --e:#4aa8ff; --s:#2fd9c5; --b:#b07bff; --i:#ffc83d;
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --mono:'SF Mono',ui-monospace,'Roboto Mono',Menlo,Consolas,monospace;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans); color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(176,123,255,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(74,168,255,.10), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.4;
}
#app{max-width:1180px; margin:0 auto; padding:14px 14px 40px;}

/* ===================== HEADER ===================== */
#topbar{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; padding:10px 4px 16px;}
.brand h1{font-size:26px; letter-spacing:1px; font-weight:800;}
.brand .accent{background:linear-gradient(90deg,var(--gold),var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.tagline{color:var(--muted); font-size:13px; margin-top:2px;}

.stat-strip{display:flex; gap:10px; flex-wrap:wrap;}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px 14px; min-width:118px; box-shadow:var(--shadow);}
.stat-label{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);}
.stat-val{display:block; font-family:var(--mono); font-size:19px; font-weight:700; line-height:1.2; margin-top:2px;}
.stat-sub{display:block; font-size:11px; color:var(--dim); font-family:var(--mono);}
.stat.cash .stat-val{color:var(--green);}
.stat-val.gold{color:var(--gold);} .stat-val.warn{color:var(--red);}
#net.neg{color:var(--red);} #net.pos{color:var(--green);}

/* ============ CONTROL BAR ============ */
#controlbar{display:grid; grid-template-columns:1fr 1.4fr; gap:14px; margin-bottom:16px;}
.focus-box,.escape-box{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow);}
.focus-head,.escape-head{display:flex; justify-content:space-between; font-size:13px; font-weight:600; margin-bottom:8px;}
.focus-head span:last-child,.escape-head span:last-child{font-family:var(--mono); color:var(--muted);}
.focus-hint{font-size:11px; color:var(--dim); margin-top:6px;}
.bar{height:12px; background:#0c1120; border-radius:99px; overflow:hidden; border:1px solid var(--line);}
.bar-fill{height:100%; width:0%; border-radius:99px; transition:width .15s linear;}
.focus-bar .bar-fill{background:linear-gradient(90deg,var(--teal),var(--blue));}
.escape-bar{height:14px;}
.escape-bar .bar-fill{background:linear-gradient(90deg,var(--red),var(--gold));}
.escape-box.ready .escape-bar .bar-fill{background:linear-gradient(90deg,var(--green2),var(--green));}
.btn-escape{margin-top:10px; width:100%; padding:11px; border:none; border-radius:10px; font-weight:800; font-size:15px; letter-spacing:.04em;
  background:#222a44; color:var(--muted); cursor:not-allowed; transition:.15s;}
.btn-escape:not(:disabled){background:linear-gradient(90deg,var(--green2),var(--green)); color:#062012; cursor:pointer; box-shadow:0 0 0 0 rgba(61,220,132,.6); animation:pulse 1.6s infinite;}
.btn-escape:not(:disabled):hover{filter:brightness(1.08);}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%{box-shadow:0 0 0 12px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

/* ===================== QUADRANTS ===================== */
#quadrants{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:14px;}
.quad{position:relative; background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--shadow); min-height:230px; overflow:hidden;}
.quad::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;}
.quad-e::before{background:var(--e);} .quad-b::before{background:var(--b);}
.quad-s::before{background:var(--s);} .quad-i::before{background:var(--i);}
.quad-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.q-letter{font-size:30px; font-weight:900; width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:#0e1426; border:1px solid var(--line);}
.quad-e .q-letter{color:var(--e);} .quad-b .q-letter{color:var(--b);}
.quad-s .q-letter{color:var(--s);} .quad-i .q-letter{color:var(--i);}
.quad-head h2{font-size:17px;}
.quad-head p{font-size:11px; color:var(--muted);}
.quad-body{display:flex; flex-direction:column; gap:10px;}

.row-list{display:flex; flex-direction:column; gap:8px;}
.item{background:#0f1525; border:1px solid var(--line); border-radius:11px; padding:9px 11px; display:flex; flex-direction:column; gap:7px;}
.item.cant{opacity:.6;}
.item-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.item-name{font-weight:700; font-size:13px; display:flex; align-items:center; gap:7px;}
.item-name .emoji{font-size:16px;}
.item-name small{display:block; color:var(--muted); font-weight:500; font-size:10.5px;}
.item-rate{font-family:var(--mono); font-size:12px; color:var(--gold); text-align:right; white-space:nowrap;}
.item-rate small{display:block; color:var(--dim);}
.item-actions{display:flex; gap:6px; flex-wrap:wrap;}
.item button{flex:1; min-width:64px; padding:7px 8px; border:1px solid var(--line); background:#192034; color:var(--text); border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; transition:.12s; font-family:var(--sans);}
.item button:hover:not(:disabled){background:#222c47; border-color:#3a4a6f;}
.item button:disabled{opacity:.4; cursor:not-allowed;}
.item button .cost{display:block; font-family:var(--mono); font-size:11px; color:var(--green);}
.item button:disabled .cost{color:var(--red);}

/* mini progress (milestones / engines) */
.mini-bar{height:5px; background:#0a0f1c; border-radius:99px; overflow:hidden;}
.mini-bar > div{height:100%; border-radius:99px;}
.quad-b .mini-bar > div{background:var(--b);}
.quad-i .mini-bar > div{background:var(--gold);}
.mini-label{display:flex; justify-content:space-between; font-size:10px; color:var(--dim); font-family:var(--mono);}

/* focus allocator */
.alloc{display:flex; align-items:center; gap:6px;}
.alloc .ab{flex:0 0 auto; min-width:34px; width:34px; padding:6px 0; font-weight:800;}
.alloc .aval{flex:1; text-align:center; font-family:var(--mono); font-size:13px; background:#0a0f1c; border:1px solid var(--line); border-radius:8px; padding:6px;}
.alloc .ab.max{min-width:48px; width:48px; font-size:11px; font-weight:700;}

/* work button */
.work-btn{width:100%; padding:18px; border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg,#2a5fa6,#1c3f74); color:#fff; box-shadow:var(--shadow); transition:transform .06s, filter .12s;}
.work-btn:hover{filter:brightness(1.08);}
.work-btn:active{transform:scale(.97);}
.work-main{display:block; font-size:22px; font-weight:900; letter-spacing:.1em;}
.work-sub{display:block; font-family:var(--mono); font-size:14px; margin-top:2px; color:#bfe0ff;}

/* portfolio */
.portfolio{background:#0f1525; border:1px solid var(--line); border-radius:11px; padding:11px;}
.pf-top{display:flex; justify-content:space-between;}
.pf-label{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);}
.pf-val{font-family:var(--mono); font-size:18px; font-weight:700;}
.pf-yield{text-align:right;}
.pf-hint{font-size:10.5px; color:var(--dim); margin:8px 0;}
.pf-buttons{display:flex; gap:6px;}
.pf-buttons button{flex:1; padding:7px; border:1px solid var(--line); background:#192034; color:var(--text); border-radius:8px; font-size:12px; font-weight:600; cursor:pointer;}
.pf-buttons button:hover:not(:disabled){background:#222c47;}
.pf-buttons button:disabled{opacity:.4; cursor:not-allowed;}
.sub-h{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:4px;}

/* buy mode */
.buymode{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted);}
.buymode button{padding:5px 10px; border:1px solid var(--line); background:#192034; color:var(--text); border-radius:7px; font-size:12px; font-weight:700; cursor:pointer;}
.buymode button.active{background:var(--b); color:#1a0f33; border-color:var(--b);}

/* lock overlay */
.lock-overlay{position:absolute; inset:0; background:rgba(10,13,24,.86); backdrop-filter:blur(2px); display:grid; place-items:center; text-align:center; padding:20px; font-weight:600; color:var(--muted);}
.quad:not(.locked) .lock-overlay{display:none;}

/* ===================== FOOTER ===================== */
#footer{margin-top:20px; padding-top:16px; border-top:1px solid var(--line);}
.foot-stats{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12px; color:var(--muted); font-family:var(--mono); margin-bottom:12px;}
.foot-stats b{color:var(--text);}
.foot-controls{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.foot-controls button{padding:8px 14px; border:1px solid var(--line); background:#192034; color:var(--text); border-radius:9px; font-size:13px; font-weight:600; cursor:pointer;}
.foot-controls button:hover{background:#222c47;}
.foot-controls .danger{border-color:#5a2330; color:var(--red);}
.foot-controls .danger:hover{background:#3a1820;}
.credit{font-size:11px; color:var(--dim); max-width:680px;}

/* ===================== TOASTS / MODALS ===================== */
#toasts{position:fixed; top:14px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:50; pointer-events:none;}
.toast{background:var(--panel2); border:1px solid var(--line); padding:9px 16px; border-radius:99px; font-size:13px; font-weight:600; box-shadow:var(--shadow); animation:toastIn .25s ease, toastOut .3s ease 2.2s forwards;}
.toast.good{border-color:var(--green2); color:var(--green);}
.toast.gold{border-color:var(--gold2); color:var(--gold);}
@keyframes toastIn{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}
@keyframes toastOut{to{opacity:0; transform:translateY(-10px)}}

.modal{position:fixed; inset:0; background:rgba(5,7,14,.7); display:grid; place-items:center; z-index:60; padding:18px;}
.modal.hidden{display:none;}
.modal-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; max-width:440px; width:100%; box-shadow:var(--shadow); text-align:center;}
.modal-card.wide{max-width:560px; text-align:left;}
.modal-card h2{font-size:20px; margin-bottom:10px;}
.modal-card p{color:var(--muted); font-size:14px; margin-bottom:18px;}
.btn-primary{padding:11px 22px; border:none; border-radius:10px; font-weight:800; font-size:14px; cursor:pointer; background:linear-gradient(90deg,var(--gold),var(--green)); color:#06210f;}
.btn-primary:hover{filter:brightness(1.07);}
#ioText{width:100%; height:130px; background:#0a0f1c; border:1px solid var(--line); border-radius:10px; color:var(--text); font-family:var(--mono); font-size:11px; padding:10px; resize:vertical;}
.io-hint{font-size:12px;}
.modal-btns{display:flex; gap:8px; justify-content:flex-end; margin-top:12px;}
.modal-btns button{padding:9px 18px; border-radius:9px; border:1px solid var(--line); background:#192034; color:var(--text); font-weight:600; cursor:pointer;}

/* float number on work click */
.float{position:fixed; pointer-events:none; font-family:var(--mono); font-weight:800; color:var(--green); z-index:55; animation:floatUp .8s ease forwards; font-size:16px;}
@keyframes floatUp{from{opacity:1; transform:translateY(0)}to{opacity:0; transform:translateY(-46px)}}

/* ===================== RESPONSIVE ===================== */
@media(max-width:760px){
  #controlbar{grid-template-columns:1fr;}
  #quadrants{grid-template-columns:1fr;}
  .stat-strip{width:100%;}
  .stat{flex:1; min-width:0;}
  .brand{width:100%;}
}