:root{--bg:#0d0d10;--panel:#17171c;--border:#303039;--text:#f7f7f8;--muted:#9999a5;--orange:#f36c2e}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,Segoe UI,Arial}
.layout{display:grid;grid-template-columns:220px 1fr;min-height:100vh}aside{padding:22px 14px;background:#111114;border-right:1px solid var(--border)}
.brand{padding:8px 10px 24px}.brand b{font-size:18px}.brand span{color:var(--orange)}.brand small{display:block;color:var(--muted)}
aside button{width:100%;text-align:left;border:0;background:transparent;color:#bbb;padding:11px 12px;border-radius:9px;margin:2px 0}aside button.active{background:#24242a;color:#fff;box-shadow:inset 3px 0 var(--orange)}
main{padding:28px}header{margin-bottom:22px}header h1{margin:0}header p,article p{color:var(--muted)}
.view{display:none}.view.active{display:block}.hero,article{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px}.hero{background:linear-gradient(120deg,#281333,#17171c 60%);margin-bottom:14px}.hero small{color:#ff9a57;font-weight:800}.hero h2{font-size:30px;max-width:700px}
form{display:grid;grid-template-columns:1fr auto;gap:8px}input{width:100%;background:#101014;border:1px solid var(--border);color:#fff;padding:11px;border-radius:9px}button,.primary{cursor:pointer}.primary,form button{background:var(--orange);color:#fff;border:0;border-radius:9px;padding:11px 16px;font-weight:800}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:15px 0}.wide{grid-column:1/-1}label{font-size:12px;color:#bbb}.empty{padding:30px;text-align:center;color:var(--muted)}
.results{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.results>div,.big{background:#222229;border:1px solid var(--border);border-radius:10px;padding:13px}.results small,.big small{display:block;color:var(--muted)}.results b{font-size:19px}.orange,.big{background:linear-gradient(135deg,#6a2a18,#3b1a12)}.big b{display:block;font-size:30px}
.costlist{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.costlist div{display:flex;justify-content:space-between;border-bottom:1px solid #292930;padding:10px 0}.costlist span{color:#aaa}
@media(max-width:800px){.layout{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--border);display:flex;gap:5px;overflow:auto}aside .brand{min-width:150px;padding:5px 10px}aside button{white-space:nowrap;width:auto}main{padding:15px}.cols{grid-template-columns:1fr}}
@media(max-width:520px){.grid,.results,.costlist,form{grid-template-columns:1fr}.hero h2{font-size:24px}.wide{grid-column:auto}}