:root {
  --bg: #0A0A09;
  --bg-raised: #12110E;
  --bg-card: #100F0D;
  --gold: #C79A3E;
  --gold-light: #F2D693;
  --gold-lighter: #F6D98A;
  --gold-line: rgba(231, 196, 107, .16);
  --gold-line-soft: rgba(231, 196, 107, .1);
  --ink: #EDE7DC;
  --ink-strong: #F3EBDB;
  --ink-soft: #9A9285;
  --muted: #8A8378;
  --dim: #6E675C;
  --danger: #E05C4B;
  --danger-soft: #E07B6A;
  --success: #9BD8A0;
  --warn: #E9B45C;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Noto Sans SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Menlo, monospace;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
}

html[lang="en"] {
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold-light); text-decoration: none; }
a:hover { color: var(--gold-lighter); }
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; }
::-webkit-scrollbar { width: 0; height: 0; }

@keyframes ccpulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes ccfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cc-shell {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
  border-left: 1px solid var(--gold-line-soft);
  border-right: 1px solid var(--gold-line-soft);
}

.cc-page { animation: ccfade .3s ease both; }

.cc-btn-primary {
  padding: 13px; border-radius: 10px; border: none;
  background: linear-gradient(120deg, var(--gold-light), var(--gold));
  color: #14100A; font: 600 12.5px var(--sans); cursor: pointer;
}
.cc-btn-ghost {
  padding: 13px; border-radius: 10px; border: 1px solid rgba(231,196,107,.3);
  background: transparent; color: #E7C46B; font: 600 12.5px var(--sans); cursor: pointer;
}
.cc-btn-primary:disabled, .cc-btn-ghost:disabled { opacity: .5; cursor: default; }

.cc-input {
  width: 100%; padding: 12px 13px; border-radius: 10px;
  border: 1px solid rgba(231,196,107,.2); background: rgba(231,196,107,.04);
  color: var(--ink); font: 400 12.5px var(--sans); outline: none;
}
.cc-input::placeholder { color: var(--dim); }

.cc-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--gold-line); font: 500 10.5px var(--sans); cursor: pointer; color: var(--ink);
  background: transparent;
}