/* ICHI-GEKI black and gold brand layer.
   Loaded last so it can theme existing Tailwind-heavy templates without rewriting every view. */
:root {
  --yellow: #d4af37;
  --yellow-dark: #a87b16;
  --yellow-light: rgba(212, 175, 55, 0.14);
  --yellow-glow: rgba(212, 175, 55, 0.32);
  --yellow-gradient: linear-gradient(135deg, #9f7622 0%, #d4af37 42%, #f6e09c 100%);
  --yellow-gradient-hover: linear-gradient(135deg, #b88916 0%, #e4c15a 48%, #fff1b8 100%);
  --gold: #d4af37;
  --gold-soft: #f3dc8a;
  --gold-deep: #9f7622;
  --black: #10100f;
  --ink: #141310;
  --surface: #181715;
  --surface-2: #201e1a;
  --surface-3: #29261f;
  --text: #f8f1dc;
  --text-sub: #cdbf96;
  --text-muted: #8f866f;
  --border: rgba(212, 175, 55, 0.22);
  --border-light: rgba(212, 175, 55, 0.14);
  --color-accent: var(--gold);
  --color-accent-hover: var(--gold-soft);
  --color-accent-light: rgba(212, 175, 55, 0.14);
  --color-border: var(--border);
  --gradient-gold: var(--yellow-gradient);
  --gradient-gold-hover: var(--yellow-gradient-hover);
  --shadow-gold: 0 10px 28px rgba(212, 175, 55, 0.18);
  --shadow-gold-lg: 0 16px 44px rgba(212, 175, 55, 0.26);
  --shadow-card: 0 18px 42px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-card-hover: 0 22px 58px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(212, 175, 55, 0.38);
}

html,
body {
  background: var(--black) !important;
  color: var(--text) !important;
}

body {
  background: linear-gradient(180deg, #171613 0%, var(--black) 42%, #151411 100%) !important;
  letter-spacing: 0;
}

main,
.page-wrapper,
.app-shell,
.app-shell-tight,
.admin-shell,
[class~="bg-[#F5F5F5]"],
[class~="bg-gray-100"] {
  background: linear-gradient(180deg, #171613 0%, var(--black) 44%, #151411 100%) !important;
}

.header-fixed {
  background: rgba(12, 12, 11, 0.94) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.28) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42) !important;
}

.header-fixed > [class~="bg-white"],
.category-nav-shell {
  background: rgba(13, 13, 12, 0.92) !important;
  border-color: rgba(212, 175, 55, 0.2) !important;
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
}

.category-nav-track {
  background: rgba(212, 175, 55, 0.08) !important;
  border-color: rgba(212, 175, 55, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 26px rgba(0, 0, 0, 0.24) !important;
}

.site-brand-link {
  color: var(--text) !important;
}

.site-logo-img {
  display: block;
  max-width: min(42vw, 260px);
  filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.18));
}

.brand-wordmark {
  display: none;
  flex-direction: column;
  justify-content: center;
  line-height: 0.86;
  color: var(--gold);
  letter-spacing: 0;
  text-shadow: 0 0 24px rgba(212, 175, 55, 0.22);
}

.brand-wordmark-main {
  font-size: clamp(1.35rem, 4.8vw, 2.15rem);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.brand-wordmark-sub {
  margin-top: 0.18rem;
  font-size: clamp(0.66rem, 2.1vw, 0.84rem);
  font-weight: 900;
  letter-spacing: 0.42em;
  color: var(--text-sub);
}

[class~="bg-white"],
[class~="md:bg-white"],
.page-card,
.card-gold,
.card-hover,
.oripa-card,
.oripa-card > div,
.site-footer {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[class~="bg-gray-50"],
[class~="bg-gray-100"],
[class~="bg-gray-200"],
[class~="hover:bg-gray-50"]:hover,
[class~="hover:bg-gray-100"]:hover {
  background-color: var(--surface-2) !important;
}

[class~="bg-[#FFF8E1]"],
[class~="bg-yellow-50"],
[class~="bg-amber-50"],
[class~="hover:bg-[#FFF8E1]"]:hover,
[class~="hover:bg-yellow-50"]:hover,
[class~="hover:bg-amber-50"]:hover {
  background-color: rgba(212, 175, 55, 0.13) !important;
  color: var(--text) !important;
}

[class~="bg-[#FFB800]"],
[class~="bg-[#FFC107]"],
[class~="group-hover:bg-[#FFB800]"],
.btn-primary,
.btn-solid,
.btn-register,
.btn-gold,
.badge-gold {
  background: var(--yellow-gradient) !important;
  color: #070707 !important;
  border-color: rgba(246, 224, 156, 0.5) !important;
}

[class~="hover:bg-[#E5A600]"]:hover,
[class~="hover:bg-[#FFB800]"]:hover,
[class~="hover:bg-[#FFC107]"]:hover,
.btn-primary:hover,
.btn-solid:hover,
.btn-register:hover,
.btn-gold:hover {
  background: var(--yellow-gradient-hover) !important;
  color: #050505 !important;
}

[class~="text-[#FFB800]"],
[class~="text-[#FFC107]"],
[class~="text-[#B47A00]"],
[class~="text-[#8A6500]"],
[class~="text-yellow-700"],
[class~="text-amber-800"],
.logo-text,
.gold-shimmer-text {
  color: var(--gold) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}

[class~="border-[#FFB800]"],
[class~="border-[#FFC107]"],
[class~="border-yellow-200"],
[class~="border-amber-200"],
[class~="hover:border-[#FFB800]"]:hover,
[class~="hover:border-[#FFC107]"]:hover {
  border-color: rgba(212, 175, 55, 0.62) !important;
}

[class~="text-gray-950"],
[class~="text-gray-900"],
[class~="text-gray-800"],
.page-title,
.form-label,
.form-warning-title {
  color: var(--text) !important;
}

[class~="text-gray-700"],
[class~="text-gray-600"],
[class~="text-gray-500"],
.page-subtitle,
.form-warning-text {
  color: var(--text-sub) !important;
}

[class~="text-gray-400"],
[class~="text-gray-300"] {
  color: var(--text-muted) !important;
}

[class~="border-gray-100"],
[class~="border-gray-200"],
[class~="border-gray-300"],
[class~="border-gray-900"],
.divider-gold,
footer {
  border-color: var(--border) !important;
}

.btn-outline,
.btn-login,
.btn-gold-outline,
[class~="border-2"][class~="bg-white"] {
  background: rgba(212, 175, 55, 0.07) !important;
  color: var(--gold-soft) !important;
  border-color: rgba(212, 175, 55, 0.52) !important;
}

.btn-outline:hover,
.btn-login:hover,
.btn-gold-outline:hover {
  background: rgba(212, 175, 55, 0.16) !important;
  color: var(--text) !important;
}

input,
select,
textarea,
.form-input,
.form-input-gold {
  background: #12110f !important;
  color: var(--text) !important;
  border-color: rgba(212, 175, 55, 0.28) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(205, 191, 150, 0.55) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.16) !important;
  background: #171612 !important;
}

.nav-category {
  color: var(--text-sub) !important;
}

.nav-category:hover {
  color: var(--text) !important;
  background: rgba(212, 175, 55, 0.1) !important;
  border-color: rgba(212, 175, 55, 0.26) !important;
}

.nav-category.active {
  color: #050505 !important;
  background: var(--yellow-gradient) !important;
  border-color: rgba(246, 224, 156, 0.7) !important;
  box-shadow: 0 10px 28px rgba(212, 175, 55, 0.2) !important;
}

.oripa-card,
.oripa-card > div {
  box-shadow: var(--shadow-card) !important;
}

.oripa-card:hover,
.oripa-card > div:hover {
  border-color: rgba(212, 175, 55, 0.68) !important;
  box-shadow: var(--shadow-card-hover) !important;
}

.oripa-card img {
  background: #11100e;
}

.progress-gold-bar,
.gold-shimmer,
.divider-gold,
[style*="#fbbf24"] {
  background: var(--yellow-gradient) !important;
}

.bottom-nav,
.bottom-nav::before {
  background: rgba(12, 12, 11, 0.98) !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
}

.bottom-nav {
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.48) !important;
}

.bottom-nav-item.active {
  color: var(--gold) !important;
}

img[src="/images/ui/coin.png"] {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.38));
}

