@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: #213547;
  background-color: #ffffff;
  --brand-orange: #ff9800;
  --brand-green: #07B062;
  --brand-blue: #2196f3;
  --brand-cyan: #00B8D4;
  --brand-green-light: #35B058;
  --brand-green-bright: #B2F951;
  --brand-green-deep: #388E3C;
  --brand-blue-deep: #1976D2;
  --brand-cyan-deep: #0097A7;
  --brand-green-surface: rgba(76, 175, 80, 0.1);
  --brand-blue-surface: rgba(33, 150, 243, 0.1);
  --brand-cyan-surface: rgba(0, 184, 212, 0.1);
  --text-dark: #2c3e50;
  --text-muted: #7f8c8d;
  --text-gray: #828282;
  --text-light-gray: #666;
  --text-black: #333;
  --text-white: #fff;
  --bg-body: #f4f7fa;
  --card-bg: #ffffff;
  --border-soft: #edf2f7;
  --border-gray: #cdcdcd;
  --border-light: #E0E0E0;
  --bg-black: #000;
  --bg-green-light: rgba(209, 249, 153, 0.2);
  --bg-green-soft: #F6FEEB;
  --text-green-bright: #5AFE4F;
  --text-brown: #653d00;
  --text-cyan-deep: #1b7678;
  --text-gray-soft: #F2F2F2;
  --text-gray-mid: #999;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body{
  background: var(--bg-body);
}
*{
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

a {
  font-weight: 500;
  /* color: #4caf50; */
  color: inherit;
  text-decoration: none;
}
a:hover {
   color: var(--brand-green);
  text-decoration: none;
}
a.fprice_link{
  color: var(--brand-green);
}
a.fprice_link:hover{
  text-decoration: none;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
  margin-bottom: 0;
  margin-top: 0;
}
h2 {
  margin-bottom: 0;
  margin-top: 0;
}


button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: var(--brand-green);
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}


@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: var(--brand-green);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
      background-color: #12141a;
      --bg-body: #12141a;
      --card-bg: #1c1f26;
      --bg-gray: #252932;
      --text-dark: #e2e8f0;
      --text-muted: #94a3b8;
      --text-black: #e2e8f0;
      --border-soft: #2d333f;
      --border-gray: #3d4450;
      --brand-green: #66BB6A;
      --brand-green-light: #81c784;
      --brand-green-deep: #43a047;
      --brand-blue: #64B5F6;
      --brand-cyan: #26C6DA;
      --brand-orange: #fbbf24;
      --brand-green-surface: rgba(102, 187, 106, 0.15);
      --brand-blue-surface: rgba(100, 181, 246, 0.15);
      --brand-cyan-surface: rgba(38, 198, 218, 0.15);
      --text-gray: #94a3b8;
      --text-light-gray: #64748b;
      --text-white: #e2e8f0;
      --border-light: #3d4450;
      --bg-black: #0a0b0e;
      --bg-green-light: rgba(102, 187, 106, 0.1);
      --bg-green-soft: rgba(102, 187, 106, 0.08);
      --text-green-bright: #86efac;
      --text-brown: #d4a574;
      --text-cyan-deep: #5eead4;
      --text-gray-soft: #94a3b8;
      --text-gray-mid: #64748b;
  }

  body {
    background-color: var(--bg-body);
    color: var(--text-dark);
  }

  .carousel {
    background-color: var(--bg-body);
  }

  .banner-item-wrap {
    background-color: var(--bg-body) !important;
    padding: 10px 8px;
  }

  .banner-item-wrap img {
    opacity: 0.92;
    border-radius: 8px;
  }

  .info-detail {
    background-color: var(--bg-body);
  }

  .info-detail .info-detail-item .number {
    color: var(--brand-green);
  }

  .rank-module-container {
    background-color: var(--bg-body);
  }

  .rank-module-desc {
    color: var(--text-muted);
  }

  .charts-module {
    background-color: var(--bg-body);
  }

  .instructions-module {
    background-color: var(--bg-body);
  }

  .instruction3 {
    background-color: var(--bg-body);
  }

  .map-container {
    background-color: transparent;
  }

  .avatars span {
    color: var(--text-muted);
  }
}

/* ==========================================================================
   强制移除所有元素的焦点蓝色边框（覆盖Bootstrap默认样式）
   放在文件末尾确保最高优先级
   ========================================================================== */
a,
a:link,
a:visited,
a:focus,
a:hover,
a:active,
button,
button:focus,
button:active,
input,
input:focus,
input:active,
textarea,
textarea:focus,
textarea:active,
select,
select:focus,
select:active,
[tabindex],
[tabindex]:focus,
[tabindex]:active {
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  outline-offset: 0 !important;
  -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 0 !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  outline-offset: 0 !important;
  -webkit-focus-ring-color: rgba(0, 0, 0, 0) !important;
  box-shadow: none !important;
}