/**
 * Acxa premium motion + feedback layer (load LAST on app / admin / settings / FA)
 * Brand: #0075de primary · #efefef secondary · muted #475569 / #64748b
 * No purple AI gradients · no cream/terracotta · respects prefers-reduced-motion
 */

:root {
  --acxa-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --acxa-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --acxa-dur-fast: 160ms;
  --acxa-dur: 240ms;
  --acxa-dur-page: 280ms;
  --fs-micro: 10px;
  --fs-caption: 11px;
  --fs-body: 13px;
  --fs-title: 15px;
  --fs-page: 1.125rem;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-soft-dark: 0 10px 28px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ── Typography micro-scale ───────────────────────────────── */
.cmd-helper,
.live-kpi-label,
.kbd-label,
.unit-suffix {
  font-size: var(--fs-caption) !important;
  letter-spacing: 0.01em;
}
html:not(.dark) .cmd-helper,
html:not(.dark) .live-kpi-label {
  color: #475569 !important;
  opacity: 1 !important;
}
.empty-state-title {
  font-size: var(--fs-title) !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em;
}
.empty-state-sub {
  font-size: var(--fs-body) !important;
  line-height: 1.55 !important;
  max-width: 280px !important;
}
#page-settings .text-\[10px\],
#page-operators .text-\[10px\],
#page-account .text-\[10px\] {
  font-size: var(--fs-caption) !important;
}

/* ── Toasts — premium feedback ────────────────────────────── */
.toast-msg {
  transform: translateY(14px) !important;
  opacity: 0 !important;
  transition:
    opacity var(--acxa-dur) var(--acxa-ease),
    transform var(--acxa-dur) var(--acxa-ease) !important;
}
.toast-msg.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
.toast-inner {
  border-radius: var(--radius-md) !important;
  min-width: 240px;
  max-width: min(92vw, 420px);
  padding: 12px 14px 12px 16px !important;
  font-size: var(--fs-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  filter: none !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(16px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
  position: relative;
  overflow: hidden;
}
.toast-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #0075de;
}
.toast-msg[data-severity="success"] .toast-inner::before { background: #16a34a; }
.toast-msg[data-severity="watch"] .toast-inner::before { background: #d97706; }
.toast-msg[data-severity="critical"] .toast-inner::before { background: #dc2626; }
.toast-msg[data-severity="info"] .toast-inner::before { background: #0075de; }

.toast-close {
  min-width: 28px;
  min-height: 28px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  opacity: 0.55 !important;
  transition: opacity var(--acxa-dur-fast) ease, background var(--acxa-dur-fast) ease !important;
}
.toast-close:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.06);
}
.toast-close:focus-visible {
  outline: 2px solid rgba(0, 117, 222, 0.65) !important;
  outline-offset: 1px !important;
}

/* Dark toast ink — readable on tinted shells */
html.dark .toast-inner {
  background: rgba(24, 25, 27, 0.96) !important;
  color: #f4f4f5 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--shadow-soft-dark) !important;
}
html.dark .toast-msg[data-severity="success"] .toast-inner {
  background: rgba(20, 36, 30, 0.96) !important;
  color: #bbf7d0 !important;
  border-color: rgba(34, 197, 94, 0.28) !important;
}
html.dark .toast-msg[data-severity="info"] .toast-inner {
  background: rgba(18, 28, 42, 0.96) !important;
  color: #dbeafe !important;
  border-color: rgba(0, 117, 222, 0.35) !important;
}
html.dark .toast-msg[data-severity="watch"] .toast-inner {
  background: rgba(40, 30, 18, 0.96) !important;
  color: #fde68a !important;
  border-color: rgba(245, 158, 11, 0.32) !important;
}
html.dark .toast-msg[data-severity="critical"] .toast-inner {
  background: rgba(42, 22, 24, 0.96) !important;
  color: #fecaca !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

/* Light toast — brand-clean, no black “info” border */
html:not(.dark) .toast-inner {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: var(--shadow-soft) !important;
}
html:not(.dark) .toast-msg[data-severity="success"] .toast-inner {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border-color: rgba(22, 163, 74, 0.28) !important;
}
html:not(.dark) .toast-msg[data-severity="info"] .toast-inner {
  background: #f0f7ff !important;
  color: #0f172a !important;
  border-color: rgba(0, 117, 222, 0.28) !important;
}
html:not(.dark) .toast-msg[data-severity="watch"] .toast-inner {
  background: #fffbeb !important;
  color: #92400e !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
}
html:not(.dark) .toast-msg[data-severity="critical"] .toast-inner {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
html:not(.dark) .toast-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

body.more-sheet-open #toastContainer {
  bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Admin toast shell */
.admin-toast-inner,
#toast.admin-toast-inner {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
  border: 1px solid rgba(15, 23, 42, 0.1);
}
html:not(.dark) #toastMessage {
  color: #0f172a !important;
}
html.dark #toastMessage {
  color: #f4f4f5 !important;
}
#toastMessage[data-tone="success"] { color: #166534 !important; }
#toastMessage[data-tone="watch"] { color: #92400e !important; }
#toastMessage[data-tone="critical"] { color: #991b1b !important; }
html.dark #toastMessage[data-tone="success"] { color: #bbf7d0 !important; }
html.dark #toastMessage[data-tone="watch"] { color: #fde68a !important; }
html.dark #toastMessage[data-tone="critical"] { color: #fecaca !important; }

/* ── Inline field errors ──────────────────────────────────── */
.acxa-field-error,
.maint-inline-error,
.rename-popover-error,
.ob-error {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: #f87171;
}
html:not(.dark) .acxa-field-error,
html:not(.dark) .maint-inline-error,
html:not(.dark) .rename-popover-error,
html:not(.dark) .ob-error {
  color: #b91c1c !important;
}
.acxa-field-ok {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #4ade80;
}
html:not(.dark) .acxa-field-ok {
  color: #166534 !important;
}
.acxa-input.is-invalid,
.acxa-field.is-invalid input,
.acxa-field.is-invalid select,
.acxa-field.is-invalid textarea,
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.shift-time-field.is-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}
.shift-time-field.is-invalid:focus-within {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
}

/* ── Page / nav / card motion ─────────────────────────────── */
.page {
  transition: opacity var(--acxa-dur-page) var(--acxa-ease) !important;
}
#desktopNav .nav-btn {
  transition:
    background var(--acxa-dur-fast) var(--acxa-ease),
    color var(--acxa-dur-fast) var(--acxa-ease),
    border-color var(--acxa-dur-fast) var(--acxa-ease),
    box-shadow var(--acxa-dur-fast) var(--acxa-ease) !important;
}
html.dark #desktopNav .nav-btn.active {
  background: #0075de !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 117, 222, 0.28) !important;
}
html.dark #desktopNav .nav-btn.active svg {
  color: #ffffff !important;
}

