#stage #threejs-canvas {
    display: none !important;
}
#stage .canvas-stage-wrapper {
    background: #ffffff !important;
}

#stage #viewport-stage-bounds {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
#stage .camera-frame-bounds,
#stage .camera-passepartout,
#stage .safe-areas-overlay {
    display: none !important;
}

/* Hide all scrollbars */
html, body, #stage, #app-container, #stage-right-deck {
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
/* ==========================================================================
   VIDEOKREA MOTION STUDIO — SIDE-FACING KREATE REDESIGN
   STRICT ADHERENCE TO FIX_BRIEF_FOR_AGENT.md & new_kreate ui.png (1320x735)
   ========================================================================== */

/* Hide procedural overlay grain */
.paper-texture-overlay {
    display: none !important;
}

/* Reset viewport: Stage is scaled uniformly by JS fit() */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #000000 !important;
    font-family: 'Jost', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: #ffffff !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* ==========================================================================
   STEP 1: FIXED-STAGE SCALER CONTAINER (1320px x 735px ONLY)
   ========================================================================== */
#stage {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1320px !important;
    height: 735px !important;
    transform-origin: 0 0 !important;
    overflow: hidden !important;
    background: #000000 !important;
}

#stage #app-container.side-facing-layout {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1320px !important;
    height: 735px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: #000000 !important;
    overflow: hidden !important;
}

/* ==========================================================================
   LEFT COLUMN: STUDIO PANEL (x: 0..660, y: 0..735, bg: #0d0d0d)
   ========================================================================== */
#stage #left-panel.studio-left-deck {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 660px !important;
    height: 735px !important;
    min-width: 660px !important;
    max-width: 660px !important;
    background: #0d0d0d !important;
    border-right: 1px solid #323232 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 20 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   RIGHT COLUMN: STAGE DECK (x: 660..1320, y: 0..735)
   ========================================================================== */
#stage #stage-right-deck.stage-right-deck {
    position: absolute !important;
    left: 660px !important;
    top: 0 !important;
    width: 660px !important;
    height: 735px !important;
    min-width: 660px !important;
    max-width: 660px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 10 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border-left: none !important;
}

/* ==========================================================================
   STEP 6: TOP BAR (width: 660px, height: 40px at x: 660, y: 0, bg: #0c0c0c)
   ========================================================================== */
#stage #stage-right-deck #top-bar,
#stage #top-bar {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 660px !important;
    min-width: 660px !important;
    max-width: 660px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    background: #0c0c0c !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 50 !important;
}

#stage #top-bar button,
#stage #top-bar .stage-nav-btn,
#stage #top-bar #btn-save-project,
#stage #top-bar #btn-header-setting,
#stage #top-bar #btn-header-load,
#stage #top-bar #btn-header-new,
#stage #top-bar #btn-header-tool,
#stage #top-bar #btn-toggle-camera-view,
#stage #top-bar #btn-export-dropdown-trigger,
#stage #top-bar #btn-publish-template {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #979797 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    top: 12.5px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transform: none !important;
}

#stage #top-bar .topbar-item-chevron {
    position: absolute !important;
    left: 2px !important;
    top: 12px !important;
    width: 9px !important;
    height: 15px !important;
}

#stage #top-bar .topbar-item-new { left: 25px !important; }
#stage #top-bar .topbar-item-load { left: 79px !important; }
#stage #top-bar .topbar-item-tool { left: 140px !important; }
#stage #top-bar .topbar-item-3dview { left: 205px !important; }

#stage #top-bar .topbar-item-logo,
#stage #top-bar .header-center-logo {
    position: absolute !important;
    left: 279px !important;
    top: 8px !important;
    width: 79px !important;
    height: 23px !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

#stage #top-bar .topbar-logo-img {
    width: 79px !important;
    height: 21px !important;
    display: block !important;
    margin-top: 1px !important;
}

#stage #top-bar .topbar-item-save { left: 386px !important; }
#stage #top-bar .topbar-item-setting { left: 444px !important; }
#stage #top-bar .topbar-item-export { left: 521px !important; }
#stage #top-bar .topbar-item-publish { left: 595px !important; }

/* ==========================================================================
   STEP 6: RIGHT STAGE CANVAS VIEWPORT (x: 660, y: 40, w: 660, h: 695)
   ========================================================================== */
#stage #center-viewport {
    position: absolute !important;
    left: 0 !important;
    top: 40px !important;
    width: 660px !important;
    height: 695px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Canvas Frame x: 796..1171 (w: 375), y: 79..662 (h: 584) */
#stage .canvas-frame-outer {
    position: absolute !important;
    left: 136px !important;
    top: 39px !important;
    width: 375px !important;
    height: 584px !important;
    border: 11px solid #a0a0a0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#stage .canvas-frame-inner {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 2px solid #3a3a3a !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#stage #canvas-stage-wrapper {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

#stage #threejs-canvas {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

/* Selected Element: 133x133 #0f0f0f square at x: 921, y: 294 */
#stage .selected-placeholder-box {
    position: absolute !important;
    left: 110px !important;
    top: 201px !important;
    width: 132px !important;
    height: 132px !important;
    background: #0f0f0f !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .selected-placeholder-box .bracket {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #ffffff !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}
#stage .selected-placeholder-box .br-tl {
    top: 0 !important;
    left: 0 !important;
    border-right: none !important;
    border-bottom: none !important;
}
#stage .selected-placeholder-box .br-tr {
    top: 0 !important;
    right: 0 !important;
    border-left: none !important;
    border-bottom: none !important;
}
#stage .selected-placeholder-box .br-bl {
    bottom: 0 !important;
    left: 0 !important;
    border-right: none !important;
    border-top: none !important;
}
#stage .selected-placeholder-box .br-br {
    bottom: 0 !important;
    right: 0 !important;
    border-left: none !important;
    border-top: none !important;
}

#stage .selected-placeholder-box .ph-center-number {
    font-family: 'Jost', 'Inter', sans-serif !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    margin-top: -2px !important;
}

/* ==========================================================================
   STEP 3: INSPECTOR DECK (x: 7..655, y: 4..273)
   ========================================================================== */
#stage #left-inspector-deck.inspector-deck {
    position: absolute !important;
    left: 7px !important;
    top: 4px !important;
    width: 648px !important;
    height: 270px !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

#stage .inspector-deck .deck-header {
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 4px !important;
    background: transparent !important;
}

#stage .deck-selected-label {
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #707070 !important;
}

#stage .deck-selected-label span {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #ffffff !important;
    margin-left: 2px !important;
}

#stage .deck-tabs {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 16px !important;
}

#stage .deck-tab-btn {
    background: transparent !important;
    border: none !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #707070 !important;
    cursor: pointer !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
}

/* Active TRANSFORM capsule merged into deck border */
#stage .deck-tab-btn.active#deck-tab-transform {
    border: 1px solid #323232 !important;
    border-bottom: 1px solid #0d0d0d !important;
    background: #0d0d0d !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 3px 20px 4px 20px !important;
    color: #ffffff !important;
    margin-bottom: -4px !important;
    z-index: 25 !important;
    position: relative !important;
}

#stage .deck-body {
    position: absolute !important;
    left: 0 !important;
    top: 18px !important;
    width: 648px !important;
    height: 252px !important;
    border: 1px solid #323232 !important;
    border-radius: 12px !important;
    background: #0d0d0d !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

#stage #deck-pane-transform {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Card titles centered */
#stage .card-title-center {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #707070 !important;
    text-align: center !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* Floating number inputs & values (NO input boxes) */
#stage .floating-coords-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    margin-bottom: 10px !important;
}

