.sync-viz{display:flex;flex-direction:column;background:var(--color-bg);border-radius:var(--radius-md);overflow:visible;min-height:540px}.sync-viz__toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--color-border);flex-shrink:0;flex-wrap:wrap;gap:8px}.sync-viz__toolbar-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.sync-viz__title{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-purple)}.sync-viz__mode-tabs{display:flex;gap:6px}.sync-viz__mode-btn{font-family:var(--font-mono);font-size:.65rem;padding:5px 14px;border-radius:4px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);letter-spacing:.08em;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.25)}.sync-viz__mode-btn:hover{border-color:var(--color-purple);color:var(--color-purple);transform:translateY(-1px);box-shadow:0 0 0 2px rgba(108,99,255,.2)}.sync-viz__mode-btn:active{transform:translateY(0);box-shadow:none}.sync-viz__mode-btn--active{border-color:var(--color-purple);color:var(--color-purple);background:rgba(108,99,255,.14);box-shadow:0 0 0 2px rgba(108,99,255,.25),inset 0 1px 2px rgba(0,0,0,.2);font-weight:700}.sync-viz__mode-btn:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.sync-viz__mode-hint{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;color:var(--color-text-muted);opacity:.7;white-space:nowrap}.sync-viz__speed{display:flex;align-items:center;gap:8px}.sync-viz__speed-label{font-family:var(--font-mono);font-size:.6rem;color:var(--color-text-muted);letter-spacing:.08em}.sync-viz__speed-btn{font-family:var(--font-mono);font-size:.6rem;padding:4px 10px;border:1px solid #2a2a3a;background:0 0;color:var(--color-text-muted);cursor:pointer;border-radius:3px;transition:all .2s ease}.sync-viz__speed-btn--active,.sync-viz__speed-btn:hover{border-color:var(--color-purple);color:var(--color-purple)}.sync-viz__speed-btn:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.sync-viz__canvas-wrap{flex:1;position:relative;min-height:420px}.sync-viz__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.sync-viz__log{padding:10px 24px;border-top:1px solid var(--color-border);font-family:var(--font-mono);font-size:.72rem;color:var(--color-purple);letter-spacing:.04em;min-height:56px;display:flex;align-items:center;flex-shrink:0;line-height:1.6}.sync-viz__controls{display:flex;align-items:center;gap:10px;padding:12px 24px;border-top:1px solid rgba(108,99,255,.1);flex-shrink:0}.sync-viz__btn{font-family:var(--font-mono);font-size:.72rem;padding:8px 20px;border:1px solid #2a2a3a;background:0 0;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all .2s ease;letter-spacing:.06em}.sync-viz__btn:hover{border-color:var(--color-purple);color:var(--color-purple)}.sync-viz__btn--primary{border-color:var(--color-purple);color:var(--color-purple)}.sync-viz__btn--primary:hover{background:var(--color-purple);color:#0f0f1a}.sync-viz__btn:disabled{opacity:.35;cursor:not-allowed}