:root{
 --bg:#0f172a;--panel:#111827;--panel2:#182233;--text:#eef2f7;--muted:#9aa7b8;
 --line:#2a374a;--accent:#66d3a5;--accent2:#7bb6ff;--warn:#ffcb6b;--danger:#ff7b7b;
 --shadow:0 16px 45px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,#0b1220,#111827);color:var(--text)}
button,input,select{font:inherit}
a{color:inherit}
.app{max-width:1500px;margin:auto;padding:22px}
.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:stretch;margin-bottom:18px}
.card{background:rgba(17,24,39,.92);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.hero-main{padding:24px}
h1{font-size:30px;line-height:1.1;margin:0 0 8px}
.sub{color:var(--muted);font-size:14px}
.money-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.metric{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px}
.metric .label{color:var(--muted);font-size:12px;margin-bottom:6px}
.metric .value{font-weight:800;font-size:20px}
.metric.good .value{color:var(--accent)}
.metric.warn .value{color:var(--warn)}
.metric.bad .value{color:var(--danger)}
.budget-box{padding:22px;display:flex;flex-direction:column;justify-content:center}
.budget-box label{font-size:12px;color:var(--muted)}
.big-input{margin-top:8px;background:#0b1220;border:1px solid var(--line);color:white;border-radius:12px;padding:12px 14px;font-size:22px;font-weight:800;width:100%}
.bar{height:12px;background:#0b1220;border-radius:99px;overflow:hidden;border:1px solid var(--line);margin:14px 0 6px}
.bar>span{height:100%;display:block;background:linear-gradient(90deg,var(--accent),var(--accent2));width:50%}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.btn{border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:10px 13px;border-radius:12px;cursor:pointer}
.btn:hover{border-color:#54708f}
.btn.primary{background:#1c7d61;border-color:#299679}
.search{flex:1;min-width:240px;background:var(--panel);border:1px solid var(--line);color:white;padding:10px 13px;border-radius:12px}
.layout{display:grid;grid-template-columns:250px 1fr;gap:16px}
.sidebar{padding:12px;position:sticky;top:12px;height:max-content}
.navbtn{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;color:var(--text);padding:10px 10px;border-radius:10px;cursor:pointer;text-align:left}
.navbtn:hover,.navbtn.active{background:var(--panel2)}
.navbtn small{color:var(--muted)}
.content{display:flex;flex-direction:column;gap:14px}
.category{overflow:hidden}
.cat-head{padding:16px 18px;display:flex;justify-content:space-between;gap:12px;align-items:center;cursor:pointer}
.cat-title{display:flex;gap:10px;align-items:center}
.cat-title b{font-size:17px}
.cat-note{font-size:12px;color:var(--muted);margin-top:4px}
.cat-sum{text-align:right}
.cat-sum strong{font-size:18px}
.cat-sum div{font-size:11px;color:var(--muted)}
.items{border-top:1px solid var(--line)}
.item{padding:16px 18px;border-top:1px solid rgba(42,55,74,.7)}
.item:first-child{border-top:0}
.item-top{display:flex;justify-content:space-between;gap:16px}
.item-name{font-weight:750}
.item-desc{font-size:12px;color:var(--muted);margin-top:3px}
.item-right{text-align:right;min-width:160px}
.item-price{font-weight:800}
.item-range{font-size:11px;color:var(--muted)}
.controls{margin-top:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
input[type="range"]{width:min(420px,60vw)}
.num{width:120px;background:#0b1220;border:1px solid var(--line);border-radius:9px;color:white;padding:8px 10px}
select{background:#0b1220;border:1px solid var(--line);border-radius:9px;color:white;padding:8px 10px}
.switch{display:inline-flex;gap:7px;align-items:center;font-size:12px;color:var(--muted)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin-top:12px}
.product{position:relative;border:1px solid var(--line);background:#0e1726;border-radius:14px;padding:10px;cursor:pointer;transition:.15s}
.product:hover{transform:translateY(-1px);border-color:#4c6787}
.product.selected{border:2px solid var(--accent);padding:9px}
.product input{position:absolute;right:10px;top:10px}
.snapshot{height:128px;border-radius:10px;background:linear-gradient(145deg,#1e293b,#101827);display:grid;grid-template-columns:118px 1fr;overflow:hidden;border:1px solid #253246}
.prod-icon{font-size:34px;display:flex;align-items:center;justify-content:center;background:#162033}
.prod-photo{width:118px;height:128px;object-fit:contain;background:#fff;display:block}
.qty-photo{width:86px;height:86px;object-fit:contain;background:#fff;border-radius:12px;border:1px solid var(--line);padding:4px}
.image-note{font-size:10px;color:var(--muted);margin-top:5px}
.snap-text{padding:9px 9px 8px;display:flex;flex-direction:column;justify-content:center}
.snap-store{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.snap-price{font-size:20px;font-weight:850;margin-top:3px}
.prod-name{font-weight:700;font-size:13px;margin-top:9px}
.prod-meta{font-size:10px;color:var(--muted);margin:4px 0 8px}
.store-link{display:inline-flex;text-decoration:none;border:1px solid var(--line);padding:6px 8px;border-radius:8px;font-size:11px}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:#fff;cursor:pointer}
.qty b{min-width:24px;text-align:center}
.custom-row{display:flex;gap:8px;align-items:center;margin-top:10px}
.badge{font-size:10px;padding:4px 7px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.footer-note{padding:18px;color:var(--muted);font-size:12px}
.hidden{display:none!important}
@media(max-width:900px){
 .hero{grid-template-columns:1fr}
 .money-grid{grid-template-columns:repeat(2,1fr)}
 .layout{grid-template-columns:1fr}
 .sidebar{position:relative;top:0;display:flex;overflow:auto}
 .navbtn{min-width:190px}
 .item-top{flex-direction:column}.item-right{text-align:left}
}
@media print{
 body{background:#fff;color:#111}
 .app{max-width:none;padding:0}.sidebar,.toolbar,.btn{display:none!important}
 .card,.category{box-shadow:none;border:1px solid #ccc;background:white}
 .layout{display:block}.hero{grid-template-columns:1fr 1fr}
 .metric,.budget-box,.hero-main{background:white;color:#111}
 .sub,.cat-note,.item-desc,.item-range,.prod-meta,.snap-store{color:#555}
 .items{display:block!important}
 .product{break-inside:avoid;background:white;color:#111}
 .snapshot{background:#f5f5f5;color:#111}
}