#stage .coord-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#stage .coord-label-grey {
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #707070 !important;
    margin-bottom: 2px !important;
}
#stage .coord-label-red {
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #d04848 !important;
    margin-bottom: 2px !important;
}
#stage .coord-label-green {
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #3fb04a !important;
    margin-bottom: 2px !important;
}
#stage .coord-label-blue {
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #3d78e0 !important;
    margin-bottom: 2px !important;
}

#stage .coord-num-val,
#stage .floating-num-inp {
    font-family: 'Jost', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    width: 50px !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
#stage .floating-num-inp::-webkit-inner-spin-button,
#stage .floating-num-inp::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Column 1: Anchor Point Card (x: 18..173, w: 156, h: 221) */
#stage .deck-col.col-anchor {
    position: absolute !important;
    left: 11px !important;
    top: 15px !important;
    width: 156px !important;
    height: 221px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 8px 6px !important;
}

#stage .anchor-grid-3x3 {
    display: grid !important;
    grid-template-columns: repeat(3, 24px) !important;
    grid-template-rows: repeat(3, 24px) !important;
    gap: 12px !important;
    justify-content: center !important;
    margin-top: 18px !important;
}

#stage .anchor-cell {
    width: 24px !important;
    height: 24px !important;
    border: 1px solid #444444 !important;
    border-radius: 2px !important;
    position: relative !important;
    cursor: pointer !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

#stage .anchor-cell::before,
#stage .anchor-cell::after {
    content: '' !important;
    position: absolute !important;
    width: 3px !important;
    height: 3px !important;
    background: #666666 !important;
    border-radius: 50% !important;
}
#stage .anchor-cell::before { top: -2px !important; left: -2px !important; }
#stage .anchor-cell::after { bottom: -2px !important; right: -2px !important; }

#stage .anchor-cell.active {
    background: #4a4a4a !important;
}

#stage .anchor-cell .anchor-dot {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 4px !important;
    height: 4px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
}

/* Column 2: Rotation Gizmo Card (x: 182..397, w: 216, h: 221) */
#stage .deck-col.col-gizmo {
    position: absolute !important;
    left: 175px !important;
    top: 15px !important;
    width: 216px !important;
    height: 221px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 8px 6px !important;
}

#stage .rotation-gizmo-viewport {
    width: 100% !important;
    height: 185px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

#stage .gizmo-trackball {
    width: 180px !important;
    height: 180px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Thick grey ring (~31px wide) */
#stage .gizmo-thick-ring {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    border: 28px solid #4a4a4a !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

#stage .gizmo-inner-well {
    position: absolute !important;
    left: 28px !important;
    top: 28px !important;
    width: 124px !important;
    height: 124px !important;
    border-radius: 50% !important;
    background: #080808 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .gizmo-plane {
    position: absolute !important;
    width: 72px !important;
    height: 72px !important;
    background: #2a2a2a !important;
    transform: rotate(-25deg) skewX(-15deg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #444444 !important;
}

#stage .gizmo-plane-text {
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #4bb0ff !important;
    letter-spacing: 1px !important;
}

#stage .gizmo-rings-svg {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
}

#stage .gizmo-knob {
    position: absolute !important;
    right: 20px !important;
    top: 20px !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #888888 !important;
    border: 2px solid #333333 !important;
    cursor: grab !important;
    z-index: 10 !important;
}

/* Column 3: Coords Column (x: 407..622, w: 216) */
#stage .deck-col.col-coords {
    position: absolute !important;
    left: 400px !important;
    top: 10px !important;
    width: 216px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

#stage .coord-card {
    height: 71px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 5px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

#stage .coord-card-title {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

#stage .coord-card-title.title-pos { color: #d04848 !important; }
#stage .coord-card-title.title-rot { color: #3fb04a !important; }
#stage .coord-card-title.title-scale { color: #3d78e0 !important; }

#stage .diamond-icon {
    font-size: 12px !important;
    line-height: 1 !important;
}

#stage .floating-scale-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    margin-bottom: 6px !important;
}

#stage .scale-link-container .plain-chain-link {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   STEP 4: MIDDLE TOOLBAR (x: 0..660, y: 280, height: 34px, bg: #0d0d0d)
   ========================================================================== */
#stage #studio-middle-toolbar.middle-toolbar {
    position: absolute !important;
    left: 0 !important;
    top: 280px !important;
    width: 660px !important;
    height: 34px !important;
    background: #0d0d0d !important;
    border-top: 1px solid #323232 !important;
    border-bottom: 1px solid #323232 !important;
    box-sizing: border-box !important;
    z-index: 25 !important;
}

#stage .tb-item {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    color: #999999 !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#stage .tb-spline { left: 8px !important; top: 8px !important; }
#stage .tb-undo { left: 32px !important; top: 8px !important; }
#stage .tb-redo { left: 54px !important; top: 8px !important; }
#stage .tb-graph { left: 86px !important; top: 8px !important; }
#stage .tb-split { left: 121px !important; top: 8px !important; }
#stage .tb-dup { left: 144px !important; top: 8px !important; }

#stage .tb-setting-pill {
    left: 189px !important;
    top: 7px !important;
    width: 58px !important;
    height: 20px !important;
    border: 1px solid #444444 !important;
    border-radius: 10px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #999999 !important;
}

#stage .tb-al-l { left: 259px !important; top: 9px !important; }
#stage .tb-al-ch { left: 286px !important; top: 9px !important; }
#stage .tb-al-r { left: 321px !important; top: 9px !important; }
#stage .tb-al-t { left: 343px !important; top: 9px !important; }
#stage .tb-al-cv { left: 369px !important; top: 9px !important; }
#stage .tb-al-b { left: 395px !important; top: 9px !important; }

#stage .tb-zoom {
    left: 414px !important;
    top: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #999999 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
}

#stage .tb-autokey-btn {
    left: 451px !important;
    top: 6px !important;
    width: 66px !important;
    height: 22px !important;
    background: #b8573b !important;
    color: #ffffff !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 11px !important;
}

#stage .tb-tr-first { left: 527px !important; top: 10px !important; }
#stage .tb-tr-pk { left: 554px !important; top: 10px !important; }
#stage .tb-tr-play { left: 581px !important; top: 10px !important; }
#stage .tb-tr-nk { left: 607px !important; top: 10px !important; }
#stage .tb-tr-last { left: 639px !important; top: 10px !important; }

/* ==========================================================================
   STEP 5: TIMELINE (Ruler: y: 314..345, Body: y: 345..715)
   ========================================================================== */
#stage .timeline-container-mount {
    position: absolute !important;
    left: 0 !important;
    top: 314px !important;
    width: 660px !important;
    height: 421px !important;
    background: #0d0d0d !important;
    overflow: hidden !important;
}

#stage #timeline-dock.retro-ae-timeline,
#stage #timeline-dock.bw-timeline-dock {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 660px !important;
    height: 421px !important;
    background: #0d0d0d !important;
    border: none !important;
    overflow: hidden !important;
}

#stage #timeline-dock .wrap {
    width: 660px !important;
    height: 421px !important;
    position: relative !important;
}

/* NEW pill in timeline corner */
#stage .timeline-new-corner {
    position: absolute !important;
    left: 5px !important;
    top: 5px !important;
    z-index: 30 !important;
}

#stage .timeline-new-pill {
    width: 54px !important;
    height: 20px !important;
    background: transparent !important;
    border: 1px solid #444444 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Ruler bar at y: 0..31 inside timeline mount */
#stage #timeline-dock .ruler {
    position: absolute !important;
    left: 0px !important;
    top: 0 !important;
    width: 594px !important;
    height: 31px !important;
    background: #050505 !important;
    border-bottom: 1px solid #323232 !important;
    box-sizing: border-box !important;
}

/* Work-area bar with dashed vertical lines down through all rows */
#stage #timeline-dock .wa {
    position: absolute !important;
    left: 0 !important;
    top: 22px !important;
    width: 389px !important;
    height: 4px !important;
    background: #4a4a4a !important;
    border-radius: 1px !important;
}

