.rl-maintabs { margin-bottom: 1rem; }
.rl-toolbar { margin-bottom: 0.875rem; }

/* 尺面 */
.rl-stage {
    position: relative;
    width: 100%;
    height: 176px;
    border: 1px solid var(--color-border-hover);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.rl-stage[data-orient="v"] { height: clamp(420px, 68vh, 900px); max-width: 360px; margin: 0 auto; }
.rl-stage canvas { display: block; width: 100%; height: 100%; max-width: none; }
.rl-stage.is-full {
    position: fixed; inset: 0; z-index: 500;
    width: 100vw; height: 100vh; height: 100dvh; max-width: none;
    border: 0; border-radius: 0; margin: 0;
}

.rl-marker {
    position: absolute;
    touch-action: none;
    cursor: ew-resize;
    display: flex; align-items: center; justify-content: center;
    outline: none;
}
.rl-stage[data-orient="h"] .rl-marker { top: 0; bottom: 0; width: 44px; margin-left: -22px; }
.rl-stage[data-orient="v"] .rl-marker { left: 0; right: 0; height: 44px; margin-top: -22px; cursor: ns-resize; }
.rl-marker::before { content: ""; position: absolute; background: var(--color-hot); }
.rl-stage[data-orient="h"] .rl-marker::before { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.rl-stage[data-orient="v"] .rl-marker::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.rl-knob {
    position: relative;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--color-hot); color: #fff;
    font-size: 0.8125rem; font-weight: 700;
    box-shadow: var(--shadow-md);
}
.rl-marker:focus-visible .rl-knob { outline: 2px solid var(--color-primary); outline-offset: 2px; }
#mB::before, #mB .rl-knob { background: var(--color-info); }

.rl-float {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    margin-top: 44px;
    padding: 6px 14px; border-radius: var(--radius-full);
    background: var(--color-text); color: var(--color-bg);
    font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap;
}
.rl-exit { position: absolute; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2; }
.rl-stage[data-orient="h"].is-full .rl-exit { bottom: auto; top: 50%; right: 16px; transform: translateY(-50%); }
.rl-tip { margin-top: 0.625rem; }
.rl-stats { margin-top: 0.875rem; }
.rl-after { margin-top: 0.875rem; }

/* 校准 */
.rl-calib-grid { margin-top: 0.875rem; gap: 1.5rem; }
.rl-calib {
    position: relative; overflow: hidden;
    padding: 12px 0; min-height: 88px;
    border: 1px dashed var(--color-border-hover); border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.rl-ref {
    position: relative; height: 64px; min-width: 20px;
    background: var(--color-primary-soft);
    border: 2px solid var(--color-primary); border-left-width: 2px;
    border-radius: 0 6px 6px 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary); font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
}
.rl-ref.is-coin { border-radius: 50%; }
.rl-ref span { overflow: hidden; text-overflow: ellipsis; padding: 0 16px 0 6px; }
.rl-ref-handle {
    position: absolute; right: -22px; top: 50%; width: 44px; height: 44px; margin-top: -22px;
    touch-action: none; cursor: ew-resize;
}
.rl-ref-handle::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 36px; margin: -18px 0 0 -5px;
    border-radius: 5px; background: var(--color-primary); box-shadow: var(--shadow-sm);
}
.rl-fine { flex-wrap: nowrap; }
.rl-fine input { flex: 1; min-width: 0; }
.rl-diag { flex-wrap: nowrap; }
.rl-diag input { flex: 1; min-width: 0; width: 100%; }

/* 量角器 */
.pt-stage {
    position: relative; overflow: hidden;
    max-width: 760px; margin: 0 auto;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    user-select: none; -webkit-user-select: none;
}
.pt-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.pt-stage svg { position: relative; display: block; width: 100%; height: auto; touch-action: none; }
.pt-face { fill: var(--color-bg-card); stroke: var(--color-border-hover); stroke-width: 1; }
.pt-stage.is-cam .pt-face { fill-opacity: 0.28; }
.pt-tick { stroke: var(--color-text-secondary); stroke-width: 0.6; }
.pt-tick--major { stroke: var(--color-text); stroke-width: 1; }
.pt-num { fill: var(--color-text-secondary); font-size: 9px; font-family: var(--font-mono); text-anchor: middle; }
.pt-num--inner { fill: var(--color-text-muted); font-size: 7px; }
.pt-base { stroke: var(--color-text); stroke-width: 1; }
.pt-arc { fill: var(--color-primary-soft); stroke: var(--color-primary); stroke-width: 1.2; }
.pt-arm { stroke-width: 2; stroke-linecap: round; }
.pt-arm--a { stroke: var(--color-hot); }
.pt-arm--b { stroke: var(--color-info); }
.pt-center { fill: var(--color-text); }
.pt-handle { cursor: grab; outline: none; }
.pt-hit { fill: transparent; }
.pt-handle text { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.pt-handle--a .pt-dot { fill: var(--color-hot); }
.pt-handle--b .pt-dot { fill: var(--color-info); }
.pt-handle:focus-visible .pt-dot { stroke: var(--color-primary); stroke-width: 3; }
.pt-read {
    font-family: var(--font-display); font-size: 26px; font-weight: 700; fill: var(--color-primary);
    paint-order: stroke; stroke: var(--color-bg-card); stroke-width: 4px; stroke-linejoin: round;
    pointer-events: none;
}
.pt-stage.is-cam .pt-num, .pt-stage.is-cam .pt-num--inner { paint-order: stroke; stroke: var(--color-bg-card); stroke-width: 2px; fill: var(--color-text); }
.rl-check { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 0.875rem; color: var(--color-text-secondary); cursor: pointer; }
#camMsg { margin-top: 0.875rem; }

@media (max-width: 768px) {
    .rl-calib-grid { gap: 1rem; }
}
@media (max-width: 480px) {
    .rl-after .tb-btn { flex: 1 1 calc(50% - 0.625rem); }
    .rl-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
    .rl-stats .tb-stat { padding: 0.625rem; }
    .rl-stats .tb-stat-value { font-size: 1.05rem; }
}