:root {
  --primary: #18d7ff;
  --primary-dark: #0c9fbe;
  --accent: #89f4ff;
  --accent-strong: #dffcff;
  --accent-soft: rgba(24, 215, 255, 0.12);
  --cyan: #18d7ff;
  --blue: #72ecff;
  --green: #72ecff;
  --amber: #ffd37a;
  --rose: #ffb88f;
  --bg: #061116;
  --bg-soft: #081419;
  --card: #0d171d;
  --card-soft: #122028;
  --panel: #0d171d;
  --panel-soft: #132028;
  --panel-strong: #1a2b34;
  --border: #1d3642;
  --border-strong: rgba(24, 215, 255, 0.28);
  --text: #eefbfd;
  --muted: #97bcc6;
  --soft: #79adb8;
  --success: #72ecff;
  --warning: #ffd37a;
  --error: #ffb774;
  --shadow: 0 28px 84px rgba(0, 0, 0, 0.42);
}

body {
  background: linear-gradient(180deg, #061116 0%, #0a171e 48%, #061015 100%) !important;
  color: var(--text) !important;
  position: relative;
}

body::before {
  background-image:
    radial-gradient(circle at 18% 22%, rgba(24, 215, 255, 0.12) 0%, transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(24, 215, 255, 0.07) 0%, transparent 28%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 4px, transparent 4px, transparent 8px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 4px, transparent 4px, transparent 8px) !important;
  opacity: 1 !important;
}

body::after {
  background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(24, 215, 255, 0.16) 0%, rgba(24, 215, 255, 0.08) 34%, transparent 72%) !important;
  opacity: 1 !important;
}

body > * {
  position: relative;
  z-index: 2;
}

header {
  background: rgba(5, 17, 23, 0.88) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(14px);
}

.logo,
.logo-mark {
  color: var(--primary) !important;
  text-decoration: none;
  text-shadow: 0 0 20px rgba(24, 215, 255, 0.14);
}

nav a,
.mobile-menu a,
.footer-links a {
  border: 2px solid transparent !important;
}

nav a:hover,
.mobile-menu a:hover,
.footer-links a:hover {
  background: rgba(24, 215, 255, 0.14) !important;
  border-color: rgba(24, 215, 255, 0.4) !important;
  color: var(--accent-strong) !important;
}

.mobile-menu {
  background: rgba(5, 17, 23, 0.96) !important;
  border-left: 1px solid var(--border) !important;
}

.menu-toggle span {
  background: var(--accent-strong) !important;
}

footer {
  background: transparent !important;
  border-top: none !important;
}

.footer-bottom,
.footer-links a,
.purchase-footer,
.login-footer,
.policy-subtitle,
.subtitle,
.section-content,
.panel-copy,
.logs-copy,
.chart-note,
.snapshot-note,
.metric-sub,
.usage-sub,
.balance-sub,
.metric-meta {
  color: var(--muted) !important;
}

.hero-badge,
.purchase-card,
.login-card,
.sub-card,
.billing-card,
.empty-state,
.modal-content,
.success-card,
.status-box,
.action-card,
.hero-card,
.snapshot-card,
.panel,
.chart-panel,
.logs-panel,
.log-shell,
.skeleton-panel,
.brief-card,
.skeleton-card,
.metric-card,
.usage-card,
.balance-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.purchase-card:hover,
.login-card:hover,
.sub-card:hover,
.billing-card:hover,
.sub-card.active,
.action-card.highlight,
.chart-wrap,
.log-search,
.log-filter.active,
.log-load-more:hover,
.tab-btn.active,
.billing-link:hover {
  border-color: rgba(24, 215, 255, 0.42) !important;
}

.chart-wrap,
.log-search,
.log-load-more,
.billing-link,
.key-field,
.meta-card,
.status-box,
.log-shell {
  background: rgba(255, 255, 255, 0.03) !important;
}

.product-price,
.purchase-footer a,
.login-footer a,
.empty-state a,
.lifetime-badge,
.key-btn:hover,
.panel-title svg,
.product-badge,
.section-number,
.badge-dot {
  color: var(--primary) !important;
}

