.top-nav{position:fixed;top:0;left:0;right:0;height:52px;background:#0f024a;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;z-index:200;gap:1rem}.top-nav-brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}.top-nav-logo-mark{width:22px;height:22px;flex-shrink:0}.top-nav-wordmark{font-size:.95rem;font-weight:700;color:#fff;letter-spacing:-.01em}.top-nav-tabs{display:flex;align-items:center;gap:.125rem}.top-nav-tab{position:relative;background:transparent;border:none;border-radius:6px;padding:.35rem .75rem;font-size:.85rem;font-weight:500;color:#ffffff8c;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;display:flex;align-items:center;gap:.4rem}.top-nav-tab:hover:not(.top-nav-tab--disabled){background:#ffffff14;color:#ffffffe6}.top-nav-tab--active{background:#ffffff1f;color:#fff;font-weight:600}.top-nav-tab--disabled{color:#ffffff40;cursor:not-allowed}.top-nav-soon{font-size:.6rem;font-weight:700;background:#ffffff1a;color:#ffffff59;border-radius:99px;padding:.1rem .4rem;letter-spacing:.04em;text-transform:uppercase}.tab-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--cf-tooltip-bg, #08002a);color:var(--cf-text, #d8e4fe);font-size:.72rem;font-weight:500;padding:.3rem .65rem;border-radius:5px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:10}.tab-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--cf-tooltip-bg, #08002a)}.top-nav-tab--disabled:hover .tab-tooltip{opacity:1}.instruction-bar{position:fixed;top:52px;left:0;right:0;z-index:190;height:34px;display:flex;align-items:center;padding:0 1.25rem;background:#130a38;border-bottom:1px solid rgba(255,255,255,.08);gap:.75rem}.instruction-text{flex:1;font-size:.75rem;color:#ffffff8c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.instruction-dismiss{flex-shrink:0;background:none;border:none;color:#fff6;cursor:pointer;font-size:.8rem;line-height:1;padding:.2rem .3rem;border-radius:3px;transition:color .15s}.instruction-dismiss:hover{color:#ffffffd9}.left-panel{width:320px;flex-shrink:0;border-right:1px solid #e5e7eb;overflow-y:auto;background:#fafafa}.left-panel-inner{display:flex;flex-direction:column;min-height:100%}.panel-section{padding:1rem 1.125rem .75rem;border-bottom:1px solid #f0f0f0}.panel-section--toggles{display:flex;flex-direction:column;gap:.75rem}.panel-section-label{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#9ca3af;margin-bottom:.6rem}.toggle-group{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.toggle-label{font-size:.82rem;font-weight:600;color:#374151;flex-shrink:0}.segmented{display:flex;background:#f3f4f6;border-radius:7px;padding:2px;gap:2px}.seg-btn{background:transparent;border:none;border-radius:5px;padding:.3rem .75rem;font-size:.8rem;font-weight:500;color:#6b7280;cursor:pointer;transition:background .12s,color .12s,box-shadow .12s;white-space:nowrap}.seg-btn:hover{color:#374151}.seg-btn--active{background:#fff;color:#111827;font-weight:600;box-shadow:0 1px 3px #0000001a}.reset-row{display:flex;align-items:center}.reset-btn{background:transparent;border:1px solid #e5e7eb;border-radius:6px;padding:.3rem .75rem;font-size:.8rem;font-weight:500;color:#6b7280;cursor:pointer;transition:border-color .12s,color .12s,background .12s}.reset-btn:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2}.reset-confirm{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.reset-confirm-text{font-size:.78rem;color:#374151;font-weight:500}.reset-action-btn{border:none;border-radius:5px;padding:.25rem .6rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:opacity .12s}.reset-action-btn--confirm{background:#dc2626;color:#fff}.reset-action-btn--cancel{background:#f3f4f6;color:#374151}.reset-action-btn:hover{opacity:.85}.panel-schema{flex:1;padding:.25rem 0}.schema-group{padding:.75rem 1.125rem .5rem;border-bottom:1px solid #f0f0f0}.schema-group-label{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#d1d5db;margin-bottom:.5rem}.color-row{display:flex;gap:.625rem;padding:.5rem 0;align-items:flex-start}.color-row--disabled{opacity:.4;pointer-events:none}.color-row+.color-row{border-top:1px solid #f5f5f5}.color-row-swatch-col{flex-shrink:0;padding-top:2px}.color-swatch-btn{display:block;width:32px;height:32px;border-radius:7px;border:2px solid rgba(0,0,0,.1);cursor:pointer;transition:border-color .12s,transform .1s;box-shadow:inset 0 0 0 1px #ffffff4d;padding:0}.color-swatch-btn:hover{border-color:#00000038;transform:scale(1.06)}.color-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}.color-row-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.color-row-label{font-size:.83rem;font-weight:600;color:#111827;line-height:1.3}.optional-check input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:#5b4cf6}.color-row-hint{font-size:.72rem;color:#9ca3af;line-height:1.3}.color-row-controls{display:flex;gap:.35rem;align-items:center;margin-top:.1rem}.hex-input{flex:1;min-width:0;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:5px;padding:.25rem .5rem;font-size:.78rem;font-family:Courier New,monospace;color:#374151;outline:none;transition:border-color .12s,background .12s}.hex-input:focus{border-color:#a78bfa;background:#fff}.copy-btn{flex-shrink:0;width:28px;height:28px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:background .12s,color .12s,border-color .12s}.copy-btn:hover{background:#ede9fe;border-color:#c4b5fd;color:#5b4cf6}.copy-btn--done{background:#d1fae5;border-color:#6ee7b7;color:#065f46}.copy-primary-btn{flex-shrink:0;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:5px;padding:.25rem .45rem;font-size:.7rem;font-weight:600;color:#6b7280;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}.copy-primary-btn:hover{background:#ede9fe;border-color:#c4b5fd;color:#5b4cf6}.picker-popup{background:#1a1a2e;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px;box-shadow:0 16px 48px #00000080;display:flex;flex-direction:column;gap:8px}.picker-swatches{display:flex;gap:6px;padding:2px}.picker-swatch{width:32px;height:32px;border-radius:6px;border:2px solid rgba(255,255,255,.12);cursor:pointer;transition:transform .1s,border-color .12s;padding:0;flex:1}.picker-swatch:hover{transform:scale(1.1);border-color:#fff6}.palette-slots-section{border-bottom:1px solid #f0f0f0}.palette-slot{display:flex;align-items:center;gap:.5rem;padding:.35rem 0}.palette-slot+.palette-slot{border-top:1px solid #f5f5f5}.slot-info{flex:1;min-width:0}.slot-dots{display:flex;gap:4px}.slot-dot{width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,.07);display:block;flex-shrink:0}.slot-empty{font-size:.72rem;color:#d1d5db;font-style:italic}.slot-btns{display:flex;gap:.3rem;flex-shrink:0}.slot-btn{border:1px solid #e5e7eb;border-radius:5px;padding:.22rem .55rem;font-size:.72rem;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s}.slot-save{background:#f3f4f6;color:#374151}.slot-save:hover{background:#ede9fe;border-color:#c4b5fd;color:#5b4cf6}.slot-load{background:#f3f4f6;color:#374151}.slot-load:hover:not(:disabled){background:#d1fae5;border-color:#6ee7b7;color:#065f46}.slot-load:disabled{opacity:.35;cursor:not-allowed}.export-strip{padding:1rem 1.125rem;display:flex;gap:.625rem;border-top:1px solid #e5e7eb;background:#fafafa;position:sticky;bottom:0}.export-btn{flex:1;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:7px;padding:.55rem .75rem;font-size:.82rem;font-weight:600;color:#374151;cursor:pointer;transition:background .12s,border-color .12s,color .12s}.export-btn:hover{background:#ede9fe;border-color:#c4b5fd;color:#5b4cf6}.export-btn--done{background:#d1fae5;border-color:#6ee7b7;color:#065f46}.preview-pane{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.preview-tab-bar{flex-shrink:0;display:flex;gap:.125rem;padding:.5rem 1rem 0;background:#f1f3f5;border-bottom:1px solid #e5e7eb}.preview-tab{background:transparent;border:none;border-bottom:2px solid transparent;padding:.4rem .875rem;font-size:.83rem;font-weight:500;color:#6b7280;cursor:pointer;border-radius:5px 5px 0 0;transition:color .12s,background .12s;margin-bottom:-1px}.preview-tab:hover{color:#374151;background:#0000000a}.preview-tab--active{color:#111827;font-weight:600;background:#fff;border-color:#e5e7eb;border-bottom-color:#fff}.preview-chrome{flex:1;background:#e8eaed;overflow:auto;display:flex;flex-direction:column}.preview-window{flex:1;background:#fff;overflow:hidden;display:flex;flex-direction:column;min-height:600px}.preview-window>*{flex:1;overflow-y:auto}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;z-index:900;display:flex;align-items:center;justify-content:center;padding:1rem}.modal-box{background:#12102a;border:1px solid rgba(255,255,255,.1);border-radius:12px;width:580px;max-width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 24px 72px #00000080}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}.modal-title{font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.01em}.modal-close{background:none;border:none;color:#ffffff73;font-size:1rem;cursor:pointer;padding:.2rem .35rem;border-radius:4px;transition:color .15s;line-height:1}.modal-close:hover{color:#ffffffe6}.modal-css{flex:1;overflow:auto;padding:1.25rem;font-family:Courier New,Consolas,monospace;font-size:.8rem;line-height:1.65;color:#b8d0f0;margin:0;white-space:pre;min-height:0}.modal-footer{padding:.875rem 1.25rem;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:flex-end;flex-shrink:0}.modal-copy-btn{background:var(--cf-primary, #1d2965);color:#fff;border:none;border-radius:7px;padding:.55rem 1.25rem;font-size:.88rem;font-weight:600;cursor:pointer;transition:opacity .15s}.modal-copy-btn:hover{opacity:.85}.modal-copy-btn--done{background:#065f46}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;background:#f1f3f5;color:#111827}.app-root{display:flex;flex-direction:column;height:100%;overflow:hidden}.app-body{display:flex;flex:1;min-height:0}.preview-loading{display:flex;align-items:center;justify-content:center;height:100%;font-size:.88rem;color:#9ca3af}.cf-logo-text{font-family:DM Sans,sans-serif;font-weight:700}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:99px}::-webkit-scrollbar-thumb:hover{background:#9ca3af}