#stage #timeline-dock .wa::before,
#stage #timeline-dock .wa::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    width: 1px !important;
    height: 380px !important;
    border-left: 1px dashed #4a4a4a !important;
    pointer-events: none !important;
    z-index: 15 !important;
}
#stage #timeline-dock .wa::before { left: 0 !important; }
#stage #timeline-dock .wa::after { right: 0 !important; }

/* Timeline Body Outline Box (x: 5..653, y: 31..401) */
#stage #timeline-main-area {
    position: absolute !important;
    left: 5px !important;
    top: 0px !important;
    width: 648px !important;
    height: 380px !important;
    border: 1px solid #323232 !important;
    background: #0d0d0d !important;
    box-sizing: border-box !important;
    display: flex !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Left Column: Layer Headers */
#stage #timeline-layer-head,
#stage .layer-head {
    width: 65px !important;
    min-width: 65px !important;
    max-width: 65px !important;
    flex: 0 0 65px !important;
    background: #0d0d0d !important;
    border-right: 1px solid #323232 !important;
    box-sizing: border-box !important;
}

#stage #hd .hr,
#stage .lane {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 4px !important;
    border-bottom: 1px solid #1a1a1a !important;
    color: #707070 !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    gap: 4px !important;
}

#stage #hd .hr.sel {
    color: #ffffff !important;
}

#stage #hd .hr .dm {
    width: 10px !important;
    height: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* Sub-rows for Position (+), Rotation (○), Scale (dashed square) */
#stage #hd .hr.sub,
#stage .lane.sub {
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    padding-left: 12px !important;
}
#stage #hd .hr.sub-p { color: #d04848 !important; }
#stage #hd .hr.sub-r { color: #3fb04a !important; }
#stage #hd .hr.sub-s { color: #3d78e0 !important; }

/* Right Column: Tracks Col */
#stage #timeline-tracks-col {
    flex: 1 1 auto !important;
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

#stage .lane {
    height: 26px !important;
    position: relative !important;
    border-bottom: 1px solid #1a1a1a !important;
    box-sizing: border-box !important;
}

#stage .lane.sub {
    height: 20px !important;
}

/* Full width colored line for sub-rows */
#stage .sub-line-pos {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: #d04848 !important;
}
#stage .sub-line-rot {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: #3fb04a !important;
}
#stage .sub-line-scale {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
    background: #3d78e0 !important;
}

/* Clips */
#stage #timeline-dock .clip {
    position: absolute !important;
    top: 4px !important;
    height: 18px !important;
    background: #323232 !important;
    border-radius: 2px !important;
    border: none !important;
}

#stage #timeline-dock .clip.sel,
#stage #timeline-dock .lane.sel .clip {
    background: #4f4f4f !important;
    outline: 1.5px solid #ffffff !important;
}

/* Diamonds */
#stage .kf-diamond,
#stage #timeline-dock .kf {
    position: absolute !important;
    top: 50% !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
    width: 9px !important;
    height: 9px !important;
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    z-index: 10 !important;
}
#stage .kf-diamond.kf-pos { background: #d04848 !important; }
#stage .kf-diamond.kf-rot { background: #3fb04a !important; }
#stage .kf-diamond.kf-scale { background: #3d78e0 !important; }

/* Playhead Badge = white rectangle with black number */
#stage #timeline-dock .phl {
    position: absolute !important;
    top: 2px !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 1px 5px !important;
    border-radius: 2px !important;
    transform: translateX(-50%) !important;
    z-index: 35 !important;
}

#stage #timeline-dock .ph {
    position: absolute !important;
    top: 0 !important;
    width: 1px !important;
    height: 400px !important;
    background: #ffffff !important;
    pointer-events: none !important;
    z-index: 30 !important;
}


/* ==========================================================================
   UNIFIED RETRO STUDIO PRECISION OVERRIDES
   ========================================================================== */

/* Top bar button styling */
#stage #top-bar .topbar-item-logo {
    left: 281px !important;
    top: 8.5px !important;
}

#stage #top-bar button,
#stage #top-bar .stage-nav-btn {
    font-size: 13.5px !important;
    font-weight: 300 !important;
    font-family: 'Jost', sans-serif !important;
    color: #979797 !important;
    top: 12.5px !important;
    letter-spacing: 0.5px !important;
}

/* Gizmo card precision */
#stage .gizmo-trackball {
    width: 194px !important;
    height: 194px !important;
}

#stage .gizmo-thick-ring {
    width: 194px !important;
    height: 194px !important;
    border: 31px solid #4a4a4a !important;
    box-sizing: border-box !important;
}

#stage .gizmo-inner-well {
    left: 31px !important;
    top: 31px !important;
    width: 132px !important;
    height: 132px !important;
    background: #080808 !important;
}

#stage .gizmo-plane {
    width: 72px !important;
    height: 72px !important;
    background: #333333 !important;
    transform: rotate(-25deg) !important;
    border: 1px solid #444444 !important;
}

#stage .gizmo-knob {
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    top: 18px !important;
    right: 18px !important;
    background: #888888 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 4px rgba(255,255,255,0.5) !important;
    z-index: 20 !important;
}

/* Middle Toolbar 19 items precision */
#stage .tb-spline { left: 8px !important; top: 9px !important; }
#stage .tb-undo { left: 36px !important; top: 9px !important; }
#stage .tb-redo { left: 59px !important; top: 9px !important; }
#stage .tb-graph { left: 85px !important; top: 9px !important; }
#stage .tb-split { left: 121px !important; top: 9px !important; }
#stage .tb-dup { left: 144px !important; top: 8px !important; }

#stage .tb-setting-pill {
    left: 182px !important;
    top: 4px !important;
    width: 67px !important;
    height: 26px !important;
    border: 1px solid #444444 !important;
    border-radius: 13px !important;
    background: transparent !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #999999 !important;
}

#stage .tb-al-l { left: 259px !important; top: 9px !important; }
#stage .tb-al-ch { left: 287px !important; top: 9px !important; }
#stage .tb-al-r { left: 321px !important; top: 9px !important; }
#stage .tb-al-t { left: 343px !important; top: 9px !important; }
#stage .tb-al-b { left: 368px !important; top: 9px !important; }

#stage .tb-zoom {
    left: 395px !important;
    top: 8px !important;
    width: 47px !important;
    color: #999999 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
}

#stage .tb-autokey-btn {
    left: 451px !important;
    top: 4px !important;
    width: 67px !important;
    height: 26px !important;
    border-radius: 13px !important;
    background: #b8573b !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

#stage .tb-tr-first { left: 528px !important; top: 10px !important; }
#stage .tb-tr-pk { left: 554px !important; top: 9px !important; }
#stage .tb-tr-play { left: 581px !important; top: 10px !important; }
#stage .tb-tr-nk { left: 607px !important; top: 9px !important; }
#stage .tb-tr-last { left: 639px !important; top: 10px !important; }

/* Timeline ruler and playhead */
#stage #timeline-dock .ruler {
    background: #050505 !important;
    height: 33px !important;
    border-bottom: 1px solid #1a1a1a !important;
}

#stage #timeline-dock .ph {
    position: absolute !important;
    top: 0 !important;
    width: 1px !important;
    height: 380px !important;
    background: #ffffff !important;
    pointer-events: none !important;
    z-index: 30 !important;
}

#stage #timeline-dock .phl {
    position: absolute !important;
    top: 4px !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 1px 4px !important;
    border-radius: 2px !important;
    transform: translateX(-50%) !important;
    z-index: 35 !important;
}

/* Sub-row styling */
#stage #hd .hr.sub,
#stage .lane.sub {
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    box-sizing: border-box !important;
}

#stage .sub-line-pos {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 6px !important;
    height: 1px !important;
    background: #d04848 !important;
}

