:root { --bg:#14161f; --fg:#f3f4f8; --muted:#9aa1b2; --accent:#f2c14e; --radius:12px; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; font: 16px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
#app { max-width: 480px; margin: 0 auto; padding: 24px 16px; }
h1 { font-size: 1.4rem; }
label { display:block; margin:.75rem 0 .25rem; color:var(--muted); }
input { width:100%; padding:12px; border-radius:var(--radius); border:1px solid #2a2e3a; background:#1b1e29; color:var(--fg); font-size:16px; }
button { width:100%; margin-top:16px; padding:14px; border:0; border-radius:var(--radius); background:var(--accent); color:#1a1a1a; font-weight:700; font-size:16px; min-height:44px; }
button.link { background:none; color:var(--accent); width:auto; padding:8px; margin-top:8px; }
.error { color:#ff8080; margin-top:12px; min-height:1.2em; }
.muted { color:var(--muted); }

input[type="search"] { margin: 8px 0 16px; }

.catalog-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.card-tile { background:#1b1e29; border:1px solid #2a2e3a; border-radius:var(--radius); padding:8px; text-align:center; }
button.card-tile-button { width:100%; margin-top:0; padding:8px; cursor:pointer; color:var(--fg); }
button.card-tile-button:hover { border-color:var(--accent); }
.card-tile img { width:100%; border-radius:8px; display:block; }
.card-tile-noimg { aspect-ratio: 2.5 / 3.5; background:#2a2e3a; border-radius:8px; }
.card-tile-name { font-size:.85rem; font-weight:600; margin:6px 0 2px; }
.card-tile-meta { font-size:.75rem; color:var(--muted); margin:0; }
.card-tile-price { font-size:.85rem; color:var(--accent); margin:4px 0 0; }

.pager { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; }
.pager button { width:auto; margin-top:0; padding:8px 12px; }
.pager button:disabled { opacity:.35; }

@media (min-width: 560px) { #app.wide { max-width: 720px; } }

.tabs { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; border-bottom:1px solid #2a2e3a; padding-bottom:4px; }
.tabs button.link { margin-top:0; }
.tabs button.tab-active { color:var(--fg); font-weight:700; border-bottom:2px solid var(--accent); border-radius:0; }
.tab-body { min-height:120px; }

.item-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.item-row { display:flex; align-items:center; gap:10px; background:#1b1e29; border:1px solid #2a2e3a; border-radius:var(--radius); padding:10px 12px; flex-wrap:wrap; }
.item-row > span:first-of-type { flex:1 1 auto; font-weight:600; }
.item-row-img { width:32px; border-radius:4px; }
.item-row input[type="text"], .item-row input[type="number"], .item-row select { width:auto; padding:6px 8px; margin:0; font-size:14px; }
.item-row .slot-input { width:56px; }
.item-row input[type="checkbox"] { width:auto; }
.item-row button.link { margin:0; padding:4px 8px; }

.slot-empty { color:var(--muted); display:flex; align-items:center; justify-content:center; min-height:100px; }

.item-row-wrap { display:flex; flex-direction:column; gap:4px; }
.tag-section { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:4px 0; }
.tag-section-label { color:var(--muted); font-size:.8rem; }
.tag-pill { display:inline-block; padding:3px 10px; border-radius:999px; border:1px solid #2a2e3a; background:#1b1e29; color:var(--fg); font-size:.8rem; cursor:default; }
button.tag-pill { width:auto; margin-top:0; cursor:pointer; }
button.tag-pill:hover { border-color:var(--accent); }
.tag-pill-active { background:var(--accent); color:#1a1a1a; border-color:var(--accent); font-weight:600; }
.tag-pill-auto { color:var(--muted); border-style:dashed; }
.tag-editor-box { background:#14161f; border:1px solid #2a2e3a; border-radius:var(--radius); padding:8px; }