@font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/noto-sans-tc-400.woff2') format('woff2')}
@font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/noto-sans-tc-500.woff2') format('woff2')}
@font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/noto-sans-tc-700.woff2') format('woff2')}

/* ── Helix Studio 的視窗。代幣公式與 light 主題取自設計稿 Layout.dc.html。 ── */
.hx-frame{container-type:inline-size;width:100%;height:100%;overflow:hidden}
.hx{
  /* 唯一的縮放公式。設計稿以視窗寬為準，本頁的視窗寬即容器寬。 */
  --ui-fluid:clamp(0.62px, calc(0.40px + 0.015cqw), 0.72px);
  --fs-lg:calc(20 * var(--ui-fluid));--fs-base:calc(16 * var(--ui-fluid));--fs-sm:calc(14 * var(--ui-fluid));
  --ctrl-pad-y-sm:calc(5 * var(--ui-fluid));--ctrl-pad-y-md:calc(7 * var(--ui-fluid));
  --ctrl-px-sm:calc(9 * var(--ui-fluid));--ctrl-px-md:calc(13 * var(--ui-fluid));
  --ctrl-h-sm:calc(var(--fs-sm) + 2 * var(--ctrl-pad-y-sm));
  --ctrl-h-md:calc(var(--fs-base) + 2 * var(--ctrl-pad-y-md));
  --btn-icon-sm:calc(var(--fs-lg) + 2 * var(--ctrl-pad-y-sm));
  --btn-icon:calc(var(--fs-lg) + 2 * var(--ctrl-pad-y-md));
  --btn-icon-lg:calc(var(--fs-lg) + 2 * calc(1.7 * var(--ctrl-pad-y-md)));
  --bar-top:calc(var(--btn-icon-lg) + 2 * var(--ctrl-pad-y-md));
  --bar-bottom:calc(var(--fs-sm) + 2 * calc(3.2 * var(--ctrl-pad-y-sm)));
  --gap-bar:calc(0.9 * var(--fs-base));--pad-bar-x:var(--fs-base);
  --hx-radius:6px;--pad-panel:var(--fs-base);--gap-panel:calc(0.5 * var(--fs-base));
  --radius-inner:var(--hx-radius);
  --col-rail:calc(80 * var(--ui-fluid));--col-side:calc(260 * var(--ui-fluid));
  --col-ai:calc(400 * var(--ui-fluid));
  --on-accent:#fff;--shadow-rgb:30,40,50;--overlay-rgb:20,26,32;
  --notify-dot:oklch(0.5 0.19 25);

  /* THEME_TOKENS.light */
  --bg-page:oklch(0.99 0.002 240);--bg-surface:oklch(0.995 0.002 240);
  --bg-sidebar:oklch(0.965 0.004 240);--bg-hover:oklch(0.93 0.006 240);
  --border:oklch(0.88 0.006 240);--border-subtle:oklch(0.92 0.005 240);
  --border-soft:oklch(0.94 0.004 240);--skeleton:oklch(0.90 0.006 240);
  --text-1:oklch(0.22 0.01 240);--text-2:oklch(0.48 0.01 240);--text-3:oklch(0.62 0.008 240);
  --status-error-bg:oklch(0.92 0.05 30);--status-error-text:oklch(0.50 0.16 30);
  --status-warning-bg:oklch(0.92 0.06 80);--status-warning-text:oklch(0.46 0.11 75);
  --accent-tint-l:0.92;--accent-text-l:0.32;--accent-border-l:0.6;--accent-label-l:0.5;

  /* accentHue 231、accentChroma 0.11 */
  --accent-h:231;--accent-c:0.11;
  --accent-solid:oklch(0.52 var(--accent-c) var(--accent-h));
  --accent-solid-hover:oklch(0.46 var(--accent-c) var(--accent-h));
  --accent-on-solid:oklch(0.99 calc(var(--accent-c) * 0.07) var(--accent-h));
  --accent-text:oklch(var(--accent-text-l) calc(var(--accent-c) * 0.93) var(--accent-h));
  --accent-tint:oklch(var(--accent-tint-l) calc(var(--accent-c) * 0.4) var(--accent-h));
  --accent-border:oklch(var(--accent-border-l) calc(var(--accent-c) * 0.86) var(--accent-h));

  width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative;
  background:var(--bg-page);color:var(--text-1);
  font-family:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif}

