*{box-sizing:border-box;margin:0;padding:0}body,html,#root{width:100%;height:100%;overflow:hidden;background-color:#090d14;color:#f1f5f9;font-family:IBM Plex Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.app-container{display:flex;flex-direction:column;height:100vh}.navbar{height:60px;background-color:#0f172a;border-bottom:1px solid #1e293b;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;gap:1.5rem;z-index:10}.navbar-left,.navbar-right{display:flex;align-items:center;gap:1rem}.brand{display:flex;align-items:center;gap:.6rem;margin-right:.5rem}.logo-badge{background:linear-gradient(135deg,#0284c7,#38bdf8);color:#fff;font-size:1rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 0 12px #38bdf859}.navbar h2{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:#f8fafc}.shape-picker-group{display:flex;align-items:center;gap:.5rem}.search-input{background:#090d14;color:#f8fafc;border:1px solid #334155;padding:7px 12px;border-radius:6px;font-size:.85rem;font-family:IBM Plex Sans,sans-serif;width:140px;outline:none;transition:all .2s}.search-input:focus{border-color:#38bdf8;width:170px}.shape-select{background:#1e293b;color:#f8fafc;border:1px solid #334155;padding:7px 12px;border-radius:6px;outline:none;cursor:pointer;font-size:.85rem;font-family:IBM Plex Sans,sans-serif}.action-btn{border:none;font-size:.85rem;font-weight:600;font-family:IBM Plex Sans,sans-serif;padding:7px 14px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s ease-in-out}.fresh-btn{background:#10b981;color:#fff;font-size:1.1rem;padding:3px 12px}.fresh-btn:hover{background:#059669;transform:scale(1.05)}.claim-trigger-btn{background:#090d14;color:#38bdf8;border:1px solid #0284c7}.claim-trigger-btn:hover:not(:disabled){background:#0284c7;color:#fff;box-shadow:0 0 14px #38bdf866;transform:translateY(-1px)}.claim-trigger-btn:disabled{background:#0f172a;color:#475569;border-color:#1e293b;cursor:not-allowed;opacity:.6}.export-buttons{display:flex;gap:.5rem}.export-buttons button{background:#1e293b;color:#cbd5e1;border:1px solid #334155;padding:7px 12px;border-radius:6px;font-size:.85rem;font-family:IBM Plex Sans,sans-serif;font-weight:500;cursor:pointer;transition:all .2s}.export-buttons button:hover{background:#334155;color:#fff}.workspace{display:flex;flex:1;height:calc(100vh - 60px);position:relative;overflow:hidden}.editor-column{height:100%;background:#0d121c;flex-shrink:0;display:flex;flex-direction:column;position:relative}.editor-panel{flex:1;display:flex;flex-direction:column;position:relative;min-height:0}.panel-header{padding:8px 16px;background:#090d14;border-bottom:1px solid #1e293b;font-size:.75rem;letter-spacing:.05em;color:#64748b;font-family:IBM Plex Mono,monospace}.panel-header code{color:#38bdf8;font-family:IBM Plex Mono,monospace}.monaco-wrapper{flex:1;height:100%;min-height:0}.error-banner{position:absolute;bottom:0;left:0;right:0;background:#dc2626e6;color:#fee2e2;padding:8px 14px;font-size:.8rem;font-family:IBM Plex Mono,monospace;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10}.resizer-handle{width:8px;background:#0f172a;border-left:1px solid #1e293b;border-right:1px solid #1e293b;cursor:col-resize;display:flex;align-items:center;justify-content:center;transition:background .15s;flex-shrink:0;z-index:5}.resizer-handle:hover{background:#1e293b}.resizer-line{width:2px;height:32px;background:#475569;border-radius:2px}.resizer-handle:hover .resizer-line{background:#38bdf8}.viewport-wrapper{flex:1;height:100%;position:relative;min-width:0}.viewport-wrapper .viewport-container{width:100%;height:100%}.author-tag{position:absolute;top:20px;left:20px;background:#0f172ad9;border:1px solid #334155;color:#f8fafc;padding:6px 14px;border-radius:20px;font-size:.8rem;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.author-tag strong{color:#38bdf8}.status-indicator{position:absolute;top:20px;right:20px;padding:6px 14px;border-radius:20px;font-size:.8rem;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 14px #00000059}.status-indicator.ready{background:#10b98126;border:1px solid #10b981;color:#6ee7b7}.status-indicator.duplicate_preset,.status-indicator.duplicate_public{background:#f59e0b26;border:1px solid #f59e0b;color:#fcd34d}.status-indicator.empty{background:#0f172ad9;border:1px dashed #475569;color:#94a3b8}.status-indicator.error{background:#ef444426;border:1px solid #ef4444;color:#fca5a5}.right-dock{width:56px;height:100%;background:#0f172a;border-left:1px solid #1e293b;display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:16px;flex-shrink:0;z-index:5}.dock-item{display:flex;flex-direction:column;align-items:center;gap:8px}.dock-label{font-family:IBM Plex Mono,monospace;font-size:.65rem;letter-spacing:.05em;font-weight:600;color:#64748b}.dock-label-sub{font-family:IBM Plex Mono,monospace;font-size:.6rem;color:#64748b}.dock-badge{font-family:IBM Plex Mono,monospace;font-size:.7rem;color:#38bdf8;background:#090d14;border:1px solid #1e293b;padding:2px 4px;border-radius:4px}.vertical-slider-container{height:130px;width:24px;display:flex;align-items:center;justify-content:center}.vertical-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:120px;height:4px;background:#1e293b;border-radius:4px;outline:none;transform:rotate(-90deg);cursor:pointer}.vertical-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#38bdf8;border-radius:50%;cursor:pointer;box-shadow:0 0 8px #38bdf880;transition:transform .15s}.vertical-slider::-webkit-slider-thumb:hover{transform:scale(1.25)}.dock-divider{width:24px;height:1px;background:#1e293b}.dock-color-wrapper{width:28px;height:28px;border-radius:50%;border:1px solid #334155;overflow:hidden;cursor:pointer;transition:border-color .2s}.dock-color-wrapper:hover{border-color:#38bdf8}.dock-color-picker{width:150%;height:150%;transform:translate(-15%,-15%);cursor:pointer;background:none;border:none}.dock-btn-icon{width:32px;height:32px;background:#090d14;border:1px solid #334155;color:#94a3b8;border-radius:6px;font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.dock-btn-icon:hover{background:#1e293b;color:#f8fafc;border-color:#475569}.dock-btn-icon.active{background:#0284c7;color:#fff;border-color:#38bdf8;box-shadow:0 0 10px #38bdf866}.setting-box{display:flex;flex-direction:column;gap:8px}.setting-header-row{display:flex;align-items:center;justify-content:space-between}.setting-box label{font-size:.8rem;color:#94a3b8;font-weight:500}.setting-badge{font-family:IBM Plex Mono,monospace;font-size:.8rem;color:#38bdf8;background:#1e293b;padding:2px 6px;border-radius:4px}.setting-box input[type=range]{width:100%;accent-color:#38bdf8;cursor:pointer}.setting-caption{font-size:.75rem;color:#64748b}.color-row{display:flex;align-items:center;gap:10px}.color-row input[type=color]{background:transparent;border:1px solid #334155;border-radius:6px;cursor:pointer;width:36px;height:36px;padding:0}.color-hex{font-family:IBM Plex Mono,monospace;font-size:.85rem;color:#f1f5f9}.toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;color:#f1f5f9!important;font-size:.85rem!important}.toggle-label input[type=checkbox]{accent-color:#38bdf8;width:16px;height:16px;cursor:pointer}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#0f172a;border:1px solid #1e293b;border-radius:12px;width:90%;max-width:440px;padding:24px;color:#f8fafc;box-shadow:0 20px 30px -10px #0009}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.modal-header h3{font-size:1.15rem;font-weight:600}.close-modal-btn{background:none;border:none;color:#94a3b8;font-size:1.2rem;cursor:pointer}.modal-subtitle{font-size:.85rem;color:#94a3b8;margin-bottom:18px;line-height:1.5}.modal-error-banner{background:#dc262626;border:1px solid #ef4444;color:#fca5a5;padding:8px 12px;border-radius:6px;font-size:.8rem;margin-bottom:14px}.form-group{margin-bottom:14px}.form-group label{display:block;font-size:.85rem;color:#cbd5e1;margin-bottom:6px}.form-group input{width:100%;background:#090d14;border:1px solid #334155;color:#f8fafc;padding:9px 12px;border-radius:6px;outline:none;font-size:.9rem;font-family:IBM Plex Sans,sans-serif}.form-group input:focus{border-color:#38bdf8}.modal-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:20px}.btn-cancel{background:transparent;color:#94a3b8;border:1px solid #334155;padding:7px 16px;border-radius:6px;font-size:.85rem;font-family:IBM Plex Sans,sans-serif;cursor:pointer}.btn-cancel:hover{background:#1e293b;color:#f1f5f9}.btn-claim{background:#0284c7;color:#fff;border:1px solid #38bdf8;padding:7px 18px;border-radius:6px;font-size:.85rem;font-weight:600;font-family:IBM Plex Sans,sans-serif;cursor:pointer;transition:all .2s ease-in-out}.btn-claim:hover:not(:disabled){background:#0369a1;box-shadow:0 0 12px #38bdf866}.btn-claim:disabled{background:#1e293b;color:#64748b;border-color:#334155;cursor:not-allowed;opacity:.7}