.card-hover,
.node-card,
.premium-card,
#page-live .live-machine-card,
.op-card,
.rpt-card {
  transition:
    transform var(--acxa-dur) var(--acxa-ease),
    box-shadow var(--acxa-dur) var(--acxa-ease),
    border-color var(--acxa-dur) var(--acxa-ease) !important;
}
.card-hover:hover,
.node-card:hover,
.premium-card:hover,
#page-live .live-machine-card:hover,
.op-card:hover,
.rpt-card:hover {
  transform: translateY(-2px) !important;
}
html:not(.dark) .card-hover:hover,
html:not(.dark) .node-card:hover,
html:not(.dark) .premium-card:hover,
html:not(.dark) #page-live .live-machine-card:hover {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1) !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
}

button:not(.nav-btn):not(.mob-nav-btn):not(.alerts-scope-btn):not([disabled]):active {
  transform: scale(0.98);
}

/* Modals — calm ease, no bounce */
.export-modal,
.rpt-modal-card,
.kbd-modal,
.rename-popover,
.maint-modal-panel {
  animation-timing-function: var(--acxa-ease-out) !important;
}

/* ── Shell chrome ─────────────────────────────────────────── */
.topbar.premium-header {
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
}
html:not(.dark) .topbar.premium-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}
html:not(.dark) #desktopNav {
  border-radius: 999px !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
html:not(.dark) .mobile-bottom-nav .mob-nav-inner {
  border-radius: 22px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* Focus — brand only */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(0, 117, 222, 0.65) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 117, 222, 0.12) !important;
}

/* ── Empty / skeleton polish ──────────────────────────────── */
.empty-state {
  opacity: 1 !important;
  border-radius: var(--radius-lg);
  padding: 36px 28px !important;
}
.empty-state svg {
  opacity: 0.42 !important;
}
html:not(.dark) .empty-state {
  background: #ffffff;
  border: 1px dashed rgba(15, 23, 42, 0.12);
}
html.dark .empty-state {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
}
.acxa-empty-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 16px;
  text-align: center;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #a39e98;
  letter-spacing: 0.01em;
}
html:not(.dark) .acxa-empty-inline {
  color: #475569 !important;
}