/* 官網的 section／p／h3／ul 等元素規則會漏進視窗裡，這一條把它們清掉；
   優先度與元件規則相同而排在前面，故元件自己寫的值仍然生效。 */
.hx *{box-sizing:border-box;margin:0;padding:0;border:0;font-size:inherit;font-weight:inherit;
  line-height:normal;letter-spacing:normal;text-transform:none;background:none;list-style:none;
  appearance:none;-webkit-appearance:none}
/* 這一條的優先度必須低於每一條元件規則，否則元件的字級與內距會被它蓋掉。 */
:where(.hx button){border:none;background:none;font:inherit;color:inherit;cursor:pointer;
  text-align:left}
:where(.hx button:focus){outline:none}
.hx svg{width:var(--fs-lg);height:var(--fs-lg);display:block;flex-shrink:0}

.hx-top{height:var(--bar-top);flex-shrink:0;background:var(--bg-surface);display:flex;
  align-items:center;padding:0 var(--pad-bar-x);gap:calc(0.62 * var(--fs-base));
  border-bottom:1px solid var(--border);color:var(--text-2)}
.hx-ib{width:var(--btn-icon);height:var(--btn-icon);border-radius:var(--hx-radius);display:flex;
  align-items:center;justify-content:center}
.hx-ib:hover{background:var(--bg-hover)}
.hx-ib[disabled]{opacity:.35;cursor:default}
.hx-ib[disabled]:hover{background:none}
.hx-ib[data-on="no"]{color:var(--text-3)}
.hx-ib[data-on="yes"]{color:var(--accent-text)}
.hx-win .hx-ib{width:calc(1.15 * var(--btn-icon));opacity:.5;cursor:default}
.hx-win .hx-ib:hover{background:none}
.hx-grow{flex:1}
.hx-sep{width:1px;height:calc(1.1 * var(--fs-base));background:var(--border);
  margin:0 calc(0.25 * var(--fs-base))}
.hx-bell{position:relative}
.hx-badge{position:absolute;top:2px;right:2px;min-width:8px;height:12px;padding:0 3px;
  border-radius:var(--hx-radius);background:var(--notify-dot);color:var(--on-accent);
  font:700 8px/12px sans-serif;text-align:center}
.hx-win{display:flex}

.hx-custom{position:relative;display:flex}
.hx-veil{position:fixed;inset:0;z-index:40}
.hx-menu{position:absolute;top:calc(100% + calc(0.35 * var(--fs-base)));right:0;z-index:50;
  min-width:calc(20 * var(--fs-base));background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--hx-radius);box-shadow:0 12px 32px -8px rgba(var(--shadow-rgb),.28);
  padding:calc(0.4 * var(--fs-base));display:flex;flex-direction:column}
.hx-menu[hidden],.hx-veil[hidden]{display:none}
.hx-menu-cap{padding:calc(0.35 * var(--fs-base)) calc(0.55 * var(--fs-base));
  font:700 var(--fs-sm)/1 'Noto Sans TC';color:var(--text-3)}
.hx-opt{width:100%;display:flex;align-items:center;gap:calc(0.5 * var(--fs-base));
  padding:calc(0.4 * var(--fs-base)) calc(0.55 * var(--fs-base));border-radius:var(--hx-radius);
  color:var(--text-1)}
.hx-opt:hover{background:var(--bg-hover)}
.hx-opt .hx-check{width:calc(1.1 * var(--fs-base));display:flex;align-items:center;
  justify-content:center;color:transparent}
.hx-opt[aria-checked="true"] .hx-check{color:var(--accent-text)}
.hx-opt .hx-opt-label{flex:1;font:500 var(--fs-sm)/1.4 'Noto Sans TC'}
.hx-opt .hx-opt-hint{font:500 var(--fs-sm)/1 ui-monospace,Menlo,monospace;color:var(--text-3)}

.hx-body{display:flex;flex:1;min-height:0}

