@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

/*
 * TN Reload visual layer
 * Direction: midnight service console — a dark, calm utility with sea-glass
 * actions, warm signal accents, and deliberately quiet depth.
 *
 * This file is intentionally independent from the compiled application CSS.
 * It only changes presentation; routes, DOM behavior, and API interactions
 * remain owned by the production build.
 */
:root {
  --tn-ink: 222 27% 7%;
  --tn-panel: 222 24% 10%;
  --tn-panel-raised: 222 23% 13%;
  --tn-line: 220 20% 18%;
  --tn-line-strong: 220 17% 25%;
  --tn-copy: 210 32% 93%;
  --tn-muted: 215 15% 59%;
  --tn-aqua: 185 74% 56%;
  --tn-aqua-deep: 185 70% 35%;
  --tn-amber: 40 94% 63%;
  --tn-coral: 12 78% 68%;
  --background: var(--tn-ink);
  --foreground: var(--tn-copy);
  --card: var(--tn-panel);
  --card-foreground: var(--tn-copy);
  --card-border: var(--tn-line);
  --popover: 222 24% 12%;
  --popover-foreground: var(--tn-copy);
  --popover-border: var(--tn-line-strong);
  --primary: var(--tn-aqua);
  --primary-foreground: var(--tn-ink);
  --secondary: 220 20% 15%;
  --secondary-foreground: var(--tn-copy);
  --muted: 220 20% 15%;
  --muted-foreground: var(--tn-muted);
  --accent: var(--tn-amber);
  --accent-foreground: var(--tn-ink);
  --border: var(--tn-line);
  --input: 220 20% 24%;
  --ring: var(--tn-aqua);
  --radius: 0.9rem;
  --font-sans: 'Manrope', sans-serif;
  --font-display: ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;
}

html {
  background: hsl(var(--tn-ink));
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: hsl(var(--tn-copy));
  background:
    radial-gradient(900px 500px at 85% -8%, hsl(185 50% 24% / 0.16), transparent 68%),
    radial-gradient(700px 480px at -10% 100%, hsl(40 65% 30% / 0.09), transparent 68%),
    hsl(var(--tn-ink));
  font-family: var(--font-sans);
  font-feature-settings: "ss01" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

#root {
  min-height: 100vh;
  isolation: isolate;
}

/* User-supplied TN Reload mark */
.tn-brand-row {
  height: 2.55rem;
  min-width: 8.75rem;
  gap: 0 !important;
}

.tn-logo--wordmark {
  display: block;
  width: 8.5rem;
  height: 2.45rem;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 7px 16px hsl(0 0% 0% / 0.2));
}

.tn-auth-mark {
  width: min(10.5rem, 48vw) !important;
  height: auto !important;
  min-height: 4.35rem;
  overflow: visible !important;
  box-sizing: border-box;
  padding: 0.45rem 0.65rem;
  border: 1px solid hsl(var(--tn-line) / 0.9) !important;
  border-radius: 1rem !important;
  background: hsl(var(--tn-panel) / 0.82) !important;
  box-shadow: 0 8px 20px hsl(0 0% 0% / 0.14) !important;
}

.tn-logo--auth {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px hsl(0 0% 0% / 0.3));
}

/* The profile information block is injected by index.html after the build
 * mounts. Keep it visually attached to the settings stack without changing
 * its links or navigation behavior. */
#ts-profile-links-block {
  margin-top: 1rem;
  animation: tn-rise 360ms cubic-bezier(.22, 1, .36, 1) both;
}

#ts-info-links-label {
  padding: 0.85rem 0.75rem 0.35rem !important;
  color: hsl(215 15% 59%) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.64rem !important;
  letter-spacing: 0.12em !important;
}

#ts-info-links {
  gap: 0.35rem !important;
  padding: 0.35rem 0.5rem 0.65rem !important;
}

#ts-info-links a {
  color: hsl(210 25% 76%) !important;
  background: hsl(220 20% 15% / 0.44) !important;
  border: 1px solid hsl(var(--tn-line)) !important;
  border-radius: 0.7rem !important;
  padding: 0.72rem 0.85rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.8rem !important;
}

#ts-info-links a:hover,
#ts-info-links a:focus-visible {
  color: hsl(var(--tn-aqua)) !important;
  background: hsl(185 45% 14% / 0.55) !important;
  border-color: hsl(185 74% 56% / 0.35) !important;
}

#ts-info-links a::after {
  color: hsl(var(--tn-aqua)) !important;
  font-size: 1rem !important;
}

/* Compiled utility surfaces */
[class*="bg-background"],
[class*="bg-gray-50"],
[class*="bg-white"],
[class*="bg-card"] {
  background-color: hsl(var(--tn-panel)) !important;
}

