.attention-panel,.actmap,.attention-scene { --attention-value:#2dd4bf; --attention-action:#c084fc; --attention-map:#38bdf8; --attention-enemy:#fb923c; }
.attention-lit[data-attention-glow-kind="action"] { --attention-tone:var(--attention-action); }
.attention-lit[data-attention-glow-kind="value"] { --attention-tone:var(--attention-value); }
.attention-lit[data-attention-glow-kind="both"] { --attention-tone:var(--attention-action); }
.attention-lit { outline:1px solid color-mix(in srgb,var(--attention-tone) var(--attention-strength),transparent); outline-offset:2px; filter:drop-shadow(var(--attention-value-shadow,0 0 0 transparent)) drop-shadow(var(--attention-action-shadow,0 0 0 transparent)); }
.attention-panel [data-attention-kind="value"] { --attention-tone:var(--attention-value); }
.attention-panel [data-attention-kind="action"] { --attention-tone:var(--attention-action); }
.attention-panel [data-attention-kind="map"] { --attention-tone:var(--attention-map); }
.attention-panel [data-attention-kind="enemy"] { --attention-tone:var(--attention-enemy); }
.attention-panel { margin:10px 0; border:1px solid var(--line-2,#33414f); border-radius:7px; background:var(--surface,#161f2b); color:var(--ink,#dce3ec); font-size:12px; }
.attention-summary { padding:9px 11px; cursor:pointer; font-weight:600; color:var(--accent,#6fb4ee); }
.attention-summary:focus-visible,.attention-detail summary:focus-visible,.attention-select:focus-visible { outline:2px solid var(--accent,#6fb4ee); outline-offset:2px; }
.attention-content { padding:0 11px 11px; }
.attention-legend { display:flex; flex-wrap:wrap; gap:6px 15px; margin:0 0 10px; color:var(--ink-2,#9aa7b6); font-size:11px; }
.attention-color-key::before,.attention-pane h3::before,.attention-detail > summary::before { content:''; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--attention-tone); }
.attention-note,.attention-scale-note { margin:0 0 8px; color:var(--ink-2,#9aa7b6); line-height:1.45; }
.attention-scale-note { font-size:11px; }
.attention-columns { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:12px; }
.attention-pane { min-width:0; padding:9px; background:var(--surface-2,#1b2532); border-radius:5px; }
.attention-pane h3 { margin:0 0 8px; color:var(--ink,#dce3ec); font-size:12px; font-weight:600; }
.attention-tokens { list-style:none; padding:0; margin:6px 0 0; }
.attention-token { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 8px; margin:0 0 7px; }
.attention-token-label { overflow-wrap:anywhere; line-height:1.4; }
.attention-weight { font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink-2,#9aa7b6); }
.attention-track { grid-column:1/-1; height:4px; overflow:hidden; border-radius:2px; background:var(--line,#232e3c); }
.attention-fill { display:block; height:100%; background:var(--attention-tone,var(--accent,#6fb4ee)); opacity:.8; }
.attention-detail { margin-top:8px; padding-top:6px; border-top:1px solid var(--line-2,#33414f); }
.attention-detail summary { cursor:pointer; color:var(--ink-2,#9aa7b6); line-height:1.5; }
.attention-head-index { color:var(--ink-3,#69768a); white-space:nowrap; }
.attention-action-label { display:block; color:var(--ink-2,#9aa7b6); font-size:11px; }
.attention-select { display:block; width:100%; min-width:0; margin:4px 0 9px; padding:6px; border:1px solid var(--line-2,#33414f); border-radius:4px; color:var(--ink,#dce3ec); background:var(--surface,#161f2b); font:inherit; font-size:12px; text-overflow:ellipsis; }
@media(max-width:560px) { .attention-columns { grid-template-columns:1fr; } .attention-content { padding:0 8px 8px; } .attention-pane { padding:8px; } }