@charset "UTF-8";
/* ==========================================================================
   New API 控制台 — Image Studio 品牌塗裝
   設計語言：Apple iOS 26 "Liquid Glass"
   唯一真相來源：image.tinchak0207.xyz 的 src/app/globals.css + tailwind.config.ts
   --------------------------------------------------------------------------
   注入方式：nginx sub_filter 在 </head> 前插入本檔，所以它是最後載入的樣式表。
   但上游（Semi Design + Tailwind）有大量同特異度的 utility class，
   顏色／形狀規則普遍需要 !important，選擇器一律用 `html body` 前綴把特異度
   墊到 (0,0,2) 以上。

   全檔不依賴任何雜湊 class 名，只用：語意化 class、CSS 變數、屬性選擇器、
   結構選擇器。純 CSS，零 JS（Sub2API 的 CSP script-src 帶 nonce 會擋腳本）。

   核心手法：Semi 的 --semi-color-* 全部是從調色盤推導的，
   例如 --semi-color-primary: rgba(var(--semi-blue-5), 1)。
   所以只要換掉 --semi-blue-0..9 / --semi-grey-* / --semi-red-* / --semi-green-*
   / --semi-orange-* 這 15 族共 150 個調色盤變數（值是逗號分隔 RGB 三元組），
   整套 UI 的語意色會層層串聯地跟著走 —— 不必逐個元件塗顏色。

   色彩基準（取自主站 globals.css :root）：
     頁底 #f7f7f7 / 主文 #141414 / 次要 #707070 / 邊 #e0e0e0
     強調 #0080ff（iOS 藍）— 只用於連結、focus ring、選中強調、資訊性標記
     主按鈕 #141414（近黑）— 不是藍色。這是主站與 admin 最容易搞混的一點。
     destructive #f4453c / success #34c759 / warning #ff9500
     --radius 20px（不是 6px，圓角尺度是核心觀感差異）
   ========================================================================== */

/* ==========================================================================
   1. 淺色模式：Semi 調色盤（15 族 x 10 階）+ 語意層 + Liquid Glass 材質
   ==========================================================================
   Semi 的原始宣告在 `body` 與 `body .semi-always-light` 上。
   本檔載入較晚，且選擇器多墊一層 `html`，特異度嚴格高於上游，故必然覆蓋。
   索引語意：0 = 最淺（淡填充底），5 = 基準操作色，6/7 = hover / active，
   9 = 最深（文字色）。 */
html body,
html body .semi-always-light,
html body[theme-mode="dark"] .semi-always-light {
  /* ── 調色盤：150 個 RGB 三元組 ── */
  /* blue */
  --semi-blue-0: 237,246,255;
  --semi-blue-1: 214,234,255;
  --semi-blue-2: 173,213,255;
  --semi-blue-3: 112,181,255;
  --semi-blue-4: 51,150,255;
  --semi-blue-5: 0,128,255;
  --semi-blue-6: 0,106,219;
  --semi-blue-7: 0,88,184;
  --semi-blue-8: 0,66,138;
  --semi-blue-9: 0,46,97;
  /* light-blue */
  --semi-light-blue-0: 234,248,255;
  --semi-light-blue-1: 206,240,254;
  --semi-light-blue-2: 160,224,252;
  --semi-light-blue-3: 104,205,250;
  --semi-light-blue-4: 40,177,236;
  --semi-light-blue-5: 0,152,214;
  --semi-light-blue-6: 0,128,182;
  --semi-light-blue-7: 0,105,150;
  --semi-light-blue-8: 0,79,113;
  --semi-light-blue-9: 0,55,79;
  /* grey */
  --semi-grey-0: 247,247,247;
  --semi-grey-1: 235,235,235;
  --semi-grey-2: 224,224,224;
  --semi-grey-3: 194,194,194;
  --semi-grey-4: 150,150,150;
  --semi-grey-5: 112,112,112;
  --semi-grey-6: 88,88,88;
  --semi-grey-7: 64,64,64;
  --semi-grey-8: 42,42,42;
  --semi-grey-9: 20,20,20;
  /* red */
  --semi-red-0: 255,241,240;
  --semi-red-1: 254,221,219;
  --semi-red-2: 252,187,183;
  --semi-red-3: 249,141,135;
  --semi-red-4: 246,97,90;
  --semi-red-5: 244,69,60;
  --semi-red-6: 214,50,42;
  --semi-red-7: 180,36,29;
  --semi-red-8: 140,25,20;
  --semi-red-9: 100,16,12;
  /* green */
  --semi-green-0: 236,250,240;
  --semi-green-1: 209,243,219;
  --semi-green-2: 165,229,185;
  --semi-green-3: 108,211,141;
  --semi-green-4: 52,199,89;
  --semi-green-5: 40,178,72;
  --semi-green-6: 32,150,60;
  --semi-green-7: 25,122,49;
  --semi-green-8: 18,92,37;
  --semi-green-9: 12,63,25;
  /* orange */
  --semi-orange-0: 255,246,232;
  --semi-orange-1: 255,236,204;
  --semi-orange-2: 255,217,158;
  --semi-orange-3: 255,192,105;
  --semi-orange-4: 255,166,51;
  --semi-orange-5: 255,149,0;
  --semi-orange-6: 219,124,0;
  --semi-orange-7: 184,101,0;
  --semi-orange-8: 143,77,0;
  --semi-orange-9: 102,54,0;
  /* yellow */
  --semi-yellow-0: 255,251,230;
  --semi-yellow-1: 255,244,194;
  --semi-yellow-2: 255,233,143;
  --semi-yellow-3: 255,220,82;
  --semi-yellow-4: 255,208,26;
  --semi-yellow-5: 255,204,0;
  --semi-yellow-6: 214,169,0;
  --semi-yellow-7: 176,138,0;
  --semi-yellow-8: 135,105,0;
  --semi-yellow-9: 94,73,0;
  /* amber */
  --semi-amber-0: 255,248,230;
  --semi-amber-1: 255,239,196;
  --semi-amber-2: 255,226,148;
  --semi-amber-3: 255,209,92;
  --semi-amber-4: 255,190,36;
  --semi-amber-5: 255,179,0;
  --semi-amber-6: 216,150,0;
  --semi-amber-7: 178,123,0;
  --semi-amber-8: 137,94,0;
  --semi-amber-9: 96,65,0;
  /* cyan */
  --semi-cyan-0: 233,248,254;
  --semi-cyan-1: 203,239,252;
  --semi-cyan-2: 156,223,249;
  --semi-cyan-3: 100,201,242;
  --semi-cyan-4: 62,184,236;
  --semi-cyan-5: 50,173,230;
  --semi-cyan-6: 34,145,196;
  --semi-cyan-7: 22,118,162;
  --semi-cyan-8: 13,88,122;
  --semi-cyan-9: 7,60,84;
  /* teal */
  --semi-teal-0: 230,250,249;
  --semi-teal-1: 196,243,240;
  --semi-teal-2: 143,229,224;
  --semi-teal-3: 84,213,206;
  --semi-teal-4: 30,206,198;
  --semi-teal-5: 0,199,190;
  --semi-teal-6: 0,168,160;
  --semi-teal-7: 0,138,131;
  --semi-teal-8: 0,104,99;
  --semi-teal-9: 0,71,68;
  /* indigo */
  --semi-indigo-0: 240,240,252;
  --semi-indigo-1: 220,220,248;
  --semi-indigo-2: 189,188,241;
  --semi-indigo-3: 149,148,229;
  --semi-indigo-4: 108,106,219;
  --semi-indigo-5: 88,86,214;
  --semi-indigo-6: 72,70,182;
  --semi-indigo-7: 57,56,150;
  --semi-indigo-8: 42,41,113;
  --semi-indigo-9: 28,27,78;
  /* violet */
  --semi-violet-0: 244,240,253;
  --semi-violet-1: 229,220,250;
  --semi-violet-2: 203,187,244;
  --semi-violet-3: 170,146,235;
  --semi-violet-4: 137,107,226;
  --semi-violet-5: 121,88,220;
  --semi-violet-6: 101,71,188;
  --semi-violet-7: 82,56,156;
  --semi-violet-8: 61,41,118;
  --semi-violet-9: 42,27,82;
  /* purple */
  --semi-purple-0: 250,240,253;
  --semi-purple-1: 243,220,250;
  --semi-purple-2: 231,189,244;
  --semi-purple-3: 213,148,234;
  --semi-purple-4: 190,105,224;
  --semi-purple-5: 175,82,222;
  --semi-purple-6: 148,63,190;
  --semi-purple-7: 122,49,158;
  --semi-purple-8: 92,35,120;
  --semi-purple-9: 64,23,84;
  /* pink */
  --semi-pink-0: 255,240,243;
  --semi-pink-1: 255,219,226;
  --semi-pink-2: 255,183,197;
  --semi-pink-3: 255,136,160;
  --semi-pink-4: 255,72,110;
  --semi-pink-5: 255,45,85;
  --semi-pink-6: 219,30,66;
  --semi-pink-7: 184,20,51;
  --semi-pink-8: 142,12,37;
  --semi-pink-9: 100,6,24;
  /* lime */
  --semi-lime-0: 243,251,232;
  --semi-lime-1: 227,246,203;
  --semi-lime-2: 200,235,152;
  --semi-lime-3: 168,222,96;
  --semi-lime-4: 141,209,45;
  --semi-lime-5: 124,196,22;
  --semi-lime-6: 103,166,16;
  --semi-lime-7: 84,137,11;
  --semi-lime-8: 63,104,7;
  --semi-lime-9: 43,72,4;

  /* ── 語意層：把 Semi 的「不透明白卡」換成 Liquid Glass 的半透明材質 ──
     Semi 原生 bg-0..4 在淺色模式下全是純白，玻璃無從談起。這裡改成
     逐層遞增不透明度的白：bg-0（卡片／側欄，最通透）→ bg-4（最實）。
     真正的 backdrop-filter 掛在具體容器上（見元件層），變數只負責底色。 */
  --semi-color-bg-0: rgba(255, 255, 255, 0.72);
  --semi-color-bg-1: rgba(255, 255, 255, 0.78);
  --semi-color-bg-2: rgba(255, 255, 255, 0.84);
  --semi-color-bg-3: rgba(255, 255, 255, 0.90);
  --semi-color-bg-4: rgba(255, 255, 255, 0.95);
  --semi-color-nav-bg: rgba(255, 255, 255, 0.62);

  /* 主站 --border 是 0 0% 88% → #e0e0e0。20,20,20 @ 12% 疊在白上等於 #e0e0e0 */
  --semi-color-border: rgba(20, 20, 20, 0.12);
  --semi-color-disabled-border: rgba(20, 20, 20, 0.10);
  --semi-color-disabled-bg: rgba(20, 20, 20, 0.05);
  --semi-color-disabled-fill: rgba(20, 20, 20, 0.04);
  --semi-color-disabled-text: rgba(20, 20, 20, 0.30);

  /* iOS 的 fill 階：比 Semi 原生更淡，才不會把玻璃壓成灰卡 */
  --semi-color-fill-0: rgba(20, 20, 20, 0.045);
  --semi-color-fill-1: rgba(20, 20, 20, 0.075);
  --semi-color-fill-2: rgba(20, 20, 20, 0.110);

  /* 遮罩：主站彈窗底下是淡霧不是黑幕（元件層另加 blur） */
  --semi-color-overlay-bg: rgba(20, 20, 22, 0.28);
  --semi-color-shadow: rgba(0, 0, 0, 0.05);
  --semi-shadow-elevated:
    0 20px 60px rgba(0, 0, 0, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.06);

  /* 圓角：--radius 20px 是主站基準。Semi 原生 3/3/6/12 太方，
     整體上推一階；小元件 12px、卡片／彈窗 20px。circle / full 不動。 */
  --semi-border-radius-extra-small: 8px;
  --semi-border-radius-small: 12px;
  --semi-border-radius-medium: 16px;
  --semi-border-radius-large: 20px;

  /* 圖表色：Semi 原生 data-0..19 是另一套飽和度語彙，拉回 iOS 系統色 */
  --semi-color-data-0: #0080ff;
  --semi-color-data-1: #34c759;
  --semi-color-data-2: #ff9500;
  --semi-color-data-3: #af52de;
  --semi-color-data-4: #5ac8fa;
  --semi-color-data-5: #ffcc00;
  --semi-color-data-6: #ff2d55;
  --semi-color-data-7: #00c7be;
  --semi-color-data-8: #5856d6;
  --semi-color-data-9: #f4453c;
  --semi-color-data-10: #007a99;
  --semi-color-data-11: #ffb300;
  --semi-color-data-12: #7c58dc;
  --semi-color-data-13: #4aa8ff;
  --semi-color-data-14: #b27b00;
  --semi-color-data-15: #ff8fa3;
  --semi-color-data-16: #00a8a0;
  --semi-color-data-17: #8dd12d;
  --semi-color-data-18: #c86ee6;
  --semi-color-data-19: #aecdff;

  /* ── Liquid Glass 材質變數（照抄主站 globals.css :root） ── */
  --lg-blur: 40px;
  --lg-blur-bar: 28px;
  --lg-saturate: 180%;
  --lg-brightness: 1.08;
  --lg-bg-primary: rgba(255, 255, 255, 0.72);
  --lg-bg-secondary: rgba(255, 255, 255, 0.56);
  --lg-bg-tertiary: rgba(255, 255, 255, 0.38);
  --lg-bg-bar: rgba(255, 255, 255, 0.62);
  --lg-bg-sheet: rgba(255, 255, 255, 0.82);
  --lg-border-top: rgba(255, 255, 255, 0.92);
  --lg-border-side: rgba(255, 255, 255, 0.48);
  --lg-border-bottom: rgba(0, 0, 0, 0.06);
  --lg-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.90);
  --lg-shadow-ambient: 0 2px 8px rgba(0, 0, 0, 0.04);
  --lg-shadow-card:
    0 12px 40px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  --lg-shadow-elevated:
    0 20px 60px rgba(0, 0, 0, 0.10),
    0 4px 16px rgba(0, 0, 0, 0.06);
  --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lg-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── 三檔 backdrop-filter 配方 ──
     card / bar 用 28px：卡片與側欄是大面積常駐節點，半徑越大合成器每幀
     要回讀並重模糊的區域越大，中低階 Android 直接掉幀。
     float 才用 40px：popover / toast / 下拉都是小面積短命浮層。 */
  --lg-filter-card: blur(28px) saturate(180%) brightness(1.08);
  --lg-filter-bar: blur(28px) saturate(200%) brightness(1.10);
  --lg-filter-float: blur(40px) saturate(180%) brightness(1.06);
  --lg-sheet-bright: 1.12;

  /* Tooltip 在兩個模式下都是「反相」的小玻璃片 */
  --lg-tooltip-bg: rgba(28, 28, 30, 0.86);
  --lg-tooltip-fg: rgba(255, 255, 255, 0.96);

  --lg-scrollbar: rgba(0, 0, 0, 0.14);
  --lg-scrollbar-hover: rgba(0, 0, 0, 0.26);
  --lg-selection: rgba(0, 128, 255, 0.18);

  /* 近黑主按鈕（主站 --primary: 0 0% 8%）。藍不是主按鈕色。 */
  --lg-solid: #141414;
  --lg-solid-fg: #ffffff;
  --lg-solid-hover: #2b2b2b;
  --lg-solid-active: #000000;
  /* --lg-accent 是「圖形用」的強調色：focus ring、底線、滑桿、進度條、
     邊框、選中填充 —— 這些只需要 3:1，#0080ff 對白底是 3.75，過關。
     但 #0080ff 當「文字」用只有 3.75:1，過不了 AA 的 4.5 —— 連結、
     選中的分頁／導覽標籤都是正文級字級。所以文字另走深一階的 blue-7，
     色相完全相同（H=210），只把明度從 50% 降到 36%。 */
  --lg-accent: #0080ff;
  --lg-accent-text: #0058b8;
  /* 實心藍塊上壓白字（例如日曆選中日）：#0080ff 上的白只有 3.80，改用 blue-6 */
  --lg-accent-solid: #006adb;
  --lg-accent-soft: rgba(0, 128, 255, 0.12);
  --lg-accent-soft-hover: rgba(0, 128, 255, 0.17);
  --lg-danger-text: #b4241d;
  --lg-text-strong: rgba(0, 0, 0, 0.88);
  /* 0.56 疊在白底上剛好是 #707070 —— 主站的 --muted-foreground (0 0% 44%)。
     不用 0.50：那是 #808080，12px 表頭字在白底上只有 3.9:1，過不了 AA。 */
  --lg-text-mute: rgba(0, 0, 0, 0.56);
  /* 主站 .lg-divider 就是 rgba(0,0,0,0.10)；--semi-color-border 另走 0.12
     (= #e0e0e0，主站的 --border)。分隔線比外框淺一階是刻意的。 */
  --lg-hairline: rgba(0, 0, 0, 0.10);
}

