@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/cormorant.ttf") format("truetype");
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/manrope-500.ttf") format("truetype");
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/manrope-600.ttf") format("truetype");
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/manrope-700.ttf") format("truetype");
}

:root {
  --stage: #070403;
  --bg: #12080a;
  --surface: #1e1012;
  --fg: #f6efe4;
  --muted: #cbbba8;
  --gold: #e0c48a;
  --ink: #1a0c0a;
  --line: #4a3228;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--stage); color: var(--fg); font-family: Manrope, system-ui, sans-serif; }
button { font: inherit; cursor: pointer; }
button:disabled { opacity: 0.6; cursor: default; }

.phone {
  width: 100%;
  max-width: 28rem;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
}
@media (min-width: 800px) {
  body { display: flex; min-height: 100dvh; align-items: center; justify-content: center; padding: 1.5rem; }
  .phone {
    height: 860px;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  }
}

.screen { display: flex; flex-direction: column; height: 100dvh; }
@media (min-width: 800px) { .screen { height: 860px; } }
.cover { position: relative; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-foot {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: 4rem 1.25rem 2rem;
  background: linear-gradient(to top, var(--bg), rgba(18, 8, 10, 0.8), transparent);
}
.display { font-family: "Cormorant Garamond", Georgia, serif; }
.cover-foot p { margin: 0; text-align: center; font-size: 1.5rem; letter-spacing: 0.04em; color: var(--gold); }

.head, .tabs, .note, .list, .bar, .sheet-body, .sheet-foot { padding-left: 1rem; padding-right: 1rem; }
.head { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; padding-bottom: 0.5rem; }
.icon {
  display: flex; width: 2.75rem; height: 2.75rem; flex: none; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--gold);
}
.title { margin: 0; font-size: 1.5rem; line-height: 1; letter-spacing: 0.04em; color: var(--gold); }
.sub { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.tab {
  height: 2.75rem; border-radius: 999px; padding: 0 1rem; font-size: 0.875rem; font-weight: 600;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg);
}
.tab.on { border-color: transparent; background: var(--gold); color: var(--ink); }
.scroller { min-height: 0; flex: 1; overflow-y: auto; padding-bottom: 2rem; }
.note {
  margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 1.25rem;
  background: var(--surface); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.35;
}
.note p { margin: 0; }
.note .muted { margin-top: 0.5rem; }
.muted { color: var(--muted); }
.count { margin: 0 0 0.75rem; font-size: 0.875rem; }
.cards { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.card { overflow: hidden; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--surface); }
.media { position: relative; }
.media video, .media img { display: block; width: 100%; }
.live {
  position: absolute; top: 0.75rem; left: 0.75rem; border-radius: 999px;
  background: rgba(26, 12, 10, 0.8); padding: 0.25rem 0.75rem; color: var(--gold); font-size: 0.875rem; font-weight: 600;
}
.card-foot { padding: 0.75rem; }
.gold-btn, .ghost-btn {
  height: 3rem; width: 100%; border-radius: 999px; font-size: 1rem; font-weight: 600;
}
.gold-btn { border: 0; background: var(--gold); color: var(--ink); }
.ghost-btn { border: 1px solid var(--gold); background: transparent; color: var(--gold); }
.step { display: flex; align-items: center; gap: 0.75rem; }
.step p { flex: 1; margin: 0; text-align: center; font-size: 0.875rem; font-weight: 600; }
.step span { display: block; margin-top: 0.125rem; font-weight: 400; color: var(--muted); }
.round {
  display: flex; width: 3rem; height: 3rem; flex: none; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 1.25rem;
}
.round.minus { border: 1px solid var(--line); background: transparent; color: var(--gold); }
.round.plus { border: 0; background: var(--gold); color: var(--ink); font-weight: 600; }
.bar {
  border-top: 1px solid var(--line); background: var(--surface);
  padding-top: 0.75rem; padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.bar p { margin: 0; font-size: 0.875rem; }
.bar .gold-btn { margin-top: 0.5rem; }
.sheet { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: var(--bg); }
.phone { position: relative; }
.sheet-body { min-height: 0; flex: 1; overflow-y: auto; padding-bottom: 1rem; }
.line { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
.line div { flex: 1; min-width: 0; }
.line p { margin: 0; font-weight: 600; }
.line .muted { font-size: 0.875rem; font-weight: 400; }
.qty { width: 1.5rem; text-align: center; font-weight: 600; }
label { display: block; margin-top: 1.25rem; font-size: 0.875rem; font-weight: 600; }
input {
  margin-top: 0.5rem; height: 3rem; width: 100%; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); padding: 0 1rem; color: var(--fg); font: inherit; font-size: 1rem; outline: none;
}
.total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 1rem; }
.total b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.875rem; font-weight: 600; color: var(--gold); }
.notice { margin-top: 1rem; font-size: 0.875rem; line-height: 1.35; }
.sheet-foot { padding-top: 0.75rem; padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }