:root {
  --ink: #1B1B1F;
  --muted: #5C5A55;
  --line: #E7E5E0;
  --field-line: #C9C6BF;
  --accent: #2E3DBF;
  --danger: #A3261B;
  --paper: #FFFFFF;
  --canvas: #F6F6F4;
  --display: 'Bricolage Grotesque', sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); }
a { color: var(--ink); }
a:hover { color: var(--accent); }
input:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.page { max-width: 1120px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Storefront ---------- */
.store-header { padding: 28px 20px 20px; border-bottom: 1px solid var(--line); }
.brand {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(38px, 6vw, 64px); line-height: 0.98; letter-spacing: -0.02em;
}
.brand span { color: var(--accent); }

.section-head { padding: 20px 20px 8px; display: flex; justify-content: space-between; align-items: baseline; }
.section-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.section-head .count { font-size: 13px; color: var(--muted); }

.grid {
  padding: 8px 20px 28px; display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.card-img {
  aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #EEF0FA;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.card:hover .card-img img { transform: scale(1.03); }
.card-label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; min-height: 24px; }

.empty-note { grid-column: 1 / -1; margin: 0; padding: 40px 16px; text-align: center; font-size: 14px; color: var(--muted); }

.store-footer { margin-top: auto; padding: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }

/* ---------- Admin ---------- */
body.admin { background: var(--canvas); }
.admin .page { max-width: 560px; }
.admin-header {
  padding: 20px; background: var(--paper); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.icon-btn {
  width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 22px; border: 1px solid var(--line); background: var(--paper); color: var(--muted);
  text-decoration: none; cursor: pointer; padding: 0;
}
.admin-title { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-title .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.admin-title .name { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.text-btn { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.text-btn:hover { color: var(--accent); }

.panel {
  margin: 20px; padding: 20px; background: var(--paper); border-radius: 18px; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
}
.panel h2 { margin: 0; font-size: 17px; font-weight: 600; }

.preview {
  aspect-ratio: 16 / 10; border-radius: 12px; border: 1.5px dashed var(--field-line); background: #FAFAF8;
  display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted);
}
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; }
.field input {
  height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--field-line);
  font: inherit; font-size: 15px; background: var(--paper); color: var(--ink);
}

.error { margin: 0; font-size: 13px; color: var(--danger); }

.primary {
  height: 50px; border: 0; border-radius: 12px; background: var(--accent); color: #FFFFFF;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.primary:disabled { opacity: .6; cursor: progress; }

.list { margin: 0 20px 28px; display: flex; flex-direction: column; gap: 12px; }
.list-head { display: flex; justify-content: space-between; align-items: baseline; }
.list-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.list-head span { font-size: 13px; color: var(--muted); }
.list-empty {
  margin: 0; padding: 24px 16px; text-align: center; font-size: 14px; color: var(--muted);
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
}
.row {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
}
.row img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #EEF0FA; flex-shrink: 0; }
.row a { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

[hidden] { display: none !important; }