:root {
  --bg: #0b1216;
  --bg2: #16252c;
  --panel: rgba(18, 30, 36, 0.86);
  --panel-solid: #14222a;
  --line: rgba(120, 190, 200, 0.18);
  --text: #e3eef0;
  --muted: #8ea6ac;
  --accent: #3cc6cf;
  --accent-ink: #062226;
  --danger: #ef6b5f;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font: 14px/1.4 -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; background: radial-gradient(120% 90% at 50% 35%, var(--bg2), var(--bg) 70%); }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* ---------- top bar ---------- */
#topbar { position: absolute; top: calc(var(--safe-t) + 10px); left: calc(var(--safe-l) + 10px); right: calc(var(--safe-r) + 10px);
  display: flex; align-items: center; gap: 10px; pointer-events: none; }
#topbar > * { pointer-events: auto; }
#modes { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin: 0 auto;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#modes button { padding: 6px 16px; border-radius: 7px; color: var(--muted); }
#modes button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--panel);
  border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.small { width: 30px; height: 30px; border-radius: 8px; background: transparent; border: 0; }
.icon:active, .chip:active, .sys:active { transform: scale(0.96); }

/* ---------- left rail: systems + regions ---------- */
#rail { position: absolute; left: calc(var(--safe-l) + 10px); top: calc(var(--safe-t) + 62px); bottom: calc(var(--safe-b) + 86px);
  width: 58px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px 4px;
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto; scrollbar-width: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#rail::-webkit-scrollbar { display: none; }
.rail-group { display: flex; flex-direction: column; gap: 3px; }
.rail-sep { height: 1px; background: var(--line); margin: 4px 6px; }
.sys, .reg { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 9px;
  color: var(--muted); font-size: 11px; line-height: 1.1; position: relative; }
.sys .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; }
.sys .dot i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); opacity: 0.35; }
.sys.on { color: var(--text); }
.sys.on .dot { border-color: var(--c); }
.sys.on .dot i { opacity: 1; }
.reg { padding: 7px 2px; font-size: 12px; }
.reg.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* ---------- depth slider (right edge) ---------- */
#depth { position: absolute; right: calc(var(--safe-r) + 10px); top: 50%; transform: translateY(-50%);
  height: min(46vh, 360px); width: 44px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 0;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.depth-label { font-size: 11px; color: var(--muted); writing-mode: vertical-rl; letter-spacing: 2px; }
#depthRange { flex: 1; width: 28px; margin: 0; writing-mode: vertical-lr; direction: ltr; -webkit-appearance: slider-vertical; appearance: slider-vertical; accent-color: var(--accent); }
@supports (writing-mode: vertical-lr) and (not (-webkit-touch-callout: none)) {
  #depthRange { -webkit-appearance: auto; appearance: auto; }
}

/* ---------- section panel ---------- */
#sectionPanel { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 18px);
  width: min(92vw, 520px); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#sectionPanel .seg { grid-column: 1 / -1; }
#sectionRange { width: 100%; accent-color: var(--accent); }
.seg { display: flex; gap: 4px; background: rgba(0,0,0,0.25); border-radius: 9px; padding: 3px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: 1; padding: 6px 10px; border-radius: 7px; color: var(--muted); white-space: nowrap; }
.seg button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

.chip { padding: 7px 12px; border-radius: 9px; background: rgba(255,255,255,0.07); border: 1px solid var(--line); white-space: nowrap; }
.chip.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }

/* ---------- info card ---------- */
#info { position: absolute; left: calc(var(--safe-l) + 78px); right: calc(var(--safe-r) + 64px); bottom: calc(var(--safe-b) + 18px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 10px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#app.section-on #info { bottom: calc(var(--safe-b) + 150px); }
.info-head { display: flex; justify-content: space-between; gap: 8px; }
.zh { font-size: 18px; font-weight: 700; }
.en { color: var(--muted); font-size: 13px; margin-top: 2px; -webkit-user-select: text; user-select: text; }
.meta { font-size: 12px; color: var(--accent); margin-top: 4px; }
.info-actions { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.info-actions::-webkit-scrollbar { display: none; }

#hiddenBar { position: absolute; top: calc(var(--safe-t) + 60px); left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 5px 6px 5px 12px;
  font-size: 12px; color: var(--muted); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#hiddenBar .chip { padding: 5px 10px; }

/* ---------- search ---------- */
#searchSheet { position: absolute; inset: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 8px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 8px);
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; padding: 10px; gap: 8px; z-index: 10; }
.search-box { display: flex; gap: 8px; }
#searchInput { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--text); background: rgba(0,0,0,0.3); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; outline: none; -webkit-user-select: text; user-select: text; }
#searchInput:focus { border-color: var(--accent); }
#searchList { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
#searchList li { padding: 9px 8px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; cursor: pointer; }
#searchList li:hover, #searchList li.kb { background: rgba(60,198,207,0.12); }
#searchList .sw { width: 10px; height: 10px; border-radius: 50%; flex: none; }
#searchList .t { display: flex; flex-direction: column; min-width: 0; }
#searchList .t b { font-weight: 600; }
#searchList .t small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#searchList .empty { color: var(--muted); justify-content: center; border: 0; cursor: default; }

/* ---------- loading ---------- */
#loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--bg); z-index: 20; transition: opacity .4s; }
#loading.done { display: none; }
#tendonKinds { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 58px); display: flex; gap: 5px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; z-index: 3;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#tendonKinds .chip { padding: 5px 10px; font-size: 12px; color: var(--muted); }
#tendonKinds .chip.on { background: #cfe3ec; color: #0b2530; border-color: transparent; font-weight: 600; }
#app:has(#tendonKinds:not([hidden])) #hiddenBar { top: calc(var(--safe-t) + 100px); }
#toast { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 100px); max-width: min(86vw, 420px);
  text-align: center; font-size: 13px; color: var(--text); background: var(--panel-solid); border: 1px solid var(--accent);
  border-radius: 12px; padding: 8px 14px; pointer-events: none; z-index: 5; }
#miniLoad { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 60px); font-size: 12px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px; pointer-events: none; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loadingText { color: var(--muted); font-size: 13px; }
.bar { width: 200px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
#loadingBar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }

#credit { position: absolute; right: calc(var(--safe-r) + 10px); bottom: calc(var(--safe-b) + 4px); font-size: 10px; color: rgba(142,166,172,0.55); pointer-events: none; }
#app.has-info #credit, #app.section-on #credit { display: none; }

/* ---------- desktop (Windows) layout ---------- */
@media (min-width: 900px) and (pointer: fine) {
  #rail { width: 150px; top: calc(var(--safe-t) + 66px); bottom: auto; max-height: calc(100% - 100px); padding: 8px; }
  .sys, .reg { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 7px 10px; font-size: 13px; }
  .sys:hover, .reg:hover { background: rgba(255,255,255,0.06); }
  .reg.on:hover { background: var(--accent); }
  .sys .key, .reg .key { margin-left: auto; font-size: 11px; color: var(--muted); opacity: 0.7; }
  .reg.on .key { color: var(--accent-ink); }
  #info { left: auto; right: 70px; top: calc(var(--safe-t) + 66px); bottom: auto; width: 340px; }
  #app.section-on #info { bottom: auto; }
  #searchSheet { inset: 66px auto 16px 172px; width: 380px; }
  #depth { height: 420px; }
  .icon:hover, .chip:hover { border-color: var(--accent); }
}
@media not ((min-width: 900px) and (pointer: fine)) {
  .key { display: none; }
}
@media (max-width: 380px) {
  #modes button { padding: 6px 12px; }
}