[class*="bg-background"] {
  background:
    radial-gradient(800px 400px at 88% 0%, hsl(185 55% 25% / 0.11), transparent 70%),
    hsl(var(--tn-ink)) !important;
}

[class*="bg-sidebar"] {
  background: hsl(223 29% 9% / 0.96) !important;
  border-color: hsl(var(--tn-line)) !important;
}

[class*="bg-muted"],
[class*="bg-secondary"] {
  background-color: hsl(var(--tn-panel-raised)) !important;
}

[class~="bg-primary"] {
  background-color: hsl(var(--tn-aqua)) !important;
  color: hsl(var(--tn-ink)) !important;
}

[class*="text-foreground"],
[class*="text-gray-900"],
[class*="text-gray-800"],
[class*="text-white"] {
  color: hsl(var(--tn-copy)) !important;
}

[class*="text-muted-foreground"],
[class*="text-gray-500"],
[class*="text-gray-600"],
[class*="text-gray-400"] {
  color: hsl(var(--tn-muted)) !important;
}

[class~="text-primary"] {
  color: hsl(var(--tn-aqua)) !important;
}

[class*="text-destructive"],
[class*="text-red-"] {
  color: hsl(var(--tn-coral)) !important;
}

[class*="border-border"],
[class*="border-gray-"],
[class*="border-input"],
[class*="border-card"] {
  border-color: hsl(var(--tn-line)) !important;
}

/* Layout chrome */
header {
  background: hsl(222 27% 7% / 0.76) !important;
  border-color: hsl(var(--tn-line)) !important;
  backdrop-filter: blur(18px);
}

aside {
  box-shadow: 18px 0 42px hsl(222 30% 3% / 0.16);
}