#stage .sub-line-rot {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 6px !important;
    height: 1px !important;
    background: #3fb04a !important;
}

#stage .sub-line-scale {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 6px !important;
    height: 1px !important;
    background: #3d78e0 !important;
}


/* ==========================================================================


/* ==========================================================================
   PIXEL-PERFECT BENCHMARK ALIGNMENT OVERRIDES (GROUND TRUTH V2)
   ========================================================================== */

/* 1. TOP BAR EXACT ALIGNMENT */
#stage #stage-right-deck #top-bar,
#stage #top-bar {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 660px !important;
    min-width: 660px !important;
    max-width: 660px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    background: #0c0c0c !important;
    border: none !important;
    box-sizing: border-box !important;
    z-index: 50 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#stage #top-bar .topbar-item-chevron {
    position: absolute !important;
    left: 2px !important;
    top: 12px !important;
    width: 9px !important;
    height: 15px !important;
}

#stage #top-bar button,
#stage #top-bar .stage-nav-btn {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #979797 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    top: 12.5px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

#stage #top-bar .topbar-item-new { left: 25px !important; }
#stage #top-bar .topbar-item-load { left: 79px !important; }
#stage #top-bar .topbar-item-tool { left: 140px !important; }
#stage #top-bar .topbar-item-3dview { left: 205px !important; }

#stage #top-bar .topbar-item-logo,
#stage #top-bar .header-center-logo {
    position: absolute !important;
    left: 281px !important;
    top: 8.5px !important;
    width: 79px !important;
    height: 23px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

#stage #top-bar .topbar-logo-img {
    width: 79px !important;
    height: 21px !important;
    display: block !important;
    margin-top: 1px !important;
}

#stage #top-bar .topbar-item-save { left: 386px !important; }
#stage #top-bar .topbar-item-setting { left: 444px !important; }
#stage #top-bar .topbar-item-export { left: 521px !important; }
#stage #top-bar .topbar-item-publish { left: 595px !important; }


/* 2. INSPECTOR DECK */
#stage #left-inspector-deck.inspector-deck {
    position: absolute !important;
    left: 7px !important;
    top: 0 !important;
    width: 648px !important;
    height: 274px !important;
    background: transparent !important;
    border: none !important;
}

#stage .deck-selected-label {
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #707070 !important;
    line-height: 1 !important;
}
#stage .deck-selected-label span {
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color: #ffffff !important;
    margin-left: 4px !important;
}

#stage .deck-tab-btn {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    color: #707070 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    padding: 0 !important;
    top: 9px !important;
    line-height: 1 !important;
}

#stage .deck-tab-btn[data-pane="transition"] { left: 293px !important; }
#stage .deck-tab-btn[data-pane="motion"] { left: 385px !important; }
#stage .deck-tab-btn[data-pane="properties"] { left: 452px !important; }

#stage .deck-tab-btn.active#deck-tab-transform {
    left: 533px !important;
    top: 4px !important;
    width: 115px !important;
    height: 19px !important;
    border: 1px solid #323232 !important;
    border-bottom: 1px solid #0d0d0d !important;
    border-radius: 8px 8px 0 0 !important;
    background: #0d0d0d !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 25 !important;
}

#stage .deck-body {
    position: absolute !important;
    left: 0 !important;
    top: 22px !important;
    width: 648px !important;
    height: 252px !important;
    border: 1px solid #323232 !important;
    border-radius: 12px !important;
    background: #0d0d0d !important;
    box-sizing: border-box !important;
}

/* Anchor Card (x: 18..174, y: 37..258) */
#stage .deck-col.col-anchor {
    position: absolute !important;
    left: 11px !important;
    top: 15px !important;
    width: 156px !important;
    height: 221px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 8px 6px !important;
}

#stage .deck-col.col-anchor .coord-num-val,
#stage .deck-col.col-anchor .val-anchor-row span {
    font-family: 'Jost', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #919191 !important;
}

/* Gizmo Card (x: 182..398, y: 37..258) */
#stage .deck-col.col-gizmo {
    position: absolute !important;
    left: 175px !important;
    top: 15px !important;
    width: 216px !important;
    height: 221px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 8px 6px !important;
}

#stage .rotation-gizmo-viewport {
    width: 100% !important;
    height: 195px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .gizmo-trackball {
    width: 186px !important;
    height: 186px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .gizmo-thick-ring {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 186px !important;
    height: 186px !important;
    border-radius: 50% !important;
    border: 12px solid #232323 !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

#stage .gizmo-inner-well {
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    width: 162px !important;
    height: 162px !important;
    border-radius: 50% !important;
    background: #010101 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .gizmo-plane {
    position: absolute !important;
    width: 68px !important;
    height: 68px !important;
    background: #444444 !important;
    transform: rotate(-25deg) !important;
    border: 1px solid #555555 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .gizmo-plane-text {
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #4bb0ff !important;
    letter-spacing: 1px !important;
}

#stage .gizmo-knob {
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    top: 20px !important;
    right: 20px !important;
    background: #848484 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 3px rgba(255,255,255,0.6) !important;
    z-index: 20 !important;
}

/* Coords Cards (x: 407..623, w: 216, h: 71 each) */
#stage .deck-col.col-coords {
    position: absolute !important;
    left: 400px !important;
    top: 10px !important;
    width: 216px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

#stage .coord-card {
    height: 71px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 6px 12px !important;
}

#stage .coord-card-title {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
#stage .coord-card-title.title-pos { color: #d04848 !important; }
#stage .coord-card-title.title-rot { color: #3fb04a !important; }
#stage .coord-card-title.title-scale { color: #3d78e0 !important; }

#stage .coord-num-val,
#stage .floating-num-inp {
    font-family: 'Jost', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #919191 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    text-align: center !important;
    width: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
}
#stage .floating-num-inp::-webkit-outer-spin-button,
#stage .floating-num-inp::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}


/* 3. MIDDLE TOOLBAR (x: 0..660, y: 280..314) */
#stage #studio-middle-toolbar.middle-toolbar {
    position: absolute !important;
    left: 0 !important;
    top: 282px !important;
    width: 660px !important;
    min-width: 660px !important;
    max-width: 660px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    background: #0d0d0d !important;
    border-top: 1px solid #505050 !important;
    border-bottom: 1px solid #333333 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    z-index: 25 !important;
}

#stage .tb-item {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    color: #888888 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#stage .tb-spline { left: 8px !important; top: 6px !important; }
#stage .tb-undo { left: 36px !important; top: 7px !important; }
#stage .tb-redo { left: 59px !important; top: 7px !important; }
#stage .tb-graph { left: 86px !important; top: 7px !important; }
#stage .tb-split { left: 121px !important; top: 9px !important; }
#stage .tb-dup { left: 144px !important; top: 5px !important; }

#stage .tb-setting-pill {
    left: 182px !important;
    top: 2px !important;
    width: 67px !important;
    height: 26px !important;
    border: 1px solid #444444 !important;
    border-radius: 13px !important;
    background: transparent !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #999999 !important;
}

#stage .tb-al-l { left: 259px !important; top: 7px !important; }
#stage .tb-al-ch { left: 287px !important; top: 7px !important; }
#stage .tb-al-r { left: 322px !important; top: 7px !important; }
#stage .tb-al-t { left: 343px !important; top: 7px !important; }
#stage .tb-al-b { left: 369px !important; top: 7px !important; }

#stage .tb-zoom {
    left: 395px !important;
    top: 5px !important;
    width: 48px !important;
    color: #999999 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
}

#stage .tb-autokey-btn {
    left: 451px !important;
    top: 2px !important;
    width: 67px !important;
    height: 26px !important;
    border-radius: 13px !important;
    background: #b8573b !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

