:root {
  
  --gx-d1:#06313c; --gx-d2:#073d4a; --gx-d3:#094c5d; --gx-d4:#0b5b6f; --gx-d5:#0d6b82; --gx-d6:#0f7e99;
  --gx-d7:#1294b5; --gx-d8:#15afd5; --gx-d9:#0dc4f2; --gx-d10:#49c9e9; --gx-d11:#86ddf3; --gx-d12:#d1f2fa;
  --gx-l1:#f6fcfe; --gx-l2:#ebf9fc; --gx-l3:#dcf4fa; --gx-l4:#caeef7; --gx-l5:#b4e7f4; --gx-l6:#99def0;
  --gx-l7:#75d3ea; --gx-l8:#45c3e3; --gx-l9:#10758e; --gx-l10:#0f6176; --gx-l11:#1c9bba; --gx-l12:#116073;
  
  --gx-nd1:#17191c; --gx-nd2:#1c2023; --gx-nd3:#24292d; --gx-nd4:#2c3237; --gx-nd5:#353c42; --gx-nd6:#434a51;
  --gx-nd7:#525b63; --gx-nd8:#677079; --gx-nd9:#626b74; --gx-nd10:#768089; --gx-nd11:#b1b8bf; --gx-nd12:#ecedee;
  --gx-nl1:#fcfcfd; --gx-nl2:#f6f7f8; --gx-nl3:#eff1f3; --gx-nl4:#e6e9ec; --gx-nl5:#dce0e5; --gx-nl6:#cfd5da;
  --gx-nl7:#bdc4cb; --gx-nl8:#a2abb4; --gx-nl9:#8899aa; --gx-nl10:#718598; --gx-nl11:#5f7081; --gx-nl12:#32383e;

  
  --gx-r: 3px;
  --gx-r-lg: 4px;
  --gx-font-head: "Montserrat", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --gx-font-body: "Roboto", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --gx-gap: 18px;
  --gx-pad: 20px;
  --gx-max: 1200px;

  
  --gx-chrome-bg: #14151a;
  --gx-chrome-bg2: #1b1d24;
  --gx-chrome-line: #2c3138;
  --gx-chrome-text: #ffffff;
  --gx-chrome-muted: #8b93a1;
  --gx-chrome-accent: #05c7f7;

  
  --gx-bg: var(--gx-nd1);
  --gx-bg-deep: #101216;
  --gx-panel: var(--gx-nd3);
  --gx-panel-2: var(--gx-nd4);
  --gx-panel-3: #191b22;
  --gx-line: var(--gx-nd4);
  --gx-primary: var(--gx-d9);
  --gx-primary-dim: var(--gx-d6);
  --gx-btn-text: #062430;
  --gx-secondary: #ff6a1f;
  --gx-secondary-dim: #c24300;
  --gx-text: var(--gx-nd12);
  --gx-title: #ffffff;
  --gx-muted: var(--gx-nd11);
  --gx-faint: var(--gx-nd10);
  --gx-star: #ffcf3f;
  --gx-good: #38d39f;
  --gx-link-hover: #7fe6ff;
  --gx-glow: 0 0 10px rgba(5, 199, 247, .5);
  --gx-glow-strong: 0 0 18px rgba(5, 199, 247, .55), 0 0 2px rgba(5, 199, 247, .8);
  --gx-glow-fire: 0 0 12px rgba(248, 88, 0, .45);
  --gx-shadow: 0 8px 26px rgba(0, 0, 0, .5);
}


[data-mode="light"] {
  --gx-bg: var(--gx-nl1);
  --gx-bg-deep: #eef1f4;
  --gx-panel: #ffffff;
  --gx-panel-2: #ffffff;
  --gx-panel-3: #f4f7fa;
  --gx-line: #d6dde4;
  --gx-primary: var(--gx-l9);
  --gx-primary-dim: var(--gx-l10);
  --gx-btn-text: #ffffff;
  --gx-secondary: #cf4f00;
  --gx-secondary-dim: #a53e00;
  --gx-text: var(--gx-nl12);
  --gx-title: #0d1418;
  --gx-muted: var(--gx-nl11);
  --gx-faint: #7a8794;
  --gx-star: #b57e00;
  --gx-good: #0e9e73;
  --gx-link-hover: #0a5f7d;
  --gx-glow: 0 1px 3px rgba(16, 60, 80, .12);
  --gx-glow-strong: 0 4px 14px rgba(14, 112, 145, .22);
  --gx-glow-fire: 0 2px 8px rgba(207, 79, 0, .18);
  --gx-shadow: 0 10px 28px rgba(30, 50, 70, .10);
}
@media (prefers-color-scheme: light) {
  :root:not([data-mode]) {
    --gx-bg: var(--gx-nl1); --gx-bg-deep: #eef1f4; --gx-panel: #ffffff; --gx-panel-2: #ffffff;
    --gx-panel-3: #f4f7fa; --gx-line: #d6dde4; --gx-primary: var(--gx-l9); --gx-primary-dim: var(--gx-l10);
    --gx-btn-text: #ffffff; --gx-secondary: #cf4f00; --gx-secondary-dim: #a53e00; --gx-text: var(--gx-nl12);
    --gx-title: #0d1418; --gx-muted: var(--gx-nl11); --gx-faint: #7a8794; --gx-star: #b57e00; --gx-good: #0e9e73;
    --gx-link-hover: #0a5f7d;
    --gx-glow: 0 1px 3px rgba(16, 60, 80, .12); --gx-glow-strong: 0 4px 14px rgba(14, 112, 145, .22);
    --gx-glow-fire: 0 2px 8px rgba(207, 79, 0, .18); --gx-shadow: 0 10px 28px rgba(30, 50, 70, .10);
  }
}