:root{color-scheme:dark;--bg: #0b0f17;--panel: #111827;--panel-2: #0f172a;--panel-3: #0b1220;--border: rgba(148, 163, 184, .15);--text: #e2e8f0;--muted: #94a3b8;--accent: #60a5fa;--accent-2: #34d399;--danger: #f87171}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;background:radial-gradient(circle at top,#16213e,#0b0f17 65%);font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text)}button{font-family:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(96,165,250,.8);outline-offset:2px}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--border);background:#0f172af2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;z-index:20;flex-shrink:0}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem}.topbar-actions{display:flex;gap:10px;flex-wrap:wrap}.tool-bar{position:sticky;top:64px;z-index:15;display:flex;justify-content:space-between;gap:12px;padding:10px 20px;background:#0b1220f2;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-shrink:0}.ad-strip{display:flex;align-items:center;gap:12px;padding:8px 20px;background:#0f172aeb;border-bottom:1px solid var(--border);font-size:.78rem;color:var(--muted);flex-shrink:0}.ad-label{text-transform:uppercase;letter-spacing:.8px;font-size:.65rem;padding:4px 6px;border-radius:999px;border:1px solid rgba(96,165,250,.4);color:var(--accent)}.tool-bar-section{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tool-pill{border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:6px 12px;border-radius:999px;cursor:pointer;font-size:.78rem;font-weight:600;transition:.2s ease}.tool-pill.active,.tool-pill:hover{border-color:#60a5facc;background:#60a5fa33;color:#fff}.zoom-label{min-width:48px;text-align:center;font-size:.8rem;color:var(--muted)}.menu-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.menu{position:relative}.menu-trigger{border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:500;transition:.2s ease}.menu-trigger:hover,.menu:hover .menu-trigger,.menu:focus-within .menu-trigger{border-color:#60a5fa99;color:#fff}.menu-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:8px;display:none;flex-direction:column;gap:6px;z-index:30}.menu:hover .menu-panel,.menu:focus-within .menu-panel{display:flex}.menu-item{border:1px solid transparent;background:var(--panel-2);color:var(--text);padding:8px 10px;border-radius:8px;text-align:left;cursor:pointer;font-size:.8rem}.menu-item:hover{border-color:#60a5fa99}.menu-item.active{border-color:#60a5facc;background:#60a5fa33;color:#fff}.menu-item:disabled{opacity:.55;cursor:not-allowed}.menu-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);padding:4px 6px 0}.menu-input{border:1px solid var(--border);background:var(--panel-2);color:var(--text);border-radius:8px;padding:8px 10px;font-size:.8rem}.menu-input[type=color]{padding:4px;height:36px}.btn{border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:500;transition:.2s ease}.btn:hover{border-color:#60a5fa99;color:#fff}.btn.primary{background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;box-shadow:0 12px 20px #2563eb4d}.plan-pill{border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:.75rem;color:var(--muted);background:#0f172acc;max-width:min(360px,42vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.link-button{border:none;background:transparent;color:var(--accent);cursor:pointer;font-size:.72rem;padding:0}.link-button:hover{color:#fff}.btn.ghost{background:transparent}.btn.small{padding:6px 10px;font-size:.75rem}.btn.danger{border-color:#f8717180;color:var(--danger)}.btn.active{border-color:#60a5facc;color:#fff;background:#60a5fa33}.workspace{display:grid;grid-template-columns:1fr;gap:16px;padding:16px;flex:1;min-height:0;height:auto;overflow:hidden}.sidebar{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:16px;overflow:hidden}.section-title{font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:8px}.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tool-btn{padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);font-size:.78rem;color:var(--muted);cursor:pointer;transition:.2s ease}.tool-btn.active{border-color:#60a5fab3;color:#fff;background:#3b82f640}.tool-btn:disabled{opacity:.55;cursor:not-allowed}.canvas-pane{background:var(--panel);border-radius:18px;border:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;height:100%;min-height:0}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);background:#0f172ab3}.canvas-wrap{position:relative;flex:1;display:grid;place-items:center;background:linear-gradient(145deg,#0b1220,#0f172a);min-height:0;width:100%;height:100%}.canvas-viewport{position:relative;display:grid;place-items:center;transform-origin:center;transition:transform .1s ease;z-index:1}.canvas-viewport.pan-ready{cursor:grab}.canvas-viewport.panning{cursor:grabbing}.preview-canvas,.konva-canvas{max-width:100%;max-height:100%;border-radius:14px;box-shadow:0 20px 50px #0f172a99;display:block}.konva-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.konva-overlay.active{pointer-events:auto}.drop-overlay{position:absolute;top:16px;right:16px;bottom:16px;left:16px;border:1px dashed rgba(148,163,184,.4);border-radius:16px;display:grid;place-items:center;color:var(--muted);font-size:.9rem;text-align:center;padding:20px;z-index:2}.drop-overlay-content{display:flex;flex-direction:column;gap:12px;align-items:center;max-width:360px}.statusbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--border);font-size:.75rem;color:var(--muted)}.bottom-tabs{border-top:1px solid var(--border);background:#0b1220f2;padding:10px 12px 14px;display:flex;flex-direction:column;gap:10px;flex-shrink:0;max-height:42vh;overflow:auto}.tab-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.tab-strip::-webkit-scrollbar{height:6px}.tab-strip::-webkit-scrollbar-thumb{background:#94a3b859;border-radius:999px}.tab-button{border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:6px 12px;border-radius:999px;cursor:pointer;font-size:.78rem;font-weight:600;white-space:nowrap;scroll-snap-align:start;transition:.2s ease}.tab-button:hover{border-color:#60a5fa99;color:#fff}.tab-button.active{border-color:#60a5facc;background:#60a5fa33;color:#fff}.tab-panel{display:block;max-height:190px;overflow:auto}.tab-panel::-webkit-scrollbar{height:6px;width:6px}.tab-panel::-webkit-scrollbar-thumb{background:#94a3b859;border-radius:999px}.tab-content-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.tab-action{border:1px solid var(--border);background:var(--panel-2);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer;font-size:.78rem;font-weight:500;transition:.2s ease}.tab-action:hover{border-color:#60a5fa99;color:#fff}.tab-action.active{border-color:#60a5facc;background:#60a5fa33;color:#fff}.tab-action.danger{border-color:#f8717180;color:var(--danger)}.tab-action:disabled{opacity:.55;cursor:not-allowed}.checkbox-row{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}.checkbox-row input[type=checkbox]{accent-color:var(--accent)}.export-progress{display:flex;flex-direction:column;gap:6px;min-width:200px}.export-progress-label{font-size:.75rem;color:var(--muted)}.export-progress-track{height:6px;border-radius:999px;background:#94a3b833;overflow:hidden}.export-progress-bar{height:100%;background:linear-gradient(135deg,#34d399,#60a5fa);transition:width .2s ease}.help-panel{display:flex;flex-direction:column;gap:16px}.help-section{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}.help-item{display:flex;flex-direction:column;gap:4px;font-size:.8rem}.help-list{display:flex;flex-direction:column;gap:6px;padding-left:18px;font-size:.8rem;color:var(--text)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#020617b3;display:grid;place-items:center;z-index:50}.modal{width:min(520px,90vw);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 20px 50px #0f172a99}.modal.modal-scrollable{max-height:80vh;overflow:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.modal-title{font-weight:600}.modal-body{color:var(--text)}.modal-footer{display:flex;justify-content:flex-end}.adjustments-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.adjustment-card{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;border:1px solid var(--border);background:var(--panel-2)}.adjustment-card input[type=range]{width:100%}.adjustment-header{display:flex;justify-content:space-between}.zones-panel{display:flex;flex-direction:column;gap:10px}.zone-inspector{border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--panel-2);display:flex;flex-direction:column;gap:8px}.zone-inspector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.zones-list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto}.zone-item{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);font-size:.78rem;display:flex;justify-content:space-between;align-items:center;gap:8px}.zone-label{display:inline-flex;align-items:center;gap:6px}.zone-color-dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(15,23,42,.6);display:inline-block}.zone-item.active{border-color:#60a5fa99;background:#3b82f626}.hint{font-size:.72rem;color:var(--muted);line-height:1.4}.login-form{display:flex;flex-direction:column;gap:10px}.login-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.login-gate{min-height:100vh;display:grid;place-items:center;padding:24px}.login-gate-card{width:min(420px,100%);padding:28px 24px;border-radius:18px;border:1px solid var(--border);background:#0f172af0;box-shadow:0 24px 60px #00000059;display:flex;flex-direction:column;gap:18px}.login-gate-card .brand{font-size:1.25rem}.login-gate-card .btn{width:100%;justify-content:center}.zone-context-menu{position:fixed;z-index:80;min-width:160px;padding:6px;border-radius:10px;border:1px solid var(--border);background:#0f172af5;box-shadow:0 12px 28px #00000059;display:flex;flex-direction:column;gap:2px}.marquee-guide{position:fixed;z-index:70;pointer-events:none;border:1px solid rgba(96,165,250,.95);background:#60a5fa14;box-shadow:0 0 0 1px #0f172a40}.context-menu-item{border:none;background:transparent;color:var(--text);text-align:left;padding:8px 10px;border-radius:8px;font-size:.8rem;cursor:pointer}.context-menu-item:hover:not(:disabled){background:#60a5fa26}.context-menu-item:disabled{opacity:.45;cursor:not-allowed}@media (max-width: 1100px){.workspace{grid-template-columns:1fr}.sidebar{order:2}.canvas-pane{order:1}}