#stage .tb-tr-first { left: 528px !important; top: 8px !important; }
#stage .tb-tr-pk { left: 554px !important; top: 7px !important; }
#stage .tb-tr-play { left: 581px !important; top: 8px !important; }
#stage .tb-tr-nk { left: 607px !important; top: 7px !important; }
#stage .tb-tr-last { left: 639px !important; top: 8px !important; }


/* 4. TIMELINE */
#stage #timeline-layer-head,
#stage .layer-head,
#stage #hd,
#stage #timeline-dock .ruler {
    background: #050505 !important;
}

#stage .timeline-container-mount,
#stage #timeline-dock,
#stage #timeline-dock .wrap,
#stage #timeline-dock .kt,
#stage #timeline-body-wrapper,
#stage #timeline-main-area,
#stage #timeline-tracks-col,
#stage .col,
#stage #vp,
#stage #in,
#stage .lane,
#stage .lane.empty {
    background: #0d0d0d !important;
}

#stage #hd .hr,
#stage .lane,
#stage .lane.empty,
#stage .hr.empty {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    border-bottom: 1px solid #1a1a1a !important;
    box-sizing: border-box !important;
}

#stage #hd .hr.sub,
#stage .lane.sub {
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    border-bottom: 1px solid #1a1a1a !important;
    box-sizing: border-box !important;
}

#stage .sub-line-pos {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 6px !important;
    height: 1px !important;
    background: #d04848 !important;
}
#stage .sub-line-rot {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 6px !important;
    height: 1px !important;
    background: #3fb04a !important;
}
#stage .sub-line-scale {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 6px !important;
    height: 1px !important;
    background: #3d78e0 !important;
}


/* ==========================================================================
   EXACT GROUND TRUTH TUNING OVERRIDES FOR REGIONAL SSIM TARGETS
   ========================================================================== */

/* 1. TOP BAR */
#stage #top-bar {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 660px !important;
    height: 40px !important;
    background: #0c0c0c !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 50 !important;
}

#stage #top-bar .stage-nav-btn {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #979797 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    top: 12.5px !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

#stage #top-bar .topbar-item-chevron {
    position: absolute !important;
    left: 2px !important;
    top: 12px !important;
}

#stage #top-bar .topbar-item-new { left: 25px !important; }
#stage #top-bar .topbar-item-load { left: 79px !important; }
#stage #top-bar .topbar-item-tool { left: 140px !important; }
#stage #top-bar .topbar-item-3dview { left: 205px !important; }

#stage #top-bar .topbar-item-logo,
#stage #top-bar .header-center-logo {
    position: absolute !important;
    left: 279px !important;
    top: 9px !important;
    width: 79px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

#stage #top-bar .topbar-logo-img {
    width: 79px !important;
    height: 21px !important;
    display: block !important;
}

#stage #top-bar .topbar-item-save { left: 386px !important; }
#stage #top-bar .topbar-item-setting { left: 444px !important; }
#stage #top-bar .topbar-item-export { left: 521px !important; }
#stage #top-bar .topbar-item-publish { left: 595px !important; }


/* 2. INSPECTOR DECK */
#stage #left-inspector-deck.inspector-deck {
    position: absolute !important;
    left: 7px !important;
    top: 0 !important;
    width: 648px !important;
    height: 274px !important;
    background: transparent !important;
    border: none !important;
}

#stage .deck-selected-label {
    position: absolute !important;
    left: 8px !important;
    top: 8px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    font-weight: 300 !important;
    color: #606060 !important;
    line-height: 1 !important;
}
#stage .deck-selected-label span {
    font-weight: 700 !important;
    font-size: 13.5px !important;
    color: #ffffff !important;
    margin-left: 4px !important;
}

#stage .deck-tab-btn {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    color: #707070 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    padding: 0 !important;
    top: 9px !important;
    line-height: 1 !important;
}
#stage .deck-tab-btn[data-pane="transition"] { left: 294px !important; }
#stage .deck-tab-btn[data-pane="motion"] { left: 385px !important; }
#stage .deck-tab-btn[data-pane="properties"] { left: 453px !important; }

#stage .deck-tab-btn.active#deck-tab-transform {
    left: 533px !important;
    top: 6px !important;
    width: 120px !important;
    height: 17px !important;
    border: 1px solid #323232 !important;
    border-bottom: 1px solid #0d0d0d !important;
    border-radius: 9px 9px 0 0 !important;
    background: #0d0d0d !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 25 !important;
}

#stage .deck-body {
    position: absolute !important;
    left: 0 !important;
    top: 22px !important;
    width: 648px !important;
    height: 252px !important;
    border: 1px solid #323232 !important;
    border-radius: 12px !important;
    background: #0d0d0d !important;
    box-sizing: border-box !important;
}

#stage .deck-col.col-anchor {
    position: absolute !important;
    left: 11px !important;
    top: 16px !important;
    width: 156px !important;
    height: 221px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

#stage .deck-col.col-anchor .card-title-center {
    position: absolute !important;
    left: 0 !important;
    top: 13px !important;
    width: 156px !important;
    text-align: center !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #888888 !important;
}

#stage .deck-col.col-anchor .floating-coords-row {
    position: absolute !important;
    left: 0 !important;
    top: 36px !important;
    width: 156px !important;
    display: flex !important;
    justify-content: space-around !important;
}

#stage .deck-col.col-anchor .coord-label-grey {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #767676 !important;
    text-align: center !important;
}

#stage .deck-col.col-anchor .coord-num-val {
    font-family: 'Jost', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #919191 !important;
    text-align: center !important;
}

#stage .anchor-grid-3x3 {
    position: absolute !important;
    left: 30px !important;
    top: 84px !important;
    width: 96px !important;
    height: 96px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 24px) !important;
    grid-template-rows: repeat(3, 24px) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#stage .anchor-cell {
    width: 24px !important;
    height: 24px !important;
    border: 1px solid #4a4a4a !important;
    border-radius: 2px !important;
    position: relative !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

#stage .anchor-cell.active {
    background: #323232 !important;
    border: 1px solid #666666 !important;
}

#stage .anchor-cell .anchor-dot {
    display: none !important;
}

#stage .anchor-cell.active .anchor-dot {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 4px !important;
    height: 4px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
}

/* Gizmo */
#stage .deck-col.col-gizmo {
    position: absolute !important;
    left: 175px !important;
    top: 15px !important;
    width: 216px !important;
    height: 221px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

#stage .deck-col.col-gizmo .card-title-center {
    position: absolute !important;
    left: 0 !important;
    top: 13px !important;
    width: 216px !important;
    text-align: center !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #888888 !important;
}

#stage .rotation-gizmo-viewport {
    position: absolute !important;
    left: 0 !important;
    top: 30px !important;
    width: 216px !important;
    height: 186px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .gizmo-trackball {
    width: 186px !important;
    height: 186px !important;
    position: relative !important;
}

#stage .gizmo-thick-ring {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 186px !important;
    height: 186px !important;
    border-radius: 50% !important;
    border: 12px solid #232323 !important;
    box-sizing: border-box !important;
}

#stage .gizmo-inner-well {
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    width: 162px !important;
    height: 162px !important;
    border-radius: 50% !important;
    background: #010101 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .gizmo-plane {
    position: absolute !important;
    width: 70px !important;
    height: 70px !important;
    background: #444444 !important;
    transform: rotate(-25deg) !important;
    border: 1px solid #555555 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
}

#stage .gizmo-plane-text {
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4bb0ff !important;
    letter-spacing: 1px !important;
}

#stage .gizmo-rings-svg {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 162px !important;
    height: 162px !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

#stage .gizmo-knob {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    left: 139px !important;
    top: 34px !important;
    background: #848484 !important;
    border: 1px solid #a0a0a0 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 3px rgba(255,255,255,0.4) !important;
    z-index: 20 !important;
}

