:root{--bg-main:#0b0f17;--bg-sidebar:#0f1420;--bg-card:#171d2b;--bg-input:#1a202f;--border-color:#273142;--border-hover:#3b4c66;--accent-color:#38bdf8;--accent-hover:#0ea5e9;--accent-success:#10b981;--accent-danger:#f43f5e;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#475569;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", monospace;font-family:var(--font-sans);color:var(--text-primary);background-color:var(--bg-main);box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}body{margin:0;padding:0;overflow:hidden}*{box-sizing:border-box}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:var(--bg-sidebar)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app-container{width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{background-color:var(--bg-sidebar);border-right:1px solid var(--border-color);z-index:10;flex-direction:column;width:440px;min-width:440px;height:100%;display:flex;box-shadow:4px 0 24px #00000073}.sidebar-header{border-bottom:1px solid var(--border-color);background:linear-gradient(#131926 0%,#0f1420 100%);flex-shrink:0;padding:24px}.sidebar-header h1{font-family:var(--font-sans);color:var(--text-primary);letter-spacing:-.03em;align-items:center;gap:8px;margin:0 0 6px;font-size:1.25rem;font-weight:800;display:flex}.sidebar-header h1 span{color:var(--accent-color)}.sidebar-header p{color:var(--text-secondary);margin:0;font-size:.8rem;font-weight:400}.tabs-nav{border-bottom:1px solid var(--border-color);scrollbar-width:none;background-color:#0c101a;flex-shrink:0;display:flex;overflow-x:auto}.tabs-nav::-webkit-scrollbar{display:none}.tab-btn{min-width:80px;color:var(--text-secondary);cursor:pointer;white-space:nowrap;letter-spacing:.02em;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:14px 8px;font-size:.78rem;font-weight:600;transition:all .15s}.tab-btn:hover{color:var(--text-primary);background-color:#ffffff04}.tab-btn.active{color:var(--accent-color);border-bottom-color:var(--accent-color);background-color:#38bdf80a}.sidebar-scroll-container{flex-direction:column;height:100%;display:flex;overflow-y:auto}.settings-content{flex-direction:column;gap:28px;padding:24px;display:flex}.settings-section{flex-direction:column;gap:16px;animation:.2s cubic-bezier(.16,1,.3,1) fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}.section-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;margin:0;padding-bottom:8px;font-size:.85rem;font-weight:700;display:flex}.input-grid{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.input-group{flex-direction:column;gap:6px;display:flex}.input-group.full-width{grid-column:span 2}.input-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.02em;justify-content:space-between;font-size:.72rem;font-weight:600;display:flex}.input-unit{color:var(--text-muted);font-family:var(--font-mono);font-weight:400}.input-control{background-color:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px;outline:none;width:100%;padding:8px 12px;font-size:.85rem;transition:border-color .15s,box-shadow .15s}.input-control:focus{border-color:var(--accent-color);box-shadow:0 0 0 1px var(--accent-color)}.input-control[type=number]{font-family:var(--font-mono)}.range-container{align-items:center;gap:12px;display:flex}.range-slider{background:var(--bg-input);border:1px solid var(--border-color);-webkit-appearance:none;border-radius:2px;outline:none;flex:1;height:4px}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-color);border:2px solid var(--bg-input);cursor:pointer;width:14px;height:14px;box-shadow:0 0 0 1px var(--border-color);border-radius:50%;transition:background .15s,transform .1s}.range-slider::-webkit-slider-thumb:hover{background:var(--accent-hover);transform:scale(1.1)}.range-value{font-family:var(--font-mono);text-align:right;min-width:44px;color:var(--accent-color);font-size:.8rem;font-weight:600}.checkbox-label{color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;text-transform:uppercase;letter-spacing:.02em;align-items:center;gap:10px;padding:4px 0;font-size:.82rem;font-weight:600;display:flex}.checkbox-control{appearance:none;border:1px solid var(--border-color);background-color:var(--bg-input);cursor:pointer;border-radius:3px;place-content:center;width:16px;height:16px;transition:all .15s;display:grid}.checkbox-control:checked{background-color:var(--accent-color);border-color:var(--accent-color)}.checkbox-control:checked:before{content:"";background-color:var(--bg-main);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);width:8px;height:8px;transform:scale(1)}.sidebar-footer{border-top:1px solid var(--border-color);background-color:#0c101a;flex-direction:column;flex-shrink:0;gap:12px;padding:20px 24px;display:flex}.btn{cursor:pointer;text-transform:uppercase;letter-spacing:.04em;border:none;border-radius:4px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:.82rem;font-weight:700;text-decoration:none;transition:all .15s;display:inline-flex}.btn-primary{background-color:var(--accent-color);color:#0b0f17}.btn-primary:hover{background-color:var(--accent-hover);box-shadow:0 2px 10px #38bdf833}.btn-success{background-color:var(--accent-success);color:#0b0f17}.btn-success:hover{background-color:#059669;box-shadow:0 2px 10px #10b98133}.btn-danger{background-color:var(--accent-danger);color:#fff}.btn-danger:hover{background-color:#e11d48}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-color);background-color:#ffffff05}.btn-secondary:hover{border-color:var(--border-hover);background-color:#ffffff0f}.btn-sm{padding:6px 12px;font-size:.72rem}.cutout-list{flex-direction:column;gap:10px;margin-top:10px;display:flex}.cutout-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:4px;justify-content:space-between;align-items:center;padding:12px;animation:.15s fadeIn;display:flex}.cutout-card:hover{border-color:var(--border-hover)}.cutout-info{flex-direction:column;gap:4px;display:flex}.cutout-title{text-transform:uppercase;letter-spacing:.02em;align-items:center;gap:6px;font-size:.8rem;font-weight:700;display:flex}.cutout-details{font-family:var(--font-mono);color:var(--text-secondary);font-size:.7rem}.tag{text-transform:uppercase;font-size:.62rem;font-weight:700;font-family:var(--font-mono);border-radius:2px;padding:2px 6px}.tag-front{color:var(--accent-color);background:#38bdf81a;border:1px solid #38bdf833}.tag-back{color:#c084fc;background:#a78bfa1a;border:1px solid #a78bfa33}.tag-left{color:#fda4af;background:#f43f5e1a;border:1px solid #f43f5e33}.tag-right{color:#fde047;background:#fbbf241a;border:1px solid #fbbf2433}.cutout-form{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:4px;flex-direction:column;gap:14px;margin-top:8px;padding:16px;display:flex}.preview-pane{background-color:var(--bg-main);flex-direction:column;flex:1;height:100%;display:flex;position:relative}.canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.canvas-toolbar{z-index:5;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;bottom:24px;left:24px;right:24px}.toolbar-group{pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-color);background-color:#0f1420f2;border-radius:4px;align-items:center;gap:12px;padding:10px 16px;display:flex;box-shadow:0 4px 20px #00000080}.toolbar-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-right:4px;font-size:.7rem;font-weight:700}.color-dot{cursor:pointer;border:1px solid #0000;border-radius:2px;width:18px;height:18px;transition:all .15s}.color-dot:hover{transform:translateY(-1px)}.color-dot.active{border-color:var(--accent-color);box-shadow:0 0 0 1px var(--accent-color)}.warning-banner{z-index:5;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#f43f5ef2;border:1px solid #f43f5e66;border-radius:4px;align-items:center;gap:12px;padding:12px 16px;animation:.2s cubic-bezier(.16,1,.3,1) slideDown;display:flex;position:absolute;top:24px;left:24px;right:24px;box-shadow:0 4px 20px #f43f5e33}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.warning-icon{font-size:1.1rem;font-weight:700}.warning-text{text-transform:uppercase;letter-spacing:.02em;font-size:.8rem;font-weight:600}.stats-badge{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-color);color:var(--text-secondary);font-size:.72rem;font-family:var(--font-mono);z-index:4;background-color:#0f1420f2;border-radius:4px;flex-direction:column;gap:4px;padding:12px;display:flex;position:absolute;top:24px;right:24px;box-shadow:0 4px 20px #00000080}.stats-value{color:var(--accent-color);font-weight:700}.top-left-controls{z-index:5;pointer-events:none;align-items:center;gap:12px;display:flex;position:absolute;top:24px;left:24px}.top-left-controls>*{pointer-events:auto}.fab-settings-toggle{color:var(--text-primary);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-color);cursor:pointer;text-transform:uppercase;letter-spacing:.04em;background-color:#0f1420f2;border-radius:4px;align-items:center;gap:8px;padding:10px 14px;font-size:.75rem;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 4px 20px #00000080}.fab-settings-toggle:hover{background-color:var(--bg-input);border-color:var(--accent-color)}.fab-settings-toggle .text-show{display:none}.fab-settings-toggle .text-hide{display:inline}body.settings-collapsed .sidebar{display:none!important}body.settings-collapsed .preview-pane{width:100vw!important;height:100vh!important}body.settings-collapsed .fab-settings-toggle{background-color:var(--accent-color);border-color:var(--accent-color);color:#0b0f17}body.settings-collapsed .fab-settings-toggle .text-show{display:inline}body.settings-collapsed .fab-settings-toggle .text-hide{display:none}@media (width<=768px){.app-container{flex-direction:column-reverse;overflow:hidden}.sidebar{border-right:none;border-top:1px solid var(--border-color);width:100%;min-width:100%;height:40vh}.preview-pane{width:100%;height:60vh;position:relative}.stats-badge{max-width:160px;padding:8px;font-size:.65rem;top:12px;right:12px}.stats-badge div{display:none}.stats-badge div:last-child{display:block!important}.warning-banner{padding:8px 12px;top:12px;left:12px;right:12px}.top-left-controls{gap:8px;top:12px;left:12px}.fab-settings-toggle{padding:8px 10px;font-size:.7rem}.canvas-toolbar{flex-direction:column;align-items:stretch;gap:8px;bottom:12px;left:12px;right:12px}.toolbar-group{border-radius:4px;justify-content:space-between;width:100%;padding:8px 12px}.color-dot{width:22px;height:22px}}.fab-language-selector{display:inline-flex}.fab-language-selector select{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-color);cursor:pointer;text-transform:uppercase;letter-spacing:.04em;background-color:#0f1420f2;border-radius:4px;outline:none;padding:8px 12px;font-size:.8rem;font-weight:700;transition:all .2s;box-shadow:0 4px 20px #00000080}.fab-language-selector select:hover{border-color:var(--accent-color);background-color:#1a202f}@media (width<=768px){.fab-language-selector select{padding:6px 10px;font-size:.7rem}}@keyframes spin{to{transform:rotate(360deg)}}