/*
 * Unified Payment visual language — Aurora Ledger
 * Deep indigo carries operational trust; cyan is reserved for live/healthy state.
 * This file only changes presentation and deliberately contains no business rules.
 */
:root {
  --brand: #3659d9;
  --brand-strong: #243da8;
  --brand-soft: #edf1ff;
  --primary: #3659d9;
  --primary-dark: #243da8;
  --primary-soft: #edf1ff;
  --ink: #17213b;
  --muted: #6b7892;
  --line: #dce4f1;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --canvas: #f2f5fa;
  --bg: #f2f5fa;
  --card: #ffffff;
  --panel: #ffffff;
  --panel-soft: #f6f8fc;
  --sidebar: #11182f;
  --sidebar-raised: #1a2547;
  --sidebar-text: #b8c2db;
  --nav: #11182f;
  --nav-soft: #202c52;
  --teal: #079a9a;
  --teal-soft: #e7f8f7;
  --green: #168677;
  --green-soft: #e8f6f2;
  --amber: #b87820;
  --amber-soft: #fff5e4;
  --danger: #cf4d63;
  --danger-soft: #fff0f3;
  --red: #cf4d63;
  --blue-soft: #edf1ff;
  --shadow: 0 10px 32px rgba(28, 42, 82, .065);
}

body {
  background-color: var(--canvas, var(--bg));
  background-image:
    radial-gradient(circle at 9% 4%, color-mix(in srgb, var(--primary, var(--brand)) 5%, transparent), transparent 25rem),
    radial-gradient(circle at 94% 82%, rgba(7, 154, 154, .045), transparent 30rem);
  background-attachment: fixed;
}

.sidebar,
.side {
  background:
    radial-gradient(circle at 15% -4%, rgba(76, 102, 221, .32), transparent 15rem),
    radial-gradient(circle at 110% 55%, rgba(0, 172, 170, .13), transparent 18rem),
    linear-gradient(178deg, #131b37 0%, #10162b 54%, #0c1224 100%);
}

.sidebar::after,
.side::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(83, 219, 213, .55), transparent);
}

.nav-item,
.nav,
.side nav button { transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.nav-item:hover,
.nav:hover,
.side nav button:hover { background: rgba(255, 255, 255, .065); }
.nav-item.active,
.nav.active,
.side nav button.active {
  color: #fff;
  background: linear-gradient(125deg, #405fd4, #3048ac 72%, #2d489c);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(18, 28, 73, .3);
}
.nav-item.active::before,
.nav.active::before { background: #52d5cf; }

.topbar,
.top {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 1px 0 rgba(36, 55, 104, .025);
  backdrop-filter: blur(18px) saturate(1.15);
}

.card,
.metric-card,
.table-wrap,
.telegram-metrics article {
  min-width: 0;
  border-color: var(--line);
  background: var(--surface, var(--panel));
  box-shadow: var(--shadow);
}
.dashboard-grid,
.direction-grid { min-width: 0; }
.dashboard-grid > *,
.direction-grid > * { min-width: 0; max-width: 100%; }
.dashboard-grid > .card { overflow-x: auto; }
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; }
.card:hover { border-color: color-mix(in srgb, var(--brand) 24%, var(--line)); }
thead th,
th { background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface)); }
tbody tr:hover td,
tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 44%, var(--surface)); }

.btn:not(.secondary):not(.ghost):not(.danger),
.button.primary {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #4064df, #304cc2);
  box-shadow: 0 7px 18px rgba(47, 75, 190, .2);
}
.btn:not(.secondary):not(.ghost):not(.danger):hover,
.button.primary:hover { background: linear-gradient(135deg, #304fc7, #243da8); }

.brand-mark,
.mark {
  background: linear-gradient(145deg, #4a6ce5, #2d47b7 68%, #1e8fa7);
  box-shadow: 0 10px 25px rgba(37, 61, 164, .25);
}

.merchant-welcome,
.hero-card,
.settlement-hero,
.metric-card.accent,
.formula,
.telegram-admin-hero,
.amount-panel {
  background:
    radial-gradient(circle at 88% 10%, rgba(83, 219, 213, .24), transparent 32%),
    linear-gradient(128deg, #172550 0%, #3659d9 58%, #147f9f 112%);
}

.metric-card.accent { border-color: rgba(73, 105, 226, .7); }
.live-dot { background: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 14%, transparent); }
.switch.on,
.setting-switch.on { background: linear-gradient(135deg, #0aa39d, #168677); }

.login-page,
.login-view,
.login {
  isolation: isolate;
  background:
    linear-gradient(rgba(112, 137, 255, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 137, 255, .065) 1px, transparent 1px),
    radial-gradient(circle at 17% 13%, rgba(74, 108, 229, .52), transparent 29rem),
    radial-gradient(circle at 86% 78%, rgba(8, 170, 166, .28), transparent 31rem),
    linear-gradient(145deg, #091126 0%, #111b3a 48%, #0c1930 100%) !important;
  background-size: 38px 38px, 38px 38px, auto, auto, auto !important;
}
.login-page::before,
.login-view::before,
.login::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(5, 12, 31, .18), transparent 48%, rgba(3, 18, 32, .14));
}
.login-backdrop { display: none !important; }
.login-card {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.68) !important;
  background: rgba(253, 254, 255, .97) !important;
  box-shadow: 0 30px 90px rgba(2, 8, 28, .48), 0 0 0 1px rgba(75, 105, 222, .08) !important;
  backdrop-filter: blur(18px);
}

.cashier-card { border-color: #dce4f1; box-shadow: 0 26px 72px rgba(20, 35, 82, .13), 0 4px 14px rgba(20, 35, 82, .05); }
.guide-panel { background: #f7f9fd; }
.ambient-one { background: radial-gradient(circle, rgba(91, 117, 227, .2), transparent 68%); }
.ambient-two { background: radial-gradient(circle, rgba(7, 154, 154, .16), transparent 68%); }

.api-hero,
.hero {
  background:
    radial-gradient(circle at 82% 4%, rgba(77, 220, 211, .28), transparent 27%),
    linear-gradient(135deg, #111a38, #304db2 72%, #187b98);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}