.product-badge,
.section-number {
  background: linear-gradient(180deg, #34e4ff 0%, #0da4c4 100%) !important;
  box-shadow: 0 10px 24px rgba(24, 215, 255, 0.18);
}

.gradient-text,
.policy-title {
  background: linear-gradient(90deg, #38e6ff, #bbfbff) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.cta-primary,
.btn-purchase,
.billing-cta,
.btn-primary,
.btn-discord {
  background: linear-gradient(180deg, #34e4ff 0%, #0ca7c6 100%) !important;
  color: #04161c !important;
  border-color: rgba(191, 248, 255, 0.72) !important;
  box-shadow: 0 14px 34px rgba(24, 215, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.cta-primary:hover,
.btn-purchase:hover,
.billing-cta:hover,
.btn-primary:hover:not(:disabled),
.btn-discord:hover:not(:disabled) {
  background: linear-gradient(180deg, #74f0ff 0%, #14bfdc 100%) !important;
  border-color: #c6fbff !important;
  color: #021317 !important;
}

.cta-secondary,
.btn-secondary,
.billing-link,
.log-load-more,
.log-filter,
.tab-btn,
.signout-btn,
.sub-action-btn {
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--text) !important;
  border: 1px solid rgba(24, 215, 255, 0.18) !important;
}

.cta-secondary:hover,
.btn-secondary:hover:not(:disabled),
.log-filter:hover,
.sub-action-btn:hover,
.signout-btn:hover,
.tab-btn:hover {
  background: rgba(24, 215, 255, 0.12) !important;
  color: var(--accent-strong) !important;
  border-color: rgba(24, 215, 255, 0.4) !important;
}

.tab-btn.active {
  background: rgba(24, 215, 255, 0.1) !important;
  color: var(--primary) !important;
}

.signout-btn,
.sub-action-btn {
  box-shadow: none !important;
}

.sidebar-avatar,
.sidebar-avatar-placeholder {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 5px rgba(24, 215, 255, 0.14) !important;
}

.sidebar-avatar-placeholder {
  background: rgba(24, 215, 255, 0.08) !important;
  color: var(--primary) !important;
}

.auth-message.success,
.status-active,
.message.success,
.assignment-rule,
.action-note,
.snapshot-chip,
.log-filter.active {
  background: rgba(24, 215, 255, 0.12) !important;
  border-color: rgba(24, 215, 255, 0.3) !important;
  color: #cdfaff !important;
}

.auth-message.error,
.status-cancelled,
.status-expired,
.status-pending,
.message.error,
.message.info,
.status-state.error,
.status-state.info {
  color: #ffd7ad !important;
  border-color: rgba(255, 183, 116, 0.34) !important;
  background: rgba(255, 183, 116, 0.1) !important;
}

.action-card::before {
  background: linear-gradient(90deg, rgba(24, 215, 255, 0.72), transparent 75%) !important;
}

.success-card::after,
.hero-card::after,
.snapshot-card::after,
.brief-card::after,
.metric-card::after,
.usage-card::after,
.balance-card::after {
  background: radial-gradient(circle, rgba(24, 215, 255, 0.18), transparent 72%) !important;
}

.check-circle {
  background: rgba(24, 215, 255, 0.12) !important;
  border-color: rgba(24, 215, 255, 0.42) !important;
  box-shadow: 0 0 0 10px rgba(24, 215, 255, 0.05) !important;
}

.check-circle svg,
.spinner {
  color: var(--accent-strong) !important;
  border-top-color: var(--primary) !important;
}

.field input:focus {
  border-color: rgba(24, 215, 255, 0.56) !important;
  box-shadow: 0 0 0 4px rgba(24, 215, 255, 0.12) !important;
}

.policy-container,
.purchase-container,
.login-container,
.hero-container,
.success-wrap,
.account-wrap,
.page {
  position: relative;
}

.page-title,
.panel-title,
.logs-title,
.snapshot-user,
.success-title,
.purchase-title,
.login-title,
.product-name,
.hero-left h1,
.policy-title,
.sub-name,
.section-title,
.chart-panel h3 {
  color: var(--text) !important;
}

.eyebrow,
.hero-chip {
  border-color: rgba(24, 215, 255, 0.24) !important;
  background: rgba(24, 215, 255, 0.08) !important;
  color: var(--accent-strong) !important;
}

.log-pill.request,
.metric-card.tone-blue,
.usage-card.tone-blue,
.balance-card.tone-blue,
.metric-card.tone-green,
.usage-card.tone-green,
.balance-card.tone-green,
.metric-card.tone-cyan,
.usage-card.tone-cyan,
.balance-card.tone-cyan {
  --tone: rgba(24, 215, 255, 0.78) !important;
  --tone-soft: rgba(24, 215, 255, 0.16) !important;
}

.metric-card.tone-slate,
.usage-card.tone-slate,
.balance-card.tone-slate {
  --tone: rgba(130, 228, 255, 0.62) !important;
  --tone-soft: rgba(130, 228, 255, 0.12) !important;
}

.log-pill.billing,
.log-pill.connection,
.log-pill.auth,
.log-pill.internal {
  background: rgba(24, 215, 255, 0.12) !important;
  border-color: rgba(24, 215, 255, 0.3) !important;
  color: #cdfaff !important;
}

.log-head,
.log-row:hover {
  background: rgba(24, 215, 255, 0.04) !important;
}

nav a,
.mobile-menu a,
.footer-links a,
.cta-primary,
.cta-secondary,
.btn-purchase,
.btn-dev-simulate,
.billing-cta,
.btn-primary,
.btn-secondary,
.btn-discord,
.billing-link,
.log-load-more,
.log-filter,
.tab-btn,
.signout-btn,
.sub-action-btn,
.btn,
.key-btn {
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    opacity 0.22s ease !important;
  will-change: transform, box-shadow;
}

nav a,
.mobile-menu a,
.footer-links a {
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
  will-change: auto !important;
}

.cta-primary,
.cta-secondary,
.btn-purchase,
.btn-dev-simulate,
.billing-cta,
.btn-primary,
.btn-secondary,
.btn-discord,
.btn,
.log-load-more,
.sub-action-btn,
.signout-btn {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16) !important;
}

.billing-link,
.log-filter,
.tab-btn,
.key-btn,
nav a,
.mobile-menu a,
.footer-links a {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

.key-btn {
  padding: 6px !important;
  border-radius: 10px !important;
}

.cta-primary:hover,
.cta-secondary:hover,
.btn-purchase:hover:not(:disabled),
.btn-dev-simulate:hover:not(:disabled),
.billing-cta:hover,
.btn-primary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-discord:hover:not(:disabled),
.btn:hover:not(:disabled),
.log-load-more:hover,
.sub-action-btn:hover:not(:disabled),
.signout-btn:hover,
nav a:hover,
.mobile-menu a:hover,
.footer-links a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(24, 215, 255, 0.08) !important;
}

.billing-link:hover,
.log-filter:hover,
.tab-btn:hover,
.key-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(24, 215, 255, 0.08) !important;
}

nav a:hover,
.mobile-menu a:hover,
.footer-links a:hover,
nav a:active,
.mobile-menu a:active,
.footer-links a:active {
  transform: none !important;
}

.cta-primary:active,
.cta-secondary:active,
.btn-purchase:active,
.btn-dev-simulate:active,
.billing-cta:active,
.btn-primary:active,
.btn-secondary:active,
.btn-discord:active,
.btn:active,
.billing-link:active,
.log-load-more:active,
.log-filter:active,
.tab-btn:active,
.signout-btn:active,
.sub-action-btn:active,
.key-btn:active,
nav a:active,
.mobile-menu a:active,
.footer-links a:active {
  transform: translateY(0) scale(0.985) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14) !important;
}

.cta-primary:focus-visible,
.cta-secondary:focus-visible,
.btn-purchase:focus-visible,
.btn-dev-simulate:focus-visible,
.billing-cta:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-discord:focus-visible,
.btn:focus-visible,
.billing-link:focus-visible,
.log-load-more:focus-visible,
.log-filter:focus-visible,
.tab-btn:focus-visible,
.signout-btn:focus-visible,
.sub-action-btn:focus-visible,
.key-btn:focus-visible,
nav a:focus-visible,
.mobile-menu a:focus-visible,
.footer-links a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(24, 215, 255, 0.18), 0 12px 28px rgba(0, 0, 0, 0.16) !important;
}

.btn-purchase:disabled,
.btn-dev-simulate:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-discord:disabled,
.btn:disabled,
.sub-action-btn:disabled,
.log-load-more:disabled,
.key-btn:disabled {
  transform: none !important;
  box-shadow: none !important;
}

.policy-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 48px 8% 72px !important;
  display: grid !important;
  gap: 22px !important;
}

.policy-header {
  margin: 0 !important;
  padding: clamp(24px, 4vw, 38px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(24, 215, 255, 0.18) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)) !important;
  box-shadow: var(--shadow) !important;
  position: relative;
  overflow: hidden;
}

