@charset "UTF-8";
/* ===== 導覽列站務 HUD（2026-11-03） ===== */
html.tn-hud-ready .header-actions .technote-stats-ticker { display: none !important; }
.tn-hud { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px 0 10px; margin-right: 6px; cursor: pointer;
  border-radius: 10px; border: 1px solid rgba(60,173,110,.35); color: var(--color-nav-text, inherit); font: inherit;
  background: linear-gradient(135deg, rgba(46,133,85,.14), rgba(34,211,238,.05)), rgba(0,0,0,.12); overflow: hidden; isolation: isolate;
  font-variant-numeric: tabular-nums; transition: border-color .2s ease, box-shadow .2s ease; }
html:not(.dark-mode) .tn-hud { background: linear-gradient(135deg, rgba(46,133,85,.10), rgba(34,211,238,.04)), #fff; }
.tn-hud:hover, .tn-hud[aria-expanded="true"] { border-color: rgba(60,173,110,.8); box-shadow: 0 0 0 3px rgba(60,173,110,.15), 0 6px 18px -8px rgba(46,133,85,.7); }
/* 掃描光：每 6 秒一道微光掃過 */
.tn-hud::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(60,173,110,.22) 50%, transparent 65%) -150% 0 / 220% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) { .tn-hud::after { animation: tnHudScan 6s ease-in-out infinite; } @keyframes tnHudScan { 0%, 70% { background-position: -150% 0; } 100% { background-position: 150% 0; } } }
.tn-hud-live { display: inline-flex; align-items: baseline; gap: 5px; }
.tn-hud-live i { position: relative; top: -1px; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; align-self: center; box-shadow: 0 0 6px #22c55e; }
@media (prefers-reduced-motion: no-preference) { .tn-hud-live i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #22c55e; animation: tnHudPing 2s ease-out infinite; } @keyframes tnHudPing { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } } }
.tn-hud-live.is-quiet i { background: #9ca3af; box-shadow: none; } .tn-hud-live.is-quiet i::after { display: none; }
.tn-hud-live b { font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #22c55e; display: inline-block; }
.tn-hud-live small { font-size: 11.5px; opacity: .6; }
.tn-hud-bump { animation: tnHudBump .5s cubic-bezier(.3,1.6,.5,1); } @keyframes tnHudBump { 0% { transform: translateY(-60%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.tn-hud-spark { width: 48px; height: 16px; overflow: visible; }
.tn-hud-spark polyline { fill: none; stroke: #3cad6e; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(60,173,110,.7)); }
.tn-hud-sep { width: 1px; height: 16px; background: rgba(127,127,127,.35); }
.tn-hud-slot { height: 20px; overflow: hidden; display: inline-block; text-align: left; }
.tn-hud-roll { display: flex; flex-direction: column; will-change: transform; }
.tn-hud-item { height: 20px; display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; line-height: 20px; }
.tn-hud-item b { font: 700 13.5px/20px ui-monospace, SFMono-Regular, Menlo, monospace; }
.tn-hud-item small { font-size: 11.5px; opacity: .6; }
@media (max-width: 1200px) { .tn-hud { display: none; } }

/* 儀表板 */
.tn-hud-dash { position: fixed; inset: auto; margin: 0; width: 340px; padding: 14px; box-sizing: border-box; border-radius: 16px; z-index: 99996; overflow: visible;
  color: #e5e7eb; background: rgba(16,19,23,.88); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(60,173,110,.35); box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.3px); background-size: 16px 16px; }
.tn-hud-dash:not([popover]) { display: none; } .tn-hud-dash:not([popover]).is-open { display: block; }
.tn-hud-dh { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); font: 600 13px ui-monospace, Menlo, monospace; }
.tn-hud-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.tn-hud-ok { margin-left: auto; font-size: 11px; color: #4ade80; font-weight: 600; }
.tn-hud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tn-hud-cell { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.tn-hud-cell small { display: block; font-size: 11.5px; opacity: .6; }
.tn-hud-cell b { display: block; margin-top: 2px; font: 700 16px ui-monospace, SFMono-Regular, Menlo, monospace; color: #f3f4f6; }
.tn-hud-cell:first-child b { color: #4ade80; }
.tn-hud-bar { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.tn-hud-bar em { display: block; height: 100%; width: var(--p); border-radius: 2px; background: linear-gradient(90deg, #2e8555, #22d3ee); }
.tn-hud-df { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font: 11px ui-monospace, Menlo, monospace; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .tn-hud-dash[popover] { opacity: 0; transform: translateY(-6px) scale(.97); transition: opacity .2s ease, transform .25s cubic-bezier(.3,1.3,.4,1), display .25s allow-discrete, overlay .25s allow-discrete; }
  .tn-hud-dash[popover]:popover-open { opacity: 1; transform: none; }
  @starting-style { .tn-hud-dash[popover]:popover-open { opacity: 0; transform: translateY(-6px) scale(.97); } }
  .tn-hud-dash:popover-open .tn-hud-bar em { animation: tnHudFill .7s cubic-bezier(.2,.8,.2,1) both; } @keyframes tnHudFill { from { width: 0; } }
  .tn-hud-dash:popover-open .tn-hud-cell { animation: tnCcTile .35s cubic-bezier(.2,.9,.3,1.15) both; }
  .tn-hud-dash:popover-open .tn-hud-cell:nth-child(2) { animation-delay: .03s; } .tn-hud-dash:popover-open .tn-hud-cell:nth-child(3) { animation-delay: .06s; }
  .tn-hud-dash:popover-open .tn-hud-cell:nth-child(4) { animation-delay: .09s; } .tn-hud-dash:popover-open .tn-hud-cell:nth-child(n+5) { animation-delay: .12s; }
}
.tn-hud-df { justify-content: flex-end; }
/* 淺色模式：儀表板改白色毛玻璃 */
html:not(.dark-mode) .tn-hud-dash { color: #1f2937; background-color: rgba(255,255,255,.9); border-color: rgba(46,133,85,.3);
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1.3px); box-shadow: 0 24px 60px rgba(0,0,0,.18), inset 0 1px 0 #fff; }
html:not(.dark-mode) .tn-hud-dh { border-bottom-color: rgba(0,0,0,.08); }
html:not(.dark-mode) .tn-hud-ok { color: #15803d; }
html:not(.dark-mode) .tn-hud-cell { background: rgba(0,0,0,.035); border-color: rgba(0,0,0,.06); }
html:not(.dark-mode) .tn-hud-cell b { color: #111827; }
html:not(.dark-mode) .tn-hud-cell:first-child b { color: #15803d; }
html:not(.dark-mode) .tn-hud-bar { background: rgba(0,0,0,.08); }
html:not(.dark-mode) .tn-hud-live b { color: #16a34a; }