:root{--primary: #137fec;--bg-light: #f6f7f8;--bg-dark: #101922;--panel-dark: #16202a;--border-dark: #233648;--text-white: #ffffff;--text-slate-300: #cbd5e1;--text-slate-400: #94a3b8;--text-slate-500: #64748b;--text-slate-900: #0f172a;--font-display: "Space Grotesk", sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--font-display);background-color:var(--bg-dark);color:var(--text-white);height:100vh;overflow:hidden;display:flex;flex-direction:column}#root{width:100%;height:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:#324d67;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#4a6b8a}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}.app-container{display:flex;flex-direction:column;height:100%;min-width:0}.main-workspace{flex:1;display:flex;overflow:hidden;min-width:0}.header{height:4rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-dark);background-color:var(--bg-dark);padding:0 1.5rem;z-index:20}.header-left,.header-right{display:flex;align-items:center;gap:1rem}.logo-box{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background-color:#137fec33;border-radius:.5rem;color:var(--primary)}.app-title{font-size:1.25rem;font-weight:700;letter-spacing:-.025em}.divider{height:1.5rem;width:1px;background-color:var(--border-dark);margin:0 .5rem}.nav-links{display:flex;gap:.25rem}.nav-btn{padding:.375rem .75rem;font-size:.875rem;font-weight:500;border-radius:.25rem;color:var(--text-slate-400);background:transparent;border:none;cursor:pointer;transition:color .2s,background-color .2s}.nav-btn:hover{background-color:#ffffff0d;color:var(--text-white)}.icon-btn{padding:.5rem;color:var(--text-slate-400);background:transparent;border:none;border-radius:.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s,background-color .2s}.icon-btn:hover{background-color:#ffffff0d;color:var(--text-white)}.primary-btn{display:flex;align-items:center;gap:.5rem;background-color:var(--primary);color:#fff;padding:.5rem 1rem;border-radius:.5rem;border:none;font-size:.875rem;font-weight:700;cursor:pointer;transition:background-color .2s;box-shadow:0 0 15px #137fec4d}.primary-btn:hover{background-color:#2563eb}.sidebar-left{width:4rem;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem 0;border-right:1px solid var(--border-dark);background-color:var(--bg-dark);z-index:10}.tool-btn{padding:.75rem;border-radius:.75rem;background:transparent;color:var(--text-slate-400);border:none;cursor:pointer;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;position:relative;transition:all .2s}.tool-btn:hover{background-color:#ffffff0d;color:var(--text-white)}.tool-btn.active{background-color:#137fec33;color:var(--primary)}.tooltip{position:absolute;left:3.5rem;background-color:#1e293b;padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;border:1px solid var(--border-dark);transition:opacity .2s;z-index:50}.tool-btn:hover .tooltip{opacity:1}.canvas-area{flex:1 1 0;position:relative;background-color:#0b1218;display:flex;flex-direction:column;min-width:0}.checkerboard-bg{position:absolute;inset:0;opacity:.2;background-image:repeating-linear-gradient(45deg,#1a2632 25%,transparent 25%,transparent 75%,#1a2632 75%,#1a2632),repeating-linear-gradient(45deg,#1a2632 25%,transparent 25%,transparent 75%,#1a2632 75%,#1a2632);background-position:0 0,10px 10px;background-size:20px 20px;pointer-events:none}.viewport{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;overflow:hidden;min-width:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;border:2px dashed var(--border-dark);border-radius:.75rem;background-color:#10192280;backdrop-filter:blur(4px);max-width:32rem;width:100%;text-align:center;transition:border-color .2s;cursor:pointer}.empty-state:hover{border-color:#137fec80}.empty-icon{width:4rem;height:4rem;border-radius:50%;background-color:var(--border-dark);display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:transform .3s}.empty-state:hover .empty-icon{transform:scale(1.1)}.upload-text{color:var(--text-slate-400);margin-bottom:2rem;max-width:20rem}.floating-bar{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.25rem;background-color:#101922e6;backdrop-filter:blur(4px);border:1px solid var(--border-dark);padding:.375rem;border-radius:.75rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;z-index:20}.right-panel{width:20rem;min-width:20rem;background-color:var(--panel-dark);border-left:1px solid var(--border-dark);display:flex;flex-direction:column;z-index:10;flex-shrink:0}.panel-header{height:3rem;border-bottom:1px solid var(--border-dark);display:flex;align-items:center;padding:0 1rem;justify-content:space-between}.panel-title{font-size:.875rem;font-weight:700;letter-spacing:.1em;color:var(--text-slate-400);text-transform:uppercase}.panel-content{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}details{background-color:var(--bg-dark);border:1px solid var(--border-dark);border-radius:.75rem;overflow:hidden}details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:.75rem;cursor:pointer;user-select:none;background-color:var(--bg-dark);transition:background-color .2s}details>summary:hover{background-color:#ffffff0d}details>summary::-webkit-details-marker{display:none}.accordion-content{padding:1rem;border-top:1px solid rgba(35,54,72,.5);display:flex;flex-direction:column;gap:1.5rem}.filters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.75rem}.filter-item{display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.5rem;border-radius:.5rem;background:transparent;border:none;cursor:pointer;transition:background-color .2s}.filter-item:hover{background-color:#ffffff0d}.filter-preview{width:100%;aspect-ratio:1/1;border-radius:.375rem;box-shadow:0 1px 2px #0000000d;border:1px solid rgba(255,255,255,.1)}.filter-item:hover .filter-preview{border-color:#137fec80}.ad-section{padding:1rem;border-top:1px solid var(--border-dark);background-color:#0f151a}.ad-box{width:100%;aspect-ratio:6/5;background-color:#1e293b80;border-radius:.5rem;border:2px dashed #334155;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;height:.25rem;border-radius:.5rem;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:1rem;width:1rem;border-radius:50%;background:#fff;border:2px solid var(--primary);cursor:grab;margin-top:-.375rem;box-shadow:0 1px 3px #0000004d}input[type=range]::-webkit-slider-runnable-track{width:100%;height:.25rem;background:transparent;border-radius:.5rem;cursor:pointer}@media(max-width:768px)and (hover:none)and (pointer:coarse){.main-workspace{flex-direction:column}.sidebar-left{width:100%;height:auto;flex-direction:row;border-right:none;border-bottom:1px solid var(--border-dark);padding:.5rem;overflow-x:auto;order:2}.canvas-area{order:1}.right-panel{width:100%;height:50vh;border-left:none;border-top:1px solid var(--border-dark);order:3;flex-shrink:0}.tool-btn{width:3rem;height:3rem;flex-shrink:0}.ad-section{display:none}}