:root {
  --bg:#0b0d12; --card:#151922; --line:#252b38; --fg:#e7ecf3; --mut:#8b94a7;
  --acc:#6d8bff; --green:#5fd08a; --amber:#ffb454; --red:#ff6b6b;
}
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--acc); text-decoration:none; }

header.top { display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:20; }
header.top .brand { font-size:17px; font-weight:700; letter-spacing:.3px; }
header.top .brand small { color:var(--mut); font-weight:500; font-size:12px; margin-left:8px; }
header.top nav a { color:var(--mut); margin-left:18px; font-size:14px; }
header.top nav a:hover, header.top nav a.active { color:var(--fg); }

.statusbar { display:flex; flex-wrap:wrap; gap:8px 16px; padding:11px 28px; font-size:12.5px; color:var(--mut); border-bottom:1px solid var(--line); }
.statusbar b { color:var(--fg); }
.statusbar .warn { color:var(--amber); }

.wrap { max-width:1100px; margin:26px auto; padding:0 24px; }
.wrap.narrow { max-width:640px; }

h2.sec { font-size:15px; color:var(--mut); font-weight:600; margin:30px 0 14px; text-transform:uppercase; letter-spacing:.5px; }

/* card grid */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:.15s; color:inherit; }
.tile:hover { border-color:var(--acc); transform:translateY(-2px); }
.tile .imgwrap { aspect-ratio:3/4; background:#0e1118; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.tile .imgwrap img { width:100%; height:100%; object-fit:cover; }
.tile .ph { color:#3a4256; font-size:12px; }
.tile .body { padding:12px 14px 15px; flex:1; display:flex; flex-direction:column; gap:6px; }
.tile .title { font-size:14.5px; font-weight:600; line-height:1.35; }
.tile .price { font-size:14px; color:var(--green); font-weight:700; }
.tile .meta { font-size:12px; color:var(--mut); }
.tile .actions { margin-top:auto; display:flex; gap:8px; padding-top:8px; }

/* badges */
.badge { display:inline-block; background:#0e1118; border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:11.5px; color:var(--mut); }
.badge.grade { color:var(--amber); border-color:#3a3322; }
.badge.available { color:var(--green); }
.badge.reserved { color:var(--amber); }
.badge.sold { color:var(--mut); }
.badge.requested { color:var(--amber); }
.badge.processing { color:var(--acc); }
.badge.done { color:var(--green); }

/* buttons / inputs */
button, .btn { background:var(--acc); color:#fff; border:0; border-radius:9px; padding:10px 16px; font-size:14px; font-weight:600; cursor:pointer; }
button.ghost, .btn.ghost { background:#0e1118; color:var(--fg); border:1px solid var(--line); }
button.sm { padding:7px 12px; font-size:13px; }
button.danger { background:#2a1416; color:var(--red); border:1px solid #3a1d20; }
button:disabled { opacity:.5; cursor:not-allowed; }
label { display:block; font-size:13px; color:var(--mut); margin:14px 0 6px; }
input[type=text], input[type=number], textarea, select {
  width:100%; background:#0e1118; border:1px solid var(--line); border-radius:9px;
  color:var(--fg); padding:10px 12px; font-size:14px; font-family:inherit;
}
textarea { resize:vertical; min-height:64px; }
.row { display:flex; gap:12px; }
.row > * { flex:1; }

.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; }
.muted { color:var(--mut); font-size:13px; }
.err { color:var(--red); }
.ok { color:var(--green); }
.empty { padding:50px; text-align:center; color:var(--mut); }

/* tabs (admin image source) */
.tabs { display:flex; gap:8px; margin-bottom:6px; }
.tab { flex:1; background:#0e1118; border:1px solid var(--line); color:var(--mut); border-radius:9px; padding:9px; font-size:13px; font-weight:500; }
.tab.active { background:var(--card); color:var(--fg); border-color:var(--acc); }
.drop { border:1.5px dashed var(--line); border-radius:11px; padding:24px; text-align:center; color:var(--mut); cursor:pointer; }
.drop:hover, .drop.over { border-color:var(--acc); color:var(--fg); }
.drop input { display:none; }
#preview, .preview { margin-top:12px; max-width:100%; border-radius:10px; display:none; }

/* table */
table { width:100%; border-collapse:collapse; font-size:13.5px; }
table th { text-align:left; color:var(--mut); font-weight:500; padding:9px 10px; border-bottom:1px solid var(--line); font-size:12px; }
table td { padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table td.thumb img { width:42px; height:56px; object-fit:cover; border-radius:5px; }

/* modal */
.modal-bg { position:fixed; inset:0; background:#000a; display:none; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal-bg.show { display:flex; }
.modal { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; width:100%; max-width:460px; }
.modal h3 { margin:0 0 4px; font-size:18px; }
.modal .close { float:right; background:none; border:0; color:var(--mut); font-size:20px; padding:0; cursor:pointer; }