@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
:root{--bg:#141915;--surface:#222a26;--surface2:#29322d;--line:#3c4840;--ink:#dce2d6;--muted:#7d8c80;--amber:#e3a951;--red:#f04832;--green:#88b79a}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:'Barlow Condensed',Arial,sans-serif}
button,input{font:inherit}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:76px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 24px;border-bottom:1px solid #465147;background:linear-gradient(#30372f,#222b25);box-shadow:0 2px 12px #0008}
.brand{display:flex;align-items:center;gap:22px}
.brand-led{font-family:'IBM Plex Mono',monospace;font-size:23px;font-weight:700;letter-spacing:1px;color:#ff5037;text-shadow:0 0 14px #ff4a3166}
.brand-sub{font:11px 'IBM Plex Mono',monospace;letter-spacing:1.4px;color:#adb9a6;border-left:1px solid #566057;padding-left:20px}
.brand-sub b{color:var(--amber)}
.project-name{font:10px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#b7c4b4}
.dim{color:#6e8072}
.status-dot,.mini-led,.selection-dot,.note-light,.footer-indicator{display:inline-block;width:7px;height:7px;border-radius:50%;background:#9bd1a0;box-shadow:0 0 8px #9bd1a099;margin-right:9px}
.top-actions{display:flex;gap:8px}
.tool-btn{height:35px;padding:0 16px;background:#313b33;border:1px solid #5b695b;color:#cbd5c7;font:10px 'IBM Plex Mono',monospace;letter-spacing:.6px;cursor:pointer}
.tool-btn.primary{background:#b98b48;border-color:#d7b274;color:#1f231d;font-weight:700}
.workspace{flex:1;min-height:640px;display:grid;grid-template-columns:242px minmax(0,1fr) 286px}
.sidebar{background:#202823;display:flex;flex-direction:column;min-width:0}
.sidebar.left{border-right:1px solid var(--line)}
.sidebar.right{border-left:1px solid var(--line)}
.side-title{height:51px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:16px;font-weight:700;letter-spacing:1px}
.side-title span{font:9px 'IBM Plex Mono',monospace;color:#8d9b8c}
.sidebar-intro{font:9px 'IBM Plex Mono',monospace;color:#6d7e70;padding:20px 17px 13px;letter-spacing:.6px}
.library-item{margin:0 10px 7px;padding:13px 11px;display:flex;gap:12px;align-items:center;border:1px solid #39483d;background:#27312a}
.library-item.selected{border-color:#9d8659;background:#363a2f}
.library-item.muted{opacity:.48}
.library-item strong,.selection-header strong{font-size:15px;font-weight:600;display:block}
.library-item small,.selection-header small{font:9px 'IBM Plex Mono',monospace;color:#829283;display:block;margin-top:4px}
.library-icon{width:34px;height:34px;border:1px solid #6c745f;display:grid;place-items:center;flex-shrink:0;background:#424a3e;color:#d2c9a9}
.panel-icon span{width:20px;height:16px;border:2px ridge #c0b18e;background:linear-gradient(130deg,#9d9075,#746b58)}
.lamp-icon span{width:15px;height:15px;border-radius:50%;background:#a1b79c;box-shadow:0 0 8px #9bc8a4}
.led-icon{color:#f26248;font:17px 'IBM Plex Mono',monospace}
.item-plus{margin-left:auto;color:var(--amber);font-size:20px}
.sidebar-bottom{margin-top:auto;padding:17px 16px;border-top:1px solid var(--line);font:9px 'IBM Plex Mono',monospace;color:#93a495;display:flex;align-items:center;gap:4px}
.sidebar-bottom span:last-child{margin-left:auto;color:#687e6d}
.sidebar-bottom .mini-led{flex-shrink:0}
.center{min-width:0;display:flex;flex-direction:column;background:#161d19}
.canvas-toolbar{height:51px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;background:#252e27;border-bottom:1px solid var(--line)}
.toolbar-label{font-size:15px;font-weight:700;letter-spacing:1px}
.toolbar-name{margin-left:15px;color:#a5b4a3;font:10px 'IBM Plex Mono',monospace}
.toolbar-tools{font:10px 'IBM Plex Mono',monospace;color:#99a999;display:flex;align-items:center;gap:10px;white-space:nowrap}
.grid-dot{width:10px;height:10px;border:1px solid #c7a76b;background:#c7a76b33}
.separator{color:#4e6152;margin:0 4px}
.canvas-scroll{flex:1;overflow:auto;padding:28px 26px;display:flex;flex-direction:column;align-items:flex-start}
.ruler{font:9px 'IBM Plex Mono',monospace;color:#637b69}
.top-ruler{width:1000px;margin-left:28px;display:flex;justify-content:space-between;padding:0 0 10px}
.canvas-row{display:flex}
.side-ruler{width:28px;height:650px;display:flex;flex-direction:column;justify-content:space-between;padding:0 8px 0 0;text-align:right}
.canvas{width:1000px;height:650px;flex-shrink:0;position:relative;overflow:hidden;border:1px solid #788573;background-color:#343d33;background-image:linear-gradient(#d1d9cb0b 1px,transparent 1px),linear-gradient(90deg,#d1d9cb0b 1px,transparent 1px);background-size:var(--designer-grid-size, 20px) var(--designer-grid-size, 20px);box-shadow:0 18px 45px #0009}
.canvas-heading{height:40px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #6d7765;background:#303a32;font:11px 'IBM Plex Mono',monospace;color:#9cae9d;letter-spacing:1px}
.canvas-heading span:last-child{color:#c8a16a}
.sample-panel{position:absolute;left:90px;top:125px;width:560px;height:300px;background-image:url('/images/metal-wear.png'),linear-gradient(135deg,#ac9e82,#827760 55%,#9e9277);background-size:800px 800px,cover;border:3px ridge #575041;box-shadow:inset 2px 2px #d4c4a1,inset -2px -2px #50493a,0 10px 25px #0007;outline:1px solid #e3bd75;outline-offset:4px}
.panel-tag{position:absolute;top:-24px;left:-5px;font:10px 'IBM Plex Mono',monospace;color:#edbe75}
.sample-panel-inner{position:absolute;inset:18px;border:1px solid #6e6452;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#322f26;text-shadow:0 1px #d2c2a1;font-size:26px;font-weight:800;letter-spacing:1px}
.sample-panel-inner small{font:11px 'IBM Plex Mono',monospace;letter-spacing:1px;margin-top:8px;color:#534d3d}
.resize-corner{position:absolute;right:-7px;bottom:-7px;width:11px;height:11px;background:#e9bc6b;border:2px solid #252a22}
.canvas-watermark{position:absolute;bottom:32px;width:100%;text-align:center;font:10px 'IBM Plex Mono',monospace;letter-spacing:1.3px;color:#829485}
.canvas-footer{height:39px;flex-shrink:0;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #3a473e;background:#202a23;font:9px 'IBM Plex Mono',monospace;color:#92a394}
.canvas-footer i{display:inline-block;width:6px;height:6px;background:#a5d29f;border-radius:50%;margin-right:7px}
.selection-header{display:flex;align-items:center;gap:12px;padding:19px 17px;border-bottom:1px solid var(--line)}
.selection-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid #776f56;background:#494b3d;color:#c8b48b;font-size:24px}
.selection-dot{margin-left:auto}
.section-label{margin:15px 16px 13px;font:10px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#d5ae74;display:flex;justify-content:space-between}
.section-label span{color:#718274}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 7px}
.field-grid label,.full-field{font:9px 'IBM Plex Mono',monospace;color:#869988;letter-spacing:.6px}
.field-grid input{display:block;width:100%;height:34px;margin-top:7px;padding:0 11px;background:#18211c;border:1px solid #455448;color:#cbd8ca;font:12px 'IBM Plex Mono',monospace}
.full-field{display:block;margin:0 16px 14px}
.select-like,.color-field{height:36px;margin-top:8px;padding:0 10px;background:#18211c;border:1px solid #455448;display:flex;align-items:center;justify-content:space-between;color:#cbd8ca;font:11px 'IBM Plex Mono',monospace;letter-spacing:0}
.color-field{justify-content:flex-start;gap:10px}
.color-field span:last-child{margin-left:auto;color:#738c79}
.swatch{width:18px;height:18px;background:#91836b;border:1px solid #d1c1a2}
.slider-line{display:flex;gap:13px;align-items:center;margin-top:14px}
.slider-line strong{color:#c5d1c0;font:11px 'IBM Plex Mono',monospace}
.slider-track{height:5px;flex:1;background:#49574a}
.slider-track span{display:block;width:35%;height:100%;background:#d3a664}
.inspector-note{display:flex;gap:12px;margin:25px 15px;padding:14px;background:#29352c;border:1px solid #4a5b4b}
.note-light{margin-top:4px;flex-shrink:0;background:#e2ad64;box-shadow:0 0 6px #e2ad6477}
.inspector-note strong{font:10px 'IBM Plex Mono',monospace;color:#d7b77d}
.inspector-note p{font:10px/1.7 'IBM Plex Mono',monospace;color:#94a497;margin:7px 0 0}
.bottom-bar{height:33px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-top:1px solid #445247;background:#1c241e;font:9px 'IBM Plex Mono',monospace;color:#a0b09f;letter-spacing:.5px}
.footer-indicator{margin-left:12px;margin-right:5px;width:5px;height:5px}
.preview-mode .sample-panel{outline:none}
.preview-mode .panel-tag,.preview-mode .resize-corner,.preview-mode .canvas-watermark{display:none}

@media(max-width:1100px){
.workspace{grid-template-columns:190px minmax(0,1fr) 240px}
.brand-sub,.project-name{display:none}
.canvas-scroll{padding:20px 14px}
}

@media(max-width:720px){
.workspace{grid-template-columns:1fr}
.sidebar{display:none}
.topbar{padding:0 12px}
.brand-led{font-size:17px}
.toolbar-tools{display:none}
.canvas-scroll{padding:12px}
}

/* v0.2 interactive panels */
#addPanel{cursor:grab;user-select:none}
#addPanel:hover{border-color:#e3a951}
#panelLayer{position:absolute;inset:0;pointer-events:none}
.sample-panel{pointer-events:auto;cursor:move;touch-action:none;outline:none;user-select:none}
.sample-panel.is-selected{outline:1px solid #e3bd75;outline-offset:4px}
.sample-panel:not(.is-selected) .panel-tag,.sample-panel:not(.is-selected) .resize-corner{display:none}
.sample-panel-inner{pointer-events:none}
.resize-corner{cursor:nwse-resize;touch-action:none}
.sample-panel[data-material="clean"]{background-image:linear-gradient(135deg,#c4bcae,#948c7c)}
.sample-panel[data-material="dark"]{background-image:linear-gradient(135deg,#646e6b,#303a37)}
.sample-panel .wear-overlay{position:absolute;inset:0;pointer-events:none;background:url('/images/metal-wear.png') center/800px 800px;opacity:.35}
.sample-panel .sample-panel-inner{z-index:1}
.sample-panel .resize-corner,.sample-panel .panel-tag{z-index:2}
.field-grid input:focus,#prop-material:focus,#prop-wear:focus{outline:1px solid #d3a664}
#prop-material{width:100%;appearance:auto;cursor:pointer}
#prop-color{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
#prop-wear{width:100%;flex:1;accent-color:#d3a664;cursor:pointer}
.canvas.preview-mode .sample-panel{outline:none}
.canvas.preview-mode .panel-tag,.canvas.preview-mode .resize-corner{display:none}

/* Live ruler indicators: visible only during panel movement or resizing. */
.top-ruler,.side-ruler{position:relative;overflow:visible}
.ruler-guide{position:absolute;display:none;z-index:15;pointer-events:none;color:#ff4c42;font:700 12px 'IBM Plex Mono',monospace;text-shadow:0 1px 2px #000}
.ruler-guide.is-active{display:block}
.ruler-guide-x{top:0;left:0;width:0;height:22px;border-left:2px solid #ff4c42}
.ruler-guide-x b{position:absolute;left:0;bottom:21px;transform:translateX(-50%);white-space:nowrap}
.ruler-guide-y{top:0;left:0;width:28px;height:0;border-top:2px solid #ff4c42}
.ruler-guide-y b{position:absolute;right:32px;top:0;transform:translateY(-50%);white-space:nowrap}

/* V0.4: object-relative rulers, negative values, pinned origin */
.top-ruler,.side-ruler{padding:0;display:block;flex-shrink:0}
.top-ruler{height:22px;margin-left:28px}
.side-ruler{height:650px}
.ruler-ticks{position:absolute;inset:0;pointer-events:none;overflow:visible}
.ruler-tick{position:absolute;font:9px 'IBM Plex Mono',monospace;color:#849888;white-space:nowrap}
.top-ruler .ruler-tick{top:0;transform:translateX(-50%)}
.side-ruler .ruler-tick{right:5px;transform:translateY(-50%)}
.ruler-tick.is-zero{color:#f35d4d;font-weight:700}
.ruler-guide-x{height:18px}
.ruler-guide-x b{bottom:17px}
.ruler-guide-y{width:25px}
.ruler-guide-y b{right:29px}
.tool-btn.origin-pinned{border-color:#f35d4d;color:#f8a49a}

.designer-project-link{color:var(--amber);text-decoration:none}
.designer-project-link:hover{color:#fff}

/* Indicator control editor */
.indicator-tool-light{display:block;width:17px;height:17px;border-radius:50%;background:#44e276;border:3px solid #1e3425;box-shadow:0 0 10px #44e276}
.indicator-inspector[hidden],#panelInspector[hidden]{display:none}
.indicator-inspector{overflow-y:auto;min-height:0}
.indicator-input{display:block;width:calc(100% - 0px);height:34px;margin-top:7px;padding:5px 9px;background:#18211c;border:1px solid #455448;color:#cbd8ca;font:12px 'IBM Plex Mono',monospace}
.indicator-input[type=file]{height:auto;font-size:9px}
.indicator-states{padding:0 16px;display:flex;flex-wrap:wrap;gap:7px}
.indicator-state{padding:7px 10px;background:#29352c;color:#b9c6b8;border:1px solid #526153;font:10px 'IBM Plex Mono',monospace;cursor:pointer}
.indicator-state.active{border-color:#e3a951;color:#f3c680}
.indicator-action{display:block;margin:10px 16px;padding:9px 11px;background:#303c32;color:#d4d9c8;border:1px solid #586c59;font:10px 'IBM Plex Mono',monospace;cursor:pointer}
.indicator-action.danger{color:#ff9689;border-color:#86544e}
.indicator-hint{padding:0 16px;color:#879e8a;font:9px/1.5 'IBM Plex Mono',monospace}
.indicator-control{position:absolute;cursor:move;touch-action:none;user-select:none;border:2px solid transparent;display:flex;align-items:center;justify-content:center}
.indicator-control.is-selected{outline:1px solid #e3bd75;outline-offset:4px}
.indicator-control .indicator-lens{width:100%;height:100%;border-radius:50%;border:5px ridge #4d5246;background:radial-gradient(circle at 35% 30%,#fff9,#30dd65 45%,#112519 100%);box-shadow:inset 0 2px 9px #000a,0 0 13px var(--indicator-glow,#30dd65)}
.indicator-control .indicator-lens.has-image{border:0;border-radius:0;background-position:center;background-repeat:no-repeat;background-size:contain;box-shadow:none}
.indicator-control .resize-corner{position:absolute;right:-7px;bottom:-7px;width:11px;height:11px;background:#e9bc6b;border:2px solid #252a22;cursor:nwse-resize}
.canvas.preview-mode .indicator-control{outline:none}
.canvas.preview-mode .indicator-control .resize-corner{display:none}

#panelLayer .indicator-control {pointer-events: auto; cursor: move; touch-action: none; user-select: none;}
#panelLayer .indicator-control .indicator-lens {pointer-events: none;}
#panelLayer .indicator-control .resize-corner {pointer-events: auto; cursor: nwse-resize; touch-action: none; z-index: 2;}
/* Grid uses the same coordinate origin as controls in #panelLayer. */
.canvas { background-image: none; }
#panelLayer {
    background-image: linear-gradient(#d1d9cb0b 1px, transparent 1px), linear-gradient(90deg, #d1d9cb0b 1px, transparent 1px);
    background-size: var(--designer-grid-size, 20px) var(--designer-grid-size, 20px);
    background-position: 0 0;
    clip-path: none;
}

/* Keep the visible selection rectangle on the actual snapped control bounds. */
#panelLayer .indicator-control {
    border: 0;
}
#panelLayer .indicator-control.is-selected {
    outline: 1px solid #e3bd75;
    outline-offset: 0;
}

/* Grid lines and controls share the panelLayer origin. */
.canvas{background-image:none}
#panelLayer{background-image:linear-gradient(#d1d9cb0b 1px,transparent 1px),linear-gradient(90deg,#d1d9cb0b 1px,transparent 1px);background-size:var(--designer-grid-size,20px) var(--designer-grid-size,20px);background-position:0 0;clip-path:none}

/* Persistent origin crosshairs: design-time only, never exported. */
#panelLayer .control-origin-guide {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    box-sizing: border-box;
}
    #panelLayer .control-origin-vertical {
        top: 0;
        bottom: 0;
        width: 0;
        border-left: 1px dashed rgba(255, 90, 79, 0.4);
    }
    #panelLayer .control-origin-horizontal {
        left: 0;
        right: 0;
        height: 0;
        border-top: 1px dashed rgba(255, 90, 79, 0.4);
    }
#panelLayer .control-origin-guide[hidden],
.canvas.preview-mode #panelLayer .control-origin-guide { display: none !important; }

/* Component library: compact Photoshop-style two-column palette. */
.sidebar.left{min-height:0;overflow:hidden}
.sidebar.left .side-title{flex:0 0 auto}
.component-library-search{flex:0 0 auto;padding:12px 12px 10px;border-bottom:1px solid var(--line)}
.component-library-search label{display:none}
.component-library-search input{display:block;width:100%;height:35px;padding:0 10px 0 31px;color:var(--ink);background:#151e18;border:1px solid #465a4b;border-radius:5px;font:11px 'IBM Plex Mono',monospace;outline:none}
.component-library-search input:focus{border-color:var(--amber)}
.component-library-search{position:relative}
.component-library-search:before{content:'';position:absolute;left:23px;top:24px;width:11px;height:11px;border:1.7px solid #a4b5a8;border-radius:50%;pointer-events:none}
.component-library-search:after{content:'';position:absolute;left:33px;top:34px;width:6px;height:1.5px;background:#a4b5a8;transform:rotate(45deg);transform-origin:left center;pointer-events:none}
.component-library-tabs{display:flex;gap:12px;margin-top:11px;align-items:center}
.component-library-tabs button{padding:5px 2px;border:0;border-radius:4px;background:transparent;color:#b3c3b7;cursor:pointer;font:10px 'IBM Plex Mono',monospace}
.component-library-tabs button.active{padding:6px 9px;background:#bb914c;color:#151e18;font-weight:700}
.sidebar.left .sidebar-intro{display:none}
.component-library-items{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:9px 11px 12px;scrollbar-width:thin;scrollbar-color:#506151 #202823}
.component-library-group{margin:0;padding:0 0 10px;border-bottom:1px solid #354139}
.component-library-group:last-child{border-bottom:0}
.component-library-group[hidden],.component-library-items .library-item[hidden],.library-no-results[hidden]{display:none!important}
.component-library-group summary{display:list-item;margin:0;padding:16px 3px 11px;color:var(--amber);cursor:pointer;font:10px 'IBM Plex Mono',monospace;letter-spacing:.3px;list-style-position:inside}
.component-library-group summary::marker{color:var(--amber);font-size:10px}
.component-library-count{float:right;margin-right:4px;color:#87998a;font-size:9px}
.component-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.sidebar.left .component-library-items .library-item{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:7px;min-width:0;min-height:34px;height:34px;margin:0;padding:4px 7px;border:1px solid transparent;border-radius:5px;background:#29382f;text-align:left;cursor:pointer;user-select:none}
.sidebar.left .component-library-items .library-item:hover{border-color:#7d946f;background:#344638}
.sidebar.left .component-library-items .library-item.selected{border-color:transparent;background:#29382f}
.sidebar.left .component-library-items .library-item.selected:hover{border-color:#7d946f}
.sidebar.left .component-library-items .library-item .library-icon{display:flex;align-items:center;justify-content:center;flex:0 0 15px;width:15px;height:17px;min-width:15px;background:transparent;border:0;color:#c6d4c6}
.sidebar.left .component-library-items .library-item .library-icon>span{display:none}
.sidebar.left .component-library-items .library-item .library-icon svg{display:block;width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar.left .component-library-items .library-item>div:nth-child(2){min-width:0;flex:1}
.sidebar.left .component-library-items .library-item strong{display:block;font-size:12px;line-height:1.05;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar.left .component-library-items .library-item small{display:none}
.sidebar.left .component-library-items .library-item .item-plus{display:none!important}
.sidebar.left .component-library-items .library-item.muted{opacity:.55;cursor:default}
.component-library-star{display:none!important}
.library-no-results{padding:15px;color:#9aac9c;font:10px 'IBM Plex Mono',monospace}
.sidebar.left .sidebar-bottom{flex:0 0 auto;margin-top:0;padding:10px 11px}
/* Keep two columns at all desktop widths; never revert to tall cards. */
@media(max-width:1100px){.component-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar.left .component-library-items .library-item{gap:5px;padding:4px 5px}.sidebar.left .component-library-items .library-item strong{font-size:11px}}