/* ui-v3 · 基礎:重置、底紋、字體工具、捲軸、焦點 */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { height: 100%; background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 400 13.5px/1.5 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
img, svg { display: block; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
::selection { background: var(--sig); color: var(--sig-ink); }

/* 底紋:極淡的 48px 格線,中心亮、四周淡出;再疊一層顆粒 */
.backdrop { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.backdrop::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 90% 75% at 55% 35%, #000 20%, transparent 95%);
  opacity: .5;
}
.backdrop::after {
  content: ''; position: absolute; inset: 0; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 目前角色的屬性色在背景留一點光暈(由 JS 設 --amb) */
.backdrop .amb {
  position: absolute; width: 70vw; height: 70vw; left: 10vw; top: -40vw; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--amb, var(--sig)) 16%, transparent), transparent 62%);
}

/* 字體工具 */
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* 微標籤:英文大寫 + 字距,永遠搭配中文,不單獨承擔意義 */
.lbl { font: 500 10px/1.2 var(--f-mono); letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
.lbl b { color: var(--fg2); font-weight: 500; letter-spacing: .04em; font-family: var(--f-ui); font-size: 11px; text-transform: none; }
.dim { color: var(--dim); }
.fg2 { color: var(--fg2); }
.up { color: var(--up); }
.down { color: var(--down); }
.warn-t { color: var(--warn); }
.danger-t { color: var(--danger); }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; gap: var(--g2); }
.col { display: flex; flex-direction: column; gap: var(--g2); }
.wrap { flex-wrap: wrap; }

/* 焦點:鍵盤才顯示,2px 訊號色外框 */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; border-radius: var(--r1); }

/* 捲軸:細、低對比,捲動時才明顯 */
* { scrollbar-width: thin; scrollbar-color: var(--s5) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--s5); background-clip: padding-box; }

/* 開場:波形描線,App 掛上後淡出 */
#boot { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: var(--bg); transition: opacity .5s var(--ease), visibility .5s; }
#boot.done { opacity: 0; visibility: hidden; }
#boot svg { width: 120px; height: 48px; }
#boot path { stroke: var(--sig); stroke-width: 2; fill: none; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: bootDraw .9s var(--ease) forwards; }
#boot path:nth-child(2) { animation-delay: .06s; } #boot path:nth-child(3) { animation-delay: .12s; } #boot path:nth-child(4) { animation-delay: .18s; } #boot path:nth-child(5) { animation-delay: .24s; }
#boot p { margin-top: 18px; font: 500 10px var(--f-mono); letter-spacing: .3em; color: var(--dim); text-align: center; animation: fadeIn .6s .2s backwards; }
@keyframes bootDraw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes popIn { from { opacity: 0; transform: scale(.96) translateY(-4px); } }

/* 減少動態:所有動畫 / 轉場幾乎瞬間完成 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}