@font-face {
  font-family: 'Garet';
  src: url('fonts/garet-book.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-family: 'Garet', 'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition-speed: 0.3s;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 999px;
  --gradient-action: linear-gradient(135deg, #00D8C8 0%, #00A7D8 50%, #5465FF 100%);
}

:root,
html[data-theme="light"] {
  --brightness: light;
  --background: #F2FAFF;
  --surface: rgba(255, 255, 255, 0.84);
  --surface-light: #EAFBF2;
  --surface-dark: #EAF8FF;
  --primary: #06364A;
  --primary-soft: #00A7D8;
  --primary-tint: #DDF4FF;
  --success: #00B884;
  --text-primary: #06364A;
  --text-secondary: #547086;
  --text-hint: #7D93A7;
  --divider: #D7E5EF;
  --border: #D7E5EF;
  --card-shadow: 0 14px 36px rgba(6, 58, 74, 0.12);
  --listener-pulse: rgba(0, 167, 216, 0.25);
  --mesh-0: #F8FDFF;
  --mesh-1: #DDF4FF;
  --mesh-2: #EAFBF2;
  --mesh-3: #FFF5E5;
  --mesh-4: #DCE8FF;

  --bg: var(--background);
  --card: var(--surface);
  --heading: var(--text-primary);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-hint);
  --text-4: var(--text-secondary);
  --text-5: var(--text-primary);
  --text-6: var(--text-secondary);
  --text-7: var(--text-primary);
  --muted: var(--text-secondary);
  --soft: var(--text-hint);
  --link: var(--primary);
  --mono: var(--primary);
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-tint: var(--primary-tint);
  --border-soft: var(--divider);
  --border-2: var(--divider);
  --border-3: #E6F1F8;
  --border-4: #BFD3E1;
  --border-hover: var(--primary-soft);
  --surface-2: rgba(255, 255, 255, 0.56);
  --surface-3: rgba(221, 244, 255, 0.72);
  --surface-4: rgba(255, 255, 255, 0.92);
  --surface-5: rgba(255, 255, 255, 0.62);
  --surface-hover: rgba(0, 167, 216, 0.10);
  --topbar-bg: rgba(242, 250, 255, 0.84);
  --nav-bg: rgba(242, 250, 255, 0.84);
  --sidebar-bg: rgba(255, 255, 255, 0.74);
  --modal-bg: rgba(255, 255, 255, 0.94);
  --toast-bg: rgba(255, 255, 255, 0.94);
  --select-opt-bg: #F2FAFF;
  --toggle-track: #D7E5EF;
  --toggle-thumb: #06364A;
  --input-scheme: light;
  --purple: #00A7D8;
  --purple-dim: rgba(0, 167, 216, 0.14);
  --green: #00B884;
  --green-dim: rgba(0, 184, 132, 0.12);
  --red: #E53935;
  --red-dim: rgba(229, 57, 53, 0.08);
  --amber: #B86B00;
  --amber-dim: rgba(255, 176, 32, 0.14);
  --glow-purple: transparent;
  --glow-green: transparent;
  --scrollbar-thumb: rgba(6, 58, 74, 0.16);
}

html[data-theme="dark"] {
  --brightness: dark;
  --background: #07111F;
  --surface: rgba(16, 28, 46, 0.84);
  --surface-light: #133047;
  --surface-dark: #07111F;
  --primary: #8EE8FF;
  --primary-soft: #00A7D8;
  --primary-tint: #0C2634;
  --success: #3EE6B3;
  --text-primary: #ECFEFF;
  --text-secondary: #9EB4C8;
  --text-hint: #668197;
  --divider: #1F3448;
  --border: #1F3448;
  --card-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
  --listener-pulse: rgba(0, 167, 216, 0.4);
  --mesh-0: #07111F;
  --mesh-1: #0C2634;
  --mesh-2: #0B332F;
  --mesh-3: #142345;
  --mesh-4: #07111F;

  --bg: var(--background);
  --card: var(--surface);
  --heading: var(--text-primary);
  --text: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-hint);
  --text-4: var(--text-secondary);
  --text-5: var(--text-primary);
  --text-6: var(--text-secondary);
  --text-7: var(--text-primary);
  --muted: var(--text-secondary);
  --soft: var(--text-hint);
  --link: var(--primary);
  --mono: var(--primary);
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-tint: var(--primary-tint);
  --border-soft: var(--divider);
  --border-2: var(--divider);
  --border-3: #172A3D;
  --border-4: #2C485F;
  --border-hover: var(--primary-soft);
  --surface-2: rgba(16, 28, 46, 0.56);
  --surface-3: rgba(19, 48, 71, 0.76);
  --surface-4: rgba(16, 28, 46, 0.94);
  --surface-5: rgba(19, 48, 71, 0.62);
  --surface-hover: rgba(0, 167, 216, 0.14);
  --topbar-bg: rgba(7, 17, 31, 0.82);
  --nav-bg: rgba(7, 17, 31, 0.82);
  --sidebar-bg: rgba(7, 17, 31, 0.80);
  --modal-bg: rgba(16, 28, 46, 0.96);
  --toast-bg: rgba(16, 28, 46, 0.96);
  --select-opt-bg: #101C2E;
  --toggle-track: #1F3448;
  --toggle-thumb: #8EE8FF;
  --input-scheme: dark;
  --purple: #00A7D8;
  --purple-dim: rgba(0, 167, 216, 0.18);
  --green: #3EE6B3;
  --green-dim: rgba(62, 230, 179, 0.14);
  --red: #FF7675;
  --red-dim: rgba(255, 118, 117, 0.10);
  --amber: #FFCF70;
  --amber-dim: rgba(255, 207, 112, 0.12);
  --glow-purple: transparent;
  --glow-green: transparent;
  --scrollbar-thumb: rgba(142, 232, 255, 0.18);
}