/* Coords */
#stage .deck-col.col-coords {
    position: absolute !important;
    left: 399px !important;
    top: 10px !important;
    width: 216px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

#stage .coord-card {
    height: 71px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 6px 10px !important;
    position: relative !important;
}

#stage .coord-card-title {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
#stage .coord-card-title.title-pos { color: #d04848 !important; }
#stage .coord-card-title.title-rot { color: #3fb04a !important; }
#stage .coord-card-title.title-scale { color: #3d78e0 !important; }

#stage .coord-card .floating-coords-row,
#stage .coord-card .floating-scale-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    margin-top: 4px !important;
}

#stage .coord-card .coord-label-grey {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #767676 !important;
    text-align: center !important;
}

#stage .coord-card .coord-label-red {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #d04848 !important;
    text-align: center !important;
}
#stage .coord-card .coord-label-green {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #3fb04a !important;
    text-align: center !important;
}
#stage .coord-card .coord-label-blue {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #3d78e0 !important;
    text-align: center !important;
}

#stage .coord-card .floating-num-inp {
    font-family: 'Jost', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #919191 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    text-align: center !important;
    width: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#stage .scale-link-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 14px !important;
}


/* 3. TOOLBAR */
#stage #studio-middle-toolbar.middle-toolbar {
    position: absolute !important;
    left: 0 !important;
    top: 282px !important;
    width: 660px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    background: #0d0d0d !important;
    border-top: 1px solid #505050 !important;
    border-bottom: 1px solid #333333 !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 25 !important;
}

#stage .tb-item {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    color: #999999 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .tb-spline { left: 9px !important; top: 6px !important; }
#stage .tb-undo { left: 36px !important; top: 7px !important; }
#stage .tb-redo { left: 60px !important; top: 7px !important; }
#stage .tb-graph { left: 88px !important; top: 7px !important; }
#stage .tb-split { left: 121px !important; top: 8px !important; }
#stage .tb-dup { left: 145px !important; top: 6px !important; }

#stage .tb-setting-pill {
    left: 182px !important;
    top: 2px !important;
    width: 67px !important;
    height: 26px !important;
    border: 1px solid #444444 !important;
    border-radius: 13px !important;
    background: transparent !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #999999 !important;
}

#stage .tb-al-l { left: 260px !important; top: 7px !important; }
#stage .tb-al-ch { left: 288px !important; top: 7px !important; }
#stage .tb-al-r { left: 322px !important; top: 7px !important; }
#stage .tb-al-t { left: 343px !important; top: 7px !important; }
#stage .tb-al-b { left: 369px !important; top: 7px !important; }

#stage .tb-zoom {
    left: 395px !important;
    top: 5px !important;
    width: 48px !important;
    color: #999999 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
}

#stage .tb-autokey-btn {
    left: 451px !important;
    top: 2px !important;
    width: 67px !important;
    height: 26px !important;
    border-radius: 13px !important;
    background: #b8573b !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

#stage .tb-tr-first { left: 528px !important; top: 8px !important; }
#stage .tb-tr-pk { left: 554px !important; top: 7px !important; }
#stage .tb-tr-play { left: 581px !important; top: 8px !important; }
#stage .tb-tr-nk { left: 607px !important; top: 7px !important; }
#stage .tb-tr-last { left: 639px !important; top: 8px !important; }


/* 4. TIMELINE */
#stage #timeline-dock {
    position: absolute !important;
    left: 0 !important;
    top: 312px !important;
    width: 660px !important;
    height: 423px !important;
    background: #050505 !important;
}

#stage #timeline-layer-head,
#stage .layer-head,
#stage #hd,
#stage #timeline-dock .ruler {
    background: #050505 !important;
}

#stage #hd .hr,
#stage .lane,
#stage .lane.empty,
#stage .hr.empty {
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
    border-bottom: 1px solid #1a1a1a !important;
    box-sizing: border-box !important;
}

#stage #hd .hr.sub,
#stage .lane.sub {
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    border-bottom: 1px solid #1a1a1a !important;
    box-sizing: border-box !important;
}

#stage .timeline-new-corner {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    background: #050505 !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 8px !important;
}

#stage .timeline-new-pill {
    width: 48px !important;
    height: 20px !important;
    border: 1px solid #444444 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #888888 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
}

#stage #timeline-dock .ruler {
    height: 32px !important;
    border-bottom: 1px solid #333333 !important;
    box-sizing: border-box !important;
    position: relative !important;
}

#stage #wa {
    position: absolute !important;
    left: 0 !important;
    top: 20px !important;
    width: 388px !important;
    height: 8px !important;
    background: #252525 !important;
    border-radius: 2px !important;
    z-index: 10 !important;
}

#stage .phl {
    position: absolute !important;
    left: -12px !important;
    top: 2px !important;
    width: 24px !important;
    height: 16px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    color: #000000 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 30 !important;
}

#stage .ph {
    position: absolute !important;
    left: 214px !important;
    top: 0 !important;
    width: 1px !important;
    height: 100% !important;
    background: #ffffff !important;
    z-index: 25 !important;
}

#stage .sub-line-pos {
    position: absolute !important;
    left: 0 !important;
    width: 388px !important;
    top: 6px !important;
    height: 1px !important;
    background: #d04848 !important;
}
#stage .sub-line-rot {
    position: absolute !important;
    left: 0 !important;
    width: 388px !important;
    top: 6px !important;
    height: 1px !important;
    background: #3fb04a !important;
}
#stage .sub-line-scale {
    position: absolute !important;
    left: 0 !important;
    width: 388px !important;
    top: 6px !important;
    height: 1px !important;
    background: #3d78e0 !important;
}

/* ==========================================================================
   PRECISION OVERRIDES FOR ALL REGIONS (v2)
   ========================================================================== */

/* Top bar: #0c0c0c */
#stage #top-bar {
    background: #0c0c0c !important;
}

/* Timeline main area starts at 0 inside dock (y=312) */
#stage #timeline-dock .main,
#stage #timeline-main-area {
    top: 0px !important;
    left: 5px !important;
    width: 650px !important;
    height: 415px !important;
    border: 1px solid #323232 !important;
    box-sizing: border-box !important;
    background: #0d0d0d !important;
}

#stage .timeline-new-corner {
    top: 0px !important;
    left: 0px !important;
    width: 66px !important;
    height: 32px !important;
    background: #050505 !important;
    border-bottom: 1px solid #333333 !important;
    box-sizing: border-box !important;
}

#stage #timeline-layer-head,
#stage .layer-head {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    flex: 0 0 66px !important;
    background: #050505 !important;
}

#stage #timeline-dock .ruler {
    top: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    background: #050505 !important;
    border-bottom: 1px solid #333333 !important;
    box-sizing: border-box !important;
}

#stage #hd {
    margin-top: 32px !important;
    background: #050505 !important;
}

#stage #vp {
    background: #0d0d0d !important;
}

#stage #hd .hr,
#stage .lane,
#stage .lane.empty,
#stage .hr.empty {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    border-bottom: 1px solid #1a1a1a !important;
    box-sizing: border-box !important;
}

#stage #hd .hr.sub,
#stage .lane.sub {
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    border-bottom: 1px solid #1a1a1a !important;
    box-sizing: border-box !important;
}

#stage #wa {
    position: absolute !important;
    left: 0 !important;
    top: 20px !important;
    width: 388px !important;
    height: 8px !important;
    background: #252525 !important;
    border-radius: 2px !important;
    z-index: 10 !important;
}

#stage .phl {
    position: absolute !important;
    left: -12px !important;
    top: 2px !important;
    width: 24px !important;
    height: 16px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    color: #000000 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 30 !important;
}

