:root { --bg:#0b0d12; --panel:#151923; --line:#2b3242; --text:#f4f6fb; --muted:#aeb7ca; --accent:#4f8cff; --danger:#dc4c64; --success:#38b27d; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; font-family:Calibri,Arial,sans-serif; background:var(--bg); color:var(--text); }
a { color:#91b6ff; }
.shell { max-width:1320px; margin:0 auto; padding:24px; }
.topbar { display:flex; gap:20px; justify-content:space-between; align-items:center; margin-bottom:22px; }
.brand { font-size:1.35rem; font-weight:700; }
.userbox { color:var(--muted); text-align:right; }
.nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.nav a, .button, input[type=submit] { display:inline-block; border:1px solid var(--line); border-radius:8px; padding:9px 14px; color:var(--text); background:#202637; text-decoration:none; cursor:pointer; }
.nav a:hover, .button:hover, input[type=submit]:hover { border-color:#7083a8; }
.button-primary, input.button-primary { background:var(--accent); border-color:var(--accent); }
.button-danger, input.button-danger { background:var(--danger); border-color:var(--danger); }
.button-success { background:var(--success); border-color:var(--success); }
.button-small { padding:6px 10px; font-size:.9rem; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:20px; }
.card h1, .card h2, .card h3 { margin-top:0; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.col-2 { grid-column:span 2; }.col-3 { grid-column:span 3; }.col-4 { grid-column:span 4; }.col-6 { grid-column:span 6; }.col-8 { grid-column:span 8; }.col-12 { grid-column:span 12; }
label { display:block; color:var(--muted); margin-bottom:5px; }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#0d1017; }
textarea { min-height:100px; resize:vertical; }
.check label { display:inline; color:var(--text); }
.actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:15px; }
.message { display:block; min-height:24px; color:#ffd27b; margin-bottom:12px; }
.table-wrap { overflow:auto; }
table { border-collapse:collapse; width:100%; }
th, td { padding:10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:#c7d5f4; background:#111621; }
.muted { color:var(--muted); }.danger { color:#ff8ea1; }.success { color:#69d6a4; }
.stat { font-size:2rem; font-weight:700; }.stat-label { color:var(--muted); }
.login-card { max-width:470px; margin:8vh auto; }
.token-box { overflow-wrap:anywhere; padding:12px; border:1px dashed #6f8bc0; background:#0c1320; border-radius:8px; }
.image-thumb { width:90px; height:70px; object-fit:contain; background:#fff; border-radius:6px; }
.public-page { background:#fff; color:#111; min-height:100vh; font-family:Helvetica,Arial,sans-serif; }
.public-header { padding:14px 18px; border-bottom:1px solid #ddd; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.public-header input { width:min(340px,100%); background:#fff; color:#111; border-color:#777; }
.category-button { border:1px solid #222; background:#fff; color:#111; padding:8px 13px; border-radius:3px; cursor:pointer; }
.category-button.active { background:#111; color:#fff; }
.product-panel { padding:20px; display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 35px; }
.product-panel.active { display:grid; }
.product-row { display:flex; justify-content:space-between; gap:12px; padding:7px 8px; color:#111; text-decoration:none; }
.product-row.detail-enabled:hover { background:#f0f4ff; }
.product-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.product-price { white-space:nowrap; font-weight:700; }
.public-footnote { padding:14px 20px; color:#555; font-size:.85rem; }
.detail-wrap { max-width:1100px; margin:0 auto; padding:24px; }.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.gallery img { width:100%; max-height:420px; object-fit:contain; border:1px solid #ddd; }
@media (max-width:850px) { .col-2,.col-3,.col-4,.col-6,.col-8 { grid-column:span 12; }.product-panel { grid-template-columns:1fr; }.detail-grid { grid-template-columns:1fr; }.topbar { align-items:flex-start; } }