.hx-rail{width:var(--col-rail);flex-shrink:0;background:var(--bg-sidebar);display:flex;
  flex-direction:column;align-items:center;padding:14px 0;border-right:1px solid var(--border);
  overflow:auto}
.hx-rail button{margin:0 0 4px;width:var(--btn-icon-lg);height:var(--btn-icon-lg);
  border-radius:var(--hx-radius);display:flex;align-items:center;justify-content:center;
  color:var(--text-2)}
.hx-rail button:hover{background:var(--bg-hover)}
.hx-rail button[aria-current="true"]{background:var(--accent-tint);color:var(--accent-text)}
.hx-rail-sep{margin:10px 0 6px;width:28px;border-top:1px solid var(--border)}
.hx-tools{display:flex;flex-direction:column;align-items:center}
.hx-rail-ic{width:calc(1.5 * var(--fs-base));height:calc(1.5 * var(--fs-base));border-radius:6px;
  background:var(--bg-hover);display:flex;align-items:center;justify-content:center;
  font:700 var(--fs-sm)/1 'Noto Sans TC';color:var(--accent-text)}
.hx-rail button[aria-current="true"] .hx-rail-ic{background:var(--bg-surface)}
.hx-rail .hx-grow{flex:1}

.hx-side{width:var(--col-side);flex-shrink:0;margin-right:var(--gap-panel);overscroll-behavior:contain;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--hx-radius);
  padding:var(--pad-panel);overflow:auto;display:flex;flex-direction:column;gap:6px}
.hx-side h3{font:700 var(--fs-lg)/1.3 'Noto Sans TC';color:var(--text-1);flex-shrink:0}
.hx-side p{font:400 var(--fs-sm)/1.6 'Noto Sans TC';color:var(--text-3)}
.hx[data-side="off"] .hx-side{display:none}

/* 主內容區是框，不是捲動區。捲動由畫面自己承載，兩層都收捲動會互相搶。 */
.hx-main{flex:1;min-width:0;background:var(--bg-surface);border:1px solid var(--border);
  border-radius:var(--hx-radius);padding:var(--pad-panel);overflow:hidden;display:flex;
  flex-direction:column}
.hx-screen{display:flex;flex-direction:column;height:100%;min-height:0}
.hx-screen[hidden]{display:none}
.hx-hold{flex:1;display:flex;align-items:center;justify-content:center;
  border:1.5px dashed var(--border);border-radius:var(--radius-inner)}
.hx-hold span{font:500 var(--fs-base)/1.6 ui-monospace,Menlo,monospace;color:var(--text-3);
  letter-spacing:.3px}

.hx-ai{width:var(--col-ai);flex-shrink:0;margin:0 var(--gap-panel);background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--hx-radius);padding:var(--pad-panel);
  display:flex;flex-direction:column;gap:10px}
.hx[data-ai="off"] .hx-ai{display:none}
.hx-chat{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;
  gap:calc(0.75 * var(--fs-base));padding-right:calc(0.25 * var(--fs-base))}
.hx-chat > div{display:flex}
.hx-chat > div[data-who="user"]{justify-content:flex-end}
.hx-chat > div[data-who="ai"]{justify-content:flex-start}
/* 訊息按打進去的樣子呈現，換行留著。 */
.hx-chat p{white-space:pre-wrap;max-width:60%;padding:calc(0.5 * var(--fs-base)) calc(0.7 * var(--fs-base));
  border-radius:var(--hx-radius);font:400 var(--fs-sm)/1.65 'Noto Sans TC';text-wrap:pretty}
.hx-chat > div[data-who="user"] p{background:var(--accent-tint);color:var(--accent-text)}
.hx-chat > div[data-who="ai"] p{background:var(--bg-hover);color:var(--text-1)}
.hx-compose{border:1px solid var(--border);border-radius:var(--radius-inner);
  background:var(--bg-page);display:flex;flex-direction:column;
  gap:calc(0.5 * var(--fs-base));padding:calc(0.62 * var(--fs-base))}
.hx-compose .hx-ph{min-height:calc(3.2 * var(--fs-base));max-height:calc(9 * var(--fs-base));
  width:100%;resize:none;overflow-y:auto;color:var(--text-1);
  font:400 var(--fs-sm)/1.6 'Noto Sans TC'}