.site-footer {
  border-top: 1px solid rgba(212, 175, 55, 0.34) !important;
}

::selection {
  background: rgba(212, 175, 55, 0.34);
  color: var(--text);
}

/* Readability pass for admin, charge, tables, forms and status panels. */
[class~="bg-[#FFFDF5]"],
[class~="bg-[#FFF4CC]"],
[class~="bg-yellow-100"],
[class~="bg-amber-100"] {
  background-color: rgba(212, 175, 55, 0.13) !important;
  border-color: rgba(212, 175, 55, 0.36) !important;
  color: var(--text) !important;
}

[class~="bg-[#FFB800]"],
[class~="bg-[#FFC107]"],
[class~="bg-amber-500"],
[class~="bg-yellow-500"],
[class~="bg-[#FFB800]"][class*="text-"],
[class~="bg-[#FFC107]"][class*="text-"],
[class~="bg-amber-500"][class*="text-"],
[class~="bg-yellow-500"][class*="text-"],
.btn-primary,
.btn-solid,
.btn-register,
.btn-gold,
.badge-gold,
button[class~="bg-[#FFB800]"],
a[class~="bg-[#FFB800]"] {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
}

[class~="hover:bg-[#E5A600]"]:hover,
[class~="hover:bg-[#FFB800]"]:hover,
[class~="hover:bg-[#FFC107]"]:hover {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
}

