.body-chart-v2 { --bcv2-line:var(--border,#e4ddec); --bcv2-soft:var(--theme-soft,#eee8fa); --bcv2-ink:var(--tx,#29223f); color:var(--bcv2-ink); min-width:0; }
.body-chart-v2 .bcv2-workspace { display:grid; gap:18px; min-width:0; }
.body-chart-v2 .bcv2-heading,.body-chart-v2 .bcv2-editor>header { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.body-chart-v2 .bcv2-heading>div { display:grid; gap:4px; }
.body-chart-v2 .bcv2-heading strong { font-size:18px; }
.body-chart-v2 small { color:var(--tx-3,#6e647e); font-size:12px; line-height:1.45; }
.body-chart-v2 .bcv2-candidate { border:1px solid var(--bcv2-line); border-radius:999px; padding:6px 10px; font-size:11px; font-weight:650; color:var(--tx-3,#6e647e); background:var(--surface,#fff); }
.body-chart-v2 .bcv2-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.body-chart-v2 label { display:grid; gap:7px; min-width:0; font-size:13px; font-weight:650; }
.body-chart-v2 :is(input,select,textarea) { box-sizing:border-box; width:100%; min-width:0; min-height:44px; border:1px solid var(--bcv2-line); border-radius:13px; padding:10px 12px; font:inherit; color:var(--bcv2-ink); background:var(--surface,#fff); }
.body-chart-v2 textarea { resize:vertical; line-height:1.5; }
.body-chart-v2 :is(button,input,select,textarea,svg):focus-visible { outline:3px solid color-mix(in srgb,var(--primary,#7055b1) 65%,transparent); outline-offset:3px; }
.body-chart-v2 button { cursor:pointer; font:inherit; font-size:13px; }
.body-chart-v2 button:disabled { cursor:not-allowed; opacity:.5; }
.body-chart-v2 .bcv2-switch,.body-chart-v2 .bcv2-tools { display:flex; flex-wrap:wrap; gap:5px; padding:5px; width:fit-content; background:var(--bcv2-soft); border:1px solid var(--bcv2-line); border-radius:15px; }
.body-chart-v2 .bcv2-switch>button,.body-chart-v2 .bcv2-tools>button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--tx-3,#6e647e); font-weight:700; }
.body-chart-v2 :is(.bcv2-switch,.bcv2-tools)>button[aria-pressed=true] { background:var(--surface,#fff); border-color:var(--bcv2-line); color:var(--primary,#7055b1); box-shadow:0 2px 6px #3127440d,inset 0 1px 0 #fff; }
.body-chart-v2 .bcv2-palette { display:flex; flex-wrap:wrap; gap:8px; }
.body-chart-v2 .bcv2-palette>button { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:9px 12px; border:1px solid var(--bcv2-line); border-radius:12px; background:var(--surface,#fff); color:var(--bcv2-ink); }
.body-chart-v2 .bcv2-palette>button>span { color:var(--bcv2-color); font-size:17px; }
.body-chart-v2 .bcv2-palette>button[aria-pressed=true] { border-color:var(--bcv2-color); box-shadow:0 0 0 2px color-mix(in srgb,var(--bcv2-color) 12%,transparent); }
.body-chart-v2 .bcv2-content { display:grid; grid-template-columns:minmax(240px,.85fr) minmax(270px,1.15fr); gap:20px; align-items:start; }
.body-chart-v2 .bcv2-canvas-wrap { min-width:0; padding:16px; border:1px solid var(--bcv2-line); border-radius:22px; background:linear-gradient(160deg,var(--surface,#fff),var(--theme-canvas,#f8f6fc)); }
.body-chart-v2 .bcv2-side-labels { display:flex; justify-content:space-between; gap:8px; align-items:start; font-size:11px; color:var(--tx-3,#6e647e); text-align:center; }
.body-chart-v2 .bcv2-side-labels>span { flex:1; max-width:80px; }
.body-chart-v2 .bcv2-side-labels>strong { color:var(--bcv2-ink); font-size:12px; white-space:nowrap; }
.body-chart-v2 .bcv2-canvas { display:block; width:100%; height:470px; max-height:65vh; overflow:hidden; margin:12px auto; background:var(--surface,#fff); border-radius:15px; cursor:crosshair; touch-action:pan-y; }
.body-chart-v2 .bcv2-canvas .bcv2-mark { cursor:pointer; }
.body-chart-v2 .bcv2-canvas .bcv2-cursor { opacity:0; pointer-events:none; }
.body-chart-v2 .bcv2-canvas:focus .bcv2-cursor { opacity:1; }
.body-chart-v2 .bcv2-canvas[aria-disabled="true"] { cursor:default; }
.body-chart-v2 .bcv2-asset-status { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; background:var(--bcv2-soft); border-radius:12px; color:var(--tx-2,#514665); font-size:13px; line-height:1.5; }
.body-chart-v2 .bcv2-asset-status[hidden] { display:none; }
.body-chart-v2:not([data-bcv2-asset-state="ready"]) .bcv2-help { display:none; }
.body-chart-v2 .bcv2-help { margin:8px 0; color:var(--tx-3,#6e647e); font-size:12px; line-height:1.5; }
.body-chart-v2 :is(.bcv2-keyboard,.bcv2-about,.bcv2-legacy)>summary { min-height:44px; display:list-item; align-content:center; cursor:pointer; color:var(--primary,#7055b1); font-size:13px; font-weight:650; }
.body-chart-v2 :is(.bcv2-keyboard,.bcv2-about,.bcv2-legacy)>p { margin:8px 0 12px; font-size:12px; line-height:1.6; color:var(--tx-3,#6e647e); }
.body-chart-v2 .bcv2-side { display:grid; gap:16px; min-width:0; }
.body-chart-v2 .bcv2-editor { display:grid; gap:12px; padding:18px; border:1px solid var(--bcv2-line); border-radius:20px; background:var(--surface,#fff); box-shadow:0 3px 12px #49376508; }
.body-chart-v2 .bcv2-editor>header strong { font-size:16px; }
.body-chart-v2 .bcv2-editor>header>button { min-width:44px; min-height:44px; padding:8px; background:var(--bcv2-soft); border:0; border-radius:50%; color:var(--primary,#7055b1); }
.body-chart-v2 .bcv2-editor>p { margin:0; font-size:12px; color:var(--tx-3,#6e647e); }
.body-chart-v2 .bcv2-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.body-chart-v2 .bcv2-wide { grid-column:1/-1; }
.body-chart-v2 .bcv2-editor footer { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.body-chart-v2 .bcv2-records { display:grid; gap:12px; }
.body-chart-v2 .bcv2-records>article { padding:15px; border:1px solid var(--bcv2-line); border-radius:17px; background:var(--surface,#fff); }
.body-chart-v2 .bcv2-records>article>div:first-child { display:grid; gap:5px; }
.body-chart-v2 .bcv2-records strong { font-size:14px; }
.body-chart-v2 .bcv2-records span { font-size:13px; }
.body-chart-v2 .bcv2-records p { margin:2px 0; font-size:13px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.body-chart-v2 .bcv2-record-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.body-chart-v2 .bcv2-record-actions button { min-height:44px; padding:8px 10px; border:1px solid var(--bcv2-line); border-radius:11px; background:var(--theme-canvas,#f8f6fc); color:var(--primary,#7055b1); font-weight:650; }
.body-chart-v2 .bcv2-history-actions { display:flex; gap:8px; flex-wrap:wrap; }
.body-chart-v2 .bcv2-empty,.body-chart-v2 .bcv2-status { margin:0; font-size:13px; line-height:1.5; color:var(--tx-3,#6e647e); }
.body-chart-v2 .bcv2-status:empty { display:none; }
.body-chart-v2 .bcv2-warning { margin:0; padding:14px; background:#fff5df; color:#765325; border:1px solid #e9d4a1; border-radius:14px; font-size:13px; line-height:1.55; }
.body-chart-v2 .bcv2-legacy { border-top:1px solid var(--bcv2-line); padding-top:8px; }
.body-chart-v2 .bcv2-legacy-views { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.body-chart-v2 .bcv2-legacy-views figure { margin:0; padding:12px; border:1px solid var(--bcv2-line); border-radius:15px; text-align:center; }
.body-chart-v2 .bcv2-legacy-views svg { display:block; max-height:300px; width:100%; }
.body-chart-v2 .bcv2-legacy-views figcaption { font-size:12px; color:var(--tx-3,#6e647e); }
@media(max-width:850px) { .body-chart-v2 .bcv2-content { grid-template-columns:minmax(0,1fr); } .body-chart-v2 .bcv2-heading { align-items:start; flex-direction:column; gap:8px; } .body-chart-v2 .bcv2-canvas { height:430px; } }
@media(max-width:480px) { .body-chart-v2 .bcv2-toolbar { display:grid; grid-template-columns:minmax(0,1fr); } .body-chart-v2 .bcv2-toolbar>label { width:100%; } .body-chart-v2 .bcv2-fields { grid-template-columns:minmax(0,1fr); } .body-chart-v2 .bcv2-canvas-wrap { padding:12px; } .body-chart-v2 .bcv2-editor { padding:14px; } .body-chart-v2 .bcv2-palette>button { flex:1 1 130px; } .body-chart-v2 .bcv2-canvas { height:420px; max-height:60vh; } }
@media(prefers-reduced-motion:no-preference) { .body-chart-v2 button { transition:background .15s,border-color .15s,box-shadow .15s; } }