html:not(.dark) .kpi-skeleton,
html:not(.dark) .chart-skeleton,
html:not(.dark) .fleet-skeleton-pulse {
  background: linear-gradient(90deg, #f1f5f9 20%, #e2e8f0 50%, #f1f5f9 80%) !important;
  background-size: 220% 100% !important;
}
/* Skeleton bars use ::after sheen in dashboard.css — do not flatten them here. */
html:not(.dark) .acxa-sk-bar,
html:not(.dark) .acxa-sk-pbar {
  background: rgba(15, 23, 42, 0.08) !important;
}

/* Offline / system banners use UI font */
.offline-banner,
#offlineBanner,
.connection-banner {
  font-family: var(--font-ui, Inter, "Segoe UI", system-ui, sans-serif) !important;
}

/* Cursor affordance */
button:not([disabled]),
.nav-btn,
.mob-nav-btn,
.alerts-scope-btn,
.alerts-sel-btn,
.notif-cat-pill,
.card-hover,
.node-card,
.machine-picker-btn,
.rpt-ms-btn {
  cursor: pointer;
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .toast-msg,
  .admin-toast-inner,
  .page,
  .card-hover,
  .node-card,
  .premium-card,
  #page-live .live-machine-card,
  .op-card,
  .rpt-card,
  #desktopNav .nav-btn,
  button:not([disabled]):active {
    transition: opacity 0.15s ease !important;
    transform: none !important;
    animation: none !important;
  }
  .toast-msg {
    transform: none !important;
  }
  .kpi-skeleton,
  .chart-skeleton,
  .fleet-skeleton-pulse {
    animation: none !important;
  }
  /* Keep skeleton loading motion (opacity pulse via dashboard.css). */
  html:not(.dark) .kpi-skeleton,
  html:not(.dark) .chart-skeleton {
    background: #e2e8f0 !important;
  }
}

/* ── Trial / status banners ───────────────────────────────── */
#trialBanner,
.trial-banner,
[data-trial-banner],
.live-trial-strip {
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em;
}
html:not(.dark) #trialBanner,
html:not(.dark) .trial-banner {
  background: linear-gradient(90deg, #fff7ed, #ffedd5) !important;
  color: #9a3412 !important;
  border-bottom: 1px solid rgba(234, 88, 12, 0.25) !important;
}

/* Live search — premium field */
#page-live input[type="search"],
#page-live .live-search,
#machineSearch,
.search-machines input {
  border-radius: 999px !important;
  transition: border-color var(--acxa-dur-fast) ease, box-shadow var(--acxa-dur-fast) ease !important;
}
html:not(.dark) #page-live input[type="search"],
html:not(.dark) #machineSearch {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
}
html:not(.dark) #page-live input[type="search"]:focus,
html:not(.dark) #machineSearch:focus {
  border-color: #0075de !important;
  box-shadow: 0 0 0 3px rgba(0, 117, 222, 0.15) !important;
}

/* Status pills — solid, readable */
.status-pill,
.machine-status-badge,
[class*="status-badge"] {
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
  font-size: 10px !important;
}

/* Progress bars — smoother fill */
.roll-progress-bar,
.progress-fill,
[class*="progress-bar"] > span,
.live-roll-fill {
  transition: width 0.55s var(--acxa-ease-out) !important;
}

/* Light mode Live KPI cards */
html:not(.dark) .live-kpi-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) .live-kpi-card:hover {
  border-color: rgba(0, 117, 222, 0.28) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.09) !important;
}
html:not(.dark) .live-kpi-card.kpi-active-tile,
html:not(.dark) .live-kpi-card.is-active {
  border-color: rgba(0, 117, 222, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(0, 117, 222, 0.2), 0 10px 28px rgba(0, 117, 222, 0.1) !important;
}

/* Light machine cards */
html:not(.dark) .node-card,
html:not(.dark) #page-live .live-machine-card,
html:not(.dark) #nodesGrid .node-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}

/* Alerts selection / chips already polished — reinforce solid secondary */
html:not(.dark) .alerts-sel-btn--neutral {
  background: #efefef !important;
  color: #000000 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
html:not(.dark) .alerts-sel-btn--brand {
  background: #0075de !important;
  color: #ffffff !important;
  border-color: #0075de !important;
}

/* Reports cards */
html:not(.dark) #page-reports .rpt-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) #page-reports .rpt-card:hover {
  border-color: rgba(0, 117, 222, 0.35) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1) !important;
}

/* Settings rows */
html:not(.dark) #page-settings .premium-card,
html:not(.dark) #page-account .premium-card,
html:not(.dark) #page-subscription .premium-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