[class~="bg-red-50"],
[class~="bg-red-100"] {
  background-color: rgba(127, 29, 29, 0.34) !important;
  border-color: rgba(248, 113, 113, 0.46) !important;
  color: #fecaca !important;
}

[class~="bg-green-50"],
[class~="bg-green-100"],
[class~="bg-green-600"],
[class~="hover:bg-green-700"]:hover {
  background-color: rgba(20, 83, 45, 0.5) !important;
  border-color: rgba(74, 222, 128, 0.42) !important;
  color: #dcfce7 !important;
}

[class~="bg-blue-50"],
[class~="bg-blue-100"] {
  background-color: rgba(30, 64, 175, 0.34) !important;
  border-color: rgba(96, 165, 250, 0.42) !important;
  color: #dbeafe !important;
}

[class~="bg-purple-50"],
[class~="bg-purple-100"] {
  background-color: rgba(88, 28, 135, 0.35) !important;
  border-color: rgba(192, 132, 252, 0.42) !important;
  color: #f3e8ff !important;
}

[class~="bg-orange-50"],
[class~="bg-orange-100"] {
  background-color: rgba(124, 45, 18, 0.36) !important;
  border-color: rgba(251, 146, 60, 0.42) !important;
  color: #ffedd5 !important;
}

[class~="border-red-100"],
[class~="border-red-200"],
[class~="border-red-300"],
[class~="border-red-500"] {
  border-color: rgba(248, 113, 113, 0.48) !important;
}

[class~="border-green-200"],
[class~="border-green-300"],
[class~="border-green-500"] {
  border-color: rgba(74, 222, 128, 0.42) !important;
}

[class~="border-blue-100"],
[class~="border-blue-200"],
[class~="border-blue-300"],
[class~="border-blue-500"] {
  border-color: rgba(96, 165, 250, 0.42) !important;
}

[class~="border-purple-200"],
[class~="border-orange-200"] {
  border-color: rgba(212, 175, 55, 0.34) !important;
}

[class~="text-red-500"],
[class~="text-red-500/80"],
[class~="text-red-600"],
[class~="text-red-700"],
[class~="text-red-800"],
[class~="hover:text-red-600"]:hover {
  color: #ff9b9b !important;
  -webkit-text-fill-color: currentColor !important;
}

[class~="text-green-600"],
[class~="text-green-700"],
[class~="text-green-800"],
[class~="text-emerald-600"],
[class~="text-emerald-700"],
[class~="text-emerald-800"] {
  color: #86efac !important;
  -webkit-text-fill-color: currentColor !important;
}

[class~="text-blue-500"],
[class~="text-blue-600"],
[class~="text-blue-700"],
[class~="text-blue-800"],
[class~="text-blue-900"],
[class~="text-blue-950"] {
  color: #93c5fd !important;
  -webkit-text-fill-color: currentColor !important;
}

[class~="text-purple-600"],
[class~="text-purple-700"],
[class~="text-purple-800"],
[class~="text-purple-900"] {
  color: #d8b4fe !important;
  -webkit-text-fill-color: currentColor !important;
}

[class~="text-amber-700"],
[class~="text-amber-800"],
[class~="text-amber-900"],
[class~="text-amber-950"],
[class~="text-yellow-700"],
[class~="text-yellow-800"],
[class~="text-yellow-900"],
[class~="text-[#7A5500]"],
[class~="text-[#8A6500]"],
[class~="text-[#9A6A00]"],
[class~="text-[#9A6B00]"],
[class~="text-[#B47A00]"],
[class~="hover:text-[#B47A00]"]:hover {
  color: var(--gold-soft) !important;
  -webkit-text-fill-color: currentColor !important;
}