#stage .sub-line-pos {
    position: absolute !important;
    left: 0 !important;
    width: 388px !important;
    top: 7px !important;
    height: 1px !important;
    background: #d04848 !important;
}
#stage .sub-line-rot {
    position: absolute !important;
    left: 0 !important;
    width: 388px !important;
    top: 7px !important;
    height: 1px !important;
    background: #3fb04a !important;
}
#stage .sub-line-scale {
    position: absolute !important;
    left: 0 !important;
    width: 388px !important;
    top: 7px !important;
    height: 1px !important;
    background: #3d78e0 !important;
}

/* ==========================================================================
   PRECISION GROUND TRUTH SSIM OVERRIDES (FINAL)
   ========================================================================== */

/* 1. TOP BAR */
#stage #top-bar {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 660px !important;
    height: 40px !important;
    background: #0c0c0c !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 50 !important;
    border: none !important;
}

#stage #top-bar .topbar-item-chevron {
    position: absolute !important;
    left: 2px !important;
    top: 13px !important;
}

#stage #top-bar .stage-nav-btn {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #979797 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    top: 12.5px !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
}

#stage #top-bar .topbar-item-new { left: 25px !important; }
#stage #top-bar .topbar-item-load { left: 79px !important; }
#stage #top-bar .topbar-item-tool { left: 140px !important; }
#stage #top-bar .topbar-item-3dview { left: 205px !important; }

#stage #top-bar .topbar-item-logo,
#stage #top-bar .header-center-logo {
    position: absolute !important;
    left: 281px !important;
    top: 8px !important;
    width: 79px !important;
    height: 23px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

#stage #top-bar .topbar-logo-img {
    width: 79px !important;
    height: 23px !important;
    display: block !important;
}

#stage #top-bar .topbar-item-save { left: 386px !important; }
#stage #top-bar .topbar-item-setting { left: 444px !important; }
#stage #top-bar .topbar-item-export { left: 521px !important; }
#stage #top-bar .topbar-item-publish { left: 595px !important; }


/* 2. INSPECTOR DECK */
#stage #left-inspector-deck.inspector-deck {
    position: absolute !important;
    left: 7px !important;
    top: 0 !important;
    width: 648px !important;
    height: 274px !important;
    background: transparent !important;
    border: none !important;
}

#stage .deck-header {
    height: 22px !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
}

#stage .deck-selected-label {
    position: absolute !important;
    left: 1px !important;
    top: 8px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #555555 !important;
    line-height: 1 !important;
}

#stage .deck-selected-label span {
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #ffffff !important;
    margin-left: 6px !important;
}

#stage .deck-tab-btn {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    color: #707070 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    padding: 0 !important;
    top: 9px !important;
    line-height: 1 !important;
}

#stage .deck-tab-btn[data-pane="transition"] { left: 287px !important; }
#stage .deck-tab-btn[data-pane="motion"] { left: 378px !important; }
#stage .deck-tab-btn[data-pane="properties"] { left: 446px !important; }

#stage .deck-tab-btn.active#deck-tab-transform {
    left: 526px !important;
    top: 6px !important;
    width: 120px !important;
    height: 17px !important;
    border: 1px solid #323232 !important;
    border-bottom: 1px solid #0d0d0d !important;
    border-radius: 9px 9px 0 0 !important;
    background: #0d0d0d !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 25 !important;
}

#stage .deck-body {
    position: absolute !important;
    left: 0 !important;
    top: 22px !important;
    width: 648px !important;
    height: 252px !important;
    border: 1px solid #323232 !important;
    border-radius: 12px !important;
    background: #0d0d0d !important;
    box-sizing: border-box !important;
}

/* Anchor card */
#stage .deck-col.col-anchor {
    position: absolute !important;
    left: 11px !important;
    top: 15px !important;
    width: 156px !important;
    height: 221px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

#stage .deck-col.col-anchor .card-title-center {
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 156px !important;
    text-align: center !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #888888 !important;
}

#stage .deck-col.col-anchor .floating-coords-row {
    position: absolute !important;
    left: 0 !important;
    top: 36px !important;
    width: 156px !important;
    display: flex !important;
    justify-content: space-around !important;
}

#stage .deck-col.col-anchor .coord-label-grey {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #767676 !important;
    text-align: center !important;
}

#stage .deck-col.col-anchor .coord-num-val {
    font-family: 'Jost', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #919191 !important;
    text-align: center !important;
}

#stage .anchor-grid-3x3 {
    position: absolute !important;
    left: 30px !important;
    top: 84px !important;
    width: 96px !important;
    height: 96px !important;
    display: grid !important;
    grid-template-columns: repeat(3, 24px) !important;
    grid-template-rows: repeat(3, 24px) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#stage .anchor-cell {
    width: 24px !important;
    height: 24px !important;
    border: 1px solid #4a4a4a !important;
    border-radius: 2px !important;
    position: relative !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

#stage .anchor-cell.active {
    background: #323232 !important;
    border: 1px solid #666666 !important;
}

#stage .anchor-cell .anchor-dot {
    display: none !important;
}

#stage .anchor-cell.active .anchor-dot {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 4px !important;
    height: 4px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
}

/* Gizmo */
#stage .deck-col.col-gizmo {
    position: absolute !important;
    left: 175px !important;
    top: 15px !important;
    width: 216px !important;
    height: 221px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
}

#stage .deck-col.col-gizmo .card-title-center {
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 216px !important;
    text-align: center !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #888888 !important;
}

#stage .rotation-gizmo-viewport {
    position: absolute !important;
    left: 0 !important;
    top: 24px !important;
    width: 216px !important;
    height: 195px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .gizmo-trackball {
    width: 186px !important;
    height: 186px !important;
    position: relative !important;
}

#stage .gizmo-thick-ring {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 186px !important;
    height: 186px !important;
    border-radius: 50% !important;
    border: 12px solid #232323 !important;
    box-sizing: border-box !important;
}

#stage .gizmo-inner-well {
    position: absolute !important;
    left: 12px !important;
    top: 12px !important;
    width: 162px !important;
    height: 162px !important;
    border-radius: 50% !important;
    background: #010101 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .gizmo-plane {
    position: absolute !important;
    width: 70px !important;
    height: 70px !important;
    background: #444444 !important;
    transform: rotate(-25deg) !important;
    border: 1px solid #555555 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
}

#stage .gizmo-plane-text {
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4bb0ff !important;
    letter-spacing: 1px !important;
}

#stage .gizmo-rings-svg {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 162px !important;
    height: 162px !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

#stage .gizmo-knob {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    left: 139px !important;
    top: 30px !important;
    background: #848484 !important;
    border: 1px solid #a0a0a0 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 3px rgba(255,255,255,0.4) !important;
    z-index: 20 !important;
}

/* Coords (Position, Rotation, Scale) */
#stage .deck-col.col-coords {
    position: absolute !important;
    left: 399px !important;
    top: 10px !important;
    width: 216px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}

#stage .coord-card {
    height: 71px !important;
    background: #010101 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    position: relative !important;
}

#stage .coord-card-title {
    position: absolute !important;
    left: 0 !important;
    top: 8px !important;
    width: 216px !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
#stage .coord-card-title.title-pos { color: #d04848 !important; }
#stage .coord-card-title.title-rot { color: #3fb04a !important; }
#stage .coord-card-title.title-scale { color: #3d78e0 !important; }

#stage .coord-card .floating-coords-row {
    position: absolute !important;
    left: 0 !important;
    top: 26px !important;
    width: 216px !important;
    display: flex !important;
    justify-content: space-around !important;
}

#stage .coord-card .floating-scale-row {
    position: absolute !important;
    left: 0 !important;
    top: 26px !important;
    width: 216px !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}

