:root {
  --app-bg: #03070d;
  --app-surface: #07131b;
  --app-surface-2: #0b1822;
  --app-surface-3: #0e1d29;
  --app-line: #1f3848;
  --app-line-strong: rgba(37, 223, 255, 0.34);
  --app-text: #f2f7fb;
  --app-muted: #91a3b3;
  --app-cyan: #25dfff;
  --app-lime: #8dff3f;
}

html,
body {
  background-color: var(--app-bg) !important;
  background-image:
    radial-gradient(900px 560px at 14% 12%, rgba(37, 223, 255, 0.12), transparent 62%),
    radial-gradient(760px 520px at 88% 8%, rgba(141, 255, 63, 0.07), transparent 60%),
    radial-gradient(720px 520px at 66% 76%, rgba(35, 120, 255, 0.07), transparent 66%),
    linear-gradient(180deg, #02050a, #050b12 52%, #03070d) !important;
  background-attachment: fixed !important;
}

html.auth-pending,
html.auth-pending body,
html.auth-config-error,
html.auth-config-error body,
body.auth-pending {
  background-color: var(--app-bg) !important;
  background-image:
    radial-gradient(900px 560px at 14% 12%, rgba(37, 223, 255, 0.12), transparent 62%),
    radial-gradient(760px 520px at 88% 8%, rgba(141, 255, 63, 0.07), transparent 60%),
    linear-gradient(180deg, #02050a, #050b12 52%, #03070d) !important;
}

body[data-auth="in"],
body[data-auth="company"] {
  --bg: var(--app-bg);
  --surface: var(--app-surface);
  --surface-soft: var(--app-surface-2);
  --ink: var(--app-text);
  --muted: var(--app-muted);
  --line: var(--app-line);
  --shadow: 0 22px 46px rgba(0, 0, 0, 0.34);
}

body[data-auth="in"] main#appContainer,
body[data-auth="company"] main#appContainer {
  background:
    linear-gradient(rgba(73, 137, 188, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 137, 188, 0.028) 1px, transparent 1px),
    radial-gradient(900px 560px at 14% 12%, rgba(37, 223, 255, 0.09), transparent 62%),
    radial-gradient(760px 520px at 88% 8%, rgba(141, 255, 63, 0.05), transparent 60%),
    linear-gradient(180deg, #02050a, #050b12 52%, #03070d) !important;
  background-size: 38px 38px, 38px 38px, auto, auto, auto !important;
}

body[data-auth="in"] .workspace,
body[data-auth="company"] .workspace {
  background: transparent !important;
}

body[data-auth="in"] .app-header,
body[data-auth="company"] .app-header {
  border-bottom-color: #1b3140 !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(37, 223, 255, 0.07), transparent 30%),
    linear-gradient(180deg, rgba(10, 22, 31, 0.98), rgba(5, 13, 20, 0.99)) !important;
}

body[data-auth="in"] .brand-area,
body[data-auth="company"] .brand-area {
  border-right-color: #1d3342 !important;
}

body[data-auth="in"] .side-panel,
body[data-auth="company"] .side-panel {
  border-right-color: #1d3342 !important;
  background: linear-gradient(180deg, rgba(10, 21, 30, 0.97), rgba(5, 14, 21, 0.99)) !important;
  box-shadow: inset -1px 0 0 rgba(37, 223, 255, 0.025) !important;
}

body[data-auth="in"] .nav-step,
body[data-auth="company"] .nav-step {
  border-color: #1d3342 !important;
  background: rgba(9, 20, 29, 0.84) !important;
  color: var(--app-text) !important;
}

body[data-auth="in"] .nav-step:hover,
body[data-auth="company"] .nav-step:hover {
  border-color: var(--app-line-strong) !important;
  background: rgba(13, 30, 42, 0.94) !important;
}

body[data-auth="in"] .nav-step.active,
body[data-auth="company"] .nav-step.active {
  border-color: rgba(37, 223, 255, 0.54) !important;
  background: linear-gradient(135deg, rgba(12, 38, 52, 0.98), rgba(6, 21, 31, 0.98)) !important;
  box-shadow: inset 3px 0 0 var(--app-cyan) !important;
}

body[data-auth="in"] .side-status,
body[data-auth="company"] .side-status {
  border-color: var(--app-line) !important;
  background: rgba(8, 17, 25, 0.92) !important;
}

body[data-auth="in"] .status-ring,
body[data-auth="company"] .status-ring {
  background:
    radial-gradient(circle at center, #08131b 0 52%, transparent 53%),
    conic-gradient(#35ddff 0 var(--side-progress), #163040 var(--side-progress) 100%) !important;
}

body[data-auth="in"] .status-ring[data-status="ok"],
body[data-auth="company"] .status-ring[data-status="ok"] {
  background:
    radial-gradient(circle at center, #08131b 0 52%, transparent 53%),
    conic-gradient(#8dff3f 0 var(--side-progress), #163040 var(--side-progress) 100%) !important;
}

body[data-auth="in"] .status-ring[data-status="warn"],
body[data-auth="company"] .status-ring[data-status="warn"] {
  background:
    radial-gradient(circle at center, #08131b 0 52%, transparent 53%),
    conic-gradient(#ffb82e 0 var(--side-progress), #163040 var(--side-progress) 100%) !important;
}

body[data-auth="in"] .metric,
body[data-auth="company"] .metric {
  border-color: var(--app-line) !important;
  background: linear-gradient(145deg, #0d1a24 0%, #08131b 100%) !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24) !important;
}

body[data-auth="in"] .metric:first-child,
body[data-auth="company"] .metric:first-child {
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24), inset 0 -2px 0 var(--app-cyan) !important;
}

body[data-auth="in"] .metric span,
body[data-auth="company"] .metric span,
body[data-auth="in"] .network-card small,
body[data-auth="company"] .network-card small,
body[data-auth="in"] .brand-total-lines span,
body[data-auth="company"] .brand-total-lines span {
  color: var(--app-muted) !important;
}

body[data-auth="in"] .metric strong,
body[data-auth="company"] .metric strong,
body[data-auth="in"] .network-card strong,
body[data-auth="company"] .network-card strong,
body[data-auth="in"] .network-card span,
body[data-auth="company"] .network-card span,
body[data-auth="in"] .brand-total-lines strong,
body[data-auth="company"] .brand-total-lines strong,
body[data-auth="in"] .section-heading h2,
body[data-auth="company"] .section-heading h2 {
  color: var(--app-text) !important;
}

body[data-auth="in"] .work-panel,
body[data-auth="company"] .work-panel {
  border-color: #1f3544 !important;
  background: linear-gradient(180deg, rgba(10, 20, 28, 0.985), rgba(6, 14, 21, 0.985)) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24) !important;
}

body[data-auth="in"] .network-card,
body[data-auth="company"] .network-card,
body[data-auth="in"] .output-summary div,
body[data-auth="company"] .output-summary div,
body[data-auth="in"] .page-total-summary div,
body[data-auth="company"] .page-total-summary div,
body[data-auth="in"] .budget-chart-row,
body[data-auth="company"] .budget-chart-row,
body[data-auth="in"] .approval-workflow-card,
body[data-auth="company"] .approval-workflow-card,
body[data-auth="in"] .notice-box,
body[data-auth="company"] .notice-box,
body[data-auth="in"] .approval-status-card,
body[data-auth="company"] .approval-status-card {
  border-color: var(--app-line) !important;
  background: linear-gradient(145deg, #0d1a24 0%, #08131b 100%) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16) !important;
}

body[data-auth="in"] .network-card::before,
body[data-auth="company"] .network-card::before {
  background: rgba(37, 223, 255, 0.08) !important;
}

body[data-auth="in"] .table-wrap,
body[data-auth="company"] .table-wrap {
  border-color: var(--app-line) !important;
  background: var(--app-surface) !important;
}

body[data-auth="in"] th,
body[data-auth="company"] th {
  border-bottom-color: #17384a !important;
  background: #0d2332 !important;
  color: #e9f6fb !important;
}

body[data-auth="in"] td,
body[data-auth="company"] td {
  border-bottom-color: #172a36 !important;
  color: #d7e2ea !important;
}

body[data-auth="in"] tbody tr:hover,
body[data-auth="company"] tbody tr:hover {
  background: rgba(37, 223, 255, 0.035) !important;
}

body[data-auth="in"] .filters,
body[data-auth="company"] .filters {
  border-color: var(--app-line) !important;
  background: #09151e !important;
}

body[data-auth="in"] .field input,
body[data-auth="company"] .field input,
body[data-auth="in"] .field select,
body[data-auth="company"] .field select,
body[data-auth="in"] .filters input,
body[data-auth="company"] .filters input,
body[data-auth="in"] .filters select,
body[data-auth="company"] .filters select,
body[data-auth="in"] .button-row select,
body[data-auth="company"] .button-row select,
body[data-auth="in"] .cell-input,
body[data-auth="company"] .cell-input,
body[data-auth="in"] .cell-select,
body[data-auth="company"] .cell-select,
body[data-auth="in"] textarea,
body[data-auth="company"] textarea {
  border-color: #294254 !important;
  background: var(--app-surface-2) !important;
  color: var(--app-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

body[data-auth="in"] .module-menu,
body[data-auth="company"] .module-menu,
body[data-auth="in"] .user-menu,
body[data-auth="company"] .user-menu,
body[data-auth="in"] .notification-panel,
body[data-auth="company"] .notification-panel {
  border-color: var(--app-line) !important;
  background: var(--app-surface) !important;
}

body[data-auth="in"] .ghost-button,
body[data-auth="company"] .ghost-button,
body[data-auth="in"] .tool-button,
body[data-auth="company"] .tool-button {
  border-color: #294254 !important;
  background: var(--app-surface-2) !important;
  color: #dce8ef !important;
}

body[data-auth="in"] .ghost-button:hover,
body[data-auth="company"] .ghost-button:hover,
body[data-auth="in"] .tool-button:hover,
body[data-auth="company"] .tool-button:hover {
  border-color: rgba(37, 223, 255, 0.42) !important;
  background: #0d2130 !important;
  color: var(--app-cyan) !important;
}

body[data-auth="in"] .calculated-month,
body[data-auth="company"] .calculated-month {
  background: #0a1720 !important;
}

body[data-auth="in"] .status-strip.ok,
body[data-auth="company"] .status-strip.ok,
body[data-auth="in"] .validation-item.ok,
body[data-auth="company"] .validation-item.ok {
  border-color: rgba(141, 255, 63, 0.24) !important;
  background: rgba(141, 255, 63, 0.06) !important;
  color: #caffad !important;
}

body[data-auth="in"] .status-strip.warn,
body[data-auth="company"] .status-strip.warn,
body[data-auth="in"] .validation-item.warn,
body[data-auth="company"] .validation-item.warn {
  border-color: rgba(255, 184, 46, 0.26) !important;
  background: rgba(255, 184, 46, 0.07) !important;
  color: #ffd88a !important;
}

body[data-auth="in"] .status-strip.error,
body[data-auth="company"] .status-strip.error,
body[data-auth="in"] .validation-item.error,
body[data-auth="company"] .validation-item.error {
  border-color: rgba(255, 107, 98, 0.28) !important;
  background: rgba(255, 107, 98, 0.07) !important;
  color: #ffb7b1 !important;
}

body[data-auth="in"] td.actual-month,
body[data-auth="company"] td.actual-month,
body[data-auth="in"] .month-table .month-total-row th,
body[data-auth="company"] .month-table .month-total-row th,
body[data-auth="in"] .output-table .output-totals-row th,
body[data-auth="company"] .output-table .output-totals-row th {
  background: rgba(141, 255, 63, 0.07) !important;
  color: #caffad !important;
}

body[data-auth="in"] .month-table .month-share-row th,
body[data-auth="company"] .month-table .month-share-row th {
  background: rgba(255, 184, 46, 0.07) !important;
  color: #ffd88a !important;
}

/* Remaining module-specific legacy gray surfaces. */
body[data-auth="in"] .price-page-card,
body[data-auth="company"] .price-page-card,
body[data-auth="in"] .price-metric-band > div,
body[data-auth="company"] .price-metric-band > div {
  border-color: var(--app-line) !important;
  background: linear-gradient(145deg, #0d1a24 0%, #08131b 100%) !important;
  color: var(--app-text) !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22) !important;
}

body[data-auth="in"] .price-page-card.active,
body[data-auth="company"] .price-page-card.active {
  border-color: rgba(37, 223, 255, 0.58) !important;
  background: linear-gradient(135deg, #0d2431 0%, #081720 100%) !important;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22), inset 0 -2px 0 var(--app-cyan) !important;
}

body[data-auth="in"] .budget-workflow-panel,
body[data-auth="company"] .budget-workflow-panel {
  border-color: rgba(37, 223, 255, 0.25) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(37, 223, 255, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(10, 23, 32, 0.99), rgba(6, 15, 22, 0.99)) !important;
}

body[data-auth="in"] :is(.section-heading, .panel-heading, .budget-page-heading) :is(h2, h3, h4, strong),
body[data-auth="company"] :is(.section-heading, .panel-heading, .budget-page-heading) :is(h2, h3, h4, strong),
body[data-auth="in"] .price-page-card strong,
body[data-auth="company"] .price-page-card strong,
body[data-auth="in"] .price-metric-band strong,
body[data-auth="company"] .price-metric-band strong,
body[data-auth="in"] .approval-workflow-card > strong,
body[data-auth="company"] .approval-workflow-card > strong {
  color: var(--app-text) !important;
}