/* ==========================================================================
   2. 深色模式：同一套變數的暗色對偶
   ==========================================================================
   Semi 在深色模式下把調色盤「翻轉」：索引 0 變成最深、9 變成最淺，
   但語意映射不變（text-0 永遠是 grey-9）。所以這裡不是重寫一套語意，
   只是把每一族的明度曲線倒過來，並整體提亮基準階（x-5）以維持
   暗底上的對比 —— 例如 blue-5 從 #0080ff 提到 #3396ff（對 #16161a 約 6:1）。

   玻璃部分不退回方正的深色後台：--lg-bg-* 換成 rgba(28,28,30,0.72) 這類
   暗色半透明，上緣亮邊從 0.92 白降到 0.14 白（暗面材質的高光本來就弱），
   陰影加深，backdrop-filter 的 brightness 壓到 1 以下（暗底上提亮會泛灰髒）。
   模糊半徑、圓角、邊框結構完全不變。 */
html body[theme-mode="dark"],
html body .semi-always-dark,
html.dark body {
  /* ── 調色盤（暗色對偶）：150 個 RGB 三元組 ── */
  /* blue */
  --semi-blue-0: 8,38,79;
  --semi-blue-1: 10,52,108;
  --semi-blue-2: 13,72,148;
  --semi-blue-3: 20,102,200;
  --semi-blue-4: 33,130,240;
  --semi-blue-5: 51,150,255;
  --semi-blue-6: 92,176,255;
  --semi-blue-7: 138,201,255;
  --semi-blue-8: 190,226,255;
  --semi-blue-9: 235,246,255;
  /* light-blue */
  --semi-light-blue-0: 5,40,60;
  --semi-light-blue-1: 6,56,84;
  --semi-light-blue-2: 8,78,116;
  --semi-light-blue-3: 10,110,160;
  --semi-light-blue-4: 16,142,204;
  --semi-light-blue-5: 32,168,232;
  --semi-light-blue-6: 84,192,240;
  --semi-light-blue-7: 136,214,246;
  --semi-light-blue-8: 190,235,251;
  --semi-light-blue-9: 233,248,254;
  /* grey */
  --semi-grey-0: 28,28,30;
  --semi-grey-1: 44,44,46;
  --semi-grey-2: 58,58,60;
  --semi-grey-3: 72,72,74;
  --semi-grey-4: 99,99,102;
  --semi-grey-5: 142,142,147;
  --semi-grey-6: 174,174,178;
  --semi-grey-7: 199,199,204;
  --semi-grey-8: 229,229,234;
  --semi-grey-9: 247,247,247;
  /* red */
  --semi-red-0: 66,16,13;
  --semi-red-1: 92,22,18;
  --semi-red-2: 128,30,24;
  --semi-red-3: 172,42,34;
  --semi-red-4: 214,58,49;
  --semi-red-5: 248,88,79;
  --semi-red-6: 250,125,117;
  --semi-red-7: 252,161,154;
  --semi-red-8: 253,201,196;
  --semi-red-9: 255,236,234;
  /* green */
  --semi-green-0: 11,46,22;
  --semi-green-1: 16,66,31;
  --semi-green-2: 23,92,43;
  --semi-green-3: 31,122,57;
  --semi-green-4: 42,160,73;
  --semi-green-5: 60,196,98;
  --semi-green-6: 100,214,133;
  --semi-green-7: 143,227,167;
  --semi-green-8: 192,241,207;
  --semi-green-9: 236,251,241;
  /* orange */
  --semi-orange-0: 68,35,0;
  --semi-orange-1: 94,49,0;
  --semi-orange-2: 128,67,0;
  --semi-orange-3: 170,90,0;
  --semi-orange-4: 214,116,0;
  --semi-orange-5: 255,158,32;
  --semi-orange-6: 255,181,88;
  --semi-orange-7: 255,204,140;
  --semi-orange-8: 255,226,190;
  --semi-orange-9: 255,244,230;
  /* yellow */
  --semi-yellow-0: 60,47,0;
  --semi-yellow-1: 84,66,0;
  --semi-yellow-2: 114,90,0;
  --semi-yellow-3: 152,120,0;
  --semi-yellow-4: 196,155,0;
  --semi-yellow-5: 245,200,30;
  --semi-yellow-6: 250,216,90;
  --semi-yellow-7: 252,230,142;
  --semi-yellow-8: 254,242,191;
  --semi-yellow-9: 255,251,231;
  /* amber */
  --semi-amber-0: 64,42,0;
  --semi-amber-1: 89,58,0;
  --semi-amber-2: 121,80,0;
  --semi-amber-3: 161,106,0;
  --semi-amber-4: 206,136,0;
  --semi-amber-5: 250,182,36;
  --semi-amber-6: 252,203,94;
  --semi-amber-7: 253,222,145;
  --semi-amber-8: 254,238,193;
  --semi-amber-9: 255,249,232;
  /* cyan */
  --semi-cyan-0: 6,42,58;
  --semi-cyan-1: 8,58,80;
  --semi-cyan-2: 11,80,110;
  --semi-cyan-3: 15,108,148;
  --semi-cyan-4: 24,140,190;
  --semi-cyan-5: 56,176,230;
  --semi-cyan-6: 104,199,240;
  --semi-cyan-7: 152,219,246;
  --semi-cyan-8: 199,236,251;
  --semi-cyan-9: 234,248,254;
  /* teal */
  --semi-teal-0: 0,45,43;
  --semi-teal-1: 0,63,60;
  --semi-teal-2: 0,86,82;
  --semi-teal-3: 0,116,110;
  --semi-teal-4: 0,152,145;
  --semi-teal-5: 26,196,187;
  --semi-teal-6: 88,214,206;
  --semi-teal-7: 143,229,223;
  --semi-teal-8: 196,243,239;
  --semi-teal-9: 234,251,250;
  /* indigo */
  --semi-indigo-0: 26,25,64;
  --semi-indigo-1: 35,34,88;
  --semi-indigo-2: 48,47,118;
  --semi-indigo-3: 65,63,156;
  --semi-indigo-4: 87,85,198;
  --semi-indigo-5: 116,114,228;
  --semi-indigo-6: 152,150,238;
  --semi-indigo-7: 187,186,245;
  --semi-indigo-8: 219,218,250;
  --semi-indigo-9: 242,242,253;
  /* violet */
  --semi-violet-0: 36,24,68;
  --semi-violet-1: 49,32,93;
  --semi-violet-2: 66,44,124;
  --semi-violet-3: 89,60,164;
  --semi-violet-4: 116,82,206;
  --semi-violet-5: 146,113,232;
  --semi-violet-6: 174,148,240;
  --semi-violet-7: 201,183,246;
  --semi-violet-8: 226,215,251;
  --semi-violet-9: 244,240,253;
  /* purple */
  --semi-purple-0: 54,20,71;
  --semi-purple-1: 74,27,97;
  --semi-purple-2: 99,37,129;
  --semi-purple-3: 130,50,170;
  --semi-purple-4: 165,70,212;
  --semi-purple-5: 194,110,235;
  --semi-purple-6: 211,148,241;
  --semi-purple-7: 226,185,246;
  --semi-purple-8: 240,218,251;
  --semi-purple-9: 250,241,254;
  /* pink */
  --semi-pink-0: 74,12,26;
  --semi-pink-1: 100,17,35;
  --semi-pink-2: 136,24,47;
  --semi-pink-3: 178,33,63;
  --semi-pink-4: 222,46,82;
  --semi-pink-5: 255,80,112;
  --semi-pink-6: 255,124,148;
  --semi-pink-7: 255,166,183;
  --semi-pink-8: 255,208,217;
  --semi-pink-9: 255,238,242;
  /* lime */
  --semi-lime-0: 34,58,6;
  --semi-lime-1: 47,80,8;
  --semi-lime-2: 64,108,11;
  --semi-lime-3: 86,144,15;
  --semi-lime-4: 113,182,20;
  --semi-lime-5: 148,214,48;
  --semi-lime-6: 176,228,100;
  --semi-lime-7: 202,239,148;
  --semi-lime-8: 226,247,196;
  --semi-lime-9: 244,252,232;

  /* ── 深色語意層：暗色玻璃 ──
     策略不是「退回方正深色後台」，而是把同一套玻璃配方換底：
     半透明白 → 半透明近黑 (28,28,30)；上緣亮邊 0.92 白 → 0.12 白；
     陰影加深、模糊半徑與圓角完全不變。結構一致，只換材質的「顏色溫度」。 */
  --semi-color-bg-0: rgba(28, 28, 30, 0.72);
  --semi-color-bg-1: rgba(32, 32, 35, 0.78);
  --semi-color-bg-2: rgba(38, 38, 42, 0.84);
  --semi-color-bg-3: rgba(44, 44, 48, 0.90);
  --semi-color-bg-4: rgba(52, 52, 57, 0.94);
  --semi-color-nav-bg: rgba(24, 24, 27, 0.66);

  --semi-color-border: rgba(255, 255, 255, 0.12);
  --semi-color-disabled-border: rgba(255, 255, 255, 0.10);
  --semi-color-disabled-bg: rgba(255, 255, 255, 0.06);
  --semi-color-disabled-fill: rgba(255, 255, 255, 0.05);
  --semi-color-disabled-text: rgba(255, 255, 255, 0.32);

  --semi-color-fill-0: rgba(255, 255, 255, 0.07);
  --semi-color-fill-1: rgba(255, 255, 255, 0.11);
  --semi-color-fill-2: rgba(255, 255, 255, 0.16);

  --semi-color-overlay-bg: rgba(0, 0, 0, 0.48);
  --semi-color-shadow: rgba(0, 0, 0, 0.30);
  --semi-shadow-elevated:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 4px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --semi-border-radius-extra-small: 8px;
  --semi-border-radius-small: 12px;
  --semi-border-radius-medium: 16px;
  --semi-border-radius-large: 20px;

  --semi-color-data-0: #4aa8ff;
  --semi-color-data-1: #3cc462;
  --semi-color-data-2: #ff9e20;
  --semi-color-data-3: #c26eeb;
  --semi-color-data-4: #6fd0fb;
  --semi-color-data-5: #f5c81e;
  --semi-color-data-6: #ff5070;
  --semi-color-data-7: #1ac4bb;
  --semi-color-data-8: #7472e4;
  --semi-color-data-9: #f8584f;
  --semi-color-data-10: #38b0e6;
  --semi-color-data-11: #fab624;
  --semi-color-data-12: #9271e8;
  --semi-color-data-13: #8ac9ff;
  --semi-color-data-14: #fcce5e;
  --semi-color-data-15: #ffa6b7;
  --semi-color-data-16: #58d6ce;
  --semi-color-data-17: #b0e464;
  --semi-color-data-18: #d394f1;
  --semi-color-data-19: #bee2ff;

  /* ── 暗色玻璃材質 ── */
  --lg-bg-primary: rgba(28, 28, 30, 0.72);
  --lg-bg-secondary: rgba(32, 32, 35, 0.58);
  --lg-bg-tertiary: rgba(36, 36, 40, 0.42);
  --lg-bg-bar: rgba(24, 24, 27, 0.64);
  --lg-bg-sheet: rgba(38, 38, 42, 0.86);
  --lg-border-top: rgba(255, 255, 255, 0.14);
  --lg-border-side: rgba(255, 255, 255, 0.08);
  --lg-border-bottom: rgba(0, 0, 0, 0.36);
  --lg-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --lg-shadow-ambient: 0 2px 10px rgba(0, 0, 0, 0.35);
  --lg-shadow-card:
    0 16px 44px rgba(0, 0, 0, 0.46),
    0 2px 8px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --lg-shadow-elevated:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 4px 16px rgba(0, 0, 0, 0.35);

  /* 深色玻璃把 brightness 壓到 1 以下：暗底上提亮 backdrop 會讓玻璃泛灰髒 */
  --lg-filter-card: blur(28px) saturate(170%) brightness(0.82);
  --lg-filter-bar: blur(28px) saturate(180%) brightness(0.78);
  --lg-filter-float: blur(40px) saturate(160%) brightness(0.80);
  --lg-sheet-bright: 0.84;

  --lg-tooltip-bg: rgba(238, 238, 242, 0.92);
  --lg-tooltip-fg: #141414;

  --lg-scrollbar: rgba(255, 255, 255, 0.18);
  --lg-scrollbar-hover: rgba(255, 255, 255, 0.32);
  --lg-selection: rgba(51, 150, 255, 0.28);

  /* 深色底下近黑主按鈕會與背景糊在一起 → 反相成近白按鈕（近黑的深色對偶），
     仍然不是藍：藍在兩個模式裡都只負責連結／focus／選中。 */
  --lg-solid: #f2f2f4;
  --lg-solid-hover: #ffffff;
  --lg-solid-active: #d8d8dc;
  --lg-solid-fg: #141414;
  /* 深色底下亮藍本來就夠亮：#3396ff 對暗卡片是 5.81，文字再提一階更保險 */
  --lg-accent: #3396ff;
  --lg-accent-text: #5cb0ff;
  --lg-accent-solid: #1a6fd4;
  --lg-accent-soft: rgba(51, 150, 255, 0.18);
  --lg-accent-soft-hover: rgba(51, 150, 255, 0.26);
  --lg-danger-text: #fa7d75;
  --lg-text-strong: rgba(255, 255, 255, 0.92);
  --lg-text-mute: rgba(255, 255, 255, 0.56);
  --lg-hairline: rgba(255, 255, 255, 0.10);
}

