/**
 * FX SUPPER AI — palette từ fxsupperai.online
 */
:root {
  --fx-chrome-light: #ffffff;
  --fx-bg: #020621;
  --fx-bg-mid: #06102b;
  --fx-surface: #0c1635;
  --fx-surface-card: #102e2d;
  --fx-surface-light: #f1f5f7;

  --fx-teal: #4cc2bf;
  --fx-teal-light: #33d5d5;
  --fx-teal-dim: #9bd2cc;
  --fx-teal-glow: rgba(76, 194, 191, 0.35);

  --lp-green: #3d9e7a;
  --lp-green-dark: #2f7d61;
  --lp-green-light: #8fd4b4;

  --fx-orange: #f49a3a;
  --fx-orange-mid: #f27323;
  --fx-orange-dark: #f57d27;
  --fx-orange-bright: #ff6d00;

  --fx-green: #22c55e;
  --fx-green-dark: #1fb34a;
  --fx-sell: #ef4444;

  --fx-text: #ffffff;
  --fx-text-soft: #e5e7eb;
  --fx-text-muted: #9ca3af;
  --fx-text-dim: #6b7280;

  --fx-border: rgba(76, 194, 191, 0.22);
  --fx-border-strong: rgba(76, 194, 191, 0.45);
  --fx-border-subtle: rgba(255, 255, 255, 0.08);

  --fx-gradient-page: linear-gradient(90deg, #33d5d5 0%, rgb(0, 136, 79) 100%);
  --fx-gradient-hero: linear-gradient(90deg, #33d5d5 0%, rgb(0, 136, 79) 100%);
  --fx-gradient-orange: linear-gradient(135deg, #f49a3a 0%, #f27323 100%);
  --fx-gradient-teal: linear-gradient(135deg, #4cc2bf 0%, #33d5d5 100%);
  --fx-gradient-card: linear-gradient(165deg, rgba(12, 22, 53, 0.95) 0%, rgba(6, 16, 43, 0.98) 100%);

  --fx-radius: 14px;
  --fx-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  --fx-shadow-teal: 0 0 32px rgba(76, 194, 191, 0.15);
}

/**
 * Browser chrome: LIGHT.
 * Safari iOS 26+ bỏ qua theme-color — dùng #fx-safari-chrome-top (theme.css).
 * Chrome/Android: vẫn dùng meta theme-color.
 */
html {
  color-scheme: light;
  background-color: var(--fx-chrome-light);
}

body {
  background-color: var(--fx-bg);
  color: var(--fx-text);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Safari iOS 26+ — thanh URL lấy màu từ phần tử fixed sát mép trên (≥6px, full width) */
#fx-safari-chrome-top {
  display: none;
}

@supports (-webkit-touch-callout: none) {
  #fx-safari-chrome-top {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 80%;
    height: calc(env(safe-area-inset-top, 0px) + 6px);
    min-height: 6px;
    margin: 0;
    padding: 0;
    border: none;
    background-color: var(--fx-chrome-light);
    pointer-events: none;
    z-index: 2147483647;
  }

  /* Nền fixed full-screen không che vùng trắng phía trên */
  .app-bg,
  .fx-bg,
  .acc-bg,
  .auth-bg {
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    right: 0;
    bottom: 0;
    left: 0;
    inset: auto;
  }

  /* Nav cố định — mép trên trắng để Safari 26 lấy mẫu */
  .fx-nav {
    background: linear-gradient(
      180deg,
      var(--fx-chrome-light) 0,
      var(--fx-chrome-light) calc(env(safe-area-inset-top, 0px) + 6px),
      rgba(0, 0, 0, 0.82) calc(env(safe-area-inset-top, 0px) + 6px)
    );
  }
}