:root {
  
  --proHl1:#fafcfc; --proHl2:#dff2f6; --proHl3:#c5e8ef; --proHl4:#d3eff8; --proHl5:#bce9f8; --proHl6:#9fdff4;
  --proHl7:#77d0ee; --proHl8:#43bde5; --proHl9:#0f7d99; --proHl10:#0b5f75; --proHl11:#0e6a83; --proHl12:#204c5b;
  
  --proHd1:#182d35; --proHd2:#0c2b31; --proHd3:#123a42; --proHd4:#1b566a; --proHd5:#1c677f; --proHd6:#1e7b9a;
  --proHd7:#2493b8; --proHd8:#32aed7; --proHd9:#00c9e4; --proHd10:#00a7c4; --proHd11:#5fd9ea; --proHd12:#e6f0f4;
  
  --proNl1:#f4f6f8; --proNl2:#eaeef1; --proNl3:#f1f1f2; --proNl4:#eaebec; --proNl5:#e2e3e4; --proNl6:#dde2e7;
  --proNl7:#c2c5c6; --proNl8:#a6a9ab; --proNl9:#898d8f; --proNl10:#74787b; --proNl11:#5c6773; --proNl12:#1c2530;
  
  --proNd1:#161616; --proNd2:#282828; --proNd3:#313131; --proNd4:#303234; --proNd5:#3a3c3e; --proNd6:#3e3e3e;
  --proNd7:#595c5e; --proNd8:#707376; --proNd9:#85878a; --proNd10:#9a9c9d; --proNd11:#a8a8a8; --proNd12:#f2f2f2;

  
  --proBg: var(--proNd1);
  --proSurface: var(--proNd2);
  --proSurfaceAlt: var(--proNd3);
  --proLine: var(--proNd6);
  --proText: var(--proNd12);
  --proTextMuted: var(--proNd11);
  --proCyan: #00c9e4;      
  --proBlue: #007bff;
  --proGreen: #00c9a7;     
  --proGreenSoft: rgba(0, 201, 167, .14);
  --proStar: #ffc107;
  --proGrad: linear-gradient(256deg, #00c9e4, #007bff);
  --proGradBtn: linear-gradient(256deg, #0f7d99, #1758c9);
  --proGradSoft: linear-gradient(256deg, rgba(0,201,228,.16), rgba(0,123,255,.16));
  --proHeading: #ffffff;   

  
  --proRadius: 6px;
  --proRadiusLg: 8px;

  
  --proShadow: 0 2px 10px rgba(0, 0, 0, .4);
  --proGlow: 0 4px 18px rgba(0, 123, 255, .3);

  --proFont: "Ubuntu", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --proSizeBase: 13.5px;
}


[data-mode="light"] {
  --proBg: var(--proNl1);
  --proSurface: #ffffff;
  --proSurfaceAlt: var(--proNl2);
  --proLine: var(--proNl6);
  --proText: var(--proNl12);
  --proTextMuted: var(--proNl11);
  --proCyan: #0e7d99;
  --proBlue: #0067d6;
  --proGreen: #0a8f76;
  --proGreenSoft: rgba(10, 143, 118, .12);
  --proStar: #d97e00;
  --proGrad: linear-gradient(256deg, #06b6d4, #2563eb);
  --proGradBtn: linear-gradient(256deg, #0f7d99, #1758c9);
  --proGradSoft: linear-gradient(256deg, rgba(14,125,153,.12), rgba(0,103,214,.12));
  --proHeading: #1c2530;
  --proShadow: 0 2px 10px rgba(20, 40, 70, .12);
  --proGlow: 0 4px 18px rgba(0, 103, 214, .16);
}
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) {
    --proBg: var(--proNl1); --proSurface: #ffffff; --proSurfaceAlt: var(--proNl2); --proLine: var(--proNl6);
    --proText: var(--proNl12); --proTextMuted: var(--proNl11); --proCyan: #0e7d99; --proBlue: #0067d6;
    --proGreen: #0a8f76; --proGreenSoft: rgba(10,143,118,.12); --proStar: #d97e00;
    --proGrad: linear-gradient(256deg, #06b6d4, #2563eb); --proGradBtn: linear-gradient(256deg, #0f7d99, #1758c9);
    --proGradSoft: linear-gradient(256deg, rgba(14,125,153,.12), rgba(0,103,214,.12)); --proHeading: #1c2530;
    --proShadow: 0 2px 10px rgba(20,40,70,.12); --proGlow: 0 4px 18px rgba(0,103,214,.16);
  }
}




.pro-mode {
  width: 34px; height: 34px; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--proLine); border-radius: var(--proRadius);
  background: var(--proSurfaceAlt); color: var(--proCyan);
  font-size: .95rem; display: grid; place-items: center;
}
.pro-mode:hover { border-color: var(--proCyan); box-shadow: var(--proGlow); }
.pro-mode .pro-sun { display: none; }
[data-mode="light"] .pro-mode .pro-moon { display: none; }
[data-mode="light"] .pro-mode .pro-sun { display: inline; }
@media (prefers-color-scheme: light) {
  :root:not([data-mode="dark"]) .pro-mode .pro-moon { display: none; }
  :root:not([data-mode="dark"]) .pro-mode .pro-sun { display: inline; }
}