/* ==========================================================================
   3. 全域基底：字體、頁面底色、容器透明化
   ==========================================================================
   backdrop-filter 只能模糊「畫在它後面」的東西。Semi 的 layout 鏈預設是
   不透明白／黑，玻璃卡片疊在上面等於模糊一片純色 —— 觀感是灰卡不是玻璃。
   所以第一步是把 layout 鏈整條打穿到 body 的漸層。 */

html body,
html body [class*="semi-"],
html body input,
html body textarea,
html body select,
html body button {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

html body code,
html body kbd,
html body pre,
html body .hljs,
html body .semi-typography code,
html body [class*="semi-json-viewer"],
html body .tabular-nums,
html body .font-mono {
  font-family: "SF Mono", ui-monospace, SFMono-Regular, "JetBrains Mono",
    Menlo, Consolas, "Liberation Mono", monospace !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* 主站的環境漸層（trans flag 藍 #55CDFC / 粉 #F7A8B8，極淡） */
html body {
  color: var(--semi-color-text-0) !important;
  background:
    radial-gradient(ellipse 130% 90% at 15% 5%,
      rgba(85, 205, 252, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 110% 75% at 85% 95%,
      rgba(247, 168, 184, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 90% 65% at 80% 10%,
      rgba(85, 205, 252, 0.07) 0%, transparent 55%),
    linear-gradient(160deg, #f5fbff 0%, #fef5f7 50%, #f5fbff 100%) !important;
  background-attachment: fixed !important;
}

html body[theme-mode="dark"],
html.dark body {
  background:
    radial-gradient(ellipse 130% 90% at 15% 5%,
      rgba(85, 205, 252, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 110% 75% at 85% 95%,
      rgba(247, 168, 184, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 90% 65% at 80% 10%,
      rgba(88, 86, 214, 0.10) 0%, transparent 55%),
    linear-gradient(160deg, #101014 0%, #16141a 50%, #0e1116 100%) !important;
  background-attachment: fixed !important;
}

/* 主站的顆粒噪點（模擬 Apple 材質的紙感）。
   放 ::after + z-index:-1：畫在 body 底色之上、所有內容之下，
   pointer-events:none 保證不吃任何點擊。 */
html body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.022;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

html body[theme-mode="dark"]::after,
html.dark body::after {
  opacity: 0.035;
}

html body ::selection {
  background: var(--lg-selection);
}

/* layout 鏈全部透明 —— 玻璃的前提 */
html body #root,
html body .semi-layout,
html body .semi-layout-content,
html body .semi-layout-footer,
html body .semi-layout-has-sider,
html body .app-layout,
html body .public-page-content,
html body .classic-home-page,
html body .classic-home-default,
html body .classic-page-fill,
html body .pricing-layout,
html body .pricing-view-container,
html body .pricing-view-container-mobile {
  background: transparent !important;
  background-color: transparent !important;
}

/* ==========================================================================
   4. 卡片 / 面板 —— .lg-card 配方
   ==========================================================================
   四段不同的邊框色（上亮、左右次亮、下暗）模擬光從上方打下來的折射，
   這是「主站味道」最關鍵的一條，不是單純的 1px solid border。 */

html body .semi-card,
html body .semi-card-bordered,
html body .semi-collapse,
html body .semi-list-bordered,
html body .debug-panel {
  background: var(--lg-bg-primary) !important;
  background-color: var(--lg-bg-primary) !important;
  border: none !important;
  border-top: 1px solid var(--lg-border-top) !important;
  border-left: 1px solid var(--lg-border-side) !important;
  border-right: 1px solid var(--lg-border-side) !important;
  border-bottom: 1px solid var(--lg-border-bottom) !important;
  border-radius: 20px !important;
  box-shadow: var(--lg-shadow-card) !important;
  -webkit-backdrop-filter: var(--lg-filter-card);
  backdrop-filter: var(--lg-filter-card);
  transition: box-shadow 0.25s var(--lg-ease), transform 0.25s var(--lg-ease);
}

/* 巢狀卡片不再疊一層玻璃：每個 backdrop-filter 節點都是獨立合成層，
   巢狀等於同一塊區域被合成器重複回讀。內層改用純填充，靠留白分組。 */
html body .semi-card .semi-card,
html body .semi-card .semi-collapse,
html body .semi-card .semi-list-bordered,
html body .semi-modal-content .semi-card,
html body .semi-modal-content .semi-collapse,
html body .semi-sidesheet-inner .semi-card,
html body .semi-popover-wrapper .semi-card {
  background: var(--semi-color-fill-0) !important;
  background-color: var(--semi-color-fill-0) !important;
  border: 1px solid var(--lg-hairline) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html body .semi-card-shadows-hover:hover {
  box-shadow: var(--lg-shadow-elevated), var(--lg-inset-top) !important;
  transform: translateY(-1px);
}

html body .semi-card-header,
html body .semi-card-header-bordered,
html body .semi-card-footer-bordered,
html body .semi-list-header,
html body .semi-list-footer {
  background: transparent !important;
  border-color: var(--lg-hairline) !important;
  border-bottom-width: 1px !important;
}

html body .semi-card-header-wrapper-title,
html body .semi-card-header-wrapper-title .semi-typography {
  color: var(--semi-color-text-0) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
}

html body .semi-card-body {
  background: transparent !important;
}

/* ==========================================================================
   5. 側欄 / 頂欄 / 導覽 —— .lg-bar 配方（blur 28px）
   ========================================================================== */

html body .semi-navigation,
html body .semi-layout-sider,
html body .semi-layout-sider-children,
html body .sidebar-container,
html body .app-sider,
html body .pricing-sidebar {
  background: var(--lg-bg-bar) !important;
  background-color: var(--lg-bg-bar) !important;
  border: none !important;
  border-right: 1px solid var(--lg-hairline) !important;
  box-shadow: var(--lg-shadow-ambient) !important;
  -webkit-backdrop-filter: var(--lg-filter-bar);
  backdrop-filter: var(--lg-filter-bar);
}

/* 側欄內層不要再疊一次玻璃 */
html body .semi-layout-sider .semi-navigation,
html body .sidebar-container .semi-navigation,
html body .app-sider .semi-navigation {
  background: transparent !important;
  background-color: transparent !important;
  border-right: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html body .semi-navigation-horizontal,
html body .semi-layout-header,
html body .app-layout > header,
html body .pricing-search-header {
  background: var(--lg-bg-bar) !important;
  background-color: var(--lg-bg-bar) !important;
  border: none !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
  box-shadow: var(--lg-shadow-ambient) !important;
  -webkit-backdrop-filter: var(--lg-filter-bar);
  backdrop-filter: var(--lg-filter-bar);
}

html body .semi-navigation-header,
html body .semi-navigation-footer,
html body .semi-navigation-inner,
html body .semi-navigation-list-wrapper,
html body .semi-navigation-list {
  background: transparent !important;
}

html body .semi-navigation-header-text,
html body .semi-navigation-header-logo {
  color: var(--semi-color-text-0) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

/* 導覽項：iOS 的 tinted fill，不是實心藍塊 */
html body .semi-navigation-item,
html body .semi-navigation-sub-title,
html body .sidebar-nav-item {
  border-radius: 12px !important;
  color: var(--semi-color-text-1) !important;
  font-weight: 500 !important;
  transition: background-color 0.2s var(--lg-ease), color 0.2s var(--lg-ease);
}

html body .semi-navigation-item:hover,
html body .semi-navigation-sub-title:hover,
html body .sidebar-nav-item:hover {
  background-color: var(--semi-color-fill-0) !important;
  color: var(--semi-color-text-0) !important;
}

html body .semi-navigation-item-selected,
html body .semi-navigation-item-selected:hover,
html body .sidebar-nav-item-selected,
html body .sidebar-nav-item-selected:hover {
  background-color: var(--lg-accent-soft) !important;
  color: var(--lg-accent-text) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 128, 255, 0.16);
}

html body .semi-navigation-item-selected .semi-navigation-item-icon,
html body .semi-navigation-item-selected .semi-icon,
html body .sidebar-nav-item-selected .semi-icon,
html body .sidebar-nav-item-selected .sidebar-icon-container {
  color: var(--lg-accent-text) !important;
}

html body .semi-navigation-sub-wrap .semi-navigation-sub-title,
html body .semi-navigation-collapsed-wrapper {
  border-radius: 12px !important;
}

html body .sidebar-group-label {
  color: var(--lg-text-mute) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
}

html body .sidebar-divider,
html body .semi-divider {
  background-color: var(--lg-hairline) !important;
  border-color: var(--lg-hairline) !important;
}

html body .sidebar-collapse-button {
  background: transparent !important;
  background-color: transparent !important;
  border-top: 1px solid var(--lg-hairline) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html body .sidebar-collapse-button-inner {
  background-color: var(--semi-color-fill-0) !important;
  border: 1px solid var(--lg-hairline) !important;
  transition: background-color 0.2s var(--lg-ease), transform 0.3s var(--lg-spring);
}

html body .sidebar-collapse-button:hover .sidebar-collapse-button-inner {
  background-color: var(--lg-accent-soft) !important;
  color: var(--lg-accent-text) !important;
  transform: scale(1.06);
}

/* ==========================================================================
   6. 按鈕
   ==========================================================================
   主按鈕 = 近黑 #141414（主站 --primary: 0 0% 8%）。
   #0080ff 只出現在連結、focus ring、選中強調 —— 這是主站與 admin 最容易
   搞混的一點，實心藍按鈕會立刻讓整站讀成「另一個後台」。 */

html body .semi-button {
  border-radius: 12px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  box-shadow: none;
  transition: background-color 0.2s var(--lg-ease), color 0.2s var(--lg-ease),
    box-shadow 0.2s var(--lg-ease), transform 0.3s var(--lg-spring) !important;
}

html body .semi-button:not(.semi-button-disabled):active {
  transform: scale(0.97);
}

html body .semi-button-primary:not(.semi-button-light):not(.semi-button-borderless):not(.semi-button-outline) {
  background-color: var(--lg-solid) !important;
  color: var(--lg-solid-fg) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), var(--lg-inset-top) !important;
}

html body .semi-button-primary:not(.semi-button-light):not(.semi-button-borderless):not(.semi-button-outline):not(.semi-button-disabled):hover {
  background-color: var(--lg-solid-hover) !important;
  color: var(--lg-solid-fg) !important;
}

html body .semi-button-primary:not(.semi-button-light):not(.semi-button-borderless):not(.semi-button-outline):not(.semi-button-disabled):active {
  background-color: var(--lg-solid-active) !important;
}

/* 淡色 / 無框主按鈕：這裡才是藍色的位置（等同連結語彙） */
html body .semi-button-primary.semi-button-light,
html body .semi-button-primary.semi-button-borderless,
html body .semi-button-primary.semi-button-outline {
  color: var(--lg-accent-text) !important;
}

html body .semi-button-primary.semi-button-light {
  background-color: var(--lg-accent-soft) !important;
}

html body .semi-button-primary.semi-button-light:not(.semi-button-disabled):hover {
  background-color: var(--lg-accent-soft-hover) !important;
}

html body .semi-button-primary.semi-button-outline {
  background-color: transparent !important;
  border: 1px solid rgba(0, 128, 255, 0.32) !important;
}

/* 次要 / 中性按鈕：玻璃填充 + 髮絲邊，不用實心色塊 */
html body .semi-button-tertiary:not(.semi-button-light):not(.semi-button-borderless),
html body .semi-button-secondary:not(.semi-button-light):not(.semi-button-borderless) {
  background-color: var(--lg-bg-secondary) !important;
  color: var(--semi-color-text-0) !important;
  box-shadow: inset 0 0 0 1px var(--lg-hairline), var(--lg-shadow-ambient) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

html body .semi-button-tertiary:not(.semi-button-light):not(.semi-button-borderless):not(.semi-button-disabled):hover,
html body .semi-button-secondary:not(.semi-button-light):not(.semi-button-borderless):not(.semi-button-disabled):hover {
  background-color: var(--lg-bg-primary) !important;
  color: var(--semi-color-text-0) !important;
}

html body .semi-button-light,
html body .semi-button-borderless {
  background-color: var(--semi-color-fill-0) !important;
}

html body .semi-button-borderless:not(.semi-button-disabled):hover,
html body .semi-button-light:not(.semi-button-disabled):hover {
  background-color: var(--semi-color-fill-1) !important;
}

html body .semi-button-danger:not(.semi-button-light):not(.semi-button-borderless):not(.semi-button-outline) {
  background-color: var(--semi-color-danger) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(244, 69, 60, 0.28), var(--lg-inset-top) !important;
}

html body .semi-button-danger.semi-button-light {
  background-color: var(--semi-color-danger-light-default) !important;
  color: var(--lg-danger-text) !important;
}

html body .semi-button-disabled,
html body .semi-button-disabled:hover {
  background-color: var(--semi-color-disabled-bg) !important;
  color: var(--semi-color-disabled-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .semi-button-group > .semi-button:first-child {
  border-radius: 12px 0 0 12px !important;
}

html body .semi-button-group > .semi-button:last-child {
  border-radius: 0 12px 12px 0 !important;
}

html body .semi-button-group-line {
  background-color: var(--lg-hairline) !important;
}

/* ==========================================================================
   7. 輸入類：Input / TextArea / InputNumber / Select / Cascader / TagInput
   ==========================================================================
   iOS 的輸入框是「凹進去的填充」而不是描邊盒：淡填充 + 髮絲內陰影，
   focus 時才升起 2px 的藍色 ring（--ring: 211 100% 50%）。 */

html body .semi-input-wrapper,
html body .semi-input-textarea-wrapper,
html body .semi-select,
html body .semi-cascader,
html body .semi-tagInput,
html body .semi-datepicker-range-input,
html body .semi-timepicker .semi-input-wrapper,
html body .semi-input-number,
html body .semi-form-field .semi-input-wrapper {
  background-color: var(--semi-color-fill-0) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  color: var(--semi-color-text-0) !important;
  transition: background-color 0.2s var(--lg-ease), border-color 0.2s var(--lg-ease),
    box-shadow 0.2s var(--lg-ease) !important;
}

html body .semi-input-wrapper:hover,
html body .semi-input-textarea-wrapper:hover,
html body .semi-select:hover,
html body .semi-cascader:hover,
html body .semi-tagInput:hover {
  background-color: var(--semi-color-fill-1) !important;
  border-color: transparent !important;
}

html body .semi-input-wrapper-focus,
html body .semi-input-textarea-wrapper-focus,
html body .semi-select-focus,
html body .semi-cascader-focus,
html body .semi-tagInput-focus,
html body .semi-datepicker-range-input-wrapper-focus {
  background-color: var(--semi-color-bg-4) !important;
  border-color: var(--lg-accent) !important;
  box-shadow: 0 0 0 3px var(--lg-accent-soft) !important;
}

html body .semi-input-wrapper-error,
html body .semi-select-error,
html body .semi-input-textarea-wrapper-error {
  border-color: var(--semi-color-danger) !important;
  box-shadow: 0 0 0 3px rgba(244, 69, 60, 0.14) !important;
}

html body .semi-input,
html body .semi-input-textarea,
html body .semi-select-selection {
  background: transparent !important;
  color: var(--semi-color-text-0) !important;
}

html body .semi-input::placeholder,
html body .semi-input-textarea::placeholder,
html body .semi-select-selection-placeholder {
  color: var(--semi-color-text-3) !important;
}

html body .semi-input-prepend,
html body .semi-input-append,
html body .semi-input-number-suffix-btns {
  background-color: transparent !important;
  border-color: var(--lg-hairline) !important;
  color: var(--lg-text-mute) !important;
}

html body .semi-input-wrapper-disabled,
html body .semi-select-disabled,
html body .semi-input-textarea-wrapper-disabled {
  background-color: var(--semi-color-disabled-bg) !important;
  color: var(--semi-color-disabled-text) !important;
  box-shadow: none !important;
}

html body .semi-form-field-label,
html body .semi-form-field-label-text {
  color: var(--semi-color-text-1) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}

html body .semi-form-field-error-message {
  color: var(--lg-danger-text) !important;
}

html body .semi-form-field-extra {
  color: var(--lg-text-mute) !important;
}

/* Upload 拖曳區：虛線框 + 淡填充，不掛 backdrop-filter
   （它常常就躺在卡片玻璃上，再疊一層等於同一塊區域被合成兩次） */
html body .semi-upload-drag-area {
  background-color: var(--semi-color-fill-0) !important;
  border: 1px dashed var(--semi-color-border) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color 0.2s var(--lg-ease), border-color 0.2s var(--lg-ease);
}

html body .semi-upload-drag-area-legal,
html body .semi-upload-drag-area:hover {
  border-color: var(--lg-accent) !important;
  background: var(--lg-accent-soft) !important;
}

html body .semi-upload-file-card {
  background-color: var(--semi-color-fill-0) !important;
  border: 1px solid var(--lg-hairline) !important;
  border-radius: 14px !important;
}

/* ==========================================================================
   8. 表格
   ==========================================================================
   表身完全透明，讓底下卡片的玻璃透出來；但表頭是 sticky 的，
   透明表頭會讓捲動中的資料列直接穿透上來 —— 所以表頭單獨用
   bg-4（0.95 白 / 0.94 近黑）這一階近乎不透明的材質，且不掛 blur
   （表頭是幾十個 <th>，每格一個合成層會直接拖垮捲動）。 */

html body .semi-table,
html body .semi-table-tbody,
html body .semi-table-body,
html body .semi-table-container,
html body .semi-table-tbody > .semi-table-row,
html body .semi-table-placeholder {
  background: transparent !important;
  background-color: transparent !important;
}

html body .semi-table-thead > .semi-table-row > .semi-table-row-head {
  background-color: var(--semi-color-bg-4) !important;
  color: var(--lg-text-mute) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.03em;
  text-transform: none;
  border-bottom: 1px solid var(--lg-hairline) !important;
}

html body .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover {
  background-color: var(--semi-color-bg-4) !important;
  background-image: linear-gradient(0deg, var(--lg-accent-soft), var(--lg-accent-soft)) !important;
  color: var(--lg-accent-text) !important;
}

html body .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
  border-bottom: 1px solid var(--lg-hairline) !important;
  color: var(--semi-color-text-0) !important;
}

/* 上游的 hover 態靠 JS 掛 .semi-table-row-hovered，並且是用
   background-image 的 linear-gradient 疊在 background-color:bg-0 上。
   只覆蓋 background-color 會留下那層漸層，所以要把 image 一併關掉，
   否則透明表身上會出現一條比卡片更白的橫帶。 */
html body .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell,
html body .semi-table-tbody > .semi-table-row.semi-table-row-hovered > .semi-table-row-cell {
  background-image: none !important;
  background-color: var(--semi-color-fill-0) !important;
}

html body .semi-table-tbody > .semi-table-row:last-child > .semi-table-row-cell {
  border-bottom: none !important;
}

html body .semi-table-column-sorter,
html body .semi-table-column-filter {
  color: var(--semi-color-text-3) !important;
}

/* 排序中的箭頭：上游用 .on 標記啟用態（不是 -active） */
html body .semi-table .semi-table-column-sorter-up.on .semi-icon,
html body .semi-table .semi-table-column-sorter-down.on .semi-icon {
  color: var(--lg-accent-text) !important;
}

html body .semi-table-bordered .semi-table-row-cell,
html body .semi-table-bordered .semi-table-row-head {
  border-color: var(--lg-hairline) !important;
}

/* 固定欄的分隔陰影：原生是硬邊，改成柔化的一段 */
html body .semi-table-cell-fixed-left-last::after,
html body .semi-table-cell-fixed-right-first::after {
  box-shadow: none !important;
  border-color: var(--lg-hairline) !important;
}

html body .table-scroll-card .semi-card-body::-webkit-scrollbar-thumb {
  background: var(--lg-scrollbar) !important;
  border-radius: 999px !important;
}

/* ==========================================================================
   9. 浮層：Popover / Dropdown / Select 下拉 / Modal / SideSheet / Tooltip
   ==========================================================================
   這一層才用 40px —— 它們面積小、生命週期短，合成器每幀回讀的區域有限，
   40px 的通透感值這個代價（大面積常駐面板一律 28px，見上面卡片與側欄）。 */

/* DatePicker / TimePicker / Select / Cascader 的浮層都是 portal 到
   .semi-popover-wrapper 底下，所以這一條就覆蓋了全部下拉面板。 */
html body .semi-popover-wrapper,
html body .semi-dropdown,
html body .semi-select-dropdown,
html body .semi-cascader-popover,
html body .semi-autocomplete-option-list {
  background: var(--lg-bg-sheet) !important;
  background-color: var(--lg-bg-sheet) !important;
  border-top: 1px solid var(--lg-border-top) !important;
  border-left: 1px solid var(--lg-border-side) !important;
  border-right: 1px solid var(--lg-border-side) !important;
  border-bottom: 1px solid var(--lg-border-bottom) !important;
  border-radius: 20px !important;
  box-shadow: var(--lg-shadow-elevated), var(--lg-inset-top) !important;
  -webkit-backdrop-filter: var(--lg-filter-float);
  backdrop-filter: var(--lg-filter-float);
  overflow: hidden;
}

html body .semi-popover-wrapper .semi-popover-wrapper,
html body .semi-popover-wrapper .semi-select-dropdown {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--semi-color-bg-4) !important;
}

html body .semi-popover-title {
  color: var(--semi-color-text-0) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
}

html body .semi-popover-icon-arrow,
html body .semi-tooltip-icon-arrow {
  color: var(--lg-bg-sheet) !important;
}

html body .semi-dropdown-menu {
  background: transparent !important;
  padding: 6px !important;
}

html body .semi-dropdown-item,
html body .semi-select-option,
html body .semi-cascader-option,
html body .semi-autocomplete-option,
html body .semi-tree-option-label-text {
  border-radius: 10px !important;
  color: var(--semi-color-text-0) !important;
  transition: background-color 0.15s var(--lg-ease), color 0.15s var(--lg-ease) !important;
}

html body .semi-dropdown-item:hover,
html body .semi-dropdown-item-hover,
html body .semi-select-option:hover,
html body .semi-cascader-option:hover,
html body .semi-autocomplete-option:hover,
html body .semi-tree-option-label-text:hover {
  background-color: var(--semi-color-fill-0) !important;
}

html body .semi-select-option-selected,
html body .semi-dropdown-item-active,
html body .semi-cascader-option-select,
html body .semi-tree-option-selected .semi-tree-option-label-text {
  background-color: var(--lg-accent-soft) !important;
  color: var(--lg-accent-text) !important;
  font-weight: 600 !important;
}

html body .semi-dropdown-divider {
  background-color: var(--lg-hairline) !important;
}

html body .semi-dropdown-title {
  color: var(--lg-text-mute) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
}

/* Tooltip：反相的小玻璃片 */
html body .semi-tooltip-wrapper {
  background-color: var(--lg-tooltip-bg) !important;
  color: var(--lg-tooltip-fg) !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  font-size: 12px !important;
}

html body .semi-tooltip-wrapper .semi-tooltip-icon-arrow {
  color: var(--lg-tooltip-bg) !important;
}

/* Modal / SideSheet */
html body .semi-modal-content,
html body .semi-sidesheet-inner {
  background: var(--lg-bg-sheet) !important;
  background-color: var(--lg-bg-sheet) !important;
  border: none !important;
  border-top: 1px solid var(--lg-border-top) !important;
  border-left: 1px solid var(--lg-border-side) !important;
  border-right: 1px solid var(--lg-border-side) !important;
  border-bottom: 1px solid var(--lg-border-bottom) !important;
  border-radius: 24px !important;
  box-shadow: var(--lg-shadow-elevated), var(--lg-inset-top) !important;
  /* 24px：彈窗常鋪滿大半個視口，是最貴的一層玻璃。底色已是 0.82～0.86，
     背景幾乎全遮住，24px 與 60px 在這個不透明度下肉眼無法區分。 */
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(var(--lg-sheet-bright, 1.12));
  backdrop-filter: blur(24px) saturate(200%) brightness(var(--lg-sheet-bright, 1.12));
}

html body .semi-modal-mask,
html body .semi-sidesheet-mask {
  background-color: var(--semi-color-overlay-bg) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

html body .semi-modal-header,
html body .semi-sidesheet-header {
  background: transparent !important;
  border-bottom: 1px solid var(--lg-hairline) !important;
}

html body .semi-modal-title,
html body .semi-sidesheet-title {
  color: var(--semi-color-text-0) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
}

html body .semi-modal-footer,
html body .semi-sidesheet-footer {
  background: transparent !important;
  border-top: 1px solid var(--lg-hairline) !important;
}

html body .semi-modal-body,
html body .semi-sidesheet-body {
  background: transparent !important;
}

/* Toast / Notification / Banner */
html body .semi-toast-content,
html body .semi-notification-notice {
  background: var(--lg-bg-sheet) !important;
  background-color: var(--lg-bg-sheet) !important;
  border-top: 1px solid var(--lg-border-top) !important;
  border-left: 1px solid var(--lg-border-side) !important;
  border-right: 1px solid var(--lg-border-side) !important;
  border-bottom: 1px solid var(--lg-border-bottom) !important;
  border-radius: 20px !important;
  color: var(--semi-color-text-0) !important;
  box-shadow: var(--lg-shadow-elevated), var(--lg-inset-top) !important;
  -webkit-backdrop-filter: var(--lg-filter-float);
  backdrop-filter: var(--lg-filter-float);
}

html body .semi-notification-notice-title {
  color: var(--semi-color-text-0) !important;
  font-weight: 600 !important;
}

html body .semi-notification-notice-content {
  color: var(--semi-color-text-1) !important;
}

html body .semi-banner {
  border-radius: 16px !important;
  border: 1px solid transparent !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

html body .semi-banner-info {
  background-color: rgba(0, 128, 255, 0.10) !important;
  border-color: rgba(0, 128, 255, 0.20) !important;
}

html body .semi-banner-success {
  background-color: rgba(52, 199, 89, 0.10) !important;
  border-color: rgba(52, 199, 89, 0.22) !important;
}

html body .semi-banner-warning {
  background-color: rgba(255, 149, 0, 0.10) !important;
  border-color: rgba(255, 149, 0, 0.24) !important;
}

html body .semi-banner-danger {
  background-color: rgba(244, 69, 60, 0.10) !important;
  border-color: rgba(244, 69, 60, 0.22) !important;
}

html body .semi-popconfirm-inner,
html body .semi-popconfirm-popover {
  border-radius: 20px !important;
}

/* ==========================================================================
   10. Tag / Badge / Avatar
   ==========================================================================
   Tag 走 iOS 膠囊：填充 + 無描邊。Semi 的 -light / -solid / -ghost 顏色
   本來就從調色盤推導，所以換掉 --semi-*-0..9 後這些變體自動跟著走，
   不需要逐色重寫。 */

html body .semi-tag {
  border-radius: 999px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  border: none !important;
  transition: background-color 0.2s var(--lg-ease), color 0.2s var(--lg-ease) !important;
}

html body .semi-tag-square {
  border-radius: 8px !important;
}

html body .semi-tag-ghost {
  background-color: transparent !important;
  box-shadow: inset 0 0 0 1px currentColor;
}

html body .semi-tag-closable .semi-tag-close {
  border-radius: 999px !important;
}

html body .semi-badge-count,
html body .semi-badge-dot,
html body .sbg-badge {
  border-radius: 999px !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600 !important;
  box-shadow: var(--lg-inset-top);
}

html body .sbg-badge {
  background-color: var(--semi-color-fill-0) !important;
  color: var(--lg-text-mute) !important;
}

html body .sbg-badge-active {
  background-color: var(--lg-accent-soft) !important;
  color: var(--lg-accent-text) !important;
}

html body .semi-avatar {
  border-radius: 999px !important;
  box-shadow: var(--lg-inset-top), var(--lg-shadow-ambient);
}

html body .semi-avatar-square {
  border-radius: 14px !important;
}

/* ==========================================================================
   11. Switch / Checkbox / Radio / Slider / Rating
   ==========================================================================
   Switch 保留 Semi 的「開啟＝綠」語意 —— 那正好就是 iOS 的開關語彙。 */

html body .semi-switch {
  border-radius: 999px !important;
  border: none !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background-color 0.25s var(--lg-ease) !important;
}

html body .semi-switch-knob {
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.3s var(--lg-spring) !important;
}

html body .semi-checkbox-inner-display {
  border-radius: 7px !important;
  transition: background-color 0.15s var(--lg-ease), box-shadow 0.15s var(--lg-ease) !important;
}

html body .semi-checkbox-inner-checked .semi-checkbox-inner-display {
  background-color: var(--lg-accent) !important;
}

html body .semi-radio-inner-display {
  border-radius: 999px !important;
}

/* 卡片式 Radio / Checkbox。上游用 camelCase 語意名（非雜湊）：
   .semi-radio-cardRadioGroup 與 .semi-checkbox-cardType，兩者不同名。 */
html body .semi-radio-cardRadioGroup,
html body .semi-checkbox-cardType {
  border-radius: 16px !important;
  border: 1px solid var(--lg-hairline) !important;
  background-color: var(--semi-color-fill-0) !important;
  transition: background-color 0.2s var(--lg-ease), border-color 0.2s var(--lg-ease) !important;
}

html body .semi-radio-cardRadioGroup_hover,
html body .semi-checkbox-cardType_enable:hover {
  background-color: var(--semi-color-fill-1) !important;
}

html body .semi-radio-cardRadioGroup_checked,
html body .semi-checkbox-cardType_checked {
  background-color: var(--lg-accent-soft) !important;
  border-color: rgba(0, 128, 255, 0.32) !important;
}

html body .semi-radio-cardRadioGroup_disabled,
html body .semi-checkbox-cardType_disabled {
  background-color: var(--semi-color-disabled-bg) !important;
  border-color: var(--semi-color-disabled-border) !important;
}

/* 按鈕式 Radio Group = iOS 分段控制項 */
html body .semi-radio-buttonRadioGroup,
html body .semi-radioGroup-buttonRadio {
  border-radius: 999px !important;
  background-color: var(--semi-color-fill-0) !important;
  padding: 3px !important;
  border: none !important;
}

html body .semi-radio-buttonRadioComponent,
html body .semi-radio-addon-buttonRadio {
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  color: var(--lg-text-mute) !important;
  font-weight: 500 !important;
  transition: background-color 0.2s var(--lg-ease), color 0.2s var(--lg-ease) !important;
}

/* 選中態掛在 addon 上（沒有 buttonRadioComponent-checked 這個類） */
html body .semi-radio-addon-buttonRadio-checked {
  background: var(--semi-color-bg-4) !important;
  color: var(--semi-color-text-0) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), var(--lg-inset-top) !important;
}

html body .semi-radio-addon-buttonRadio-hover {
  background: var(--semi-color-fill-1) !important;
}

html body .semi-slider-rail {
  background-color: var(--semi-color-fill-1) !important;
  border-radius: 999px !important;
}

html body .semi-slider-track {
  background-color: var(--lg-accent) !important;
  border-radius: 999px !important;
}

html body .semi-slider-handle {
  border: none !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
}

html body .semi-rating-star-full .semi-icon,
html body .semi-rating-star-half .semi-icon {
  color: #ffb300 !important;
}

/* ==========================================================================
   12. Progress / Spin / Skeleton / Empty
   ========================================================================== */

html body .semi-progress-track {
  background-color: var(--semi-color-fill-1) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

html body .semi-progress-track-inner {
  border-radius: 999px !important;
  background-image: linear-gradient(90deg,
    rgba(0, 128, 255, 0.92), rgba(85, 205, 252, 0.95)) !important;
  box-shadow: var(--lg-inset-top);
  transition: width 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

html body .semi-progress-circle-ring-track {
  stroke: var(--semi-color-fill-1) !important;
}

html body .semi-progress-circle-ring-inner {
  stroke: var(--lg-accent) !important;
}

html body .semi-spin-wrapper,
html body .semi-spin .semi-icon {
  color: var(--lg-accent-text) !important;
}

html body .semi-spin-block .semi-spin-children {
  background: transparent !important;
}

html body .semi-skeleton-avatar,
html body .semi-skeleton-image,
html body .semi-skeleton-button,
html body .semi-skeleton-title,
html body .semi-skeleton-paragraph li {
  background-color: var(--semi-color-fill-0) !important;
  border-radius: 12px !important;
}

html body .semi-skeleton-avatar {
  border-radius: 999px !important;
}

html body .semi-empty-image {
  opacity: 0.72;
}

html body .semi-empty-title {
  color: var(--semi-color-text-1) !important;
  font-weight: 600 !important;
}

html body .semi-empty-description {
  color: var(--lg-text-mute) !important;
}

/* ==========================================================================
   13. Pagination / Steps / Tabs / Tree / Timeline / Collapse / Descriptions
   ========================================================================== */

html body .semi-page-item {
  border-radius: 12px !important;
  color: var(--semi-color-text-1) !important;
  font-weight: 500 !important;
  transition: background-color 0.2s var(--lg-ease), color 0.2s var(--lg-ease) !important;
}

html body .semi-page-item:hover {
  background-color: var(--semi-color-fill-0) !important;
}

html body .semi-page-item-active,
html body .semi-page-item-active:hover {
  background-color: var(--lg-accent-soft) !important;
  color: var(--lg-accent-text) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 128, 255, 0.18);
}

html body .semi-page-total,
html body .semi-page-quickjump {
  color: var(--lg-text-mute) !important;
}

html body .semi-steps-item-icon,
html body .semi-steps-item-number-icon {
  border-radius: 999px !important;
}

html body .semi-steps-item-finish .semi-steps-item-left,
html body .semi-steps-item-process .semi-steps-item-left {
  background: var(--lg-accent) !important;
}

html body .semi-steps-item-title {
  color: var(--semi-color-text-0) !important;
  font-weight: 600 !important;
}

html body .semi-steps-item-description {
  color: var(--lg-text-mute) !important;
}

html body .semi-tabs-bar-line.semi-tabs-bar-top {
  border-bottom: 1px solid var(--lg-hairline) !important;
}

html body .semi-tabs-tab {
  color: var(--lg-text-mute) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  transition: color 0.2s var(--lg-ease), background-color 0.2s var(--lg-ease) !important;
}

html body .semi-tabs-tab-active,
html body .semi-tabs-tab:hover {
  color: var(--semi-color-text-0) !important;
}

/* line 型的底線是 border-bottom（不是 ::after），顏色本來就走
   --semi-color-primary，換掉調色盤後自動變成 #0080ff；這裡只把
   hover / active 的灰底線也拉進同一族，避免灰藍兩色打架。 */
html body .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active,
html body .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active:hover {
  color: var(--lg-accent-text) !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--lg-accent) !important;
}

html body .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:hover {
  border-bottom: 2px solid var(--semi-color-fill-1) !important;
}

html body .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active,
html body .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover {
  color: var(--lg-accent-text) !important;
  font-weight: 600 !important;
  border-left: 2px solid var(--lg-accent) !important;
  background-color: var(--lg-accent-soft) !important;
  border-radius: 0 12px 12px 0 !important;
}

/* card / button 型 Tabs = iOS 分段控制項 */
html body .semi-tabs-bar-button,
html body .semi-tabs-bar-card {
  background-color: var(--semi-color-fill-0) !important;
  border-radius: 999px !important;
  border: none !important;
  padding: 3px !important;
}

html body .semi-tabs-bar-button .semi-tabs-tab,
html body .semi-tabs-tab-card {
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
}

html body .semi-tabs-bar-button .semi-tabs-tab-active,
html body .semi-tabs-tab-card.semi-tabs-tab-active {
  background: var(--semi-color-bg-4) !important;
  color: var(--semi-color-text-0) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), var(--lg-inset-top) !important;
}

html body .semi-tabs-content {
  background: transparent !important;
}

html body .semi-tree-option-label-text {
  padding: 2px 8px;
}

html body .semi-tree-option-highlight {
  color: var(--lg-accent-text) !important;
  background: var(--lg-accent-soft) !important;
  border-radius: 6px;
}

html body .semi-timeline-item-tail {
  border-color: var(--lg-hairline) !important;
}

html body .semi-timeline-item-head {
  border-radius: 999px !important;
  background-color: var(--semi-color-bg-4) !important;
}

html body .semi-collapse-header {
  border-radius: 14px !important;
  color: var(--semi-color-text-0) !important;
  font-weight: 500 !important;
  transition: background-color 0.2s var(--lg-ease) !important;
}

html body .semi-collapse-header:hover {
  background-color: var(--semi-color-fill-0) !important;
}

html body .semi-collapse-item {
  border-color: var(--lg-hairline) !important;
}

html body .semi-descriptions-key,
html body .semi-descriptions-item-th {
  color: var(--lg-text-mute) !important;
  font-weight: 500 !important;
}

html body .semi-descriptions-value,
html body .semi-descriptions-item-td {
  color: var(--semi-color-text-0) !important;
}

html body .semi-list-item {
  border-color: var(--lg-hairline) !important;
}

html body .semi-list-split .semi-list-item:not(:last-child) {
  border-bottom: 1px solid var(--lg-hairline) !important;
}

html body .semi-breadcrumb-item,
html body .semi-breadcrumb-item-link {
  color: var(--lg-text-mute) !important;
  border-radius: 8px !important;
}

html body .semi-breadcrumb-item-link:hover {
  color: var(--lg-accent-text) !important;
  background: var(--lg-accent-soft) !important;
}

html body .semi-breadcrumb-item-active {
  color: var(--semi-color-text-0) !important;
  font-weight: 600 !important;
}

html body .semi-transfer-left,
html body .semi-transfer-right,
html body .components-transfer-source-item,
html body .components-transfer-selected-item {
  border-radius: 14px !important;
  border-color: var(--lg-hairline) !important;
}

html body .semi-anchor-link-title-active {
  color: var(--lg-accent-text) !important;
}

/* ==========================================================================
   14. DatePicker / TimePicker / Calendar
   ========================================================================== */

html body .semi-datepicker-day-main {
  border-radius: 10px !important;
  transition: background-color 0.15s var(--lg-ease), color 0.15s var(--lg-ease) !important;
}

html body .semi-datepicker-day:hover .semi-datepicker-day-main {
  background-color: var(--semi-color-fill-0) !important;
}

html body .semi-datepicker-day-selected .semi-datepicker-day-main,
html body .semi-datepicker-day-selected-start .semi-datepicker-day-main,
html body .semi-datepicker-day-selected-end .semi-datepicker-day-main {
  background-color: var(--lg-accent-solid) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

html body .semi-datepicker-day-inrange .semi-datepicker-day-main,
html body .semi-datepicker-day-inhover .semi-datepicker-day-main {
  background-color: var(--lg-accent-soft) !important;
  color: var(--lg-accent-text) !important;
}

html body .semi-datepicker-day-today .semi-datepicker-day-main {
  box-shadow: inset 0 0 0 1px var(--lg-accent);
}

html body .semi-datepicker-weekday,
html body .semi-datepicker-month-grid-left,
html body .semi-datepicker-month-grid-right {
  color: var(--lg-text-mute) !important;
}

html body .semi-datepicker-navigation,
html body .semi-datepicker-footer,
html body .semi-datepicker-quick-control {
  border-color: var(--lg-hairline) !important;
  background: transparent !important;
}

html body .semi-scrolllist,
html body .semi-scrolllist-header,
html body .semi-scrolllist-footer {
  background: transparent !important;
  border-color: var(--lg-hairline) !important;
}

html body .semi-scrolllist-item-selected {
  color: var(--lg-accent-text) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   15. 排版 / 連結 / Markdown / 程式碼
   ========================================================================== */

html body .semi-typography {
  color: var(--semi-color-text-0) !important;
  letter-spacing: -0.01em;
}

html body .semi-typography-secondary,
html body .semi-typography-tertiary,
html body .semi-typography-quaternary {
  color: var(--lg-text-mute) !important;
}

html body .semi-typography-h1,
html body .semi-typography-h2,
html body .semi-typography-h3,
html body .semi-typography-h4,
html body .semi-typography-h5,
html body .semi-typography-h6 {
  color: var(--semi-color-text-0) !important;
  letter-spacing: -0.025em;
}

/* :not() 裡一律只放單純選擇器。複合選擇器（如 :not(#bar a)）屬 Selectors 4，
   舊瀏覽器會判定整個選擇器無效 —— 而 CSS 的規則是「逗號清單中有一個無效，
   整條清單全部丟棄」，那會連 .semi-typography-link 的顏色一起失效。
   返回列的連結改用 ID 特異度 + !important 各自守住，不靠排除法。 */
html body .semi-typography-link,
html body a:not(.semi-button):not(.semi-navigation-item) {
  color: var(--lg-accent-text) !important;
  text-decoration: none;
}

html body .semi-typography-link:hover,
html body a:not(.semi-button):not(.semi-navigation-item):hover {
  color: var(--lg-accent-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --semi-color-danger 是 red-5 #f4453c（主站的 destructive），當填充色正確，
   但當文字色對白底只有 3.60:1。文字改走 red-7，同色相、深一階。 */
html body .semi-typography-danger {
  color: var(--lg-danger-text) !important;
}

html body .markdown-body {
  background: transparent !important;
  color: var(--semi-color-text-0) !important;
}

html body .markdown-body pre,
html body .markdown-body code,
html body .hljs,
html body pre {
  background-color: var(--semi-color-fill-0) !important;
  border-radius: 14px !important;
  border: 1px solid var(--lg-hairline) !important;
  color: var(--semi-color-text-0) !important;
}

html body .markdown-body code {
  border-radius: 6px !important;
  border: none !important;
  padding: 0.15em 0.4em;
}

html body .markdown-body blockquote {
  border-left: 3px solid var(--lg-accent) !important;
  background: var(--lg-accent-soft) !important;
  border-radius: 0 12px 12px 0 !important;
  color: var(--lg-text-mute) !important;
}

html body .markdown-body table th,
html body .markdown-body table td {
  border-color: var(--lg-hairline) !important;
}

html body .copy-code-button {
  border-radius: 10px !important;
  background: var(--semi-color-fill-1) !important;
  color: var(--lg-text-mute) !important;
  border: none !important;
}

html body .user-message {
  background: var(--lg-accent-soft) !important;
  color: var(--semi-color-text-0) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 128, 255, 0.16) !important;
}

/* ==========================================================================
   16. New API 專屬 class
   ========================================================================== */

html body .card-content-fade-indicator {
  background: linear-gradient(transparent, var(--lg-bg-primary)) !important;
}

html body .channel-affinity-tag,
html body .task-list-item {
  border-radius: 999px !important;
  border-color: var(--lg-hairline) !important;
}

html body .sbg-button {
  border-radius: 12px !important;
}

/* .sbg-variant-* 原本是第三方 teal/rose/violet/amber/green，拉回品牌語彙 */
html body .sbg-variant-teal {
  background-color: rgba(0, 199, 190, 0.12) !important;
  color: #00897f !important;
}

html body .sbg-variant-green {
  background-color: rgba(52, 199, 89, 0.12) !important;
  color: #1e7a31 !important;
}

html body .sbg-variant-rose {
  background-color: rgba(244, 69, 60, 0.12) !important;
  color: #b4241d !important;
}

html body .sbg-variant-violet {
  background-color: rgba(121, 88, 220, 0.12) !important;
  color: #52389c !important;
}

html body .sbg-variant-amber {
  background-color: rgba(255, 179, 0, 0.14) !important;
  color: #8d6100 !important;
}

html body[theme-mode="dark"] .sbg-variant-teal,
html.dark body .sbg-variant-teal {
  background-color: rgba(26, 196, 187, 0.18) !important;
  color: #58d6ce !important;
}

html body[theme-mode="dark"] .sbg-variant-green,
html.dark body .sbg-variant-green {
  background-color: rgba(60, 196, 98, 0.18) !important;
  color: #64d685 !important;
}

html body[theme-mode="dark"] .sbg-variant-rose,
html.dark body .sbg-variant-rose {
  background-color: rgba(248, 88, 79, 0.18) !important;
  color: #fa7d75 !important;
}

html body[theme-mode="dark"] .sbg-variant-violet,
html.dark body .sbg-variant-violet {
  background-color: rgba(146, 113, 232, 0.20) !important;
  color: #ae94f0 !important;
}

html body[theme-mode="dark"] .sbg-variant-amber,
html.dark body .sbg-variant-amber {
  background-color: rgba(250, 182, 36, 0.18) !important;
  color: #fcde91 !important;
}

/* 首頁裝飾光球：換成主站的 trans flag 藍／粉暈染。
   filter:blur(120px) 是常駐合成層且完全不互動 —— 直接把模糊烘進漸層，
   盒子加大以補回 blur 原本向外擴散的範圍，觀感等價、零合成層。 */
html body .blur-ball {
  filter: none !important;
  width: 600px !important;
  height: 600px !important;
  opacity: 1 !important;
}

html body .blur-ball-indigo {
  background: radial-gradient(circle,
    rgba(85, 205, 252, 0.16) 0%,
    rgba(85, 205, 252, 0.11) 22%,
    rgba(85, 205, 252, 0.06) 44%,
    rgba(85, 205, 252, 0.02) 68%,
    transparent 86%) !important;
}

html body .blur-ball-teal {
  background: radial-gradient(circle,
    rgba(247, 168, 184, 0.14) 0%,
    rgba(247, 168, 184, 0.10) 22%,
    rgba(247, 168, 184, 0.055) 44%,
    rgba(247, 168, 184, 0.018) 68%,
    transparent 86%) !important;
}

html body .classic-frontend-deprecation-banner-inner {
  background: rgba(255, 149, 0, 0.10) !important;
  border: 1px solid rgba(255, 149, 0, 0.24) !important;
  border-radius: 16px !important;
  color: var(--semi-color-text-0) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

html body .custom-footer {
  color: var(--lg-text-mute) !important;
}

html body .debug-panel {
  border-radius: 20px !important;
}

/* ==========================================================================
   17. 返回 Image Studio 導覽條（nginx 注入的 HTML 片段）
   ==========================================================================
   從先前的 #20242c 深色條改成主站語言的玻璃 sticky 條：
   rgba(255,255,255,0.62) + blur 28px + 下緣髮絲邊，連結用 #0080ff。 */

#brand-return-bar {
  position: sticky;
  top: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 16px;
  background: var(--lg-bg-bar);
  border-top: 1px solid var(--lg-border-top);
  border-bottom: 1px solid var(--lg-hairline);
  box-shadow: var(--lg-shadow-ambient);
  -webkit-backdrop-filter: var(--lg-filter-bar);
  backdrop-filter: var(--lg-filter-bar);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--lg-text-mute);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

#brand-return-bar a {
  /* !important：上面的通用連結規則帶 !important，光靠 ID 特異度贏不了 */
  color: var(--lg-accent-text) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 500;
  background: var(--lg-accent-soft);
  transition: background 0.2s var(--lg-ease), transform 0.3s var(--lg-spring);
}

#brand-return-bar a:hover {
  background: var(--lg-accent-soft-hover);
  transform: translateY(-1px);
}

#brand-return-bar .brand-tag {
  margin-left: auto;
  font-size: 12px;
  color: var(--semi-color-text-3);
}

/* ==========================================================================
   18. 捲軸 / focus ring / 動效降級
   ========================================================================== */

html body *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html body *::-webkit-scrollbar-track {
  background: transparent;
}

html body *::-webkit-scrollbar-thumb {
  background-color: var(--lg-scrollbar);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

html body *::-webkit-scrollbar-thumb:hover {
  background-color: var(--lg-scrollbar-hover);
  background-clip: content-box;
}

html body *:focus-visible {
  outline: 2px solid var(--lg-accent);
  outline-offset: 1px;
  border-radius: 8px;
}

html body .semi-navigation-item:focus-visible {
  outline: 2px solid var(--lg-accent) !important;
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* backdrop-filter 不支援時（舊 Firefox / 關閉合成）退回不透明底，
   否則半透明面板會直接讓底下的內容穿透上來，文字疊字無法閱讀。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body {
    --lg-bg-primary: rgba(255, 255, 255, 0.97);
    --lg-bg-bar: rgba(255, 255, 255, 0.97);
    --lg-bg-sheet: rgba(255, 255, 255, 0.99);
    --semi-color-bg-0: rgba(255, 255, 255, 0.97);
    --semi-color-bg-1: rgba(255, 255, 255, 0.97);
    --semi-color-bg-2: #ffffff;
    --semi-color-bg-3: #ffffff;
    --semi-color-bg-4: #ffffff;
  }

  html body[theme-mode="dark"],
  html.dark body {
    --lg-bg-primary: rgba(28, 28, 30, 0.97);
    --lg-bg-bar: rgba(24, 24, 27, 0.97);
    --lg-bg-sheet: rgba(38, 38, 42, 0.99);
    --semi-color-bg-0: rgba(28, 28, 30, 0.97);
    --semi-color-bg-1: rgba(32, 32, 35, 0.97);
    --semi-color-bg-2: #26262a;
    --semi-color-bg-3: #2c2c30;
    --semi-color-bg-4: #343439;
  }
}

@media print {
  html body #brand-return-bar {
    display: none;
  }

  html body .semi-card,
  html body .semi-navigation,
  html body .sidebar-container {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

/* ==========================================================================
   導覽條版面修正
   上游側欄是 position:fixed; top:0（z-40），而導覽條原本是 sticky z-2000，
   結果側欄頂端 38px（logo 與版本徽章）被永久遮住。
   改法：導覽條固定在視窗頂端，把整個 app 往下推同樣高度，讓兩者並存而非疊壓。
   ========================================================================== */
:root { --brand-bar-h: 38px; }

#brand-return-bar {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  height: var(--brand-bar-h);
  z-index: 2147483000 !important;   /* 高於上游任何層級（含 modal） */
}

/* 整頁下推：body 直接子元素讓開導覽條的高度 */
body > #app,
body > #root,
body > div[id]:not(#brand-return-bar) {
  padding-top: var(--brand-bar-h);
  box-sizing: border-box;
}

/* fixed 定位的側欄與頂欄要跟著讓位，否則仍會被壓在導覽條下 */
.sidebar,
aside[class*="sidebar"],
.app-sider,
.sidebar-container {
  top: var(--brand-bar-h) !important;
}

/* 全高元素扣掉導覽條，避免底部溢出產生多餘捲動 */
.sidebar,
.h-screen,
.min-h-screen {
  max-height: calc(100vh - var(--brand-bar-h));
}