:root { --bg:#0e1015; --card:#171a22; --fg:#e8eaf0; --muted:#8b91a1; --accent:#6c5ce7; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--fg); }
header { padding:40px 20px 10px; text-align:center; }
h1 { margin:0 0 6px; }
header p { color:var(--muted); margin:0; }
main { max-width:960px; margin:30px auto; padding:0 20px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.card { background:var(--card); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:10px; }
.card h3 { margin:0; }
.card p { color:var(--muted); margin:0; flex:1; }
.price { font-size:1.4rem; font-weight:700; }
.stock { font-size:.85rem; color:var(--muted); }
button, input, textarea { font:inherit; }
button { background:var(--accent); color:#fff; border:0; border-radius:8px; padding:10px 14px; cursor:pointer; }
button:disabled { opacity:.4; cursor:not-allowed; }
input, textarea { width:100%; padding:10px; border-radius:8px; border:1px solid #2a2f3b; background:#10131a; color:var(--fg); }
dialog { background:var(--card); color:var(--fg); border:0; border-radius:12px; padding:24px; width:min(380px,92vw); }
dialog::backdrop { background:rgba(0,0,0,.6); }
dialog form { display:flex; flex-direction:column; gap:12px; }
.msg { color:#ff7675; min-height:1.2em; }
pre { background:#10131a; padding:12px; border-radius:8px; overflow:auto; white-space:pre-wrap; word-break:break-all; }