/* ==========================================================================
   BLACK & GOLD THEME — loaded after app.css; maps every component onto a dark surface with gold accents.
   Settings: color_primary → --bg (black), color_accent → --gold.
   ========================================================================== */
:root {
  --gold: #f0c63d;
  --bg: #0b0b0c;
  --primary: var(--gold);
  --accent: var(--gold);
  --primary-ink: #14110a;
  --gold-grad: linear-gradient(135deg, #ffe58f 0%, var(--gold) 46%, #b88a12 100%);
  --brass-grad: var(--gold-grad);
  --bg-2: #0f0f11;
  --surface: #151517;
  --surface-2: #1c1c1f;
  --surface-3: #242428;
  --text: #f4f1e8;
  --muted: #aaa598;
  --line: #2c2c31;
  --line-2: #3b3b42;
  --ok: #6ee7a1;   --ok-bg: rgba(46, 204, 113, .12);
  --warn: #f6d36b; --warn-bg: rgba(240, 198, 61, .12);
  --bad: #ff8a7a;  --bad-bg: rgba(231, 76, 60, .14);
  --info: #8ec5ff; --info-bg: rgba(66, 135, 245, .14);
  --done: #c4b5fd; --done-bg: rgba(139, 109, 245, .16);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 14px 34px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
html { background: var(--bg); }
body { background: var(--bg); color: var(--text); }
::selection { background: var(--gold); color: #14110a; }
h1, h2, h3, h4 { color: var(--text); }
a { color: var(--gold); }
.muted { color: var(--muted); }

/* buttons */
.btn { background: var(--gold-grad); color: #14110a; border: 1.5px solid rgba(0, 0, 0, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn:hover { filter: brightness(1.07); box-shadow: 0 8px 22px rgba(240, 198, 61, .22), inset 0 1px 0 rgba(255, 255, 255, .45); text-decoration: none; }
.btn.accent { background: var(--gold-grad); color: #14110a; }
.btn.ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line-2); box-shadow: none; text-shadow: none; }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); box-shadow: none; filter: none; }
.btn.danger { background: #b3261e; color: #fff; border-color: #7f1d17; box-shadow: none; }
.btn.link { background: none; color: var(--gold); border: 0; box-shadow: none; }
.header-actions .btn.ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.header-actions .btn.accent { color: #14110a; border-color: rgba(0, 0, 0, .3); text-shadow: none; }

/* header / nav */
.site-header { background: rgba(11, 11, 12, .9); border-bottom: 1px solid var(--line); box-shadow: none; }
.site-header.is-scrolled { background: rgba(11, 11, 12, .97); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); }
.brand, .brand-name { color: var(--text); }
.brand-mark { background: #000; color: var(--gold); border: 1.5px solid var(--gold); }
.nav a { color: #e6e2d6; }
.nav a:hover { background: var(--surface-2); color: var(--gold); }
.site-header .nav a.active { color: var(--gold); background: transparent; }
.pole-stripe { background: repeating-linear-gradient(-45deg, var(--gold) 0 12px, #0b0b0c 12px 24px); height: 4px; }
.pole-stripe.thin { height: 3px; }
@media (max-width: 900px) { .nav { background: #101012; border-bottom: 1px solid var(--line); } }

/* surfaces */
.card, .stat, .steps li, details.faq, .table-wrap, .empty-state, .side-nav, .day-col, .choice, .answer-box {
  background: var(--surface); border-color: var(--line); color: var(--text);
}
.card.flat { background: var(--surface); }
.empty-state { border-color: var(--line-2); color: var(--muted); }
.divider { background: var(--line); }
.section.alt { background: var(--tool-tile), var(--bg-2); }
.section-head p { color: var(--muted); }
.section-head h2::after { background: var(--gold-grad); }
.cut-line::before, .cut-line::after { border-top-color: var(--line-2); }
.answer-box { border-inline-start-color: var(--gold); }
.price { color: var(--gold); }
.price del, .hint { color: var(--muted); }

/* hero */
.hero { background:
    var(--tool-tile),
    radial-gradient(700px 420px at 12% 20%, rgba(240, 198, 61, .16), transparent 70%),
    radial-gradient(520px 360px at 88% 80%, rgba(240, 198, 61, .08), transparent 70%),
    linear-gradient(180deg, #060607, #0b0b0c); }
.hero h1 { font-size: clamp(2rem, 5.6vw, 3.6rem); line-height: 1.25; }
.hero h1 .gold { display: block; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: #cfcabc; }
.hero .eyebrow { color: var(--gold); border-color: rgba(240, 198, 61, .5); background: rgba(240, 198, 61, .06); }
.hero-badges { color: #cfcabc; }

/* forms */
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=time],
input[type=date], input[type=search], input[type=url], input[type=file], select, textarea {
  background: #0e0e10; color: var(--text); border-color: var(--line-2);
}
input::placeholder, textarea::placeholder { color: #7d7a70; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240, 198, 61, .28); }
select option { background: #151517; color: var(--text); }
input[type=color] { background: #0e0e10; border-color: var(--line-2); }
.checkbox input { accent-color: var(--gold); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--bad); }
.error-text { color: var(--bad); }
input:disabled { background: #19191b; color: var(--muted); }

/* tables */
table { color: var(--text); }
th { background: var(--surface-2); color: var(--text); }
th, td { border-bottom-color: var(--line); }
tbody tr:hover { background: var(--surface-2); }

/* badges / alerts / chips */
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(110, 231, 161, .3); }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(246, 211, 107, .3); }
.badge.bad { background: var(--bad-bg); color: var(--bad); border-color: rgba(255, 138, 122, .3); }
.badge.info { background: var(--info-bg); color: var(--info); border-color: rgba(142, 197, 255, .3); }
.badge.done { background: var(--done-bg); color: var(--done); border-color: rgba(196, 181, 253, .3); }
.badge.muted { background: var(--surface-3); color: #cfcabc; border-color: var(--line-2); }
.badge.test { background: transparent; color: var(--gold); border: 1px dashed var(--gold); }
.alert.success { background: var(--ok-bg); border-color: rgba(110, 231, 161, .35); color: #b5f5cf; }
.alert.error { background: var(--bad-bg); border-color: rgba(255, 138, 122, .4); color: #ffc2b9; }
.alert.warning { background: var(--warn-bg); border-color: rgba(246, 211, 107, .4); color: #f9e3a0; }
.alert.info { background: var(--info-bg); border-color: rgba(142, 197, 255, .35); color: #cfe6ff; }
.delta { display: inline-flex; gap: 4px; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.delta.ok { background: var(--ok-bg); color: var(--ok); }
.delta.bad { background: var(--bad-bg); color: var(--bad); }
.delta.info { background: var(--info-bg); color: var(--info); }
.delta.muted { background: var(--surface-3); color: var(--muted); }

/* booking flow */
.stepper li { background: var(--surface); border-color: var(--line); color: var(--muted); }
.stepper li .n { background: var(--surface-3); color: var(--text); }
.stepper li.active { background: var(--surface-2); border-color: var(--gold); color: var(--gold); }
.stepper li.active .n, .stepper li.done .n { background: var(--gold); color: #14110a; }
.stepper li.done { color: var(--ok); }
.step-label { color: var(--gold); }
.cal-day { background: var(--surface); border-color: var(--line-2); color: var(--text); }
.cal-day small { color: var(--muted); }
.cal-day.open { background: rgba(240, 198, 61, .08); border-color: rgba(240, 198, 61, .5); }
.cal-day.open:hover { border-color: var(--gold); background: rgba(240, 198, 61, .16); }
.cal-day.full { background: var(--bad-bg); color: #ffb3a7; }
.cal-day.closed, .cal-day.past, .cal-day.far { background: #101012; color: #5f5d57; border-color: var(--line); }
.cal-day.selected { background: var(--gold-grad); color: #14110a; border-color: var(--gold); }
.cal-day.selected small { color: #3b300a; }
.cal-day.today::after { background: var(--gold); }
.cal-dow { color: var(--muted); }
.legend { color: var(--muted); }
.slot { background: var(--surface); border-color: var(--line-2); color: var(--text); }
.slot:hover { border-color: var(--gold); color: var(--gold); }
.slot.selected { background: var(--gold-grad); color: #14110a; border-color: var(--gold); }
.slot.locked, .slot:disabled { background: repeating-linear-gradient(135deg, #131315 0 8px, #19191c 8px 16px); color: #6f6c63; border-color: var(--line); cursor: not-allowed; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25; padding: 4px 2px; }
.slot.locked .t { text-decoration: line-through; text-decoration-color: rgba(255, 138, 122, .6); }
.slot.locked small { font-size: .68rem; color: #ff8a7a; font-weight: 700; }
.slot.locked:hover { color: #6f6c63; border-color: var(--line); }
.choice:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(240, 198, 61, .2); }
.choice input { accent-color: var(--gold); }
.summary-row { border-bottom-color: var(--line); }
#flow-grid aside.card, .flow-summary { background: var(--surface); border-color: rgba(240, 198, 61, .45); }
.loader { border-color: var(--line-2); border-top-color: var(--gold); }

/* tabs / lists */
.tabs a { background: var(--surface); border-color: var(--line); color: var(--text); }
.tabs a.active { background: var(--gold-grad); color: #14110a; border-color: var(--gold); }
.pagination a, .pagination span { background: var(--surface); border-color: var(--line); color: var(--text); }
.pagination .active span { background: var(--gold); color: #14110a; }
.side-nav a { color: var(--text); }
.side-nav a:hover { background: var(--surface-2); color: var(--gold); }
.side-nav a.active { background: var(--gold-grad); color: #14110a; }
.side-nav hr { border-top-color: var(--line); }
.timeline li { border-inline-start-color: var(--line-2); }
.timeline li::before { border-color: var(--surface); background: var(--gold); }
details.faq p { color: var(--muted); }
.auth-card { border-top-color: var(--gold); }

/* service cards / steps */
.service-card:hover { border-color: var(--gold); box-shadow: 0 18px 38px rgba(0, 0, 0, .55); }
.service-card h3 a { color: var(--text); }
.service-card h3 a:hover { color: var(--gold); text-decoration: none; }
.service-card .thumb { background: var(--img, none) center/cover, var(--tool-tile), linear-gradient(135deg, #1b1b1e, #0a0a0b); border: 1px solid var(--line); }
.steps li::before { background: var(--gold-grad); color: #14110a; }
.steps li .icon { color: var(--gold); opacity: .9; }

/* footer */
.site-footer { background: var(--tool-tile), linear-gradient(180deg, #0e0e10, #050506); color: #cfcabc; border-top: 1px solid var(--line); }
.site-footer h4 { color: var(--gold); }
.site-footer a { color: #f1dc8c; }
.footer-bottom { border-top-color: var(--line); color: #8d897d; }

/* dialog */
dialog { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); }
dialog::backdrop { background: rgba(0, 0, 0, .7); }

/* admin */
.admin-shell { background: var(--bg); }
.admin-side { background: #060607; border-inline-end: 1px solid var(--line); color: #cfcabc; }
.admin-side a { color: #d8d4c7; }
.admin-side a:hover { background: var(--surface-2); color: var(--gold); }
.admin-side a.active { background: var(--gold-grad); color: #14110a; }
.admin-side .group { color: #8d897d; }
.admin-side .brand { color: var(--text); }
.stat.warn { background: rgba(240, 198, 61, .08); border-color: rgba(240, 198, 61, .4); }
.stat .l { color: var(--muted); }
.stat.big .v { font-size: 1.45rem; color: var(--gold); }
.day-col.today { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(240, 198, 61, .3); }
.day-col.closed { background: #0f0f11; }
.ev { background: var(--surface-2); color: var(--text); }
.ev.ok { background: var(--ok-bg); border-color: var(--ok); }
.ev.warn { background: var(--warn-bg); border-color: var(--warn); }
.ev.info { background: var(--info-bg); border-color: var(--info); }
.ev.done { background: var(--done-bg); border-color: var(--done); }
.ev.bad { background: var(--bad-bg); border-color: var(--bad); }
.bar { background: var(--surface-3); }
.bar > span { background: var(--gold-grad); }

/* comparison table + charts (financial dashboard) */
table.compare th:first-child, table.compare td:first-child { position: sticky; inset-inline-start: 0; background: var(--surface-2); z-index: 1; }
table.compare td { vertical-align: top; min-width: 150px; }
.bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 220px; }
.bar-col { display: flex; flex-direction: column; align-items: stretch; height: 100%; gap: 6px; }
.bar-track { flex: 1; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.bar-track > span { display: block; width: 100%; background: var(--gold-grad); border-radius: 8px 8px 0 0; transition: height .6s var(--ease); }
.bar-track > span.alt { background: linear-gradient(180deg, #8ec5ff, #3b7fd6); }
.bar-val { font-size: .74rem; text-align: center; color: var(--text); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-label { font-size: .78rem; text-align: center; color: var(--muted); }
@media (max-width: 640px) { .bars { gap: 6px; height: 190px; } .bar-val { font-size: .66rem; } }

/* "our story" block on the landing page */
.story { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; align-items: center; }
.story-art { aspect-ratio: 4 / 3; border-radius: 22px; border: 1px solid var(--line-2); background: var(--img, none) center/cover, var(--tool-tile), radial-gradient(500px 300px at 30% 20%, rgba(240, 198, 61, .18), transparent 70%), linear-gradient(135deg, #1b1b1e, #0a0a0b); display: grid; place-items: center; color: var(--gold); box-shadow: var(--shadow); overflow: hidden; }
.story-art svg.icon { width: 38%; height: auto; max-width: 150px; }
.story h2 span { color: var(--gold); }
.checklist { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist .icon { color: var(--gold); margin-top: 4px; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }

/* shape the first screen like a modern dark landing page */
.hero .container { padding-block: clamp(48px, 8vw, 96px); }
@media (min-width: 901px) { .hero h1 { max-width: 14ch; } }

/* ==== Hero without decorative illustration: static, typographic; real photo only when uploaded ==== */
.hero .container > div:first-child { animation: none; }
.hero .container { grid-template-columns: 1fr; padding-block: clamp(56px, 9vw, 110px); }
.hero.no-art .hero-copy { text-align: center; max-width: 900px; margin-inline: auto; }
.hero.no-art h1 { max-width: none; font-size: clamp(2.2rem, 6.4vw, 4.4rem); }
.hero.no-art .hero-cta { justify-content: center; margin-top: 28px; }
.hero.has-art .container { grid-template-columns: 1.1fr .9fr; align-items: center; }
.hero-photo img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 22px; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.hero .btn.ghost { color: var(--text); border-color: var(--line-2); }
.steps li { padding-top: 70px; }
.steps li strong { font-size: 1.02rem; }
.service-card h3 { font-size: 1.12rem; }
@media (max-width: 900px) { .hero.has-art .container { grid-template-columns: 1fr; } .hero.no-art h1 { font-size: clamp(2rem, 9vw, 2.8rem); } }