:root {
  --ink: #fff8eb !important;
  --muted: #d7c7ae !important;
  --paper: #211a14 !important;
  --paper-2: #30241a !important;
  --surface: rgba(48, 38, 29, .96) !important;
  --surface-2: rgba(67, 51, 37, .92) !important;
  --line: rgba(202, 168, 122, .30) !important;
  --violet: #9a6b45 !important;
  --sogan: #a66d45 !important;
  --sogan-2: #d7a84f !important;
  --indigo: #697653 !important;
  --leaf: #7f9560 !important;
  --gold: #d7a84f !important;
  --red: #a9573f !important;
  --green: #7f9560 !important;
  --shadow: 0 24px 70px rgba(24, 15, 9, .42) !important;
}

body {
  background:
    radial-gradient(circle at 18% 0, rgba(157, 113, 72, .25), transparent 38%),
    radial-gradient(circle at 86% 24%, rgba(102, 112, 72, .14), transparent 34%),
    linear-gradient(180deg, #17120e, #2b2119) !important;
}

.app {
  background: rgba(31, 24, 18, .88) !important;
  border-color: rgba(202, 168, 122, .22) !important;
}

.topbar {
  background: linear-gradient(90deg, rgba(35, 26, 19, .98), rgba(67, 49, 34, .96)) !important;
  border-bottom-color: rgba(202, 168, 122, .28) !important;
}

.brand-mark {
  background: conic-gradient(from 45deg, #d7a84f, #a9573f, #71805a, #d7a84f) !important;
}

.mini-link {
  color: #fff8eb !important;
  border-color: rgba(202, 168, 122, .42) !important;
  background: linear-gradient(135deg, rgba(142, 91, 55, .30), rgba(91, 103, 65, .22)) !important;
}

.hero {
  border-color: rgba(202, 168, 122, .42) !important;
  background:
    linear-gradient(90deg, rgba(28, 19, 13, .98), rgba(53, 37, 25, .90) 47%, rgba(88, 64, 42, .28)),
    linear-gradient(0deg, rgba(31, 21, 14, .82), transparent 50%),
    url("./assets/images/roman-goddess-earth.webp") 68% 38% / cover no-repeat !important;
}

.eyebrow { color: #dfb66e !important; text-shadow: 0 0 20px rgba(188, 130, 70, .38) !important; }
.hero h2 { background: linear-gradient(135deg, #fffaf0, #ead9bc 55%, #c89b62) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.hero p:not(.eyebrow) { color: #f1e5d2 !important; }
.chips span, .method-chips span { border-color: rgba(202, 168, 122, .38) !important; background: rgba(54, 39, 27, .72) !important; }
.panel, .group { background-color: rgba(48, 38, 29, .96) !important; }
.panel,
.notice {
  background: linear-gradient(135deg, rgba(48, 36, 26, .98), rgba(72, 53, 37, .96)) !important;
  border-color: rgba(202, 168, 122, .30) !important;
}
.headline, .overall, .archetype { background: linear-gradient(135deg, rgba(147, 94, 55, .23), rgba(112, 126, 76, .12)) !important; border-color: rgba(202, 168, 122, .35) !important; }
.data-line { border-left-color: #b7774f !important; background: rgba(157, 105, 62, .12) !important; }
.summary { background: rgba(130, 99, 61, .13) !important; }
.btn-primary { color: #24180f !important; background: linear-gradient(135deg, #ad754d, #e0b65d) !important; }
.toast { background: #413023 !important; }
.qris-dialog {
  background: #fffaf0 !important;
  color: #17120e !important;
  border-color: rgba(154, 107, 69, .32) !important;
}
.qris-dialog h2,
.qris-dialog > p,
.qris-dialog .qris-note {
  color: #17120e !important;
  -webkit-text-fill-color: #17120e !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.qris-dialog .qris-note {
  background: #edf7eb !important;
  border-color: #a8d6b0 !important;
}
.qris-dialog .qris-close {
  color: #17120e !important;
  -webkit-text-fill-color: #17120e !important;
  background: #f6ead8 !important;
  border-color: rgba(154, 107, 69, .35) !important;
}
.qris-dialog .qris-continue {
  color: #17120e !important;
  -webkit-text-fill-color: #17120e !important;
  background: linear-gradient(135deg, #ad754d, #e0b65d) !important;
}
.qris-dialog .qris-later {
  color: #17120e !important;
  -webkit-text-fill-color: #17120e !important;
  background: #fffaf0 !important;
  border-color: rgba(154, 107, 69, .38) !important;
}
.hero .donation-strip,
.donation-strip {
  color: #111 !important;
  text-align: center !important;
}
.hero .donation-strip strong,
.hero .donation-strip p,
.donation-strip strong,
.donation-strip p {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  text-align: center !important;
}
.btn-dark { background: linear-gradient(135deg, #57402f, #6f7c55) !important; color: #fff8eb !important; }

.bottom-tabs {
  background: rgba(248, 239, 222, .97) !important;
  border-color: rgba(154, 107, 69, .25) !important;
  box-shadow: 0 -10px 30px rgba(34, 22, 14, .16) !important;
}
.bottom-tabs button {
  min-height: 46px !important;
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  padding: 5px 3px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #786653 !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
.bottom-tabs button.active { color: #2c2118 !important; background: rgba(154, 107, 69, .14) !important; }
.bottom-tabs svg { width: 18px !important; height: 18px !important; color: currentColor !important; }
.universal-bottom-nav { position: sticky; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px -12px -12px; padding: 9px 12px max(9px, env(safe-area-inset-bottom)); backdrop-filter: blur(16px); }
.bottom-nav-hint { position: fixed; z-index: 1200; left: 50%; bottom: 82px; width: min(calc(100% - 32px), 390px); padding: 11px 14px; border-radius: 10px; color: #fff8eb; background: #413023; text-align: center; font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: .2s; }
.bottom-nav-hint.show { opacity: 1; transform: translate(-50%, 0); }
.share-open { overflow: hidden; }
.share-modal[hidden] { display: none !important; }
.share-modal { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: 18px; }
.share-backdrop { position: absolute; inset: 0; border: 0; background: rgba(20, 13, 8, .78); backdrop-filter: blur(8px); }
.share-dialog { position: relative; width: min(100%, 390px); padding: 20px; border: 1px solid rgba(154, 107, 69, .34); border-radius: 18px; background: #fffaf0; color: #17120e; box-shadow: 0 30px 85px rgba(20, 13, 8, .5); text-align: center; }
.share-dialog h2 { margin: 0 34px 7px; color: #17120e !important; -webkit-text-fill-color: #17120e !important; font-size: 22px; }
.share-dialog > p { margin: 0 0 13px; color: #4d4035 !important; font-size: 12px; line-height: 1.55; }
.share-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 1px solid rgba(154, 107, 69, .32); border-radius: 50%; background: #f6ead8; color: #17120e; font-size: 20px; cursor: pointer; }
.share-privacy { padding: 11px; border: 1px solid #b7d3aa; border-radius: 10px; background: #eff6e9; color: #26331f; font-size: 11px; line-height: 1.5; }
.share-actions { display: grid; gap: 9px; margin-top: 13px; }
.share-actions button { min-height: 48px; padding: 0 14px; border: 1px solid rgba(154, 107, 69, .34); border-radius: 12px; color: #17120e; background: #fffaf0; font: inherit; font-weight: 900; cursor: pointer; }
.share-actions .share-summary { border: 0; background: linear-gradient(135deg, #ad754d, #e0b65d); }
.share-actions button:disabled { opacity: .42; cursor: not-allowed; }
.share-dialog > small { display: block; margin-top: 12px; color: #6e5d4d; font-size: 10px; line-height: 1.45; }

.summary-card,
.reading,
.db-card,
.history-item,
.insight-item {
  background: rgba(70, 53, 39, .88) !important;
  border-color: rgba(202, 168, 122, .28) !important;
}

/* Hilangkan sisa aksen ungu dari komponen halaman lama. */
.quick a,
.service-card,
.menu-card,
.choice-card,
.spread-option,
.tarot-card,
.history-card,
.method-card,
.result-card,
.reading,
.date-card,
.score-row {
  border-color: rgba(202, 168, 122, .32) !important;
  background-color: rgba(72, 53, 38, .72) !important;
  box-shadow: none !important;
}

.service-card {
  background:
    radial-gradient(circle at 10% 10%, rgba(174, 119, 72, .13), transparent 58%),
    linear-gradient(135deg, rgba(48, 34, 24, .98), rgba(70, 52, 37, .96)) !important;
  border-color: rgba(202, 168, 122, .34) !important;
}

.service-card::before {
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(202, 168, 122, .025) 10px, rgba(202, 168, 122, .025) 20px) !important;
}

.service-card::after {
  background: radial-gradient(circle, rgba(154, 107, 69, .24), transparent 70%) !important;
}

.service-card:hover {
  border-color: rgba(218, 174, 102, .62) !important;
  box-shadow: 0 24px 52px rgba(30, 19, 11, .46), 0 0 45px rgba(143, 99, 61, .20) !important;
}

.service-card h3 { color: #fff8eb !important; text-shadow: 0 2px 10px rgba(74, 47, 27, .45) !important; }
.service-card p { color: #d9c9b2 !important; }

.service-icon.weton { background: linear-gradient(135deg, #a86442, #d7a84f) !important; }
.service-icon.destiny { background: linear-gradient(135deg, #6f7c55, #b28b55) !important; }
.service-icon.tarot { background: linear-gradient(135deg, #a9573f, #d28c45) !important; }
.service-icon.palm { background: linear-gradient(135deg, #8b6546, #7f9560) !important; }
.service-icon.jodoh { background: linear-gradient(135deg, #a76856, #bc8750) !important; }
.service-icon.past { background: linear-gradient(135deg, #665846, #9a754e) !important; }
.service-icon.daily { background: linear-gradient(135deg, #c08a42, #8f6843) !important; }
.service-icon.career { background: linear-gradient(135deg, #66734f, #a67c4e) !important; }
.service-icon.dream { background: linear-gradient(135deg, #51483b, #897052) !important; }
.service-icon.calendar { background: linear-gradient(135deg, #887153, #b1925c) !important; }
.service-icon { box-shadow: 0 10px 28px rgba(42, 27, 17, .42), 0 0 30px rgba(185, 134, 75, .13) !important; }

.quick a {
  color: #fff8eb !important;
  background: linear-gradient(135deg, rgba(111, 72, 45, .82), rgba(86, 96, 61, .65)) !important;
}

.quick a::before,
.quick a::after { border-color: rgba(218, 174, 102, .45) !important; background-color: transparent !important; }

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  border-color: #c58a55 !important;
  outline-color: #d7a84f !important;
  box-shadow: 0 0 0 3px rgba(197, 138, 85, .20) !important;
}

@media print {
  body, .app { background: #fff !important; }
}