:root {
  --text: #f8fafc;
  --muted: #94a3b8;
  --bg: #0b0b0c;
  --card: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);
  --accent: #3b82f6;
  --accent-2: #1d4ed8;
}

body { background: var(--bg); color: var(--text); margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.header { position: sticky; top:0; z-index:50; backdrop-filter: blur(12px); background: linear-gradient(180deg, rgba(12,12,16,0.8), rgba(12,12,16,0.2)); border-bottom: 1px solid var(--border); }
.header-content { max-width: 980px; margin: 0 auto; padding: 14px 16px; display:flex; align-items:center; justify-content: space-between; }
.logo img { width: 68px; height: auto; display:block; }
.header-actions { display:flex; gap:10px; align-items:center; }
.user-email { color: var(--muted); font-size: 12px; }
.product-form { display:grid; gap:12px; }
.product-form label { display:flex; flex-direction:column; gap:6px; color: var(--muted); }
.product-form input, .product-form select { background: var(--glass); border:1px solid var(--border); color: var(--text); border-radius:10px; padding:10px; }
.admin-overlay { position: fixed; inset:0; background: rgba(10,10,12,0.9); backdrop-filter: blur(10px); z-index: 90; }
.dropzone { display:flex; gap:10px; align-items:center; background: var(--glass); border:1px dashed var(--border); border-radius:10px; padding:10px; }
.image-preview-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); gap:10px; margin-top:10px; }
.image-preview-grid img { width:100%; height:100px; object-fit:cover; border-radius:8px; border:1px solid var(--border); }
.free-ship { color: var(--muted); font-size: 12px; }
.search-btn { background: var(--glass); border: 1px solid var(--border); color: var(--text); padding:10px; border-radius:12px; }

.main-content { max-width: 980px; margin: 0 auto; padding: 16px; padding-bottom: 96px; }
.section-title { margin: 6px 4px 10px; color: var(--muted); font-size: 14px; text-align: center; }

.shop-grid { display:grid; grid-template-columns: repeat(1, 1fr); gap:14px; }
@media (min-width: 640px){ .shop-grid { grid-template-columns: repeat(2, 1fr);} }
@media (min-width: 900px){ .shop-grid { grid-template-columns: repeat(3, 1fr);} }
.product-card { background: var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.product-thumb { width:100%; aspect-ratio: 1; background-size: cover; background-position:center; }
.product-body { padding:12px; display:flex; flex-direction:column; gap:8px; }
.product-title { font-size:16px; }
.product-price { font-weight:600; }
.product-detail { display:flex; flex-direction:column; gap:10px; }
.comments-wrap { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.comments-list { display:grid; gap:10px; }
.comment-item { background: var(--glass); border:1px solid var(--border); border-radius:12px; padding:10px; }
.comment-meta { color: var(--muted); font-size:12px; }
.variant-select { background: var(--glass); border:1px solid var(--border); color: var(--text); border-radius:10px; padding:10px; }
.add-to-cart { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0b0b0c; border:none; border-radius:12px; padding:10px 14px; font-weight:600; }

/* Generic primary button for links and actions */
.btn-primary { display:inline-block; background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0b0b0c; border:none; border-radius:12px; padding:10px 16px; font-weight:700; text-decoration:none; }
.btn-secondary { display:inline-block; background: var(--glass); color: var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 16px; text-decoration:none; }

/* Download page helpers */
.download-hero { display:flex; align-items:center; gap:16px; background: var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; }
.download-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:16px; }
.code-inline { background: var(--glass); border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }

.cart-overlay { position: fixed; inset:0; background: rgba(10,10,12,0.9); backdrop-filter: blur(10px); z-index: 75; transform: translateY(100%); transition: transform .35s ease; }
.cart-overlay.open { transform: translateY(0); }
.cart-header { display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid var(--border); }
.cart-title { font-weight:600; }
.cart-body { padding:16px; max-width:800px; margin:0 auto; display:grid; gap:10px; }
.cart-item { display:flex; gap:10px; align-items:center; background: var(--glass); border:1px solid var(--border); border-radius:12px; padding:10px; }
.cart-thumb { width:64px; height:64px; background-size:cover; background-position:center; border-radius:8px; }
.cart-name { flex:1; }
.cart-qty { display:flex; align-items:center; gap:8px; }
.qty-btn { background: var(--glass); border:1px solid var(--border); color: var(--text); border-radius:8px; padding:6px 10px; }
.cart-footer { display:flex; justify-content:space-between; align-items:center; padding:14px; border-top:1px solid var(--border); }
.cart-total { font-weight:700; }
.category-chips { display: flex; gap: 8px; padding: 8px 2px 16px; overflow-x: auto; }
.category-chip { background: var(--glass); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 999px; font-size: 14px; cursor: pointer; }
.category-chip.active { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #0b0b0c; border-color: transparent; }
.stats-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.stat-card { background: var(--glass); border:1px solid var(--border); border-radius:12px; padding:12px; }
.stat-title { color: var(--muted); font-size:12px; }
.stat-value { font-size:20px; font-weight:700; }
.editor-preview { background: var(--glass); border:1px solid var(--border); border-radius:12px; padding:12px; }
.admin-overlay .cart-body { max-width: 980px; margin: 0 auto; padding: 16px; }
.editor-preview h1, .editor-preview h2 { margin: 10px 0; }
.editor-preview img { max-width: 100%; border-radius: 12px; }