.hx-compose .hx-row{display:flex;align-items:center;gap:calc(0.35 * var(--fs-base))}
.hx-compose .hx-ph::placeholder{color:var(--text-3)}
.hx-compose .hx-ph:focus{outline:none}
.hx-send{background:var(--accent-solid);color:var(--on-accent)}
.hx-send:disabled{opacity:.4;cursor:default}
.hx-send:disabled:hover{background:var(--accent-solid)}
.hx-send:hover{background:var(--accent-solid-hover)}

.hx-events{gap:calc(0.55 * var(--fs-base))}
.hx-bar1{display:flex;align-items:center;gap:calc(0.5 * var(--fs-base));flex-shrink:0}
.hx-find{display:flex;align-items:center;gap:calc(0.35 * var(--fs-base));height:var(--ctrl-h-md);
  padding:0 calc(0.55 * var(--fs-base));border:1px solid var(--border);
  border-radius:var(--hx-radius);width:calc(14 * var(--fs-base));min-width:0}
.hx-find span{color:var(--text-3);display:flex;flex-shrink:0}
.hx-find input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font:400 var(--fs-base)/1 'Noto Sans TC';color:var(--text-1);text-overflow:ellipsis}
.hx-level{height:var(--ctrl-h-md);padding:0 var(--ctrl-px-md);border-radius:var(--hx-radius);
  font:600 var(--fs-sm)/1 'Noto Sans TC';color:var(--text-1);flex-shrink:0;white-space:nowrap}
.hx-level[data-level="attention"]{background:var(--accent-tint);color:var(--accent-text)}
.hx-sum{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 var(--fs-sm)/1 'Noto Sans TC';color:var(--text-3)}
.hx-bar2{display:flex;align-items:center;gap:calc(0.3 * var(--fs-base));flex-shrink:0;flex-wrap:wrap}
.hx-chip{height:var(--ctrl-h-sm);padding:0 var(--ctrl-px-sm);border-radius:var(--hx-radius);
  display:flex;align-items:center;gap:calc(0.3 * var(--fs-base));flex-shrink:0;color:var(--text-1)}
.hx-chip:hover{background:var(--bg-hover)}
.hx-chip[aria-current="true"]{background:var(--accent-tint);color:var(--accent-text)}
.hx-chip b{font:600 var(--fs-sm)/1 'Noto Sans TC';white-space:nowrap}
.hx-chip i{font:500 var(--fs-sm)/1 ui-monospace,Menlo,monospace;color:var(--text-3);
  font-style:normal}
.hx-span{font:400 var(--fs-sm)/1 ui-monospace,Menlo,monospace;color:var(--text-3);
  white-space:nowrap;flex-shrink:0}

.hx-table{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--border);
  border-radius:var(--radius-inner);overflow:hidden}
.hx-scroll{overscroll-behavior:contain;flex:1;min-height:0;overflow:auto}
.hx-grid{display:grid;grid-template-columns:calc(4.6 * var(--fs-base)) calc(6.4 * var(--fs-base))
  minmax(calc(9 * var(--fs-base)),1.1fr) minmax(calc(9 * var(--fs-base)),1.2fr)
  minmax(calc(8 * var(--fs-base)),1.1fr)}
.hx-th{align-items:center;background:var(--bg-sidebar);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:1}
.hx-th > div{padding:calc(0.42 * var(--fs-base)) calc(0.5 * var(--fs-base));
  font:700 var(--fs-sm)/1 'Noto Sans TC';color:var(--text-2);white-space:nowrap}
.hx-tr{align-items:flex-start;border-bottom:1px solid var(--border-soft)}
.hx-tr[hidden]{display:none}
.hx-tr[data-level="warning"],.hx-tr[data-level="error"]{background:var(--status-warning-bg)}
.hx-tr:hover{box-shadow:inset calc(0.22 * var(--fs-base)) 0 0 var(--accent-solid)}
.hx-tr > div{padding:calc(0.34 * var(--fs-base)) calc(0.5 * var(--fs-base));min-width:0}
.hx-when{display:flex;flex-direction:column;gap:calc(0.06 * var(--fs-base))}
.hx-when b{font:600 var(--fs-base)/1.2 ui-monospace,Menlo,monospace;color:var(--text-1);
  white-space:nowrap}
