.portal-trace{min-width:0;color:var(--ink,#263c44)}
.portal-trace h3{font-size:1.05rem;line-height:1.4;margin:0 0 16px}
.portal-trace-body{min-width:0}
.portal-trace-empty{padding:20px 0;color:var(--muted,#5e7782);font-size:.925rem}
.portal-trace-note{color:var(--muted,#5e7782);font-size:.875rem;line-height:1.7;margin:12px 0 0}
.trace-window-label{display:flex;align-items:center;gap:12px;font-size:.925rem;margin-bottom:12px}
.trace-window-label select{width:auto;min-height:44px;max-width:100%;flex:1;margin:0}
.trace-svg{display:block;width:100%;height:auto;overflow:visible}
.trace-cop-svg{max-width:560px;margin:0 auto}
.trace-svg text{font:12px -apple-system,BlinkMacSystemFont,"Noto Sans TC",sans-serif;fill:var(--muted,#5e7782)}
.trace-svg .trace-axis-title{font-size:12px;font-weight:600;fill:var(--ink,#263c44)}
.trace-grid{stroke:var(--line,#d6e2e6);stroke-width:1}
.trace-force-line,.trace-cop-line{fill:none;stroke:#208775;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.trace-cop-line{stroke:#be651f;stroke-width:1.5}
.trace-force-line-point{fill:#208775}.trace-cop-line-point{fill:#be651f}
.trace-event-line{stroke:#bd742d;stroke-width:1;stroke-dasharray:3 4;opacity:.5;vector-effect:non-scaling-stroke;transition:opacity .16s,stroke-width .16s}
.trace-event-line.is-selected{opacity:1;stroke-width:2.5;stroke-dasharray:5 3}
.trace-event-stem{stroke:#d0dfe0;stroke-width:1}
.trace-event-badge{fill:#edf6f4;stroke:#cadfda;stroke-width:1}
.trace-svg .trace-event-number{font-size:11px;font-weight:700;fill:#226b61}
.trace-events{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.trace-event-button{display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;min-height:44px;border:1px solid var(--line,#d6e2e6);border-radius:9px;padding:7px 11px;background:#fff;color:var(--ink,#263c44);font:inherit;font-size:.875rem;line-height:1.35;text-align:left;white-space:normal;transition:background .16s,box-shadow .16s,transform .16s}
.trace-event-button:hover,.trace-event-button[aria-pressed=true]{border-color:#298873;background:#eaf5f1;box-shadow:0 2px 7px #216d5914}
.trace-event-button:hover{transform:translateY(-1px)}
.trace-event-button:focus-visible{outline:3px solid #e58b42;outline-offset:2px}
.trace-event-index{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;border-radius:50%;background:#e8f2ef;color:#216b60;font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:700}
.trace-event-detail{min-height:26px;font-size:.875rem;line-height:1.6;margin:12px 0 0;color:var(--muted,#5e7782);font-variant-numeric:tabular-nums}
.trace-event-disclosure{margin-top:12px}.trace-event-disclosure>summary{min-height:44px;display:list-item;cursor:pointer;padding:10px 0;font-size:.925rem;color:#216b60}
.trace-cop-area{fill:#2087751a;stroke:#20877599;stroke-width:1;vector-effect:non-scaling-stroke}
.trace-start{fill:#178576;stroke:#fff;stroke-width:2}.trace-end{fill:#bc5d28;stroke:#fff;stroke-width:2}
.trace-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin:13px 0 0;font-size:.8rem;color:var(--muted,#5e7782)}
.trace-legend>span{display:inline-flex;align-items:center;gap:6px}.trace-key{display:inline-block;width:17px;height:3px;background:#be651f}
.trace-key.area{height:12px;background:#2087751a;border:1px solid #20877599}.trace-key.start,.trace-key.end{width:9px;height:9px;border-radius:50%;background:#178576}.trace-key.end{background:#bc5d28}
@media(max-width:420px){.trace-window-label{align-items:flex-start;flex-direction:column;gap:6px}.trace-window-label select{width:100%}.trace-event-button{flex:1 1 auto}.trace-legend{gap:10px 12px}}
@media(prefers-reduced-motion:reduce){.trace-event-button,.trace-event-line{transition:none}.trace-event-button:hover{transform:none}}