/* Smooth scroll containers */
#mainContent,
.page {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  #mainContent,
  .page {
    scroll-behavior: auto;
  }
}

/* Topbar icon buttons — solid secondary in light */
html:not(.dark) .topbar.premium-header button {
  background: #efefef !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}
html:not(.dark) .topbar.premium-header button:hover {
  background: #e4e4e4 !important;
  color: #000000 !important;
}

/* Dark desktop nav inactive readable */
html.dark #desktopNav .nav-btn {
  color: #c4c9d4 !important;
}
html.dark #desktopNav .nav-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f4f4f5 !important;
}

/* Soft premium canvas (light) — not flat pure white void */
html:not(.dark) body,
html:not(.dark) #mainContent,
html:not(.dark) .main-content {
  background: #f5f7fb !important;
}
html:not(.dark) .premium-footer,
html:not(.dark) footer {
  background: transparent !important;
  border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  box-shadow: none !important;
}
html:not(.dark) .premium-footer .pf-product,
html:not(.dark) .premium-footer .pf-tagline,
html:not(.dark) .premium-footer .pf-version,
html:not(.dark) .premium-footer .pf-legal {
  color: #64748b !important;
}

/* Type rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Selection already brand — reinforce */
html:not(.dark) ::selection {
  background: rgba(0, 117, 222, 0.18) !important;
  color: #0f172a !important;
}

/* Alerts empty — premium empty card */
html:not(.dark) #page-alerts .alerts-empty-state {
  background: #ffffff !important;
  border: 1px dashed rgba(15, 23, 42, 0.12) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  padding: 48px 28px !important;
}
html.dark #page-alerts .alerts-empty-state {
  border: 1px dashed rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-lg) !important;
  padding: 48px 28px !important;
}