[class~="bg-[#FFB800]"] [class^="text-"],
[class~="bg-[#FFC107]"] [class^="text-"],
[class~="bg-[#FFB800]"] [class*=" text-"],
[class~="bg-[#FFC107]"] [class*=" text-"] {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
}

table,
thead,
tbody,
tr,
td,
th {
  color: inherit;
}

thead[class~="bg-[#FFF8E1]"],
thead [class~="bg-[#FFF8E1]"] {
  background-color: rgba(212, 175, 55, 0.18) !important;
}

tbody[class~="bg-white"],
tr[class~="bg-white"],
td[class~="bg-white"],
th[class~="bg-white"] {
  background-color: var(--surface) !important;
}

tr[class~="hover:bg-gray-50"]:hover,
tr[class~="hover:bg-gray-100"]:hover,
tbody tr:hover {
  background-color: rgba(212, 175, 55, 0.08) !important;
}

tr[class~="bg-red-50"],
tbody tr[class~="bg-red-50"] {
  background-color: rgba(127, 29, 29, 0.28) !important;
}

a[class~="bg-white"],
button[class~="bg-white"],
[role="button"][class~="bg-white"] {
  background-color: rgba(212, 175, 55, 0.07) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: currentColor !important;
}

a[class~="bg-white"]:hover,
button[class~="bg-white"]:hover,
[role="button"][class~="bg-white"]:hover {
  background-color: rgba(212, 175, 55, 0.16) !important;
  color: var(--text) !important;
}

[class~="pointer-events-none"][class~="bg-gray-50"],
[class~="disabled:opacity-50"]:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.58 !important;
  color: var(--text-muted) !important;
  -webkit-text-fill-color: currentColor !important;
}

input,
select,
textarea {
  caret-color: var(--gold);
  line-height: 1.5;
}

input[type="search"]::-webkit-search-cancel-button {
  filter: invert(1);
}

.payment-method-btn.active,
[class~="bg-[#FFF8E1]"][class~="active"] {
  background-color: rgba(212, 175, 55, 0.18) !important;
  border-color: rgba(212, 175, 55, 0.72) !important;
  color: var(--text) !important;
}