body.ambient-page {
  background:
    linear-gradient(135deg, var(--mesh-0) 0%, var(--mesh-1) 28%, var(--mesh-2) 54%, var(--mesh-3) 78%, var(--mesh-4) 100%) !important;
  background-size: 400% 400%;
  color: var(--text-primary) !important;
  font-family: var(--font-family) !important;
  letter-spacing: 0;
  animation: ambientMeshFlow 18s ease infinite alternate;
  max-width: 100%;
  overflow-x: hidden;
}

body.ambient-page *,
body.ambient-page *::before,
body.ambient-page *::after {
  min-width: 0;
}

body.ambient-page,
body.ambient-page button,
body.ambient-page input,
body.ambient-page select,
body.ambient-page textarea,
body.ambient-page a,
body.ambient-page label {
  font-family: var(--font-family) !important;
}

body.ambient-page code,
body.ambient-page pre,
body.ambient-page .event-code-display,
body.ambient-page .event-code-meta,
body.ambient-page .signtone-box-id,
body.ambient-page .signtone-reference code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

@keyframes ambientMeshFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.ambient-page nav,
.ambient-page .topbar,
.ambient-page .sidebar {
  background: var(--nav-bg) !important;
  border-color: var(--border) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.ambient-page .sidebar {
  background: var(--sidebar-bg) !important;
}

.ambient-page .container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-top: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(24px, 4vw, 48px);
}

.ambient-page .card,
.ambient-page .contact-box,
.ambient-page .table-wrap,
.ambient-page .stat-card,
.ambient-page .license-card,
.ambient-page .draw-box,
.ambient-page .dstat,
.ambient-page .signtone-box,
.ambient-page .modal,
.ambient-page .toast,
.ambient-page .upload-zone,
.ambient-page .empty,
.ambient-page .login-wrap > .card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ambient-page .card:hover,
.ambient-page .stat-card:hover,
.ambient-page .license-card:hover,
.ambient-page .table-wrap:hover,
.ambient-page .upload-zone:hover {
  border-color: var(--primary-soft);
}

.ambient-page .btn-primary,
.ambient-page .btn-submit,
.ambient-page .preview button {
  background: var(--gradient-action) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 28px rgba(0, 167, 216, 0.25);
}