.hx-when i{font:400 var(--fs-sm)/1.2 ui-monospace,Menlo,monospace;color:var(--text-3);
  white-space:nowrap;font-style:normal}
.hx-kind{display:flex;align-items:center;gap:calc(0.3 * var(--fs-base))}
.hx-kind span{display:flex;flex-shrink:0}
.hx-kind b{min-width:0;font:600 var(--fs-sm)/1.25 'Noto Sans TC';text-wrap:pretty}
.hx-tr[data-level="info"] .hx-kind{color:var(--text-2)}
.hx-tr[data-level="warning"] .hx-kind{color:var(--status-warning-text)}
.hx-tr[data-level="error"] .hx-kind{color:var(--status-error-text)}
.hx-subj{font:600 var(--fs-base)/1.3 'Noto Sans TC';color:var(--text-1);
  word-break:break-all;overflow-wrap:anywhere}
.hx-targ{font:500 var(--fs-base)/1.3 'Noto Sans TC';color:var(--text-2);
  word-break:break-all;overflow-wrap:anywhere}
.hx-det{font:400 var(--fs-sm)/1.35 'Noto Sans TC';color:var(--text-3);
  word-break:break-all;overflow-wrap:anywhere}
.hx-none{padding:calc(0.6 * var(--fs-base));font:400 var(--fs-sm)/1.4 'Noto Sans TC';
  color:var(--text-3)}
.hx-none[hidden]{display:none}

/* 狀態列高度固定，字不換行；擺不下的項目照 data-slim 由大到小退場。 */
.hx-status{height:var(--bar-bottom);flex-shrink:0;background:var(--accent-solid);display:flex;
  align-items:center;padding:0 var(--pad-bar-x);gap:var(--gap-bar);white-space:nowrap;
  overflow:hidden;font:600 var(--fs-sm)/1 'Noto Sans TC';color:var(--accent-on-solid)}
@container (max-width:680px){.hx-status [data-slim="2"]{display:none}}
@container (max-width:420px){.hx-status [data-slim="1"]{display:none}}
.hx[data-status="off"] .hx-status{display:none}
.hx-status .hx-host{display:flex;align-items:center;gap:6px}
.hx-status .hx-dot{width:calc(0.4 * var(--fs-base));height:calc(0.4 * var(--fs-base));
  border-radius:var(--hx-radius);background:var(--accent-on-solid)}
.hx-status .hx-thin{opacity:.6}
.hx-status u{text-decoration:underline;text-underline-offset:2px}

.hx{--fs-xs:calc(13 * var(--ui-fluid));--fs-2xs:calc(12 * var(--ui-fluid));
    --fs-md:calc(17 * var(--ui-fluid));--fs-body:calc(15 * var(--ui-fluid))}
.hx-side-for{display:flex;flex-direction:column;gap:calc(0.15 * var(--fs-base))}
.hx-side-for[hidden]{display:none}
.hx-side .hx-find{width:auto;margin-bottom:calc(0.4 * var(--fs-base))}
.hx-set-cat{padding:9px 12px;border-radius:7px;
  font:600 var(--fs-sm)/1 'Noto Sans TC';color:var(--text-1);white-space:nowrap}
.hx-set-cat:hover{background:var(--accent-tint-soft,var(--bg-hover))}
.hx-set-cat[aria-current="true"]{background:var(--accent-tint);color:var(--accent-text)}
.hx-set-cat[hidden]{display:none}
.hx-set-none{font:400 var(--fs-sm)/1.6 'Noto Sans TC';color:var(--text-3);
  margin-top:calc(0.5 * var(--fs-base))}
.hx-set-none[hidden]{display:none}

.hx-settings{overflow:auto;scroll-behavior:smooth;overscroll-behavior:contain}
/* 設定畫面的版面取自 VS Code 設定編輯器 workbench.desktop.main.css 的量測值，
   以它的基準字級 13px 換算成 --fs-base 的倍數。字級與顏色仍用本視窗的代幣。 */