aside a,
aside button {
  border: 1px solid transparent;
  border-radius: 0.75rem;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

aside a:hover,
aside button:hover {
  background: hsl(220 20% 15% / 0.78) !important;
  border-color: hsl(var(--tn-line));
  transform: translateX(2px);
}

aside a[class*="bg-sidebar-accent"],
aside a[aria-current="page"],
aside button[aria-pressed="true"] {
  background: linear-gradient(90deg, hsl(185 74% 56% / 0.16), hsl(185 74% 56% / 0.04)) !important;
  border-color: hsl(185 74% 56% / 0.23);
  color: hsl(var(--tn-aqua)) !important;
}

/* Cards, menus, sheets, and dialogs */
[class*="rounded-lg"],
[class*="rounded-xl"],
[class*="rounded-2xl"] {
  border-radius: 0.9rem;
}

[class*="shadow"],
[role="dialog"],
[data-radix-popper-content-wrapper] > div {
  box-shadow: 0 24px 70px hsl(222 35% 2% / 0.34) !important;
}

[role="dialog"],
[data-radix-popper-content-wrapper] > div,
[data-radix-menu-content],
[data-radix-select-content] {
  background: hsl(222 24% 12% / 0.98) !important;
  border: 1px solid hsl(var(--tn-line-strong)) !important;
  color: hsl(var(--tn-copy));
  backdrop-filter: blur(20px);
}

main > div > div,
main section,
main article {
  animation: tn-rise 420ms cubic-bezier(.22, 1, .36, 1) both;
}

main section:nth-child(2),
main article:nth-child(2) { animation-delay: 45ms; }
main section:nth-child(3),
main article:nth-child(3) { animation-delay: 90ms; }

/* Buttons: clear hierarchy without changing their semantics */
button,
[role="button"],
a[class~="bg-primary"],
a[class*="border"] {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, opacity 180ms ease;
}

button:hover:not(:disabled),
[role="button"]:hover,
a[class~="bg-primary"]:hover {
  transform: translateY(-1px);
}

button[class~="bg-primary"],
button[type="submit"],
button[class*="bg-violet"],
button[class*="bg-indigo"],
button.gradient-primary,
a.gradient-primary {
  background: hsl(var(--tn-aqua)) !important;
  border-color: hsl(var(--tn-aqua)) !important;
  color: hsl(var(--tn-ink)) !important;
  box-shadow: 0 8px 22px hsl(185 74% 56% / 0.16);
}

/* Keep branded gradient actions readable, including Generate QRIS and loading states. */
button.gradient-primary,
button.gradient-primary *,
a.gradient-primary,
a.gradient-primary * {
  color: #ffffff !important;
}

button.gradient-primary {
  background: linear-gradient(135deg, hsl(213 92% 58%), hsl(198 85% 48%)) !important;
  background-image: linear-gradient(135deg, hsl(213 92% 58%), hsl(198 85% 48%)) !important;
  border-color: transparent !important;
}

button[class~="bg-primary"]:hover,
button[type="submit"]:hover,
button.gradient-primary:hover,
a.gradient-primary:hover {
  background: hsl(185 78% 64%) !important;
  box-shadow: 0 10px 28px hsl(185 74% 56% / 0.24);
}

button.gradient-primary:hover,
a.gradient-primary:hover {
  background: linear-gradient(135deg, hsl(213 92% 65%), hsl(198 85% 56%)) !important;
  background-image: linear-gradient(135deg, hsl(213 92% 65%), hsl(198 85% 56%)) !important;
}

button[class~="variant-outline"],
button[class~="border"],
button[class~="bg-transparent"] {
  border-color: hsl(var(--tn-line-strong)) !important;
  background: hsl(222 24% 10% / 0.45) !important;
}

button[class~="variant-outline"]:hover,
button[class~="border"]:hover {
  background: hsl(220 20% 16% / 0.85) !important;
  border-color: hsl(185 74% 56% / 0.42) !important;
}

button:disabled {
  opacity: 0.48;
  box-shadow: none !important;
  transform: none !important;
}

button.gradient-primary:disabled {
  opacity: 0.68;
  background: linear-gradient(135deg, hsl(213 48% 48%), hsl(198 46% 40%)) !important;
  background-image: linear-gradient(135deg, hsl(213 48% 48%), hsl(198 46% 40%)) !important;
  color: #ffffff !important;
}

/* Inputs and selects should feel like instruments, not browser defaults */
input,
textarea,
select,
[role="combobox"] {
  min-height: 2.7rem;
  color: hsl(var(--tn-copy)) !important;
  background: hsl(222 28% 7% / 0.7) !important;
  border-color: hsl(var(--tn-line-strong)) !important;
  border-radius: 0.7rem !important;
  font-family: var(--font-sans);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

textarea { min-height: 6rem; }

input::placeholder,
textarea::placeholder {
  color: hsl(215 15% 46%) !important;
}

input:focus,
textarea:focus,
select:focus,
[role="combobox"]:focus,
[data-state="open"][role="combobox"] {
  outline: none !important;
  border-color: hsl(var(--tn-aqua)) !important;
  box-shadow: 0 0 0 3px hsl(185 74% 56% / 0.14) !important;
  background: hsl(222 28% 9% / 0.88) !important;
}

label {
  color: hsl(210 25% 76%);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Product tiles and dashboard metrics */
[class*="cursor-pointer"] {
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

[class*="cursor-pointer"]:hover {
  border-color: hsl(185 74% 56% / 0.38) !important;
  background-color: hsl(185 40% 15% / 0.34) !important;
  transform: translateY(-2px);
}

[class*="bg-emerald"],
[class*="text-emerald"] {
  --tw-emerald-tone: 153 54% 56%;
}

[class*="bg-emerald"] { background-color: hsl(153 54% 46% / 0.16) !important; }
[class*="text-emerald"] { color: hsl(153 54% 64%) !important; }
[class*="bg-yellow"],
[class*="bg-orange"] { background-color: hsl(40 94% 63% / 0.14) !important; }
[class*="text-yellow"],
[class*="text-orange"] { color: hsl(var(--tn-amber)) !important; }

table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid hsl(var(--tn-line));
  border-radius: 0.9rem;
}

thead {
  background: hsl(220 20% 15% / 0.7) !important;
}

th {
  color: hsl(215 15% 67%) !important;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

td { border-color: hsl(var(--tn-line)) !important; }

/* Toasts and focus visibility */
[data-sonner-toast],
[data-radix-toast-root] {
  background: hsl(222 24% 13% / 0.98) !important;
  border-color: hsl(var(--tn-line-strong)) !important;
  color: hsl(var(--tn-copy)) !important;
}

:where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid hsl(var(--tn-aqua)) !important;
  outline-offset: 3px;
}

@keyframes tn-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 767px) {
  body { background-color: hsl(var(--tn-ink)); }
  header { min-height: 3.75rem; }
  main { padding-bottom: 5.5rem !important; }
  aside {
    box-shadow: 0 -14px 32px hsl(222 35% 2% / 0.24);
  }
  main > div { max-width: 100% !important; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  [role="dialog"] {
    width: calc(100vw - 1.5rem) !important;
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
  }
}

/* Static information pages share the same visual language. */
body:has(.nav-inner) {
  --page-max: 72rem;
  background:
    radial-gradient(900px 520px at 82% -6%, hsl(185 50% 24% / 0.16), transparent 68%),
    radial-gradient(760px 520px at -8% 88%, hsl(40 65% 30% / 0.09), transparent 70%),
    hsl(var(--tn-ink));
}

body:has(.nav-inner) nav {
  background: hsl(222 27% 7% / 0.78) !important;
  border-color: hsl(var(--tn-line)) !important;
}

body:has(.nav-inner) .nav-inner {
  width: min(100%, var(--page-max));
  height: 4.5rem;
}

body:has(.nav-inner) .nav-brand,
body:has(.nav-inner) .hero h1 span,
body:has(.nav-inner) .section-title span,
body:has(.nav-inner) .section h2 span {
  background: linear-gradient(110deg, hsl(var(--tn-aqua)), hsl(154 54% 66%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

body:has(.nav-inner) .nav-brand {
  display: inline-flex;
  align-items: center;
  width: 8.5rem;
  height: 2.7rem;
  font-family: var(--font-display);
  letter-spacing: -0.045em;
}

body:has(.nav-inner) .nav-brand-logo {
  display: block;
  width: 8.25rem;
  height: 2.5rem;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 7px 16px hsl(0 0% 0% / 0.22));
}

body:has(.nav-inner) .nav-links a:hover,
body:has(.nav-inner) .nav-links a.active {
  color: hsl(var(--tn-aqua));
  background: hsl(185 74% 56% / 0.09);
}

body:has(.nav-inner) .nav-cta {
  background: hsl(var(--tn-aqua)) !important;
  color: hsl(var(--tn-ink)) !important;
  box-shadow: 0 8px 22px hsl(185 74% 56% / 0.16);
}

body:has(.nav-inner) .hero {
  position: relative;
  padding: clamp(4.5rem, 10vw, 7.5rem) 1.5rem 4rem;
}

body:has(.nav-inner) .hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(23rem, 62vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(var(--tn-aqua) / 0.55), transparent);
  transform: translateX(-50%);
}

body:has(.nav-inner) .hero-badge {
  background: hsl(185 74% 56% / 0.09);
  border-color: hsl(185 74% 56% / 0.28);
  color: hsl(var(--tn-aqua));
}

body:has(.nav-inner) .hero h1,
body:has(.nav-inner) .section-title,
body:has(.nav-inner) .section h2,
body:has(.nav-inner) .card h3,
body:has(.nav-inner) .step-body h4 {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
}

body:has(.nav-inner) .hero p,
body:has(.nav-inner) .section p,
body:has(.nav-inner) .section-subtitle,
body:has(.nav-inner) .card p,
body:has(.nav-inner) .step-body p {
  color: hsl(var(--tn-muted));
}

body:has(.nav-inner) .content {
  max-width: var(--page-max);
}

body:has(.nav-inner) .card,
body:has(.nav-inner) .step,
body:has(.nav-inner) .contact-card,
body:has(.nav-inner) .contact-box {
  background: linear-gradient(145deg, hsl(222 24% 12% / 0.92), hsl(222 24% 9% / 0.92));
  border-color: hsl(var(--tn-line));
  box-shadow: 0 16px 40px hsl(222 35% 2% / 0.14);
  transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease;
}

body:has(.nav-inner) .card:hover,
body:has(.nav-inner) .step:hover,
body:has(.nav-inner) .contact-card:hover {
  border-color: hsl(185 74% 56% / 0.3);
  transform: translateY(-3px);
}

body:has(.nav-inner) .card-icon,
body:has(.nav-inner) .step-num,
body:has(.nav-inner) .contact-icon {
  background: hsl(185 74% 56% / 0.12);
  color: hsl(var(--tn-aqua));
}

body:has(.nav-inner) .step-num {
  border: 1px solid hsl(185 74% 56% / 0.24);
  font-family: var(--font-mono);
}

body:has(.nav-inner) .toc,
body:has(.nav-inner) .highlight-box {
  background: hsl(185 45% 14% / 0.38);
  border-color: hsl(185 74% 56% / 0.22);
}

body:has(.nav-inner) .toc h3,
body:has(.nav-inner) .toc a:hover,
body:has(.nav-inner) .contact-box a,
body:has(.nav-inner) .contact-value a {
  color: hsl(var(--tn-aqua));
}

body:has(.nav-inner) .section h2 {
  border-color: hsl(var(--tn-line));
}

body:has(.nav-inner) .section ul li::before {
  background: hsl(var(--tn-aqua));
}

body:has(.nav-inner) .warning-box {
  background: hsl(40 70% 15% / 0.28);
  border-color: hsl(40 94% 63% / 0.25);
}

body:has(.nav-inner) .warning-box h4,
body:has(.nav-inner) .warning-box p {
  color: hsl(var(--tn-amber)) !important;
}

body:has(.nav-inner) footer {
  border-color: hsl(var(--tn-line));
}

body:has(.nav-inner) a:focus-visible {
  outline: 2px solid hsl(var(--tn-aqua));
  outline-offset: 4px;
}

@media (max-width: 640px) {
  body:has(.nav-inner) .hero { padding-top: 4rem; }
  body:has(.nav-inner) .hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
  body:has(.nav-inner) .content { padding-inline: 1rem; }
  body:has(.nav-inner) .cards-grid { grid-template-columns: 1fr; }
  body:has(.nav-inner) .step { padding: 1.1rem; }
}

/*
 * Light mode contrast pass
 * The compiled app can switch theme classes on <html>. The visual layer above
 * is intentionally dark-first, so light mode needs explicit surface and text
 * values instead of inheriting the dark console palette.
 *
 * Exclude the standalone information pages: they have their own intentionally
 * dark presentation and are identified by their .nav-inner element.
 */
html:not(.dark):not(:has(.nav-inner)) {
  --tn-ink: 220 26% 97%;
  --tn-panel: 0 0% 100%;
  --tn-panel-raised: 220 24% 94%;
  --tn-line: 220 16% 84%;
  --tn-line-strong: 220 16% 70%;
  --tn-copy: 222 28% 16%;
  --tn-muted: 220 13% 42%;
  --tn-aqua: 188 72% 32%;
  --tn-aqua-deep: 188 75% 25%;
  --tn-amber: 36 88% 40%;
  --tn-coral: 12 74% 48%;
  color-scheme: light;
  background: hsl(var(--tn-ink));
}

html:not(.dark):not(:has(.nav-inner)) body {
  color: hsl(var(--tn-copy));
  background:
    radial-gradient(900px 500px at 85% -8%, hsl(188 72% 42% / 0.1), transparent 68%),
    radial-gradient(700px 480px at -10% 100%, hsl(36 88% 48% / 0.07), transparent 68%),
    hsl(var(--tn-ink));
}

html:not(.dark):not(:has(.nav-inner)) body::before {
  opacity: 0.012;
  mix-blend-mode: multiply;
}

html:not(.dark):not(:has(.nav-inner)) [class*="bg-background"] {
  background:
    radial-gradient(800px 400px at 88% 0%, hsl(188 72% 42% / 0.08), transparent 70%),
    hsl(var(--tn-ink)) !important;
}

html:not(.dark):not(:has(.nav-inner)) [class*="bg-white"],
html:not(.dark):not(:has(.nav-inner)) [class*="bg-card"] {
  background-color: hsl(var(--tn-panel)) !important;
}

html:not(.dark):not(:has(.nav-inner)) [class*="bg-gray-50"],
html:not(.dark):not(:has(.nav-inner)) [class*="bg-sidebar"] {
  background-color: hsl(220 24% 95%) !important;
  border-color: hsl(var(--tn-line)) !important;
}

html:not(.dark):not(:has(.nav-inner)) [class*="bg-muted"],
html:not(.dark):not(:has(.nav-inner)) [class*="bg-secondary"] {
  background-color: hsl(var(--tn-panel-raised)) !important;
}

html:not(.dark):not(:has(.nav-inner)) [class*="text-foreground"],
html:not(.dark):not(:has(.nav-inner)) [class*="text-white"],
html:not(.dark):not(:has(.nav-inner)) [class*="text-gray-900"],
html:not(.dark):not(:has(.nav-inner)) [class*="text-gray-800"] {
  color: hsl(var(--tn-copy)) !important;
}

html:not(.dark):not(:has(.nav-inner)) [class*="text-muted-foreground"],
html:not(.dark):not(:has(.nav-inner)) [class*="text-gray-500"],
html:not(.dark):not(:has(.nav-inner)) [class*="text-gray-600"],
html:not(.dark):not(:has(.nav-inner)) [class*="text-gray-400"] {
  color: hsl(var(--tn-muted)) !important;
}

html:not(.dark):not(:has(.nav-inner)) [class~="text-primary"] {
  color: hsl(var(--tn-aqua-deep)) !important;
}

html:not(.dark):not(:has(.nav-inner)) [class*="border-border"],
html:not(.dark):not(:has(.nav-inner)) [class*="border-gray-"],
html:not(.dark):not(:has(.nav-inner)) [class*="border-input"],
html:not(.dark):not(:has(.nav-inner)) [class*="border-card"],
html:not(.dark):not(:has(.nav-inner)) [class*="border-white"] {
  border-color: hsl(var(--tn-line)) !important;
}

html:not(.dark):not(:has(.nav-inner)) header {
  background: hsl(0 0% 100% / 0.84) !important;
  border-color: hsl(var(--tn-line)) !important;
  color: hsl(var(--tn-copy)) !important;
}

html:not(.dark):not(:has(.nav-inner)) aside {
  background: hsl(220 24% 96% / 0.98) !important;
  color: hsl(var(--tn-copy));
  box-shadow: 18px 0 42px hsl(222 30% 15% / 0.1);
}

html:not(.dark):not(:has(.nav-inner)) aside a:hover,
html:not(.dark):not(:has(.nav-inner)) aside button:hover {
  background: hsl(188 72% 32% / 0.08) !important;
  border-color: hsl(188 72% 32% / 0.2);
}

html:not(.dark):not(:has(.nav-inner)) aside a[class*="bg-sidebar-accent"],
html:not(.dark):not(:has(.nav-inner)) aside a[aria-current="page"],
html:not(.dark):not(:has(.nav-inner)) aside button[aria-pressed="true"] {
  background: linear-gradient(90deg, hsl(188 72% 32% / 0.14), hsl(188 72% 32% / 0.04)) !important;
  border-color: hsl(188 72% 32% / 0.26);
  color: hsl(var(--tn-aqua-deep)) !important;
}

html:not(.dark):not(:has(.nav-inner)) [role="dialog"],
html:not(.dark):not(:has(.nav-inner)) [data-radix-popper-content-wrapper] > div,
html:not(.dark):not(:has(.nav-inner)) [data-radix-menu-content],
html:not(.dark):not(:has(.nav-inner)) [data-radix-select-content] {
  background: hsl(0 0% 100% / 0.98) !important;
  border-color: hsl(var(--tn-line-strong)) !important;
  color: hsl(var(--tn-copy)) !important;
  box-shadow: 0 24px 70px hsl(222 35% 20% / 0.16) !important;
}

html:not(.dark):not(:has(.nav-inner)) button[class~="bg-primary"],
html:not(.dark):not(:has(.nav-inner)) button[type="submit"],
html:not(.dark):not(:has(.nav-inner)) button[class*="bg-violet"],
html:not(.dark):not(:has(.nav-inner)) button[class*="bg-indigo"],
html:not(.dark):not(:has(.nav-inner)) button.gradient-primary,
html:not(.dark):not(:has(.nav-inner)) a.gradient-primary {
  background: hsl(var(--tn-aqua)) !important;
  border-color: hsl(var(--tn-aqua)) !important;
  color: hsl(0 0% 100%) !important;
}

html:not(.dark):not(:has(.nav-inner)) button.gradient-primary,
html:not(.dark):not(:has(.nav-inner)) button.gradient-primary *,
html:not(.dark):not(:has(.nav-inner)) a.gradient-primary,
html:not(.dark):not(:has(.nav-inner)) a.gradient-primary * {
  color: #ffffff !important;
}

html:not(.dark):not(:has(.nav-inner)) button.gradient-primary,
html:not(.dark):not(:has(.nav-inner)) a.gradient-primary {
  background: linear-gradient(135deg, hsl(213 92% 52%), hsl(198 85% 43%)) !important;
  background-image: linear-gradient(135deg, hsl(213 92% 52%), hsl(198 85% 43%)) !important;
  border-color: transparent !important;
}

html:not(.dark):not(:has(.nav-inner)) button.gradient-primary:hover,
html:not(.dark):not(:has(.nav-inner)) a.gradient-primary:hover {
  background: linear-gradient(135deg, hsl(213 92% 59%), hsl(198 85% 51%)) !important;
  background-image: linear-gradient(135deg, hsl(213 92% 59%), hsl(198 85% 51%)) !important;
}

html:not(.dark):not(:has(.nav-inner)) button.gradient-primary:disabled {
  opacity: 0.68;
  background: linear-gradient(135deg, hsl(213 48% 44%), hsl(198 46% 36%)) !important;
  background-image: linear-gradient(135deg, hsl(213 48% 44%), hsl(198 46% 36%)) !important;
  color: #ffffff !important;
}

/* Last-resort blue action color for every built confirmation/action button. */
body button.gradient-primary,
body button[class*="gradient-primary"],
body a.gradient-primary,
body a[class*="gradient-primary"] {
  background: linear-gradient(135deg, hsl(213 92% 58%), hsl(198 85% 48%)) !important;
  background-image: linear-gradient(135deg, hsl(213 92% 58%), hsl(198 85% 48%)) !important;
  background-color: hsl(213 92% 58%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

body button.gradient-primary:hover,
body button[class*="gradient-primary"]:hover,
body a.gradient-primary:hover,
body a[class*="gradient-primary"]:hover {
  background: linear-gradient(135deg, hsl(213 92% 65%), hsl(198 85% 56%)) !important;
  background-image: linear-gradient(135deg, hsl(213 92% 65%), hsl(198 85% 56%)) !important;
  background-color: hsl(213 92% 65%) !important;
}

body button.gradient-primary:disabled,
body button[class*="gradient-primary"]:disabled {
  background: linear-gradient(135deg, hsl(213 48% 48%), hsl(198 46% 40%)) !important;
  background-image: linear-gradient(135deg, hsl(213 48% 48%), hsl(198 46% 40%)) !important;
  background-color: hsl(213 48% 48%) !important;
}

html:not(.dark):not(:has(.nav-inner)) button[class~="variant-outline"],
html:not(.dark):not(:has(.nav-inner)) button[class~="border"],
html:not(.dark):not(:has(.nav-inner)) button[class~="bg-transparent"] {
  background: hsl(0 0% 100% / 0.78) !important;
  border-color: hsl(var(--tn-line-strong)) !important;
  color: hsl(var(--tn-copy)) !important;
}

html:not(.dark):not(:has(.nav-inner)) button[class~="variant-outline"]:hover,
html:not(.dark):not(:has(.nav-inner)) button[class~="border"]:hover {
  background: hsl(188 72% 32% / 0.08) !important;
  border-color: hsl(var(--tn-aqua)) !important;
}

html:not(.dark):not(:has(.nav-inner)) input,
html:not(.dark):not(:has(.nav-inner)) textarea,
html:not(.dark):not(:has(.nav-inner)) select,
html:not(.dark):not(:has(.nav-inner)) [role="combobox"] {
  color: hsl(var(--tn-copy)) !important;
  background: hsl(0 0% 100% / 0.92) !important;
  border-color: hsl(var(--tn-line-strong)) !important;
}

html:not(.dark):not(:has(.nav-inner)) input::placeholder,
html:not(.dark):not(:has(.nav-inner)) textarea::placeholder {
  color: hsl(220 13% 48%) !important;
}

html:not(.dark):not(:has(.nav-inner)) input:focus,
html:not(.dark):not(:has(.nav-inner)) textarea:focus,
html:not(.dark):not(:has(.nav-inner)) select:focus,
html:not(.dark):not(:has(.nav-inner)) [role="combobox"]:focus,
html:not(.dark):not(:has(.nav-inner)) [data-state="open"][role="combobox"] {
  background: hsl(0 0% 100%) !important;
  border-color: hsl(var(--tn-aqua)) !important;
  box-shadow: 0 0 0 3px hsl(188 72% 32% / 0.16) !important;
}

html:not(.dark):not(:has(.nav-inner)) label {
  color: hsl(222 28% 22%) !important;
}

html:not(.dark):not(:has(.nav-inner)) [class*="cursor-pointer"]:hover {
  background-color: hsl(188 72% 32% / 0.07) !important;
  border-color: hsl(188 72% 32% / 0.38) !important;
}

html:not(.dark):not(:has(.nav-inner)) [class*="text-emerald"] {
  color: hsl(153 54% 32%) !important;
}

html:not(.dark):not(:has(.nav-inner)) [class*="text-yellow"],
html:not(.dark):not(:has(.nav-inner)) [class*="text-orange"] {
  color: hsl(36 88% 32%) !important;
}

html:not(.dark):not(:has(.nav-inner)) thead {
  background: hsl(220 24% 94% / 0.92) !important;
}

html:not(.dark):not(:has(.nav-inner)) th {
  color: hsl(220 13% 34%) !important;
}

html:not(.dark):not(:has(.nav-inner)) [data-sonner-toast],
html:not(.dark):not(:has(.nav-inner)) [data-radix-toast-root] {
  background: hsl(0 0% 100% / 0.98) !important;
  border-color: hsl(var(--tn-line-strong)) !important;
  color: hsl(var(--tn-copy)) !important;
}

/*
 * Final contrast safety pass
 * Keep the compiled UI readable when the theme class changes. These rules
 * intentionally use the same tokens as the rest of the visual layer so
 * buttons, menus, inputs, and injected panels do not inherit invisible text.
 */
html.light {
  --tn-ink: 220 26% 97%;
  --tn-panel: 0 0% 100%;
  --tn-panel-raised: 220 24% 94%;
  --tn-line: 220 16% 84%;
  --tn-line-strong: 220 16% 70%;
  --tn-copy: 222 28% 16%;
  --tn-muted: 220 13% 42%;
  --tn-aqua: 188 72% 32%;
  --tn-aqua-deep: 188 75% 25%;
  --tn-amber: 36 88% 40%;
  --tn-coral: 12 74% 48%;
  color-scheme: light;
  background: hsl(var(--tn-ink));
}

html.dark {
  color-scheme: dark;
}

html.light body {
  color: hsl(var(--tn-copy));
  background:
    radial-gradient(900px 500px at 85% -8%, hsl(188 72% 42% / 0.1), transparent 68%),
    radial-gradient(700px 480px at -10% 100%, hsl(36 88% 48% / 0.07), transparent 68%),
    hsl(var(--tn-ink));
}

html.light body [class*="bg-background"] {
  background: hsl(var(--tn-ink)) !important;
}

html.light body [class*="bg-card"],
html.light body [class*="bg-white"] {
  background-color: hsl(var(--tn-panel)) !important;
}

html.light body [class*="bg-muted"],
html.light body [class*="bg-secondary"] {
  background-color: hsl(var(--tn-panel-raised)) !important;
}

html.light body [class*="text-foreground"],
html.light body [class*="text-white"],
html.light body [class*="text-black"],
html.light body [class*="text-gray-900"],
html.light body [class*="text-gray-800"] {
  color: hsl(var(--tn-copy)) !important;
}

html.light body [class*="text-muted-foreground"],
html.light body [class*="text-gray-500"],
html.light body [class*="text-gray-600"],
html.light body [class*="text-gray-400"] {
  color: hsl(var(--tn-muted)) !important;
}

html.light body [class*="border-border"],
html.light body [class*="border-gray-"],
html.light body [class*="border-input"],
html.light body [class*="border-card"],
html.light body [class*="border-white"] {
  border-color: hsl(var(--tn-line)) !important;
}

html.light body header,
html.light body aside,
html.light body nav {
  background: hsl(var(--tn-panel) / 0.94) !important;
  color: hsl(var(--tn-copy)) !important;
  border-color: hsl(var(--tn-line)) !important;
}

html.light body [role="dialog"],
html.light body [data-radix-popper-content-wrapper] > div,
html.light body [data-radix-menu-content],
html.light body [data-radix-select-content] {
  background: hsl(var(--tn-panel) / 0.98) !important;
  border-color: hsl(var(--tn-line-strong)) !important;
  color: hsl(var(--tn-copy)) !important;
  box-shadow: 0 24px 70px hsl(222 35% 20% / 0.16) !important;
}

html.light body input,
html.light body textarea,
html.light body select,
html.light body [role="combobox"] {
  color: hsl(var(--tn-copy)) !important;
  background: hsl(var(--tn-panel)) !important;
  border-color: hsl(var(--tn-line-strong)) !important;
}

html.light body input::placeholder,
html.light body textarea::placeholder {
  color: hsl(var(--tn-muted)) !important;
  opacity: 0.9;
}

html.light body select option {
  color: hsl(var(--tn-copy)) !important;
  background: hsl(var(--tn-panel)) !important;
}

html.light body button:not([class*="gradient-primary"]):not([class*="bg-primary"]):not([class*="bg-violet"]):not([class*="bg-indigo"]),
html.light body a:not([class*="gradient-primary"]) {
  color: hsl(var(--tn-copy));
}

html.light body button[class*="text-white"]:not([class*="gradient-primary"]),
html.light body a[class*="text-white"]:not([class*="gradient-primary"]) {
  color: hsl(var(--tn-copy)) !important;
}

html.light body button[class*="text-black"],
html.light body a[class*="text-black"] {
  color: hsl(var(--tn-copy)) !important;
}

html.light body button[class*="bg-primary"],
html.light body button[type="submit"]:not([class*="gradient-primary"]) {
  color: hsl(var(--tn-ink)) !important;
}

html.light body button[class*="gradient-primary"],
html.light body button[class*="gradient-primary"] *,
html.light body a[class*="gradient-primary"],
html.light body a[class*="gradient-primary"] * {
  color: #ffffff !important;
}

html.dark body button:not([class*="gradient-primary"]):not([class*="bg-primary"]):not([class*="bg-violet"]):not([class*="bg-indigo"]),
html.dark body a:not([class*="gradient-primary"]) {
  color: hsl(var(--tn-copy));
}

html.dark body button[class*="text-black"],
html.dark body a[class*="text-black"] {
  color: hsl(var(--tn-copy)) !important;
}

html.dark body button[class*="bg-primary"],
html.dark body button[type="submit"]:not([class*="gradient-primary"]) {
  color: hsl(var(--tn-ink)) !important;
}

html.dark body button[class*="gradient-primary"],
html.dark body button[class*="gradient-primary"] *,
html.dark body a[class*="gradient-primary"],
html.dark body a[class*="gradient-primary"] * {
  color: #ffffff !important;
}

html.light body button[class*="border"],
html.light body button[class*="bg-transparent"] {
  background: hsl(var(--tn-panel) / 0.86) !important;
  border-color: hsl(var(--tn-line-strong)) !important;
}

html.dark body button[class*="border"],
html.dark body button[class*="bg-transparent"] {
  background: hsl(var(--tn-panel-raised) / 0.72) !important;
  border-color: hsl(var(--tn-line-strong)) !important;
}

html.light body [data-sonner-toast],
html.light body [data-radix-toast-root] {
  background: hsl(var(--tn-panel) / 0.98) !important;
  border-color: hsl(var(--tn-line-strong)) !important;
  color: hsl(var(--tn-copy)) !important;
}

/* Extend the home blue hero behind the balance card without moving layout. */
.tn-dashboard-hero {
  isolation: isolate;
}
.tn-dashboard-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: -4.25rem;
  pointer-events: none;
  border-radius: 0 0 2rem 2rem;
  background: linear-gradient(135deg, #0e7490 0%, #0369a1 55%, #1d4ed8 100%);
}
.tn-dashboard-hero > .relative {
  z-index: 1;
}
html.light .tn-dashboard-hero::after,
html:not(.dark) .tn-dashboard-hero::after {
  background: linear-gradient(135deg, #0e7490 0%, #0369a1 55%, #1d4ed8 100%);
}