.ambient-page .btn-primary:hover,
.ambient-page .btn-submit:hover,
.ambient-page .preview button:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(0, 167, 216, 0.32);
}

.ambient-page .btn-ghost,
.ambient-page .btn-sm,
.ambient-page .btn-google,
.ambient-page .back-link,
.ambient-page .nav-back,
.ambient-page .filter-tabs,
.ambient-page .tabs-container,
.ambient-page .theme-toggle,
.ambient-page .theme-toggle-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

.ambient-page .theme-toggle,
.ambient-page .theme-toggle-btn {
  background: var(--toggle-track) !important;
}

.ambient-page .btn-ghost:hover,
.ambient-page .btn-sm:hover,
.ambient-page .btn-google:hover,
.ambient-page .back-link:hover,
.ambient-page .nav-back:hover {
  border-color: var(--primary-soft);
  color: var(--text-primary);
}

.ambient-page input,
.ambient-page select,
.ambient-page textarea {
  background: var(--surface-4) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-4) !important;
  color-scheme: var(--input-scheme);
}

.ambient-page input:focus,
.ambient-page select:focus,
.ambient-page textarea:focus {
  border-color: var(--primary-soft);
  box-shadow: 0 0 0 3px rgba(0, 167, 216, 0.12);
}

.ambient-page .tab.active,
.ambient-page .filter-tab.active,
.ambient-page .nav-item.active {
  color: var(--text-primary) !important;
  border-color: var(--primary-soft) !important;
}

.ambient-page .filter-tab.active,
.ambient-page .toggle.on {
  background: var(--gradient-action) !important;
  color: #FFFFFF !important;
}

.ambient-page .badge-active,
.ambient-page .winner-card,
.ambient-page .msg-ok,
.ambient-page .success-msg {
  background: var(--green-dim);
  border-color: rgba(62, 230, 179, 0.24);
  color: var(--green);
}

.ambient-page .badge-ended,
.ambient-page .msg-err,
.ambient-page .error-msg {
  background: var(--red-dim);
  border-color: rgba(255, 118, 117, 0.22);
  color: var(--red);
}

.ambient-page .spinner,
.ambient-page .spinner-sm {
  border-color: rgba(0, 167, 216, 0.22);
  border-top-color: var(--primary-soft);
}

html[data-theme="light"] .ambient-page .logo-mark img,
html[data-theme="light"] .ambient-page .topbar-logo img,
html[data-theme="light"] .ambient-page .sidebar-logo img {
  filter: brightness(0);
}

html[data-theme="dark"] .ambient-page .logo-mark img,
html[data-theme="dark"] .ambient-page .topbar-logo img,
html[data-theme="dark"] .ambient-page .sidebar-logo img {
  filter: brightness(0) invert(1);
}

.ambient-page ::selection {
  background: rgba(0, 167, 216, 0.25);
}

@media print {
  body.ambient-page {
    background: #FFFFFF;
    animation: none;
  }
}

@media (max-width: 720px) {
  .ambient-page .container {
    width: calc(100% - 24px);
    max-width: none;
    margin: 16px auto 28px;
    padding: clamp(20px, 5vw, 32px) !important;
    border-radius: var(--radius-lg);
  }

  .ambient-page .card-grid,
  .ambient-page .form-grid,
  .ambient-page .stats,
  .ambient-page .license-grid,
  .ambient-page .detail-stats {
    grid-template-columns: 1fr !important;
  }

  .ambient-page .card-row,
  .ambient-page .section-header,
  .ambient-page .modal-footer,
  .ambient-page footer {
    gap: 10px;
  }

  .ambient-page table {
    width: 100%;
  }

  .ambient-page .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 520px) {
  .ambient-page .topbar,
  .ambient-page nav:not(.sidebar) {
    max-width: 100vw;
  }

  .ambient-page .card,
  .ambient-page .contact-box,
  .ambient-page .login-wrap > .card {
    border-radius: var(--radius-md);
  }
}