@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap";:root{color-scheme:dark;font-family:Outfit,sans-serif;line-height:1.6;font-weight:400;--bg-deep: #0b0f19;--bg-dark: #111827;--bg-panel: rgba(17, 24, 39, .75);--bg-glass: rgba(255, 255, 255, .03);--bg-glass-active: rgba(255, 255, 255, .08);--primary: #6366f1;--primary-hover: #4f46e5;--accent: #f43f5e;--accent-hover: #e11d48;--success: #10b981;--warning: #f59e0b;--text-main: #f3f4f6;--text-muted: #9ca3af;--text-dark: #4b5563;--border: rgba(255, 255, 255, .08);--border-focus: rgba(99, 102, 241, .4);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 24px;--radius-round: 9999px;--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);--shadow-glow: 0 0 20px rgba(99, 102, 241, .15);--transition: all .25s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-deep);color:var(--text-main);min-height:100vh;overflow:hidden;position:relative}body:before{content:"";position:absolute;top:-10%;left:-10%;width:120%;height:120%;z-index:-1;background:radial-gradient(circle at 20% 30%,rgba(99,102,241,.15),transparent 40%),radial-gradient(circle at 80% 70%,rgba(244,63,94,.1),transparent 45%),radial-gradient(circle at 50% 50%,rgba(16,185,129,.05),transparent 50%);filter:blur(80px);pointer-events:none}.app-container{display:grid;grid-template-columns:260px 1fr 320px;height:100vh;width:100vw;overflow:hidden}.sidebar-left{background-color:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100%;max-height:100vh;overflow:hidden;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.logo-section{padding:24px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1.1rem;box-shadow:0 0 15px #6366f166}.logo-text{font-size:1.25rem;font-weight:700;letter-spacing:-.025em;background:linear-gradient(to right,#fff,#d1d5db);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.sidebar-section{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow:hidden}.sidebar-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:600}.thumbnail-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding-right:4px}.thumbnail-list::-webkit-scrollbar,.stage::-webkit-scrollbar,.project-list-scroll::-webkit-scrollbar{width:6px}.thumbnail-list::-webkit-scrollbar-track,.stage::-webkit-scrollbar-track,.project-list-scroll::-webkit-scrollbar-track{background:transparent}.thumbnail-list::-webkit-scrollbar-thumb,.stage::-webkit-scrollbar-thumb,.project-list-scroll::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:var(--radius-round)}.thumbnail-list::-webkit-scrollbar-thumb:hover,.stage::-webkit-scrollbar-thumb:hover,.project-list-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff40}.thumbnail-item{position:relative;border:2px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;background:#0003;aspect-ratio:1 / 1.414;transition:var(--transition);display:flex;align-items:center;justify-content:center}.thumbnail-item:hover{border-color:#6366f180;transform:translateY(-2px)}.thumbnail-item.active{border-color:var(--primary);box-shadow:0 0 10px #6366f14d}.thumbnail-canvas{width:100%;height:100%;object-fit:contain}.thumbnail-number{position:absolute;bottom:8px;right:8px;background:#000000b3;padding:2px 6px;border-radius:var(--radius-sm);font-size:.65rem;color:var(--text-main);border:1px solid var(--border)}.stage{flex:1;overflow:hidden;display:flex;flex-direction:column;background:#00000026;position:relative;min-height:0}.stage-viewport{flex:1;width:100%;height:100%;overflow:auto;display:flex;padding:80px 40px 40px}.floating-toolbar{position:absolute;top:24px;left:50%;transform:translate(-50%);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-round);padding:8px 16px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:10}.toolbar-divider{width:1px;height:20px;background:var(--border)}.floating-btn{background:transparent;border:none;color:var(--text-main);cursor:pointer;padding:6px 12px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;display:flex;align-items:center;gap:6px;transition:var(--transition)}.floating-btn:hover:not(:disabled){background:var(--bg-glass-active);color:#fff}.floating-btn:disabled{opacity:.3;cursor:not-allowed}.page-indicator{font-size:.85rem;font-weight:600;color:var(--text-main)}.canvas-wrap{position:relative;background:#1e293b;border-radius:var(--radius-md);border:1px solid var(--border);box-shadow:var(--shadow-lg);padding:16px;transition:var(--transition);display:flex;align-items:center;justify-content:center;margin:auto}.canvas-wrap.is-dragging{border-color:var(--primary);box-shadow:0 0 25px #6366f140;transform:scale(1.01)}.canvas-stack{position:relative;background:#fff;box-shadow:0 10px 30px #00000080;border-radius:4px;overflow:hidden}#pdf-canvas,#overlay-canvas{display:block}#overlay-canvas{position:absolute;inset:0;pointer-events:auto}.empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;pointer-events:none;z-index:5}.empty-icon{width:64px;height:64px;border-radius:var(--radius-lg);background:#ffffff05;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:var(--text-muted)}.empty-text{font-size:1rem;color:var(--text-muted);font-weight:500;max-width:280px}.empty.is-hidden{display:none}.sidebar-right{background-color:var(--bg-panel);border-left:1px solid var(--border);padding:24px;display:flex;flex-direction:column;gap:28px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow-y:auto}.pricing-card{border-radius:var(--radius-md);padding:20px;background:linear-gradient(135deg,#6366f126,#f43f5e14);border:1px solid rgba(99,102,241,.25);display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}.pricing-card:before{content:"PRO";position:absolute;top:-10px;right:-15px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-size:.6rem;font-weight:800;padding:18px 20px 4px;transform:rotate(45deg);letter-spacing:.1em}.pricing-title{font-weight:700;font-size:1.1rem;background:linear-gradient(to right,#fff,#f43f5e);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.pricing-desc{font-size:.8rem;color:var(--text-muted)}.upgrade-btn{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border:none;border-radius:var(--radius-sm);padding:10px 16px;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);box-shadow:0 4px 15px #6366f14d}.upgrade-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #6366f173,0 0 10px #f43f5e33}.pricing-status{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.85rem}.pricing-status.premium{color:var(--success)}.pricing-status.free{color:var(--warning)}.status-dot{width:8px;height:8px;border-radius:var(--radius-round)}.premium .status-dot{background-color:var(--success);box-shadow:0 0 8px var(--success)}.free .status-dot{background-color:var(--warning);box-shadow:0 0 8px var(--warning)}.panel-section{display:flex;flex-direction:column;gap:12px}.section-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:600}.btn-group{display:flex;flex-direction:column;gap:10px}.btn{background:var(--bg-glass);border:1px solid var(--border);color:var(--text-main);padding:12px 18px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:var(--transition);position:relative;overflow:hidden}.btn:hover:not(:disabled){background:var(--bg-glass-active);border-color:#ffffff26}.btn:disabled{opacity:.3;cursor:not-allowed}.btn--primary{background:var(--primary);border:none;color:#fff}.btn--primary:hover:not(:disabled){background:var(--primary-hover)}.btn--accent{background:var(--accent);border:none;color:#fff}.btn--accent:hover:not(:disabled){background:var(--accent-hover)}.file-upload{position:relative;cursor:pointer}.file-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.property-panel{background:#0003;border-radius:var(--radius-md);border:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:16px}.property-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.property-label{font-size:.85rem;font-weight:500;color:var(--text-main)}.property-input{background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;color:#fff;font-size:.85rem;outline:none;width:120px;transition:var(--transition)}.property-input:focus{border-color:var(--primary)}.slider-container{display:flex;flex-direction:column;gap:8px;width:100%}.slider-label-wrap{display:flex;justify-content:space-between;align-items:center}.slider-val{font-size:.85rem;font-family:Fira Code,monospace;font-weight:600}input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:var(--border);border-radius:var(--radius-round);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:var(--radius-round);background:var(--primary);cursor:pointer;transition:var(--transition)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25);box-shadow:0 0 10px #6366f180}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--border);transition:.3s;border-radius:var(--radius-round)}.slider:before{position:absolute;content:"";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.3s;border-radius:var(--radius-round)}input:checked+.slider{background-color:var(--primary)}input:checked+.slider:before{transform:translate(20px)}.premium-locked{display:flex;align-items:center;gap:6px;font-size:.7rem;color:var(--accent);font-weight:700;background:#f43f5e1a;padding:2px 8px;border-radius:var(--radius-round);border:1px solid rgba(244,63,94,.2)}.locked-overlay{opacity:.4;pointer-events:none}.status-bar{grid-column:span 3;background:var(--bg-dark);border-top:1px solid var(--border);padding:6px 20px;font-size:.75rem;color:var(--text-muted);display:flex;justify-content:space-between;align-items:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10}.status-info{display:flex;align-items:center;gap:12px}.modal-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:999}.modal-overlay.active{opacity:1;pointer-events:auto}.modal-box{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--radius-lg);width:90%;max-width:480px;padding:32px;box-shadow:var(--shadow-lg),var(--shadow-glow);transform:translateY(20px);transition:transform .3s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:24px}.modal-overlay.active .modal-box{transform:translateY(0)}.modal-header{display:flex;justify-content:space-between;align-items:center}.modal-title{font-size:1.25rem;font-weight:700;color:#fff}.modal-close{background:transparent;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;transition:var(--transition)}.modal-close:hover{color:#fff}.stripe-form{display:flex;flex-direction:column;gap:16px}.stripe-row{display:flex;flex-direction:column;gap:8px}.stripe-row label{font-size:.8rem;font-weight:500;color:var(--text-muted)}.stripe-input-group{position:relative}.stripe-input{width:100%;background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;color:#fff;font-size:.95rem;outline:none;font-family:Fira Code,monospace;transition:var(--transition)}.stripe-input:focus{border-color:var(--primary);box-shadow:0 0 10px #6366f133}.stripe-input-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.stripe-badge{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.75rem;color:var(--text-muted);background:var(--bg-glass);padding:8px;border-radius:var(--radius-sm)}.stripe-price{text-align:center;font-size:2rem;font-weight:800;margin:10px 0;background:linear-gradient(to right,#ffffff,var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.project-list-scroll{max-height:250px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px}.project-item{display:flex;justify-content:space-between;align-items:center;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;cursor:pointer;transition:var(--transition)}.project-item:hover{background:var(--bg-glass-active);border-color:var(--primary)}.project-meta{display:flex;flex-direction:column;gap:4px}.project-name{font-size:.9rem;font-weight:600;color:#fff}.project-date{font-size:.75rem;color:var(--text-muted)}.project-delete-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:var(--transition)}.project-delete-btn:hover{color:var(--accent);background:#f43f5e1a}.save-dialog-form{display:flex;flex-direction:column;gap:16px}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.15);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast-container{position:fixed;bottom:40px;right:40px;z-index:1000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.toast{background:var(--bg-dark);border:1px solid var(--border);border-left:4px solid var(--primary);border-radius:var(--radius-sm);padding:12px 20px;color:#fff;font-size:.85rem;font-weight:500;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;transform:translateY(20px);opacity:0;animation:slideIn .3s forwards cubic-bezier(.16,1,.3,1);pointer-events:auto}.toast.toast--success{border-left-color:var(--success)}.toast.toast--error{border-left-color:var(--accent)}@keyframes slideIn{to{transform:translateY(0);opacity:1}}@media(max-width:1024px){.app-container{grid-template-columns:200px 1fr 280px}}@media(max-width:768px){.app-container{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;overflow-y:auto;height:auto}.sidebar-left,.sidebar-right{display:none}.stage{height:calc(100vh - 100px)}}