.hx-set-inner{width:100%;max-width:calc(107.7 * var(--fs-base));margin:0 auto;
  padding:0 calc(1.85 * var(--fs-base))}
.hx-set-sec[hidden]{display:none}
.hx-set-head{padding:calc(0.77 * var(--fs-base)) calc(0.77 * var(--fs-base))
          calc(0.77 * var(--fs-base)) calc(1.15 * var(--fs-base))}
.hx-set-head .hx-set-title{font:600 calc(1.69 * var(--fs-base))/1.3 'Noto Sans TC';
  color:var(--text-1)}
/* 「僅供展示」貼著它所限定的那段文字，取自設計稿 SettingsScreen.dc.html。 */
.hx-set-demo{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  font:700 var(--fs-2xs)/1.6 'Noto Sans TC';color:var(--text-3);background:var(--bg-hover);
  vertical-align:middle}
.hx-set-note .hx-set-demo{margin-left:0;margin-right:6px}
.hx-set-note{font:400 var(--fs-base)/1.4 'Noto Sans TC';color:var(--text-1);opacity:.9;
  padding:0 calc(1.08 * var(--fs-base)) calc(0.69 * var(--fs-base))
          calc(1.15 * var(--fs-base))}
.hx-set-row{display:block;line-height:1.4;
  padding:calc(0.92 * var(--fs-base)) calc(1.08 * var(--fs-base))
          calc(1.38 * var(--fs-base))}
.hx-set-row .hx-set-label b{display:inline-block;font:600 var(--fs-base)/1.4 'Noto Sans TC';
  color:var(--text-1);padding-bottom:2px}
.hx-set-row .hx-set-label > span{display:block;margin-top:-1px;
  font:400 var(--fs-base)/1.4 'Noto Sans TC';color:var(--text-1);opacity:.9;
  text-wrap:pretty}
.hx-set-row > :not(.hx-set-label){margin-top:calc(0.69 * var(--fs-base))}
.hx-set-row select{width:calc(24.6 * var(--fs-base));max-width:100%;
  height:calc(2 * var(--fs-base));padding:2px 6px;border-radius:2px;
  border:1px solid var(--border);font:400 var(--fs-base)/1 'Noto Sans TC';
  color:var(--text-1);background:var(--bg-surface);cursor:pointer;
  appearance:auto;-webkit-appearance:auto}
.hx-set-row .hx-set-value{display:block;font:600 var(--fs-base)/1.4 ui-monospace,Menlo,monospace;
  color:var(--text-1);overflow-wrap:anywhere}
.hx-set-row .hx-set-path{display:block;font:400 var(--fs-sm)/1.4 ui-monospace,Menlo,monospace;
  color:var(--text-3);overflow-wrap:anywhere}
.hx-switch{width:calc(2.2 * var(--fs-base));height:calc(1.2 * var(--fs-base));border-radius:999px;
  background:var(--border);position:relative;flex-shrink:0;transition:background .15s}
.hx-switch::after{content:"";position:absolute;top:calc(0.15 * var(--fs-base));
  left:calc(0.15 * var(--fs-base));width:calc(0.9 * var(--fs-base));
  height:calc(0.9 * var(--fs-base));border-radius:50%;background:var(--on-accent);
  transition:left .15s}
.hx-switch[aria-checked="true"]{background:var(--accent-solid)}
.hx-switch[aria-checked="true"]::after{left:calc(1.15 * var(--fs-base))}
.hx-theme{display:flex;gap:calc(0.5 * var(--fs-base));flex-shrink:0}
.hx-theme button{width:calc(4.5 * var(--fs-base));height:calc(2.75 * var(--fs-base));
  border-radius:var(--hx-radius);display:flex;align-items:center;justify-content:center;
  font:500 var(--fs-sm)/1 'Noto Sans TC';border:1px solid var(--border)}
