@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#06070a;--panel:#0b0d11;--panel2:#11141a;--text:#f4f5f1;--muted:#777b86;--line:rgba(255,255,255,.085);--lime:#d8ff3e;--violet:#7c5cff}
html,body{width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
body{overflow:hidden}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{height:100%;background:radial-gradient(circle at 70% 35%,rgba(124,92,255,.055),transparent 30%),#06070a}
.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(6,7,10,.9);backdrop-filter:blur(18px);position:relative;z-index:10}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand-mark{width:30px;height:30px;border:1px solid var(--lime);color:var(--lime);display:grid;place-items:center;font:700 16px "Space Grotesk";transform:rotate(-8deg);box-shadow:0 0 18px rgba(216,255,62,.08)}
.brand-name{font:700 17px "Space Grotesk";letter-spacing:.16em}
.brand-product{font:600 8px "Space Grotesk";letter-spacing:.2em;color:#656973;border-left:1px solid var(--line);padding-left:10px}
.top-center{display:flex;align-items:center;gap:8px;color:#686c75;font:600 8px "Space Grotesk";letter-spacing:.17em;position:absolute;left:50%;transform:translateX(-50%)}
.live-dot,.tiny-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 13px rgba(216,255,62,.7)}
.top-actions{display:flex;gap:8px}
.icon-btn,.export{border:1px solid var(--line);background:#0d0f14;color:#8c9099;padding:9px 12px;font:700 9px "Space Grotesk";letter-spacing:.1em}
.icon-btn:hover{color:#fff;border-color:rgba(255,255,255,.2)}
.export{background:var(--lime);color:#080a0b;border-color:var(--lime);min-width:100px}
.editor{height:calc(100vh - 70px);display:grid;grid-template-columns:330px 1fr}
.panel{background:linear-gradient(180deg,#0b0d11,#090b0f);overflow:auto}
.left-panel{border-right:1px solid var(--line);padding:16px;position:relative}
.upload-card{height:132px;border:1px dashed rgba(216,255,62,.22);background:linear-gradient(145deg,rgba(216,255,62,.025),transparent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:.3s}
.upload-card.dragging{border-color:var(--lime);background:rgba(216,255,62,.07);box-shadow:inset 0 0 35px rgba(216,255,62,.035)}
.upload-card input{display:none}
.upload-card strong{font:700 10px "Space Grotesk";letter-spacing:.14em}
.upload-card small{font:8px "Space Grotesk";letter-spacing:.16em;color:#5f636c}
.upload-card label{margin-top:6px;padding:7px 10px;background:#15181e;border:1px solid var(--line);color:#aeb1b8;font:700 8px "Space Grotesk";letter-spacing:.1em;cursor:pointer}
.drop-orb{width:27px;height:27px;border:1px solid var(--lime);color:var(--lime);display:grid;place-items:center;font:500 18px "Space Grotesk";transform:rotate(45deg);margin-bottom:4px}
.drop-orb::first-letter{transform:rotate(-45deg)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);margin:16px -16px 0;padding:0 16px}
.tab{border:0;background:transparent;color:#5f636c;padding:12px 4px;font:700 8px "Space Grotesk";letter-spacing:.14em;position:relative}
.tab.active{color:#fff}
.tab.active:after{content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:1px;background:var(--lime);box-shadow:0 0 10px rgba(216,255,62,.5)}
.tab-content{padding-top:3px}
.hidden{display:none!important}
.control-group{padding:20px 2px;border-bottom:1px solid var(--line)}
.group-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;color:#777b85;font:700 8px "Space Grotesk";letter-spacing:.18em}
.group-head small{color:#454952}
.slider-row{display:flex;justify-content:space-between;margin:11px 0 6px;color:#aeb1b9;font-size:10px}
output{font:600 9px "Space Grotesk";color:var(--lime)}
input[type=range]{width:100%;height:2px;appearance:none;background:#292c33;outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px rgba(216,255,62,.25)}
input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--lime)}
.looks-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding-top:16px}
.look-card{min-height:90px;text-align:left;border:1px solid var(--line);background:linear-gradient(145deg,#12151b,#0d0f14);color:#777b85;padding:12px;display:flex;flex-direction:column;justify-content:space-between;transition:.25s}
.look-card span{font:600 8px "Space Grotesk";color:#4c5059}
.look-card b{font:700 9px "Space Grotesk";letter-spacing:.1em;color:#b9bcc3}
.look-card small{font-size:8px;color:#595d67}
.look-card:hover,.look-card.active{border-color:rgba(216,255,62,.65);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25),0 0 18px rgba(216,255,62,.045)}
.look-card.active b{color:var(--lime)}
.hint{font-size:9px;line-height:1.6;color:#555963;padding:16px 2px}
.crop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding-top:20px}
.crop-grid button{padding:13px 8px;border:1px solid var(--line);background:#11141a;color:#888c95;font:700 9px "Space Grotesk";letter-spacing:.08em}
.crop-grid button:hover,.crop-grid button.active{color:#fff;border-color:var(--lime)}
.panel-footer{position:sticky;bottom:0;background:linear-gradient(transparent,#0b0d11 35%);padding:24px 2px 7px;display:flex;justify-content:space-between;color:#444850;font:600 7px "Space Grotesk";letter-spacing:.14em}
.stage{min-width:0;display:flex;flex-direction:column;background:#08090d}
.stage-top{height:105px;padding:20px 26px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.eyebrow{font:700 7px "Space Grotesk";letter-spacing:.2em;color:#575b64}
.stage-top h1{font:700 clamp(24px,3vw,42px)/.9 "Space Grotesk";letter-spacing:-.05em;margin-top:7px}
.stage-top h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}
.stage-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:#535760;font:600 8px "Space Grotesk";letter-spacing:.12em}
.canvas-area{flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:24px;background-color:#08090d;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:70px 70px;overflow:hidden}
.canvas-area:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(124,92,255,.04),transparent 45%);pointer-events:none}
.canvas-frame{max-width:100%;max-height:100%;position:relative;padding:5px;border:1px solid rgba(255,255,255,.07);box-shadow:0 30px 100px rgba(0,0,0,.55)}
.canvas-frame:before,.canvas-frame:after{content:"";position:absolute;width:25px;height:1px;background:var(--lime);box-shadow:0 0 12px rgba(216,255,62,.45);z-index:2}
.canvas-frame:before{top:-1px;left:-1px}.canvas-frame:after{bottom:-1px;right:-1px}
canvas{display:block;max-width:calc(100vw - 390px);max-height:calc(100vh - 250px)}
.empty{text-align:center;position:absolute;inset:0;display:grid;place-content:center;color:#555963;pointer-events:none}
.empty-c{margin:0 auto 18px;width:50px;height:50px;border:1px solid var(--lime);color:var(--lime);display:grid;place-items:center;font:700 22px "Space Grotesk";transform:rotate(-8deg);box-shadow:0 0 25px rgba(216,255,62,.05)}
.empty-title{font:700 16px "Space Grotesk";letter-spacing:.2em;color:#777b84}
.empty-sub{font-size:9px;margin-top:7px;color:#4d515a}
.compare-badge{position:absolute;top:20px;left:50%;transform:translateX(-50%) translateY(-8px);opacity:0;background:rgba(7,8,10,.82);border:1px solid var(--line);padding:7px 10px;color:#fff;font:700 8px "Space Grotesk";letter-spacing:.14em;transition:.2s;pointer-events:none}
.compare-badge.show{opacity:1;transform:translateX(-50%) translateY(0)}
.scanline{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--lime),transparent);opacity:.04;top:0;animation:scan 7s linear infinite}
@keyframes scan{0%{top:0}100%{top:100%}}
.filmbar{height:38px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#484c55;font:600 7px "Space Grotesk";letter-spacing:.14em}
.film-left,.film-right{display:flex;align-items:center;gap:7px}
.lime-line{width:28px;height:1px;background:var(--lime);box-shadow:0 0 9px rgba(216,255,62,.4)}
@media(max-width:850px){
 body{overflow:auto}.top-center{display:none}.editor{height:auto;min-height:calc(100vh - 70px);grid-template-columns:1fr}.left-panel{border-right:0;border-top:1px solid var(--line);order:2}.stage{height:68vh;min-height:500px;order:1}.stage-top{padding:16px}.canvas-area{padding:15px}canvas{max-width:calc(100vw - 40px);max-height:calc(68vh - 170px)}
}
@media(max-width:520px){
 .topbar{padding:0 12px}.brand-product{display:none}.brand-name{font-size:15px}.icon-btn{display:none}.export{min-width:auto;padding:9px}.stage-top h1{font-size:27px}.stage-meta{font-size:7px}.left-panel{padding:13px}.tabs{margin-left:-13px;margin-right:-13px;padding:0 13px}
}