/* Category pills — quieter inactive */
html:not(.dark) .notif-cat-pill:not(.is-active):not([aria-pressed="true"]) {
  background: #efefef !important;
  color: #334155 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}


/* Canvas override — beat Uber pure-white body */
html:not(.dark) body.bg-surface-950,
html:not(.dark) body,
html:not(.dark) #mainContent.main-content,
html:not(.dark) #mainContent,
html:not(.dark) .main-content {
  background-color: #f5f7fb !important;
  background-image: none !important;
}
/* ── Live resume overlay (tab return) — splash-consistent brand tokens ── */
.live-resume-overlay {
  --resume-brand: #0075de;
  --resume-brand-deep: #005bab;
  --resume-brand-soft: #62aef0;
  --resume-ink: #0f172a;
  --resume-muted: rgba(15, 23, 42, 0.62);
  --resume-bar-track: rgba(0, 117, 222, 0.14);
  --resume-bar-fill: linear-gradient(90deg, #005bab 0%, #0075de 48%, #62aef0 100%);
  --resume-spin-ring: rgba(0, 117, 222, 0.22);
  --resume-spin-head: #0075de;
  --resume-glow: rgba(0, 117, 222, 0.28);
  --resume-orb-a: rgba(0, 117, 222, 0.12);
  --resume-orb-b: rgba(98, 174, 240, 0.08);
  --resume-orb-c: rgba(0, 117, 222, 0.06);
  --resume-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.38s var(--resume-ease), visibility 0.38s var(--resume-ease);
  font-family: var(--font-ui, "Inter", system-ui, -apple-system, sans-serif);
}
.live-resume-overlay.is-visible {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
.live-resume-overlay.live-resume-theme-light {
  background:
    radial-gradient(ellipse 72% 50% at 50% 16%, rgba(0, 117, 222, 0.1) 0%, transparent 58%),
    radial-gradient(ellipse 45% 36% at 92% 88%, rgba(98, 174, 240, 0.08) 0%, transparent 52%),
    radial-gradient(ellipse 40% 32% at 8% 78%, rgba(0, 91, 171, 0.05) 0%, transparent 50%),
    linear-gradient(168deg, #f8fafc 0%, #f1f5f9 48%, #e8eef6 100%);
}
.live-resume-overlay.live-resume-theme-dark {
  --resume-ink: #e2e8f0;
  --resume-muted: rgba(226, 232, 240, 0.68);
  --resume-bar-track: rgba(255, 255, 255, 0.08);
  --resume-spin-ring: rgba(98, 174, 240, 0.28);
  --resume-spin-head: #62aef0;
  --resume-glow: rgba(0, 117, 222, 0.32);
  --resume-orb-a: rgba(0, 117, 222, 0.18);
  --resume-orb-b: rgba(98, 174, 240, 0.1);
  --resume-orb-c: rgba(0, 117, 222, 0.1);
  background:
    radial-gradient(ellipse 70% 48% at 50% 18%, rgba(0, 117, 222, 0.2) 0%, transparent 58%),
    radial-gradient(ellipse 48% 38% at 12% 90%, rgba(30, 58, 95, 0.36) 0%, transparent 55%),
    radial-gradient(ellipse 36% 28% at 88% 72%, rgba(0, 117, 222, 0.1) 0%, transparent 50%),
    linear-gradient(168deg, #0a1018 0%, #070a0f 52%, #030406 100%);
}
.live-resume-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.live-resume-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  animation: liveResumeOrbFloat 12s ease-in-out infinite;
  opacity: 0.55;
}
.live-resume-orb--a {
  width: min(48vw, 360px);
  height: min(48vw, 360px);
  left: 50%;
  top: 28%;
  transform: translate(-50%, -50%);
  background: var(--resume-orb-a);
}
.live-resume-orb--b {
  width: min(32vw, 220px);
  height: min(32vw, 220px);
  right: -4%;
  bottom: 6%;
  background: var(--resume-orb-b);
  animation-name: liveResumeOrbFloatB;
  animation-delay: -4s;
  opacity: 0.4;
}
.live-resume-orb--c {
  width: min(26vw, 180px);
  height: min(26vw, 180px);
  left: -6%;
  top: 62%;
  background: var(--resume-orb-c);
  animation-name: liveResumeOrbFloatB;
  animation-delay: -7s;
  opacity: 0.32;
}
.live-resume-grid {
  position: absolute;
  inset: 0;
  opacity: 0.09;
  background-image:
    linear-gradient(rgba(100, 116, 139, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, 0.09) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 58% 48% at 50% 36%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 58% 48% at 50% 36%, #000 10%, transparent 72%);
}
.live-resume-theme-dark .live-resume-grid {
  opacity: 0.07;
}
.live-resume-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 40%, rgba(2, 4, 8, 0.28) 100%);
  opacity: 0.55;
  pointer-events: none;
}
.live-resume-theme-light .live-resume-vignette {
  background: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 45%, rgba(15, 23, 42, 0.06) 100%);
  opacity: 1;
}
.live-resume-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(92vw, 440px);
  padding: 28px 22px 32px;
  text-align: center;
}
.live-resume-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.live-resume-logo {
  width: min(34vw, 148px);
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 117, 222, 0.18));
}
.live-resume-theme-dark .live-resume-logo {
  filter: drop-shadow(0 6px 18px rgba(0, 117, 222, 0.28));
}
.live-resume-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.live-resume-title {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--resume-ink);
}
.live-resume-sub {
  margin: 10px 0 0;
  font-size: var(--fs-body, 13px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--resume-muted);
  max-width: 320px;
}
.live-resume-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  width: 100%;
}
.live-resume-bar-track {
  width: min(68vw, 240px);
  height: 4px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--resume-bar-track);
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
}
.live-resume-bar-fill {
  width: 42%;
  height: 100%;
  border-radius: 99px;
  background: var(--resume-bar-fill);
  box-shadow: 0 0 12px rgba(0, 117, 222, 0.42);
  position: relative;
  overflow: hidden;
  /* alternate = left→right then right→left (no hard jump restart) */
  animation: liveResumeBarPulse 1.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}
.live-resume-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: liveResumeBarSheen 1.8s ease-in-out infinite;
}
.live-resume-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--resume-spin-ring);
  border-top-color: var(--resume-spin-head);
  border-radius: 50%;
  animation: liveResumeSpin 0.7s linear infinite;
}
@keyframes liveResumeOrbFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -48%) scale(1.04); }
}
@keyframes liveResumeOrbFloatB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6px, 8px) scale(1.05); }
}
/* translateX % is relative to the fill width (42% of track), not the track.
   Move by (100-42)/42 ≈ 138% so the segment reaches the right edge;
   `alternate` on the animation slides it back left smoothly. */
@keyframes liveResumeBarPulse {
  0% { transform: translateX(0); opacity: 0.9; }
  100% { transform: translateX(138.1%); opacity: 1; }
}
@keyframes liveResumeBarSheen {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}
@keyframes liveResumeSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .live-resume-overlay {
    transition: opacity 0.01s linear, visibility 0.01s linear;
  }
  .live-resume-orb,
  .live-resume-bar-fill,
  .live-resume-bar-fill::after,
  .live-resume-spinner {
    animation: none !important;
  }
  .live-resume-bar-fill {
    width: 55%;
    transform: none;
    opacity: 1;
  }
}