.hx-theme button[data-theme="light"]{background:#F7F5F2;color:#1E1B18}
.hx-theme button[data-theme="dark"]{background:#1E1B18;color:#fff}
.hx-theme button[aria-current="true"]{border-color:var(--accent-solid);
  box-shadow:0 0 0 1px var(--accent-solid)}
.hx-btn{height:var(--ctrl-h-md);padding:0 var(--ctrl-px-md);border-radius:var(--hx-radius);
  border:1px solid var(--border);background:var(--bg-surface);color:var(--text-1);
  font:600 var(--fs-sm)/1 'Noto Sans TC';flex-shrink:0}
.hx-btn:hover{background:var(--bg-hover)}
.hx-btn[data-kind="accent"]{color:var(--accent-text);border-color:var(--accent-border)}
/* ── 工具庫。取自 LibraryScreen.dc.html。 ────────────────────────────────── */
.hx-lib-cat{display:flex;align-items:center;justify-content:space-between;
  gap:calc(0.4 * var(--fs-base));padding:9px 12px;border-radius:7px;
  font:600 var(--fs-base)/1 'Noto Sans TC';color:var(--text-2)}
.hx-lib-cat:hover{background:var(--bg-hover)}
.hx-lib-cat[aria-current="true"]{background:var(--accent-tint);color:var(--accent-text);
  font-weight:700}
.hx-lib-cat .hx-lib-n{font:500 var(--fs-sm)/1 'Noto Sans TC';color:var(--text-3);
  flex-shrink:0}
.hx-lib-cat[aria-current="true"] .hx-lib-n{color:var(--accent-text)}

.hx-library{gap:0}
.hx-lib-find{width:calc(30 * var(--fs-base));margin-bottom:calc(0.75 * var(--fs-base))}
.hx-drop{display:flex;align-items:center;gap:10px;padding:12px 14px;
  border:1.5px dashed var(--border);border-radius:10px;background:var(--bg-page);
  color:var(--text-1);font:600 var(--fs-base)/1 'Noto Sans TC';flex-shrink:0;
  transition:background-color .15s ease,border-color .15s ease}
.hx-drop svg{color:var(--accent-text)}
.hx-drop[data-over="yes"]{border-color:var(--accent-solid);background:var(--accent-tint)}
.hx-drop-note{font:400 var(--fs-xs)/1.4 'Noto Sans TC';color:var(--text-3);
  margin:4px 0 12px;flex-shrink:0}
.hx-lib-error{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;
  background:var(--status-error-bg);color:var(--status-error-text);
  font:500 var(--fs-sm)/1.4 'Noto Sans TC';margin:-6px 0 12px;flex-shrink:0}
.hx-lib-error[hidden]{display:none}
.hx-lib-list{flex:1;min-height:0;border:1px solid var(--border);border-radius:10px;overscroll-behavior:contain;
  overflow-y:auto;overflow-x:hidden}
.hx-lib-item[hidden]{display:none}
.hx-lib{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;
  border-bottom:1px solid var(--border-subtle)}
.hx-lib-ic{width:calc(3.4 * var(--fs-base));height:calc(3.4 * var(--fs-base));
  border-radius:8px;background:var(--bg-hover);display:flex;align-items:center;
  justify-content:center;flex-shrink:0;margin-top:1px;
  font:700 var(--fs-base)/1 'Noto Sans TC';color:var(--accent-text)}
.hx-lib-body{flex:1;min-width:0}
.hx-lib-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hx-lib-top b{font:700 var(--fs-md)/1.3 'Noto Sans TC';color:var(--text-1)}
.hx-lib-ver{font:500 var(--fs-xs)/1 'Noto Sans TC';color:var(--text-2)}
.hx-lib-new{display:none;padding:2px 7px;border-radius:999px;
  font:700 var(--fs-2xs)/1.6 'Noto Sans TC';color:var(--accent-text);
  background:var(--accent-tint)}
.hx-lib-item[data-state="update"] .hx-lib-new{display:inline-block}
.hx-lib-desc{font:400 var(--fs-body)/1.5 'Noto Sans TC';color:var(--text-2);margin-top:3px}
.hx-lib-meta{font:400 var(--fs-xs)/1.5 ui-monospace,Menlo,monospace;color:var(--text-3);
  margin-top:3px}
.hx-lib-act{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;
  margin-top:1px}
.hx-lib-act button{height:var(--ctrl-h-sm);padding:0 14px;border-radius:6px;
  display:none;align-items:center;gap:5px;font:700 var(--fs-sm)/1 'Noto Sans TC';
  white-space:nowrap;background:var(--accent-solid);color:var(--on-accent)}
.hx-lib-act button:hover{background:var(--accent-solid-hover)}
.hx-lib-act button svg{width:var(--fs-sm);height:var(--fs-sm)}
.hx-lib-item[data-state="installable"] [data-act="install"],
.hx-lib-item[data-state="update"] [data-act="update"],
.hx-lib-item[data-state="update"] [data-act="remove"],
.hx-lib-item[data-state="installed"] [data-act="remove"],
.hx-lib-act [data-act="guide"]{display:flex}
.hx-lib-act [data-act="remove"]{background:var(--bg-hover);color:var(--text-2)}
.hx-lib-act [data-act="remove"]:hover{background:var(--status-error-bg);
  color:var(--status-error-text)}
.hx-lib-act [data-act="guide"]{padding:0 10px;border:1px solid var(--border);
  background:none;color:var(--text-1);font:600 var(--fs-xs)/1 'Noto Sans TC'}
.hx-lib-act [data-act="guide"]:hover{background:var(--bg-hover)}
.hx-lib-act [data-act="guide"][aria-expanded="true"]{background:var(--accent-tint);
  border-color:var(--accent-border);color:var(--accent-text)}

.hx-guide{padding:12px 16px 16px;background:var(--bg-sidebar);
  border-bottom:1px solid var(--border-subtle)}
.hx-guide[hidden]{display:none}
.hx-gtabs{display:flex;gap:16px;margin-bottom:12px;border-bottom:1px solid var(--border);
  overflow-x:auto}
.hx-gt{padding:7px 2px;font:600 var(--fs-sm)/1 'Noto Sans TC';color:var(--text-2);
  border-bottom:2px solid transparent;white-space:nowrap}
.hx-gt[aria-current="true"]{color:var(--accent-text);border-bottom-color:var(--accent-solid)}
.hx-gsec[hidden]{display:none}
.hx-gp{font:400 var(--fs-sm)/1.6 'Noto Sans TC';color:var(--text-2);margin:2px 0}
.hx-gul{margin:2px 0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.hx-gul li{font:400 var(--fs-sm)/1.6 'Noto Sans TC';color:var(--text-2);list-style:disc}
.hx-lib-none{padding:32px;text-align:center;font:500 var(--fs-base)/1 'Noto Sans TC';
  color:var(--text-2)}
.hx-lib-none[hidden]{display:none}

.hx-ask{position:absolute;inset:0;z-index:100;display:flex;align-items:center;
  justify-content:center;background:rgba(var(--overlay-rgb),.28)}
.hx-ask[hidden]{display:none}
.hx-ask-box{width:calc(36 * var(--fs-base));background:var(--bg-surface);
  border:1px solid var(--border);border-radius:10px;overflow:hidden;
  box-shadow:0 16px 40px -10px rgba(var(--shadow-rgb),.35)}
.hx-ask-title{padding:20px 22px 6px;font:700 var(--fs-lg)/1.3 'Noto Sans TC';
  color:var(--text-1)}
.hx-ask-text{padding:8px 22px 4px;font:400 var(--fs-sm)/1.5 'Noto Sans TC';
  color:var(--text-2)}
.hx-ask-text b{font-weight:700;color:var(--text-1)}
.hx-ask-act{display:flex;justify-content:flex-end;gap:8px;padding:16px 22px 20px}
.hx-ask-act button{height:var(--ctrl-h-md);padding:0 14px;border-radius:6px;
  display:flex;align-items:center;font:600 var(--fs-body)/1 'Noto Sans TC';
  border:1px solid var(--border);color:var(--text-1)}
.hx-ask-act [data-ask="no"]:hover{background:var(--bg-hover)}
.hx-ask-act [data-ask="yes"]{padding:0 16px;border:none;font-weight:700;
  background:var(--status-error-text);color:var(--on-accent)}

/* 收哪一欄由視窗自己的寬度決定，不由頁面寬度決定：
   主內容區低於 440px 就沒有讀表的餘地，先收助理欄，再收資訊欄。 */
@container (max-width:780px){.hx-ai{display:none}}
@container (max-width:680px){.hx-side{display:none}}