:root{--bg:#f8f9fa;--surface:#fff;--surface2:#f0f3fa;--border:#e0e3eb;--text:#131722;--text-muted:#616a76;--accent:#2962ff;--accent-text:#1e53e0;--accent-hover:#1e53e5;--green:#089981;--red:#f23645;--code-bg:#f0f3fa;--radius:8px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}img{height:auto}body{background:var(--bg);color:var(--text);height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,sans-serif;line-height:1.5;overflow:hidden}.header{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:12px;height:56px;padding:12px 24px;display:flex}.header img{border-radius:6px;width:32px;height:32px}.header .brand{color:var(--text);font-size:18px;font-weight:700}.header .brand-sub{color:var(--text-muted);margin-left:4px;font-size:14px;font-weight:400}.hamburger{border:1px solid var(--border);cursor:pointer;width:36px;height:36px;color:var(--text);background:0 0;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;margin-right:4px;font-size:20px;display:none}.app-shell{height:calc(100vh - 56px);display:flex}.sidebar{background:var(--surface);border-right:1px solid var(--border);flex-shrink:0;width:240px;padding:16px 0;overflow-y:auto}.sidebar-category{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-top:8px;padding:8px 20px 4px;font-size:10px;font-weight:600}.sidebar-category:first-child{margin-top:0}.sidebar-item{color:var(--text-muted);cursor:pointer;border-left:3px solid #0000;padding:8px 20px 8px 28px;font-size:13px;text-decoration:none;transition:all .15s;display:block}.sidebar-item:hover{color:var(--text);background:#2962ff0f}.sidebar-item.active{color:var(--accent-text);border-left-color:var(--accent);background:#2962ff14;font-weight:600}.main{background:var(--bg);flex:1;padding:32px 40px;overflow-y:auto}.page-title{margin-bottom:6px;font-size:26px;font-weight:700}.page-desc{color:var(--text-muted);max-width:640px;margin-bottom:24px;font-size:14px}.preview-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px;overflow:hidden;box-shadow:0 1px 3px #0000000a}.preview-toolbar{border-bottom:1px solid var(--border);color:var(--text-muted);justify-content:space-between;align-items:center;padding:10px 16px;font-size:12px;display:flex}.preview-toolbar .toolbar-label{text-transform:uppercase;letter-spacing:.5px;font-weight:600}.dim-badge{color:var(--text-muted);background:var(--surface2);border:1px solid var(--border);font-variant-numeric:tabular-nums;letter-spacing:.3px;border-radius:6px;padding:3px 10px;font-size:12px}.toolbar-dims{align-items:center;gap:4px;display:flex}.toolbar-dim-input{text-align:center;border:1px solid var(--border);background:var(--surface2);width:58px;color:var(--text);font-variant-numeric:tabular-nums;border-radius:4px;outline:none;padding:3px 6px;font-size:12px}.toolbar-dim-input:focus{border-color:var(--accent)}.toolbar-dim-sep,.toolbar-dim-unit{color:var(--text-muted);font-size:12px}.preview-viewport{min-height:96px;transition:height .2s;position:relative;overflow:hidden}.preview-iframe{border:none;width:100%;display:block}.config-row{gap:24px;display:flex}.config-col{flex:1;min-width:0}.config-col-code{flex:1.2}.embed-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 3px #0000000a}.embed-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.embed-header span{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-size:12px;font-weight:600}.btn-copy{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:4px 14px;font-size:12px;transition:background .15s}.btn-copy:hover{background:var(--accent-hover)}.embed-code{background:var(--code-bg);white-space:pre;color:var(--text-muted);min-height:320px;max-height:320px;padding:16px;font-family:SF Mono,Fira Code,Consolas,monospace;font-size:12px;line-height:1.6;overflow:auto}.embed-code .tag{color:#0550ae}.embed-code .attr{color:#953800}.embed-code .str{color:#0a3069}.embed-code .cmt{color:#5b636d}.settings-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-height:320px;padding:16px;box-shadow:0 1px 3px #0000000a}.settings-title{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:16px;font-size:12px;font-weight:600}.setting-group{border-bottom:1px solid var(--border);margin-bottom:16px;padding-bottom:16px}.setting-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.setting-group-title,.setting-group-label{color:var(--text);cursor:pointer;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;font-weight:600;display:flex}.setting-group-title .arrow,.setting-group-label .arrow{font-size:10px;transition:transform .2s}.setting-group.collapsed .setting-group-content,.setting-group.collapsed .setting-group-body{display:none}.setting-group.collapsed .arrow{transform:rotate(-90deg)}.setting-row{justify-content:space-between;align-items:center;padding:6px 0;display:flex}.setting-label{color:var(--text);font-size:13px}.toggle{background:var(--border);cursor:pointer;border-radius:11px;flex-shrink:0;width:40px;height:22px;transition:background .2s;position:relative}.toggle:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}.toggle.on{background:var(--accent)}.toggle.on:after{transform:translate(18px)}.btn{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface2);color:var(--text);cursor:pointer;padding:6px 16px;font-size:13px;transition:all .15s}.btn:hover{border-color:var(--accent);color:var(--accent)}.btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.chip{border:1px solid var(--border);cursor:default;color:var(--text);background:var(--surface2);border-radius:16px;align-items:center;gap:6px;padding:5px 12px;font-size:12px;font-weight:500;transition:all .15s;display:inline-flex}.chip:hover{border-color:var(--accent)}.chip.active{border-color:var(--accent);color:var(--accent);background:#2962ff1a;font-weight:500}.chip .dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.chip .chip-logo{background:var(--surface);width:18px;min-width:18px;max-width:18px;height:18px;min-height:18px;max-height:18px;color:var(--text);box-sizing:border-box;border-radius:50%;flex:0 0 18px;justify-content:center;align-items:center;font-size:9px;font-weight:700;display:inline-flex;position:relative;overflow:hidden}.chip .chip-logo:before{content:attr(data-letter);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.chip .chip-logo img{object-fit:cover;border-radius:50%;width:18px;height:18px;display:block;position:absolute;inset:0}.chip .remove{cursor:pointer;color:var(--text-muted);margin-left:2px;font-size:14px;line-height:1}.chip .remove:hover{color:var(--red)}.chips{flex-wrap:wrap;gap:6px;max-height:140px;padding:4px 0;display:flex;overflow-y:auto}.add-symbol-btn{border:1px dashed var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:16px;margin-top:10px;padding:6px 14px;font-size:12px;display:inline-block}.add-symbol-btn:hover{border-color:var(--accent);color:var(--accent)}.btn-row{justify-content:flex-end;gap:8px;margin-top:16px;padding-top:16px;display:flex}.btn-reset{background:0 0}.btn-apply{background:var(--accent);color:#fff;border:1px solid var(--accent)}.btn-apply:hover,.btn-apply:focus,.btn-apply:active{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;outline:none}.setting-select{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:4px;outline:none;padding:4px 8px;font-size:12px}.setting-select:focus{border-color:var(--accent)}.setting-input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:4px;outline:none;width:100px;padding:4px 8px;font-size:12px}.setting-input:focus{border-color:var(--accent)}.tk-chip-row{border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:6px 0;display:flex}.mo-modal-overlay{z-index:10000;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.mo-modal{background:#fff;border-radius:12px;min-width:340px;padding:24px 28px;box-shadow:0 8px 32px #0003}.mo-modal-title{color:#131722;margin-bottom:12px;font-size:18px;font-weight:700}.mo-modal-label{color:#616a76;margin-bottom:6px;font-size:13px}.mo-modal-input{border:2px solid var(--accent);color:#131722;border-radius:6px;outline:none;width:100%;margin-bottom:16px;padding:10px 12px;font-size:14px}.mo-modal-input:focus{border-color:var(--accent)}.mo-modal-buttons{justify-content:flex-end;gap:8px;display:flex}.mo-modal-btn{cursor:pointer;border:none;border-radius:6px;padding:8px 20px;font-size:13px;font-weight:500}.mo-modal-cancel{color:#131722;background:0 0}.mo-modal-cancel:hover{background:#f0f3fa}.mo-modal-save{background:var(--accent);color:#fff;opacity:.5}.mo-modal-save:hover{opacity:1}.sym-dropdown{background:var(--surface);border:1px solid var(--border);z-index:100;border-radius:6px;max-height:240px;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 4px 16px #0000001f}.sym-option{cursor:pointer;align-items:center;gap:8px;padding:8px 12px;font-size:13px;transition:background .1s;display:flex}.sym-option:hover{background:#2962ff0f}.sym-option-ticker{min-width:50px;font-weight:700}.sym-option-name{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}@media (width<=1024px){.sidebar{display:none}.sidebar.open{z-index:1000;width:260px;display:block;position:fixed;top:56px;bottom:0;left:0;box-shadow:4px 0 16px #00000026}.sidebar-overlay{z-index:999;background:#0000004d;display:none;position:fixed;inset:56px 0 0}.sidebar-overlay.open{display:block}.main{padding:24px 20px}.config-row{flex-direction:column}.hamburger{display:flex}}@media (width<=600px){.header{gap:8px;padding:10px 14px}.header .brand{font-size:16px}.main{padding:16px 12px}.page-title{font-size:20px}.page-desc{margin-bottom:16px;font-size:13px}.preview-toolbar{flex-wrap:wrap;gap:8px;padding:8px 12px}.toolbar-dim-input{width:48px}.embed-code{min-height:200px;max-height:200px;padding:12px;font-size:11px}.settings-panel{min-height:200px;padding:12px}.setting-row{flex-wrap:wrap;gap:6px}.setting-select,.setting-input{min-width:0;font-size:13px}.config-row{gap:16px}.sp-modal{border-radius:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh}.sp-filter-row{flex-wrap:wrap;gap:6px}.sp-tab{padding:5px 12px;font-size:11px}.mo-modal{width:calc(100vw - 32px);min-width:auto;padding:20px}}.sp-overlay{z-index:20000;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.sp-modal{background:var(--surface);border-radius:12px;flex-direction:column;width:640px;max-width:96vw;height:720px;max-height:92vh;display:flex;overflow:hidden;box-shadow:0 12px 40px #00000040}.sp-topbar{align-items:center;gap:8px;padding:14px 16px 10px;display:flex}.sp-back{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;padding:4px 8px;font-size:22px;line-height:1;transition:background .15s}.sp-back:hover{background:var(--surface2)}.sp-search-box{flex:1;align-items:center;display:flex;position:relative}.sp-search-icon{color:var(--text-muted);pointer-events:none;font-size:16px;position:absolute;left:14px}.sp-search{width:100%;color:var(--text);background:0 0;border:none;outline:none;padding:10px 14px 10px 40px;font-size:15px}.sp-search::placeholder{color:var(--text-muted)}.sp-search-clear{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:18px;display:none;position:absolute;right:8px}.sp-search-clear:hover{color:var(--text)}.sp-filter-row{border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:0 16px 12px;display:flex;position:relative}.sp-tab{letter-spacing:.5px;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:20px;padding:6px 16px;font-size:12px;font-weight:600;transition:all .2s}.sp-tab:hover{color:var(--text)}.sp-tab.active{color:#fff;background:#131722;border-color:#131722}.sp-market-btn{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:8px;align-items:center;gap:4px;margin-left:auto;padding:5px 8px;font-size:16px;line-height:1;display:inline-flex}.sp-market-btn:hover{border-color:var(--accent)}.sp-market-btn .arrow{color:var(--text-muted);font-size:10px}.sp-market-menu{background:var(--surface);border:1px solid var(--border);z-index:30;border-radius:10px;min-width:220px;margin-top:4px;padding:6px 0;display:none;position:absolute;top:100%;right:16px;box-shadow:0 8px 24px #0000001f}.sp-market-menu.open{display:block}.sp-market-item{cursor:pointer;color:var(--text);align-items:center;gap:12px;padding:10px 16px;font-size:14px;display:flex}.sp-market-item:hover{background:var(--surface2)}.sp-market-item .flag{font-size:18px;line-height:1}.sp-market-item .name{flex:1}.sp-market-item .check{color:#00897b;visibility:hidden;font-weight:700}.sp-market-item.selected .check{visibility:visible}.sp-body{flex:1;overflow-y:auto}.sp-section-label{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);align-items:center;gap:6px;padding:14px 16px 8px;font-size:11px;font-weight:600;display:flex}.sp-section-label svg{flex-shrink:0;width:14px;height:14px}.sp-popular{flex-wrap:wrap;gap:8px;padding:0 16px 8px;display:flex}.sp-popular-chip{background:var(--surface2);border:1px solid var(--border);cursor:pointer;color:var(--text);border-radius:20px;align-items:center;gap:6px;padding:5px 12px 5px 6px;font-size:12px;font-weight:600;transition:all .15s;display:inline-flex}.sp-popular-chip:hover{border-color:var(--accent);color:var(--accent)}.sp-chip-logo{background:var(--surface);width:22px;height:22px;color:var(--text);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:10px;font-weight:700;display:inline-flex;position:relative;overflow:hidden}.sp-chip-logo:before{content:attr(data-letter);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.sp-chip-logo img{object-fit:cover;border-radius:50%;width:100%;height:100%;position:relative}.sp-row{cursor:pointer;align-items:center;gap:12px;padding:10px 16px;transition:background .1s;display:flex}.sp-row:hover{background:var(--surface2)}.sp-row-logo{object-fit:cover;background:var(--surface2);border-radius:50%;flex-shrink:0;width:36px;height:36px}.sp-row-main{flex:1;min-width:0}.sp-row-top{align-items:center;gap:8px;display:flex}.sp-ticker{color:var(--text);font-size:14px;font-weight:600}.sp-badge{text-transform:uppercase;border-radius:4px;padding:1px 6px;font-size:9px;font-weight:700}.sp-name{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:12px;overflow:hidden}.sp-exchange{color:var(--text-muted);flex-shrink:0;font-size:11px}.sp-loading,.sp-empty{text-align:center;color:var(--text-muted);padding:48px 16px;font-size:13px}