.policy-header::after {
  content: '';
  position: absolute;
  right: -90px;
  top: -96px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(24, 215, 255, 0.18), transparent 72%);
  pointer-events: none;
}

.policy-title {
  font-size: clamp(34px, 5vw, 52px) !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  margin-bottom: 12px !important;
}

.policy-subtitle {
  max-width: 70ch;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.section-container {
  margin: 0 !important;
  padding: clamp(20px, 3vw, 30px) !important;
  border-radius: 24px !important;
  border: 1px solid var(--border) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)) !important;
  box-shadow: var(--shadow) !important;
}

.section-container::before {
  content: '';
  display: block;
  width: 72px;
  height: 2px;
  margin-bottom: 18px;
  background: linear-gradient(90deg, rgba(24, 215, 255, 0.92), transparent 78%);
}

.section-number {
  display: none !important;
}

.section-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
}

.section-title::before {
  content: 'Policy Section';
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft);
  font-weight: 700;
}

.section-content {
  margin-left: 0 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.section-content p {
  margin: 0 !important;
}

.section-content p + p {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(24, 215, 255, 0.12);
}

.section-content strong {
  color: var(--accent-strong) !important;
}

footer {
  margin-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  nav a,
  .mobile-menu a,
  .footer-links a,
  .cta-primary,
  .cta-secondary,
  .btn-purchase,
  .btn-dev-simulate,
  .billing-cta,
  .btn-primary,
  .btn-secondary,
  .btn-discord,
  .billing-link,
  .log-load-more,
  .log-filter,
  .tab-btn,
  .signout-btn,
  .sub-action-btn,
  .btn,
  .key-btn {
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .policy-container {
    padding: 24px 5% 48px !important;
  }

  .section-title {
    font-size: 24px !important;
  }
}