:root { --bg:#F6F7FB; --card:#fff; --line:#e5e7eb; --text:#111; --muted:#6b7280; --brand: var(--accent, #0F172A); --accent:#111; }
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,Segoe UI,Roboto,Arial,sans-serif; }
.container { max-width:1100px; margin:0 auto; padding:14px; }
.header { position:sticky; top:0; z-index:10; background:rgba(246,247,251,.9); backdrop-filter:saturate(180%) blur(12px); border:1px solid var(--line); border-radius:18px; padding:12px 14px; display:flex; align-items:center; gap:12px; }
.logo { width:40px; height:40px; border-radius:12px; overflow:hidden; background:var(--brand); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.title { font-weight:900; letter-spacing:-.3px; font-size:18px; }
.sub { color:var(--muted); font-size:12px; }
.nav { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px; box-shadow:0 8px 24px rgba(0,0,0,.03); margin-top:12px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.input, select, textarea { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:16px; }
textarea { min-height:120px; }
.btn { border:1px solid var(--line); background:#fff; padding:10px 14px; border-radius:12px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn.primary { background:#111; color:#fff; border-color:#111; }
.btn.ghost { background:transparent; }
.tabs { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
.tab { border:1px solid var(--line); border-radius:999px; padding:8px 14px; background:#fff; text-decoration:none; color:#111; }
.tab.active { background:#111; color:#fff; border-color:#111; }
.grid { display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width:720px){ .grid { grid-template-columns:1fr 1fr; } }
@media(min-width:980px){ .grid { grid-template-columns:1fr 1fr 1fr; } }
.cats { max-height:240px; overflow:auto; border:1px solid var(--line); border-radius:12px; padding:8px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(min-width:720px){ .cats { grid-template-columns:1fr 1fr 1fr; } }
.cat { display:flex; align-items:center; gap:8px; }
.thumb { width:60px; height:60px; border-radius:12px; background:#f1f1f1; object-fit:cover; }
.list { display:grid; gap:8px; }
.badge { display:inline-block; padding:6px 12px; border-radius:999px; background:#eef; border:1px solid #ccd; font-size:12px; }
.actions { display:flex; gap:8px; justify-content:space-between; margin-top:8px; }
.stepper { display:flex; align-items:center; gap:6px; margin:6px 0 10px; }
.dot { width:24px; height:24px; border-radius:999px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.dot.active { background:#111; color:#fff; border-color:#111; }
.preview { margin-top:8px; border:1px dashed var(--line); border-radius:14px; min-height:160px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fafafa; }
.small { font-size:12px; color:var(--muted); }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:10px; border-bottom:1px solid var(--line); text-align:left; }
.kv { display:grid; grid-template-columns:180px 1fr; gap:8px; }
.help { color:#374151; font-size:12px; }
footer.app { margin:12px 0; color:#9ca3af; font-size:12px; text-align:center; }
hr.sep { border:0; height:1px; background:var(--line); border-radius:1px; margin:10px 0; }

/* Grid cards */
.card.prod { display:flex; flex-direction:column; gap:8px; }
.prod .img { width:100%; aspect-ratio:1/1; background:#f2f3f4; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.prod .img img { width:100%; height:100%; object-fit:cover; }
.prod .meta { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.prod .name { font-weight:700; font-size:14px; }
.prod .badges { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.icon-btn { border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; cursor:pointer; text-decoration:none; }
.icon { width:18px; height:18px; display:inline-block; }

/* Modal */
.modal { display:none; }
.modal.show { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:16px; z-index:100; }
.modal .panel { background:#fff; border:1px solid var(--line); border-radius:16px; max-width:720px; width:100%; padding:14px; box-shadow:0 16px 40px rgba(0,0,0,.15); }
.modal .close { float:right; }
.login-wrap { display:flex; min-height:100dvh; align-items:center; justify-content:center; background:linear-gradient(180deg, #f6f7fb 0%, #eef1f6 100%); }
.login-card { width:100%; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.05); padding:18px; }
.brand { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.brand .logo { width:44px; height:44px; border-radius:12px; background:#111; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; }
.tiles { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:10px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px; text-align:center; box-shadow:0 6px 16px rgba(0,0,0,.03); }
.spark { width:100%; height:60px; }