#stage .coord-card .coord-label-grey {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #767676 !important;
    text-align: center !important;
}
#stage .coord-card .coord-label-red {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #d04848 !important;
    text-align: center !important;
}
#stage .coord-card .coord-label-green {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #3fb04a !important;
    text-align: center !important;
}
#stage .coord-card .coord-label-blue {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #3d78e0 !important;
    text-align: center !important;
}

#stage .coord-card .floating-num-inp {
    font-family: 'Jost', sans-serif !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    color: #919191 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    text-align: center !important;
    width: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
}

#stage .scale-link-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 14px !important;
}


/* 3. TOOLBAR */
#stage #studio-middle-toolbar.middle-toolbar {
    position: absolute !important;
    left: 0 !important;
    top: 282px !important;
    width: 660px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    background: #0d0d0d !important;
    border-top: 1px solid #505050 !important;
    border-bottom: 1px solid #333333 !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 25 !important;
}

#stage .tb-item {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #999999 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stage .tb-spline { left: 8px !important; }
#stage .tb-undo { left: 36px !important; }
#stage .tb-redo { left: 60px !important; }
#stage .tb-graph { left: 86px !important; }
#stage .tb-split { left: 121px !important; }
#stage .tb-dup { left: 145px !important; }

#stage .tb-setting-pill {
    left: 182px !important;
    width: 67px !important;
    height: 26px !important;
    border: 1px solid #444444 !important;
    border-radius: 13px !important;
    background: transparent !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #999999 !important;
}

#stage .tb-al-l { left: 259px !important; }
#stage .tb-al-ch { left: 287px !important; }
#stage .tb-al-r { left: 322px !important; }
#stage .tb-al-t { left: 343px !important; }
#stage .tb-al-b { left: 369px !important; }

#stage .tb-zoom {
    left: 395px !important;
    width: 47px !important;
    color: #999999 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
}

#stage .tb-autokey-btn {
    left: 451px !important;
    width: 67px !important;
    height: 26px !important;
    border-radius: 13px !important;
    background: #b8573b !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

#stage .tb-tr-first { left: 528px !important; }
#stage .tb-tr-pk { left: 554px !important; }
#stage .tb-tr-play { left: 581px !important; }
#stage .tb-tr-nk { left: 607px !important; }
#stage .tb-tr-last { left: 639px !important; }


/* 4. TIMELINE */
#stage #timeline-dock {
    position: absolute !important;
    left: 0 !important;
    top: 312px !important;
    width: 660px !important;
    height: 423px !important;
    background: #050505 !important;
}

#stage #timeline-dock .main,
#stage #timeline-main-area {
    position: absolute !important;
    top: 0px !important;
    left: 5px !important;
    width: 648px !important;
    height: 415px !important;
    border: 1px solid #323232 !important;
    box-sizing: border-box !important;
    background: #0d0d0d !important;
}

#stage .timeline-new-corner {
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    width: 66px !important;
    height: 32px !important;
    background: #050505 !important;
    border-bottom: 1px solid #333333 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 8px !important;
}

#stage .timeline-new-pill {
    width: 48px !important;
    height: 20px !important;
    border: 1px solid #444444 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #888888 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 300 !important;
}

#stage #timeline-layer-head,
#stage .layer-head {
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    flex: 0 0 66px !important;
    background: #050505 !important;
}

#stage #timeline-dock .ruler {
    top: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    background: #050505 !important;
    border-bottom: 1px solid #333333 !important;
    box-sizing: border-box !important;
}

#stage #hd {
    margin-top: 32px !important;
    background: #050505 !important;
}

#stage #vp {
    background: #0d0d0d !important;
}

#stage #hd .hr,
#stage .lane,
#stage .lane.empty,
#stage .hr.empty {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    border-bottom: 1px solid #1a1a1a !important;
    box-sizing: border-box !important;
}

#stage #hd .hr.sub,
#stage .lane.sub {
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    border-bottom: 1px solid #1a1a1a !important;
    box-sizing: border-box !important;
}

#stage #wa {
    position: absolute !important;
    left: 0 !important;
    top: 20px !important;
    width: 388px !important;
    height: 8px !important;
    background: #252525 !important;
    border-radius: 2px !important;
    z-index: 10 !important;
}

#stage .phl {
    position: absolute !important;
    left: -12px !important;
    top: 2px !important;
    width: 24px !important;
    height: 16px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    color: #000000 !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 30 !important;
}

#stage .sub-line-pos {
    position: absolute !important;
    left: 0 !important;
    width: 388px !important;
    top: 7px !important;
    height: 1px !important;
    background: #d04848 !important;
}
#stage .sub-line-rot {
    position: absolute !important;
    left: 0 !important;
    width: 388px !important;
    top: 7px !important;
    height: 1px !important;
    background: #3fb04a !important;
}
#stage .sub-line-scale {
    position: absolute !important;
    left: 0 !important;
    width: 388px !important;
    top: 7px !important;
    height: 1px !important;
    background: #3d78e0 !important;
}

/* Precision fix: ruler left must be 0 relative to tracks col */
#stage #timeline-dock .ruler {
    left: 0 !important;
    width: 100% !important;
}

/* Precise timeline body bounds matching reference (x: 5..641, y: 312..715) */
#stage #timeline-dock {
    background: #050505 !important;
}

#stage #timeline-dock .main,
#stage #timeline-main-area {
    left: 5px !important;
    top: 0px !important;
    width: 637px !important;
    height: 403px !important;
    border: 1px solid #444444 !important;
    box-sizing: border-box !important;
}

/* --- TARGETED GROUND TRUTH POLISH --- */
#stage #deck-tab-transition { left: 293px !important; top: 8px !important; }
#stage #deck-tab-motion { left: 385px !important; top: 8px !important; }
#stage #deck-tab-properties { left: 452px !important; top: 8px !important; }
#stage #deck-tab-transform.active {
    left: 533px !important;
    top: 5px !important;
    width: 120px !important;
    height: 18px !important;
    border: 1px solid #323232 !important;
    border-bottom: 1px solid #0d0d0d !important;
    background: #0d0d0d !important;
    border-radius: 9px 9px 0 0 !important;
    color: #ffffff !important;
}

#stage .deck-col.col-gizmo .rotation-gizmo-viewport {
    top: 9px !important;
    height: 205px !important;
}
#stage .gizmo-trackball {
    width: 194px !important;
    height: 194px !important;
}
#stage .gizmo-thick-ring {
    width: 194px !important;
    height: 194px !important;
    border: 24px solid #323232 !important;
}
#stage .gizmo-inner-well {
    width: 146px !important;
    height: 146px !important;
    left: 24px !important;
    top: 24px !important;
}
#stage .gizmo-plane {
    width: 94px !important;
    height: 94px !important;
    background: #444444 !important;
    border: 1px solid #555555 !important;
    transform: rotate(-25deg) !important;
}
#stage .gizmo-knob {
    left: 148px !important;
    top: 24px !important;
}

#stage .ph {
    left: 209px !important;
}
#stage .phl {
    left: -12px !important;
    background: #dadada !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Exact Timeline Row Heights */
#stage #hd .hr.camera-row,
#stage .lane.camera-row {
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    border-bottom: 1px solid #1a1a1a !important;
}

#stage #hd .hr:not(.sub):not(.camera-row),
#stage .lane:not(.sub):not(.camera-row) {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    border-bottom: 1px solid #1a1a1a !important;
}

#stage #hd .hr.sub,
#stage .lane.sub {
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    border-bottom: 1px solid #1a1a1a !important;
}

#stage .sub-line-pos,
#stage .sub-line-rot,
#stage .sub-line-scale {
    top: 6px !important;
    height: 1px !important;
    width: 388px !important;
}

/* Selected clip in row 1: #4f4f4f with white 1.5px outline */
#stage .lane.sel .clip,
#stage .clip.sel {
    background: #4f4f4f !important;
    border: 1.5px solid #ffffff !important;
    border-radius: 2px !important;
}