*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#0e0e10;color:#e7e7ea;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:#a9b4ff;text-decoration:none}
.header{padding:20px 16px;display:flex;align-items:center;gap:16px;border-bottom:1px solid #1f1f23;position:sticky;top:0;background:#0e0e10;z-index:10}
.logo{width:140px;height:36px;background:url('https://horecapro.kz/wp-content/uploads/2023/12/horeca-pro-5-white.png') center/contain no-repeat;filter:drop-shadow(0 0 2px rgba(255,255,255,.06))}
.container{max-width:1100px;margin:0 auto;padding:16px}
.h1{font-size:28px;font-weight:600;margin:6px 0 4px}
.sub{opacity:.8;margin:0 0 16px}
.card{background:#141416;border:1px solid #202026;border-radius:18px;padding:14px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.grid{display:grid;gap:12px}
.grid.cols-3{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.badge{font-size:12px;opacity:.9;border:1px solid #2a2a2f;border-radius:999px;padding:4px 8px;display:inline-block;margin-bottom:8px}
.slab{background:#0f0f12;border:1px dashed #2a2a2f;border-radius:16px;padding:12px;min-height:160px;display:flex;align-items:center;justify-content:center}
.selector{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:36px;height:36px;border-radius:10px;border:1px solid #2b2b30;background:#222;overflow:hidden;cursor:pointer;background-size:cover;background-position:center}
.swatch img{width:100%;height:100%;object-fit:cover;display:block}
.swatch.selected{outline:2px solid #7c8cff;outline-offset:2px}
.pill{padding:10px 12px;border:1px solid #2a2a2f;border-radius:12px;cursor:pointer;background:#16161a}
.pill.selected{border-color:#7c8cff;box-shadow:0 0 0 2px rgba(124,140,255,.25) inset}
h3{margin:10px 0 8px;font-weight:600}
.footer{opacity:.8;padding:32px 16px;text-align:center;border-top:1px solid #1f1f23;margin-top:24px}
.fixedbar{position:sticky;bottom:0;background:linear-gradient(180deg, rgba(14,14,16,.0), rgba(14,14,16,1) 30%);padding:12px 0 16px}
.total{display:flex;gap:12px;align-items:center;justify-content:space-between;background:#141416;border:1px solid #212127;border-radius:14px;padding:12px 14px}
.total .price{font-size:20px;font-weight:700}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{padding:12px 14px;border-radius:12px;border:1px solid #2a2a2f;background:#1a1a1f;color:#e7e7ea;cursor:pointer}
.btn.primary{background:#f5f5f7;color:#0c0c0e;font-weight:700}
.langs{margin-left:auto;display:flex;gap:8px}
.langs button{background:#121214;border:1px solid #2a2a2f;color:#bfc2d7;padding:8px 10px;border-radius:10px;cursor:pointer}
.langs button.active{border-color:#7c8cff;color:#fff}
.step{margin-top:10px}
.size-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.size-card{border:1px solid #2a2a2f;border-radius:12px;padding:10px;background:#16161a;cursor:pointer}
.size-card .title{font-size:14px;margin-bottom:4px}
.size-card .meta{font-size:12px;opacity:.8}
.size-card.selected{border-color:#7c8cff;box-shadow:0 0 0 2px rgba(124,140,255,.25) inset}
.preview{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.preview .half{flex:1 1 280px;min-height:160px;border-radius:16px;border:1px solid #2a2a2f;background:#111;position:relative;overflow:hidden}
.preview .half::before{content:"";position:absolute;inset:0;opacity:.15;background:radial-gradient(120% 60% at 0% 0%, #fff, transparent 60%)}
.preview .half .tabletop{position:absolute;left:8%;right:12%;top:12%;height:55%;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 30px rgba(0,0,0,.35);border-radius:12px;background-size:cover;background-position:center}
.preview .svgbox{flex:1 1 280px;min-height:160px;border-radius:16px;border:1px solid #2a2a2f;background:#111;display:flex;align-items:center;justify-content:center}
.sublabel{font-size:12px;opacity:.75;margin-top:4px}
.small{font-size:12px;opacity:.8}