/* Leftover light Tailwind gradients and translucent white panels. */
[class~="bg-gradient-to-br"][class~="from-yellow-50"][class~="to-gray-100"],
[class~="bg-gradient-to-r"][class~="from-gray-50"][class~="to-white"],
[class~="bg-gradient-to-br"][class~="from-[#FFF8E1]"],
[class~="bg-gradient-to-br"][class~="from-white"],
[class~="bg-gradient-to-r"][class~="from-[#FFF8E1]"],
[class~="bg-gradient-to-r"][class~="from-amber-50"],
[class~="bg-gradient-to-br"][class~="from-amber-50"],
[class~="bg-gradient-to-br"][class~="from-gray-50"][class~="to-gray-100"],
[class~="bg-gradient-to-br"][class~="from-gray-50"][class~="to-gray-200"] {
  background: linear-gradient(135deg, #11100e 0%, #181611 54%, rgba(212, 175, 55, 0.16) 100%) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

[class~="bg-white/95"],
[class~="bg-white/90"],
[class~="bg-white/80"],
[class~="bg-white/75"],
[class~="bg-white/70"],
[class~="bg-white/60"],
[class~="bg-white/50"],
[class~="bg-white/40"] {
  background-color: rgba(21, 20, 18, 0.92) !important;
  border-color: rgba(212, 175, 55, 0.24) !important;
  color: var(--text) !important;
}

[class~="bg-amber-50/90"],
[class~="bg-yellow-50/90"],
[class~="bg-gray-50/80"],
[class~="hover:bg-gray-50/80"]:hover {
  background-color: rgba(212, 175, 55, 0.12) !important;
  color: var(--text) !important;
}

section[class~="bg-white"],
form[class~="bg-white"],
details[class~="bg-white/90"],
div[class~="bg-white"][class~="rounded-xl"],
div[class~="bg-white"][class~="rounded-2xl"],
div[class~="bg-white"][class~="rounded-3xl"],
a[class~="bg-white"][class~="rounded-xl"],
a[class~="bg-white"][class~="rounded-2xl"],
a[class~="bg-white"][class~="rounded-3xl"],
a[class~="bg-white"][class~="block"] {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

summary[class~="bg-gradient-to-r"],
summary[class~="from-gray-50"],
summary[class~="to-white"] {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(21, 20, 18, 0.96)) !important;
  color: var(--text) !important;
}

a[class~="bg-white"][class~="rounded-full"],
button[class~="bg-white"][class~="rounded-full"],
a[class~="bg-white"][class~="rounded-lg"],
button[class~="bg-white"][class~="rounded-lg"],
a[class~="bg-white"][class~="rounded-xl"],
button[class~="bg-white"][class~="rounded-xl"] {
  background-color: rgba(212, 175, 55, 0.08) !important;
  color: var(--text) !important;
}

[class~="bg-gray-950"],
[class~="bg-gray-900"],
[class~="bg-black"] {
  background-color: #0a0a09 !important;
  color: #ffffff !important;
}

[class~="hover:bg-gray-950"]:hover,
[class~="hover:bg-gray-900"]:hover,
[class~="hover:bg-gray-800"]:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

[class~="bg-gray-950"] [class^="text-"],
[class~="bg-gray-900"] [class^="text-"],
[class~="bg-black"] [class^="text-"],
[class~="bg-gray-950"] [class*=" text-"],
[class~="bg-gray-900"] [class*=" text-"],
[class~="bg-black"] [class*=" text-"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

[class~="border-white"],
[class~="border-white/70"],
[class~="border-white/80"] {
  border-color: rgba(212, 175, 55, 0.32) !important;
}

/* Make dark icons visible on branded controls. */
.header-fixed a[href="/user/dashboard"] {
  background: rgba(212, 175, 55, 0.1) !important;
  border-color: rgba(212, 175, 55, 0.52) !important;
}

.header-fixed a[href="/user/dashboard"]:hover {
  background: var(--yellow-gradient) !important;
  border-color: rgba(246, 224, 156, 0.7) !important;
}

.header-fixed a[href="/user/dashboard"] img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(22%) saturate(641%) hue-rotate(4deg) brightness(101%) contrast(92%);
  opacity: 1 !important;
}

.header-fixed a[href="/user/dashboard"]:hover img {
  filter: brightness(0) saturate(100%);
}

a[href^="/user/items"][class~="bg-[#FFB800]"] [class~="bg-white"][class~="bg-opacity-15"],
a[href^="/user/notifications"][class~="bg-[#FFB800]"] [class~="bg-white"][class~="bg-opacity-15"] {
  background-color: rgba(12, 12, 11, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: var(--gold-soft) !important;
}

a[href^="/user/items"][class~="bg-[#FFB800]"] i,
a[href^="/user/notifications"][class~="bg-[#FFB800]"] i {
  color: var(--gold-soft) !important;
  -webkit-text-fill-color: var(--gold-soft) !important;
}

a[href="/user/profile"] i,
a[href="/user/dashboard"] i {
  color: var(--gold-soft) !important;
  -webkit-text-fill-color: var(--gold-soft) !important;
}

/* Direct SVG image audit: keep icon assets readable on the dark/gold theme. */
img[src^="/images/volt-icons/"] {
  filter: brightness(0) saturate(100%) invert(89%) sepia(18%) saturate(912%) hue-rotate(357deg) brightness(101%) contrast(91%);
  opacity: 1 !important;
}

[class~="bg-[#FFB800]"] img[src^="/images/volt-icons/"],
[class~="bg-[#FFC107]"] img[src^="/images/volt-icons/"],
[class~="bg-amber-500"] img[src^="/images/volt-icons/"],
[class~="bg-yellow-500"] img[src^="/images/volt-icons/"],
button[class~="bg-[#FFB800]"] img[src^="/images/volt-icons/"],
button[class~="bg-[#FFC107]"] img[src^="/images/volt-icons/"],
a[class~="bg-[#FFB800]"] img[src^="/images/volt-icons/"],
a[class~="bg-[#FFC107]"] img[src^="/images/volt-icons/"],
.header-fixed img[src="/images/volt-icons/plus.svg"] {
  filter: brightness(0) saturate(100%);
}

img[src^="/images/ui/dashboard-"],
img[src^="/images/admin/"],
img[src="/images/ui/charge-complete.svg"] {
  opacity: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.46)) drop-shadow(0 0 10px rgba(212, 175, 55, 0.12));
}