* {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        body {
            background: #1a1a1a;
            color: #cccccc;
            font-family: 'JetBrains Mono', monospace;
            overflow: hidden;
            height: 100vh
        }

        ::-webkit-scrollbar {
            width: 5px
        }

        ::-webkit-scrollbar-track {
            background: #1a1a1a
        }

        ::-webkit-scrollbar-thumb {
            background: #333;
            border-radius: 3px
        }

        #boot-screen {
            position: fixed;
            inset: 0;
            background: #1a1a1a;
            z-index: 200;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity .6s ease
        }

        .panel-header-logo {
    gap: 8px;
}

.panel-logo-img {
    height: 14px;
    width: auto;
} 
.boot-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    opacity: 0;
    animation: logoFadeIn 0.8s ease forwards;
}

.boot-logo-img {
    height: 60px;
    width: auto;
    filter: drop-shadow(0 0 20px rgba(255, 107, 0, 0.3));
}

@keyframes logoFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.tb-logo {
    height: 28px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0 4px;
    transition: opacity 0.15s;
}

.tb-logo:hover {
    opacity: 0.8;
}

.tb-logo-img {
    height: 22px;
    width: auto;
}

        .boot-box {
            width: 400px
        }

        .boot-line {
            opacity: 0;
            transform: translateY(4px);
            animation: bIn .15s forwards;
            font-size: 11px;
            color: #888
        }

        @keyframes bIn {
            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        #workspace {
            display: none;
            height: 100vh;
            flex-direction: column
        }

        .toolbar {
            height: 34px;
            background: #2d2d2d;
            display: flex;
            align-items: center;
            padding: 0 12px;
            gap: 6px;
            border-bottom: 1px solid #111;
            flex-shrink: 0;
            user-select: none
        }

        .tb-btn {
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            cursor: pointer;
            color: #aaa;
            transition: all .15s;
            padding: 0 6px;
            gap: 4px;
            font-size: 10px;
            border: 1px solid transparent
        }

        .tb-btn:hover {
            background: #444
        }

        .tb-btn.play {
            color: #4ec94e;
            border: 1px solid #3a5a3a
        }

        .tb-btn.play:hover {
            background: #3a5a3a
        }

        .tb-btn.play.active {
            color: #cc4444;
            border-color: #5a3a3a;
            background: #5a3a3a
        }

        .tb-btn.play.active:hover {
            background: #6a4444
        }

        .tb-btn.build {
            color: #FF6B00;
            border: 1px solid #5a3a1a
        }

        .tb-btn.build:hover {
            background: #5a3a1a
        }

        .tb-btn.building {
            pointer-events: none;
            opacity: .6
        }

        .tb-sep {
            width: 1px;
            height: 20px;
            background: #444;
            margin: 0 2px
        }

        .tb-tool {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            cursor: pointer;
            color: #888;
            border: 1px solid transparent;
            transition: all .1s
        }

        .tb-tool:hover {
            color: #ccc;
            border-color: #555
        }

        .tb-tool.active {
            color: #fff;
            background: #444;
            border-color: #666
        }

        .main-area {
            flex: 1;
            display: grid;
            grid-template-columns: 220px 1fr 280px;
            overflow: hidden
        }

        .panel-left {
            background: #222;
            border-right: 1px solid #111;
            display: flex;
            flex-direction: column;
            overflow: hidden
        }

        .panel-header {
            height: 26px;
            background: #2d2d2d;
            display: flex;
            align-items: center;
            padding: 0 10px;
            font-size: 10px;
            font-weight: 700;
            color: #aaa;
            letter-spacing: .08em;
            text-transform: uppercase;
            border-bottom: 1px solid #111;
            flex-shrink: 0
        }

        .hier-search {
            padding: 6px 8px;
            border-bottom: 1px solid #111
        }

        .hier-search input {
            width: 100%;
            background: #111;
            border: 1px solid #333;
            padding: 4px 8px;
            color: #ccc;
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            outline: none
        }

        .hier-search input:focus {
            border-color: #44aaff
        }

        .hierarchy {
            flex: 1;
            overflow-y: auto;
            padding: 4px 0
        }

        .tree-parent {
            display: flex;
            align-items: center;
            padding: 3px 8px;
            cursor: pointer;
            font-size: 11.5px;
            color: #ccc;
            gap: 4px;
            user-select: none
        }

        .tree-parent:hover {
            background: #2a2a2a
        }

        .tree-arrow {
            width: 12px;
            font-size: 9px;
            color: #888;
            text-align: center;
            flex-shrink: 0;
            transition: transform .15s
        }

        .tree-children {
            padding-left: 20px;
            border-left: 1px solid #2a2a2a;
            margin-left: 15px;
            overflow: hidden;
            transition: max-height .2s ease
        }

        .tree-child {
            display: flex;
            align-items: center;
            padding: 3px 8px;
            cursor: pointer;
            font-size: 11px;
            color: #999;
            gap: 5px;
            user-select: none;
            border-left: 2px solid transparent;
            margin-left: -1px
        }

        .tree-child:hover {
            background: #2a2a2a;
            color: #ccc
        }

        .tree-child.active {
            color: #fff;
            background: #264f78;
            border-left-color: #44aaff
        }

        .panel-center {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: #1a1a1a
        }

        .scene-tabs {
            height: 26px;
            background: #2d2d2d;
            display: flex;
            align-items: center;
            padding: 0 8px;
            gap: 0;
            border-bottom: 1px solid #111;
            flex-shrink: 0
        }

        .scene-tab {
            padding: 0 12px;
            height: 26px;
            display: flex;
            align-items: center;
            font-size: 10px;
            color: #888;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all .15s
        }

        .scene-tab.active {
            color: #ccc;
            border-bottom-color: #44aaff
        }

        .scene-tab.play-active {
            color: #4ec94e;
            border-bottom-color: #4ec94e
        }

        .scene-viewport {
            flex: 1;
            position: relative;
            overflow: hidden;
            cursor: grab
        }

        .scene-viewport:active {
            cursor: grabbing
        }

        .play-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(78, 201, 78, .15);
            border: 1px solid rgba(78, 201, 78, .3);
            color: #4ec94e;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .1em;
            padding: 3px 10px;
            border-radius: 2px;
            display: none;
            z-index: 5;
            animation: pulseBadge 1.5s ease infinite
        }

        @keyframes pulseBadge {

            0%,
            100% {
                opacity: 1
            }

            50% {
                opacity: .6
            }
        }

        .grid-floor {
            position: absolute;
            bottom: 0;
            left: -50%;
            right: -50%;
            height: 55%;
            background: linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
            background-size: 50px 50px;
            transform: perspective(400px) rotateX(65deg);
            transform-origin: bottom center;
            pointer-events: none;
            transition: opacity .3s
        }

        .grid-floor::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, #1a1a1a, transparent 70%);
            pointer-events: none
        }

        .playing .grid-floor {
            background-size: 30px 30px;
            opacity: .7
        }

        .scene-gizmo {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 60px;
            height: 60px;
            pointer-events: none;
            z-index: 2
        }

        .gz-line {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 2px;
            height: 35px;
            transform-origin: bottom center;
            border-radius: 1px
        }

        .gz-x {
            background: #cc4444;
            transform: rotate(-35deg)
        }

        .gz-y {
            background: #4ec94e;
            transform: rotate(0deg)
        }

        .gz-z {
            background: #44aaff;
            transform: rotate(35deg)
        }

        .gz-label {
            position: absolute;
            font-size: 8px;
            font-weight: 700
        }

        .gz-lx {
            color: #cc4444;
            top: 2px;
            right: 10px
        }

        .gz-ly {
            color: #4ec94e;
            top: 2px;
            left: 50%;
            transform: translateX(-50%)
        }

        .gz-lz {
            color: #44aaff;
            top: 2px;
            left: 10px
        }

        .scene-content {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            transition: transform .08s ease-out;
            will-change: transform
        }

        .scene-content.panning {
            transition: none
        }

        .scene-page {
            display: none;
            width: 100%;
            height: 100%;
            position: relative
        }

        .scene-page.active {
            display: flex;
            align-items: center;
            justify-content: center
        }

        #scene-projects.active {
            overflow: visible
        }

        .cubes-area {
            display: grid;
            grid-template-columns: repeat(4, 200px);
            gap: 20px;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
            transition: transform .3s ease;
            transform-origin: center center
        }

        .cube-wrap {
            perspective: 900px;
            cursor: pointer;
            transition: all .4s cubic-bezier(.25, .46, .45, .94);
            position: relative
        }

        .cube-wrap:hover {
            transform: translateY(-4px)
        }

        .cube-shadow {
            width: 140px;
            height: 18px;
            background: radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 70%);
            margin: 12px auto 0;
            filter: blur(5px)
        }

        .cube {
            width: 200px;
            height: 140px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform .15s ease-out
        }

        .cube-face {
            position: absolute;
            top: 50%;
            left: 50%;
            backface-visibility: hidden
        }

        .c-front {
            width: 200px;
            height: 140px;
            margin-left: -100px;
            margin-top: -70px;
            transform: translateZ(24px);
            overflow: hidden;
            border: 1px solid #3a3a3a
        }

        .c-front img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .c-front-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, transparent 50%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 12px
        }

        .c-top {
            width: 200px;
            height: 48px;
            margin-left: -100px;
            margin-top: -24px;
            transform: rotateX(90deg) translateZ(70px);
            background: #333;
            border: 1px solid #3a3a3a
        }

        .c-right {
            width: 48px;
            height: 140px;
            margin-left: -24px;
            margin-top: -70px;
            transform: rotateY(90deg) translateZ(100px);
            background: #222;
            border: 1px solid #3a3a3a
        }

        .cube.selected .c-front {
            border-color: #44aaff;
            box-shadow: 0 0 25px rgba(68, 170, 255, .2)
        }

        .cube.selected .c-top {
            border-color: rgba(68, 170, 255, .3)
        }

        .cube.selected .c-right {
            border-color: rgba(68, 170, 255, .3)
        }

        .c-accent {
            width: 30px;
            height: 3px;
            border-radius: 2px;
            margin-bottom: 6px
        }

        .c-title {
            font-size: 11px;
            font-weight: 600;
            color: #eee;
            letter-spacing: .02em
        }

        .c-sub {
            font-size: 9px;
            color: #999;
            margin-top: 2px
        }

        .c-photos-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            background: rgba(0, 0, 0, .7);
            border: 1px solid #444;
            padding: 2px 6px;
            font-size: 8px;
            color: #aaa;
            border-radius: 2px;
            display: flex;
            align-items: center;
            gap: 3px
        }

        @keyframes floatA {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-8px)
            }
        }

        @keyframes floatB {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-6px)
            }
        }

        @keyframes floatC {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-10px)
            }
        }

        @keyframes spinCube {
            0% {
                transform: rotateX(-12deg) rotateY(0deg)
            }

            100% {
                transform: rotateX(-12deg) rotateY(360deg)
            }
        }

        .playing .cube-wrap {
            animation: none !important
        }

        .playing .cube {
            animation: spinCube 3s linear infinite
        }

        .gallery-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .85);
            z-index: 150;
            display: none;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(8px)
        }

        .gallery-overlay.open {
            display: flex
        }

        .gallery-box {
            background: #222;
            border: 1px solid #333;
            width: 90%;
            max-width: 900px;
            height: 85vh;
            max-height: 85vh;
            min-height: 420px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 20px 80px rgba(0, 0, 0, .6)
        }

        .gallery-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 16px;
            border-bottom: 1px solid #333;
            background: #2a2a2a;
            flex-shrink: 0
        }

        .gallery-top-left {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .gallery-color {
            width: 10px;
            height: 10px;
            border-radius: 2px
        }

        .gallery-title {
            font-size: 12px;
            font-weight: 600;
            color: #eee
        }

        .gallery-sub {
            font-size: 10px;
            color: #888
        }

        .gallery-close {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #888;
            border-radius: 3px;
            transition: all .12s
        }

        .gallery-close:hover {
            background: #444;
            color: #fff
        }

        .gallery-link {
            display: none;
            align-items: center;
            gap: 5px;
            padding: 5px 12px;
            background: #FF6B00;
            color: #111;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .04em;
            text-decoration: none;
            border-radius: 2px;
            transition: background .12s;
            margin-right: 8px
        }

        .gallery-link.visible {
            display: flex
        }

        .gallery-link:hover {
            background: #e55f00;
            color: #111
        }

        .project-link {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: #FF6B00;
            color: #111;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .04em;
            text-decoration: none;
            border-radius: 2px;
            transition: background .12s
        }

        .project-link:hover {
            background: #e55f00;
            color: #111
        }

        .gallery-main {
            flex: 1 1 auto;
            position: relative;
            overflow: hidden;
            background: #111;
            min-height: 280px
        }

        .gallery-main img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            position: absolute;
            inset: 0;
            z-index: 1;
            display: block;
            transition: opacity .25s ease
        }

        .gallery-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background: rgba(0, 0, 0, .7);
            border: 1px solid #444;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #ccc;
            transition: all .12s;
            z-index: 5
        }

        .gallery-nav:hover {
            background: #444;
            color: #fff;
            border-color: #666
        }

        .gallery-prev {
            left: 10px
        }

        .gallery-next {
            right: 10px
        }

        .gallery-bottom {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px;
            border-top: 1px solid #333;
            background: #1e1e1e;
            flex-shrink: 0
        }

        .gallery-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #444;
            cursor: pointer;
            transition: all .15s
        }

        .gallery-dot.active {
            background: #FF6B00;
            transform: scale(1.3)
        }

        .gallery-counter {
            font-size: 10px;
            color: #666;
            margin-left: 12px
        }

        .panel-right {
            background: #222;
            border-left: 1px solid #111;
            display: flex;
            flex-direction: column;
            overflow: hidden
        }

        .inspector {
            flex: 1;
            overflow-y: auto;
            padding: 8px
        }

        .insp-name {
            width: 100%;
            background: #111;
            border: 1px solid #333;
            padding: 5px 8px;
            color: #fff;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px;
            font-weight: 600;
            outline: none;
            margin-bottom: 8px
        }

        .insp-name:focus {
            border-color: #44aaff
        }

        .comp {
            margin-bottom: 2px
        }

        .comp-header {
            background: #3c3c3c;
            padding: 5px 8px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            cursor: pointer;
            user-select: none;
            border: 1px solid #333;
            border-bottom: none
        }

        .comp-header:hover {
            background: #444
        }

        .comp-header input[type=checkbox] {
            accent-color: #44aaff;
            width: 12px;
            height: 12px;
            cursor: pointer
        }

        .comp-header .comp-icon {
            margin-left: auto;
            color: #666;
            transition: transform .15s
        }

        .comp-header.collapsed .comp-icon {
            transform: rotate(-90deg)
        }

        .comp-body {
            background: #2a2a2a;
            padding: 8px;
            border: 1px solid #333;
            border-top: none;
            overflow: hidden;
            transition: max-height .2s ease
        }

        .comp-body.hidden-body {
            max-height: 0 !important;
            padding: 0 8px;
            border: none
        }

        .field {
            margin-bottom: 6px
        }

        .field-label {
            font-size: 10px;
            color: #888;
            margin-bottom: 3px
        }

        .field-val {
            background: #111;
            border: 1px solid #333;
            padding: 4px 6px;
            font-size: 11px;
            color: #ccc;
            border-radius: 1px
        }

        .xyz-row {
            display: flex;
            gap: 3px
        }

        .xyz-f {
            flex: 1;
            display: flex;
            align-items: center;
            background: #111;
            border: 1px solid #333;
            padding: 2px 4px
        }

        .xyz-f span {
            font-size: 9px;
            font-weight: 700;
            margin-right: 4px;
            min-width: 10px
        }

        .xyz-f.x span {
            color: #cc4444
        }

        .xyz-f.y span {
            color: #4ec94e
        }

        .xyz-f.z span {
            color: #44aaff
        }

        .xyz-f input {
            background: transparent;
            border: none;
            color: #ccc;
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            width: 100%;
            outline: none
        }

        .tag-s {
            display: inline-block;
            padding: 1px 6px;
            background: #2a2a2a;
            border: 1px solid #444;
            font-size: 9px;
            color: #aaa;
            margin: 1px
        }

        .thumb-strip {
            display: flex;
            gap: 4px;
            margin-top: 6px;
            flex-wrap: wrap
        }

        .thumb-strip img {
            width: 52px;
            height: 36px;
            object-fit: cover;
            border: 1px solid #333;
            cursor: pointer;
            transition: border-color .12s
        }

        .thumb-strip img:hover {
            border-color: #44aaff
        }

        .thumb-strip img.active {
            border-color: #44aaff
        }

        .panel-bottom {
            height: 170px;
            background: #0d0d0d;
            border-top: 1px solid #111;
            display: flex;
            flex-direction: column;
            flex-shrink: 0
        }

        .console-bar {
            height: 28px;
            background: #1e1e1e;
            display: flex;
            align-items: center;
            padding: 0 8px;
            gap: 0;
            border-bottom: 1px solid #111;
            flex-shrink: 0
        }

        .con-tab {
            padding: 0 10px;
            height: 28px;
            display: flex;
            align-items: center;
            font-size: 10px;
            color: #666;
            cursor: pointer;
            border-bottom: 2px solid transparent
        }

        .con-tab.active {
            color: #aaa;
            border-bottom-color: #44aaff
        }

        .con-filter {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 2px
        }

        .con-fbtn {
            padding: 2px 6px;
            font-size: 9px;
            cursor: pointer;
            border-radius: 2px;
            color: #555;
            transition: all .1s;
            border: 1px solid transparent
        }

        .con-fbtn:hover {
            color: #aaa
        }

        .con-fbtn.active {
            color: #ccc;
            border-color: #444
        }

        .con-fbtn.f-info.active {
            color: #44aaff;
            border-color: rgba(68, 170, 255, .3);
            background: rgba(68, 170, 255, .08)
        }

        .con-fbtn.f-ok.active {
            color: #4ec94e;
            border-color: rgba(78, 201, 78, .3);
            background: rgba(78, 201, 78, .08)
        }

        .con-fbtn.f-warn.active {
            color: #d4d44e;
            border-color: rgba(212, 212, 78, .3);
            background: rgba(212, 212, 78, .08)
        }

        .console-body {
            flex: 1;
            overflow-y: auto;
            padding: 6px 10px;
            font-size: 11px
        }

        .cl {
            display: flex;
            gap: 8px;
            margin-bottom: 2px;
            line-height: 1.4
        }

        .cl-t {
            color: #444;
            flex-shrink: 0
        }

        .cl-i {
            color: #44aaff
        }

        .cl-s {
            color: #4ec94e
        }

        .cl-w {
            color: #d4d44e
        }

        .cl.hidden-log {
            display: none
        }

        .console-input {
            height: 26px;
            background: #111;
            border-top: 1px solid #222;
            display: flex;
            align-items: center;
            padding: 0 10px;
            flex-shrink: 0
        }

        .console-input span {
            color: #44aaff;
            font-size: 11px;
            margin-right: 6px
        }

        .console-input input {
            flex: 1;
            background: transparent;
            border: none;
            color: #ccc;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            outline: none
        }

        .status-bar {
            height: 22px;
            background: #2d2d2d;
            border-top: 1px solid #111;
            display: flex;
            align-items: center;
            padding: 0 10px;
            font-size: 10px;
            color: #666;
            gap: 16px;
            flex-shrink: 0;
            user-select: none
        }

        .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4ec94e
        }

        .svc-card {
            background: #2a2a2a;
            border: 1px solid #333;
            padding: 10px 14px;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: all .15s
        }

        .svc-card:hover {
            border-color: #555;
            background: #2e2e2e
        }

        .svc-card.active {
            border-color: #44aaff;
            background: #1e2e3e
        }

        .pipe-row {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center
        }

        .pipe-box {
            width: 120px;
            padding: 12px 8px;
            border: 1px solid #333;
            background: #222;
            text-align: center;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .06em;
            color: #555;
            transition: all .5s ease
        }

        .pipe-box.lit {
            border-color: #FF6B00;
            color: #FF6B00;
            background: #1e1a14;
            box-shadow: 0 0 25px rgba(255, 107, 0, .08)
        }

        .pipe-arrow {
            color: #333;
            font-size: 20px;
            transition: color .5s
        }

        .pipe-arrow.lit {
            color: #FF6B00
        }

        .wiz-wrap {
            width: 100%;
            max-width: 560px;
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden
        }

        .wiz-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 0 12px;
            border-bottom: 1px solid #333;
            flex-shrink: 0
        }

        .wiz-title {
            font-size: 12px;
            color: #FF6B00;
            font-weight: 700;
            letter-spacing: .08em
        }

        .wiz-steps-dots {
            display: flex;
            gap: 6px;
            align-items: center
        }

        .wiz-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #333;
            transition: all .2s
        }

        .wiz-dot.done {
            background: #4ec94e
        }

        .wiz-dot.current {
            background: #FF6B00;
            transform: scale(1.3)
        }

        .wiz-dot-line {
            width: 20px;
            height: 1px;
            background: #333
        }

        .wiz-dot-line.done {
            background: #4ec94e
        }

        .wiz-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px 0
        }

        .wiz-body::-webkit-scrollbar {
            width: 6px
        }

        .wiz-body::-webkit-scrollbar-track {
            background: #1a1a1a;
            border-radius: 3px
        }

        .wiz-body::-webkit-scrollbar-thumb {
            background: #FF6B00;
            border-radius: 3px
        }

        .wiz-body::-webkit-scrollbar-thumb:hover {
            background: #e55f00
        }

        .wiz-step {
            display: none;
            opacity: 0;
            transform: translateY(10px)
        }

        .wiz-step.active {
            display: block;
            animation: stepIn .3s ease forwards
        }

        @keyframes stepIn {
            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .wiz-label {
            font-size: 10px;
            color: #888;
            letter-spacing: .06em;
            margin-bottom: 10px
        }

        .radio-u {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border: 1px solid #333;
            cursor: pointer;
            margin-bottom: 6px;
            font-size: 11px;
            transition: all .12s;
            border-radius: 2px
        }

        .radio-u:hover {
            border-color: #444;
            background: #252525
        }

        .radio-u.sel {
            border-color: #FF6B00;
            background: rgba(255, 107, 0, .06)
        }

        .rd {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1.5px solid #555;
            flex-shrink: 0;
            position: relative;
            transition: border-color .12s
        }

        .radio-u.sel .rd {
            border-color: #FF6B00
        }

        .radio-u.sel .rd::after {
            content: '';
            position: absolute;
            inset: 2.5px;
            background: #FF6B00;
            border-radius: 50%
        }

        .radio-desc {
            font-size: 9px;
            color: #666;
            margin-top: 2px
        }

        .wiz-input {
            width: 100%;
            background: #111;
            border: 1px solid #333;
            padding: 8px 10px;
            color: #ccc;
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            outline: none;
            transition: border-color .12s;
            border-radius: 2px
        }

        .wiz-input:focus {
            border-color: #FF6B00
        }

        .wiz-input::placeholder {
            color: #444
        }

        .wiz-footer {
            display: flex;
            gap: 8px;
            padding-top: 12px;
            border-top: 1px solid #333;
            flex-shrink: 0
        }

        .btn-build {
            background: #FF6B00;
            color: #111;
            font-family: 'JetBrains Mono', monospace;
            font-weight: 700;
            font-size: 11px;
            padding: 8px 20px;
            border: none;
            cursor: pointer;
            transition: background .12s;
            letter-spacing: .04em;
            border-radius: 2px
        }

        .btn-build:hover {
            background: #e55f00
        }

        .btn-step {
            background: transparent;
            border: 1px solid #333;
            color: #888;
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            padding: 8px 14px;
            cursor: pointer;
            transition: all .12s;
            border-radius: 2px
        }

        .btn-step:hover {
            border-color: #555;
            color: #ccc
        }

        .ctx-menu {
            position: fixed;
            background: #2d2d2d;
            border: 1px solid #444;
            padding: 4px 0;
            min-width: 160px;
            z-index: 100;
            display: none;
            box-shadow: 0 8px 30px rgba(0, 0, 0, .5)
        }

        .ctx-item {
            padding: 5px 12px;
            font-size: 11px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #ccc
        }

        .ctx-item:hover {
            background: #264f78;
            color: #fff
        }

        .ctx-sep {
            height: 1px;
            background: #444;
            margin: 4px 0
        }

        .zoom-indicator {
            position: absolute;
            bottom: 12px;
            right: 12px;
            background: rgba(0, 0, 0, .6);
            border: 1px solid #333;
            padding: 3px 8px;
            font-size: 9px;
            color: #666;
            border-radius: 2px;
            pointer-events: none;
            z-index: 2
        }

        .pan-hint {
            position: absolute;
            bottom: 12px;
            left: 12px;
            background: rgba(0, 0, 0, .6);
            border: 1px solid #333;
            padding: 3px 8px;
            font-size: 9px;
            color: #555;
            border-radius: 2px;
            pointer-events: none;
            z-index: 2
        }

        .portfolio-wrap {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            padding: 12px 16px
        }

        .portfolio-header {
            font-size: 10px;
            color: #888;
            letter-spacing: .08em;
            margin-bottom: 10px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 8px
        }

        .portfolio-header iconify-icon {
            flex-shrink: 0
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            overflow-y: auto;
            flex: 1;
            align-content: start;
            padding-right: 4px
        }

        .portfolio-item {
            aspect-ratio: 4/3;
            cursor: pointer;
            border: 1px solid #333;
            overflow: hidden;
            background: #111;
            transition: border-color .15s, transform .15s;
            position: relative
        }

        .portfolio-item:hover {
            border-color: #44aaff;
            transform: translateY(-2px)
        }

        .portfolio-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .portfolio-item-title {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 4px 6px;
            background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
            font-size: 8px;
            color: #ccc
        }

        .portfolio-empty {
            grid-column: 1 / -1;
            text-align: center;
            padding: 40px 20px;
            color: #555;
            font-size: 11px;
            border: 1px dashed #333;
            border-radius: 2px
        }

        .portfolio-empty code {
            color: #888;
            font-size: 10px
        }