/* CSS bánh xe tương tác dùng chung. Tách khỏi _chart_interactivity.blade.php để trình duyệt lưu đệm — trước nhúng 28KB vào HTML mỗi trang công cụ. */
    /* Isolate SVG chart colors from page theme (Emerald/Violet/etc.) */
    .chart-wheel-graphic svg,
    #sr-wheel-container svg,
    #chart-wheel-container svg {
        --color-border: rgba(255, 255, 255, 0.1);
        --color-text-main: #ccc;
        --color-text-muted: #888;
        --color-accent-gold: #ffd700;
        --bg-content: rgba(0, 0, 0, 0.3);
    }

    /* Interactivity CSS — all states are CSS class-driven for performance */
    .chart-interactive [data-planet],
    .chart-interactive [data-aspect],
    .chart-interactive [data-house],
    .chart-interactive [data-zodiac] {
        transition: opacity 0.15s ease, filter 0.15s ease;
    }

    /* Dim everything when hovering */
    .chart-interactive.chart-hovering [data-planet],
    .chart-interactive.chart-hovering [data-aspect],
    .chart-interactive.chart-hovering [data-helper="drawAngularAngles"] {
        opacity: 0.15;
    }
    /* Zodiac: lighter dim so sectors remain recognizable */
    .chart-interactive.chart-hovering [data-zodiac] {
        opacity: 0.35;
    }
    /* Decorative theme layers (sparks, bloom, rim sparkles, vignette) dim while
       highlighting so the highlighted planets/chain stay the visual focus. NOTE:
       sparks have their own proximity-fade JS that writes inline `style.opacity`
       → must use `!important` here to beat that during highlight; the JS handler
       also skips work when .chart-hovering is active so inline values stay stable. */
    .chart-interactive.chart-hovering .theme-spark,
    .chart-interactive.chart-hovering .theme-sparks,
    .chart-interactive.chart-hovering .theme-spark-bloom,
    .chart-interactive.chart-hovering [data-subpart="spark-bloom"],
    .chart-interactive.chart-hovering .rim-sparkles,
    .chart-interactive.chart-hovering [data-layer="vignette"],
    .chart-interactive.chart-hovering [data-layer="rim_sparkles"] {
        opacity: 0.15 !important;
        transition: opacity 0.15s ease;
    }

    /* Highlighted elements stay visible */
    .chart-interactive.chart-hovering [data-planet].chart-highlight,
    .chart-interactive.chart-hovering [data-aspect].chart-highlight {
        opacity: 1 !important;
        filter: drop-shadow(0 0 4px currentColor);
    }

    /* Layer-scoped hover dim. `data-hover-layer` attr on container marks WHICH
       layer's element was hovered (set by JS from house/zodiac wrapper's
       data-ring). All planets NOT in that layer get force-dimmed via CSS — bypass
       JS class-add filters that may miss edge cases. Specificity = 1 attr + 1
       attr + 1 :not = ties with .chart-highlight (3 selectors); !important wins.
       Each chart layer (NA/SA/TR/SR/PR/LR) gets its own rule so hovering SA H12
       dims NA + TR + SR planets while keeping SA glow-able. */
    .chart-interactive.chart-hovering[data-hover-layer="natal"] [data-planet]:not([data-chart-type="NA"]):not([data-chart-type=""]),
    .chart-interactive.chart-hovering[data-hover-layer="natal"] [data-planet][data-chart-type="SA"],
    .chart-interactive.chart-hovering[data-hover-layer="natal"] [data-planet][data-chart-type="TR"],
    .chart-interactive.chart-hovering[data-hover-layer="natal"] [data-planet][data-chart-type="SR"],
    .chart-interactive.chart-hovering[data-hover-layer="natal"] [data-planet][data-chart-type="PR"],
    .chart-interactive.chart-hovering[data-hover-layer="natal"] [data-planet][data-chart-type="LR"],
    .chart-interactive.chart-hovering[data-hover-layer="sa"] [data-planet]:not([data-chart-type="SA"]),
    .chart-interactive.chart-hovering[data-hover-layer="tr"] [data-planet]:not([data-chart-type="TR"]),
    .chart-interactive.chart-hovering[data-hover-layer="sr"] [data-planet]:not([data-chart-type="SR"]),
    .chart-interactive.chart-hovering[data-hover-layer="pr"] [data-planet]:not([data-chart-type="PR"]),
    .chart-interactive.chart-hovering[data-hover-layer="lr"] [data-planet]:not([data-chart-type="LR"]) {
        opacity: 0.08 !important;
        filter: none !important;
    }
    .chart-interactive.chart-hovering [data-zodiac].chart-highlight {
        opacity: 1 !important;
        filter: brightness(1.4) drop-shadow(0 0 6px rgba(255,255,255,0.3));
    }
    /* Ruler of hovered sign — distinct golden glow */
    .chart-interactive.chart-hovering [data-planet].chart-ruler-highlight {
        opacity: 1 !important;
        filter: drop-shadow(0 0 6px rgba(245,158,11,0.9)) drop-shadow(0 0 12px rgba(245,158,11,0.4));
    }

    /* Selected planet (click) */
    .chart-interactive [data-planet].chart-selected {
        opacity: 1 !important;
        filter: drop-shadow(0 0 6px currentColor);
    }
    .chart-interactive.chart-has-selection [data-planet]:not(.chart-selected),
    .chart-interactive.chart-has-selection [data-aspect]:not(.chart-highlight) {
        opacity: 0.15;
    }

    /* House hover highlight */
    .chart-interactive.chart-hovering [data-house].chart-highlight path,
    .chart-interactive.chart-hovering [data-house].chart-highlight rect {
        fill-opacity: 0.15 !important;
    }
    /* Zodiac hover: brighten matched sector */
    .chart-interactive.chart-hovering [data-zodiac].chart-highlight path,
    .chart-interactive.chart-hovering [data-zodiac].chart-highlight rect {
        fill-opacity: 0.25 !important;
    }

    /* Aspect type filter (hidden) */
    .chart-interactive [data-aspect].chart-filtered {
        display: none;
    }

    /* Tooltip */
    .chart-tooltip {
        position: absolute; text-align: left;
        font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
        background: var(--bg-content, rgba(0,0,0,0.92));
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        color: var(--color-text-main, #ccc);
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        pointer-events: none;
        z-index: 100;
        max-width: 280px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        border: 1px solid var(--color-border, rgba(255,255,255,0.1));
        opacity: 0;
        transition: opacity 0.15s ease;
        white-space: pre-line; /* preserve newlines in multi-line tooltips (e.g. arc hover) */
        line-height: 1.5;
    }
    .chart-tooltip.visible {
        opacity: 1;
    }

    /* ═══ Info Card (hover:info_card) ═══ */
    .chart-info-card {
        position: fixed; z-index: 110; pointer-events: none; text-align: left;
        font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
        background: var(--bg-content, rgba(10,10,25,0.97));
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        color: var(--color-text-main, #ccc);
        border: 1px solid var(--color-border, rgba(255,255,255,0.12));
        border-radius: 8px; padding: 8px 10px; min-width: 180px; max-width: 300px;
        font-size: 11px; line-height: 1.5;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        opacity: 0; transition: opacity 0.15s ease;
        max-height: 70vh; overflow: hidden;
    }
    .chart-info-card.visible { opacity: 1; }
    .cic-header { font-size: 13px; margin-bottom: 2px; }
    .cic-retro { color: var(--color-theme-retrograde); font-size: 11px; }
    .cic-ring { font-size: 9px; padding: 1px 4px; border-radius: 3px; background: var(--color-bg-active); color: var(--color-text-muted); }
    .cic-ring-prefix {
        display: inline-block; font-size: 10px; font-weight: 700;
        padding: 1px 6px; border-radius: 3px; margin-right: 4px;
        background: rgba(56,189,248,0.18); color: #7dd3fc;
        border: 1px solid rgba(56,189,248,0.35);
        letter-spacing: 0.5px; vertical-align: 1px;
    }
    [data-theme-mode="light"] .cic-ring-prefix {
        background: rgba(14,116,144,0.12); color: #0e7490; border-color: rgba(14,116,144,0.4);
    }
    .cic-position { color: var(--color-text-muted); font-size: 10px; margin-bottom: 4px; }
    .cic-dignity { font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-bottom: 3px; display: inline-block; }
    .cic-dignity-domicile, .cic-dignity-exalt { background: rgba(34,197,94,0.15); color: var(--color-theme-aspect-positive); }
    .cic-dignity-detriment, .cic-dignity-fall { background: rgba(239,68,68,0.15); color: var(--color-theme-aspect-negative); }
    .cic-dispositor { font-size: 10px; color: var(--color-text-muted); margin-bottom: 3px; }
    .cic-aspects { border-top: 1px solid var(--color-border-subtle); padding-top: 4px; margin-top: 4px; }
    .cic-asp-row { display: flex; gap: 4px; font-size: 10px; padding: 1px 0; }
    .cic-asp-type { color: var(--color-accent-gold, #d4a017); min-width: 60px; }
    .cic-asp-body { flex: 1; }
    .cic-asp-orb { color: var(--color-text-muted); }
    .cic-asp-more { font-size: 9px; color: var(--color-text-muted); text-align: center; margin-top: 2px; }
    .cic-moon-phase { font-size: 10px; margin-bottom: 3px; color: var(--color-accent-gold, #d4a017); }
    .cic-meta { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; flex-wrap: wrap; }
    .cic-meta .cic-dispositor { font-size: 10px; color: var(--color-text-muted); }
    .cic-interp:empty { display: none; }
    .cic-interp + .cic-interp { margin-top: 2px; }
    .cic-interp-text { font-size: 10px; line-height: 1.4; color: var(--color-text-main); }
    .cic-interp-label {
        display: inline-block; font-size: 8px; font-weight: 600; text-transform: uppercase;
        padding: 0 4px; border-radius: 2px; margin-right: 4px; vertical-align: middle;
        background: rgba(255,215,0,0.1); color: var(--color-accent-gold, #d4a017);
    }

    /* ═══ Info Panel (click:info_panel) — placed in parent, outside SVG transform ═══ */
    .chart-info-panel {
        position: fixed; right: 0; top: 0; width: 320px; height: 320px; min-width: 200px; min-height: 150px;
        z-index: 120;
        background: var(--bg-content, rgba(8,8,20,0.99));
        border: 1px solid var(--color-border, rgba(255,255,255,0.15));
        border-radius: 8px;
        padding: 0; overflow: visible; font-size: 11px; line-height: 1.5;
        text-align: left; font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
        transform: translateX(100%); opacity: 0;
        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s 0.25s;
        box-shadow: 0 4px 24px rgba(0,0,0,0.4);
        visibility: hidden;
        display: flex; flex-direction: column;
    }
    .chart-info-panel.visible { transform: translateX(0); opacity: 1; visibility: visible; transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s 0s; }
    .chart-info-panel.cip-dragging, .chart-info-panel.cip-resizing { transition: none !important; user-select: none; }
    /* Resize handles — edges + corners */
    .cip-resize { position: absolute; z-index: 2; }
    .cip-resize-n  { top: -3px; left: 6px; right: 6px; height: 6px; cursor: n-resize; }
    .cip-resize-s  { bottom: -3px; left: 6px; right: 6px; height: 6px; cursor: s-resize; }
    .cip-resize-w  { left: -3px; top: 6px; bottom: 6px; width: 6px; cursor: w-resize; }
    .cip-resize-e  { right: -3px; top: 6px; bottom: 6px; width: 6px; cursor: e-resize; }
    .cip-resize-nw { top: -4px; left: -4px; width: 10px; height: 10px; cursor: nw-resize; }
    .cip-resize-ne { top: -4px; right: -4px; width: 10px; height: 10px; cursor: ne-resize; }
    .cip-resize-sw { bottom: -4px; left: -4px; width: 10px; height: 10px; cursor: sw-resize; }
    .cip-resize-se { bottom: -4px; right: -4px; width: 10px; height: 10px; cursor: se-resize; }
    .cip-drag-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 6px 10px; cursor: grab;
        background: var(--color-bg-hover);
        border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.08));
        flex-shrink: 0; user-select: none;
    }
    .cip-drag-header:active { cursor: grabbing; }
    .cip-inner { display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; height: 100%; background: inherit; }
    .cip-body { padding: 10px; overflow-y: auto; flex: 1; min-height: 0; }
    .cip-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .cip-close, .cip-tile { cursor: pointer; color: var(--color-text-muted); font-size: 12px; line-height: 1; padding: 2px; }
    .cip-close:hover { color: var(--color-aspect-square); }
    .cip-tile:hover { color: var(--color-accent-gold, #d4a017); }
    .cip-header { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
    .cip-retro { color: var(--color-theme-retrograde); font-size: 11px; }
    /* Unified layer badge style — same cyan box across all popovers (hover card
       uses .cic-ring-prefix, click panel uses .cip-ring). Keep both selectors in
       sync so SA/TR/SR/PR/LR badge looks identical regardless of which popover. */
    .cip-ring {
        display: inline-block; font-size: 10px; font-weight: 700;
        padding: 1px 6px; border-radius: 3px; margin-left: 4px;
        background: rgba(56,189,248,0.18); color: #7dd3fc;
        border: 1px solid rgba(56,189,248,0.35);
        letter-spacing: 0.5px; vertical-align: 1px;
        text-transform: uppercase;
    }
    [data-theme-mode="light"] .cip-ring {
        background: rgba(14,116,144,0.12); color: #0e7490; border-color: rgba(14,116,144,0.4);
    }
    .cip-position { color: var(--color-text-muted); font-size: 10px; margin-bottom: 8px; }
    /* Chart-side highlight for the final dispositor (last planet in chain — where
       rulership lands). Gold glow distinguishes it from chain hops on the wheel. */
    .chart-interactive.chart-hovering [data-planet].chart-highlight-final {
        opacity: 1 !important;
        filter: drop-shadow(0 0 8px rgba(245,158,11,0.95)) drop-shadow(0 0 16px rgba(245,158,11,0.5));
    }
    .cip-section { margin-bottom: 8px; }
    .cip-section-title { font-size: 9px; text-transform: uppercase; font-weight: 600; color: var(--color-text-muted); margin-bottom: 3px; letter-spacing: 0.5px; }
    .cip-dignity { font-size: 11px; padding: 2px 6px; border-radius: 4px; }
    .cip-dignity-domicile, .cip-dignity-exalt { background: rgba(34,197,94,0.12); color: var(--color-theme-aspect-positive); }
    .cip-dignity-detriment, .cip-dignity-fall { background: rgba(239,68,68,0.12); color: var(--color-theme-aspect-negative); }
    .cip-dignity-peregrine { color: var(--color-text-muted); font-style: italic; }
    .cip-chain { font-size: 10px; color: var(--color-accent-gold, #d4a017); }
    .cip-asp-row { display: flex; gap: 4px; font-size: 10px; padding: 1px 0; }
    .cip-asp-type { color: var(--color-accent-gold, #d4a017); min-width: 60px; }
    .cip-asp-body { flex: 1; }
    .cip-asp-orb { color: var(--color-text-muted); }
    .cip-empty { color: var(--color-text-muted); font-style: italic; font-size: 10px; }
    .cip-interp { font-size: 10px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
    .cip-interp, .cip-interp * { font-family: var(--font-ui, system-ui, -apple-system, sans-serif) !important; }

    /* ═══ Mobile: info panel → bottom sheet ═══ */
    @media (max-width: 768px) {
        .chart-info-card { display: none !important; }
        .chart-info-panel {
            position: fixed !important;
            bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
            width: 100vw !important;
            max-width: 100vw !important;
            max-height: 55vh;
            box-sizing: border-box !important;
            border-radius: 12px 12px 0 0;
            border: none;
            transform: translateY(100%);
            z-index: 99999;
            box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
            padding: 0;
            background: rgba(10,10,25,0.98) !important;
            overflow: hidden;
            resize: none;
        }
        .chart-info-panel.visible {
            transform: translateY(0);
        }
        .chart-info-panel .cip-drag-header { cursor: default; }
        .chart-info-panel .cip-close {
            font-size: 16px;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            background: var(--color-bg-active); border-radius: 50%;
        }
        .chart-info-panel .cip-body {
            padding: 12px 14px 20px;
            overflow-y: auto; overflow-x: hidden;
            word-wrap: break-word; overflow-wrap: break-word;
        }
        /* drag handle hint */
        .chart-info-panel::before {
            content: '';
            display: block;
            width: 36px; height: 4px;
            background: rgba(255,255,255,0.25);
            border-radius: 2px;
            margin: 0 auto 8px;
        }
        .chart-info-panel .cip-interp {
            max-height: none;
        }
        .chart-info-card {
            max-width: calc(100vw - 24px) !important;
            max-height: 50vh;
            overflow-y: auto;
        }
        .chart-aspect-detail {
            max-width: calc(100vw - 24px) !important;
        }
    }

    /* ═══ Aspect Detail Card (click:aspect_detail) ═══ */
    .chart-aspect-detail {
        position: absolute; z-index: 115; pointer-events: auto; text-align: left;
        font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
        background: var(--bg-content, rgba(10,10,25,0.95));
        border: 1px solid var(--color-border, rgba(255,255,255,0.12));
        border-radius: 8px; padding: 8px 12px; min-width: 160px;
        font-size: 11px; line-height: 1.5;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        opacity: 0; transition: opacity 0.15s ease;
    }
    .chart-aspect-detail.visible { opacity: 1; }
    .cad-close { position: absolute; top: 4px; right: 6px; cursor: pointer; color: var(--color-text-muted); font-size: 11px; }
    .cad-close:hover { color: #ef4444; }
    .cad-header { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
    .cad-bodies { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
    .cad-body { font-weight: 500; }
    .cad-prefix { font-size: 8px; padding: 1px 3px; border-radius: 2px; background: var(--color-bg-active); color: var(--color-text-muted); }
    .cad-sep { color: var(--color-text-muted); }
    .cad-orb { color: var(--color-text-muted); font-size: 10px; }
    .cad-nature { font-size: 10px; margin-top: 2px; }
    .cad-nature-badge { padding: 1px 5px; border-radius: 3px; font-size: 9px; text-transform: capitalize; }
    .cad-nature-harmonious { background: rgba(34,197,94,0.12); color: var(--color-theme-aspect-positive); }
    .cad-nature-tense { background: rgba(239,68,68,0.12); color: var(--color-theme-aspect-negative); }
    .cad-nature-neutral { background: rgba(168,85,247,0.12); color: #c084fc; }
    .cad-nature-creative { background: rgba(59,130,246,0.12); color: var(--color-layer-natal); }
    .cad-nature-minor { background: var(--color-bg-hover); color: var(--color-text-muted); }
    .cad-cross { font-size: 9px; color: var(--color-accent-gold, #d4a017); margin-top: 3px; }

    /* ═══ House Keywords Card (hover:house_keywords) ═══ */
    .chart-house-keywords {
        position: absolute; z-index: 110; pointer-events: none; text-align: left;
        font-family: var(--font-ui, system-ui, -apple-system, sans-serif);
        background: var(--bg-content, rgba(10,10,25,0.95));
        color: var(--color-text-main, #ccc);
        border: 1px solid var(--color-border, rgba(255,255,255,0.12));
        border-radius: 8px; padding: 8px 10px; min-width: 200px; max-width: 280px;
        font-size: 11px; line-height: 1.5;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        opacity: 0; transition: opacity 0.15s ease;
    }
    .chart-house-keywords.visible { opacity: 1; }
    .chk-header { font-size: 13px; font-weight: 600; color: var(--color-accent-gold, #d4a017); }
    .chk-theme { font-size: 12px; font-weight: 500; margin-bottom: 3px; }
    .chk-keywords { font-size: 10px; color: var(--color-text-muted); margin-bottom: 4px; line-height: 1.4; }
    .chk-ruler { font-size: 9px; color: var(--color-text-muted); opacity: 0.7; }
    .chk-planets { font-size: 10px; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-border-subtle); color: var(--color-accent-gold, #d4a017); }

    /* ═══ Time Scrub (control:time_scrub) ═══ */
    .chart-time-scrub {
        background: var(--bg-content, rgba(10,10,25,0.95));
        border: 1px solid var(--color-border, rgba(255,255,255,0.12));
        border-radius: 8px; padding: 6px 10px; z-index: 1;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        font-size: 11px; margin-top: 6px;
        max-width: min(770px, 100%); margin-left: auto; margin-right: auto;
        overflow-x: hidden; box-sizing: border-box;
    }
    .cts-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .cts-row + .cts-row { margin-top: 4px; }
    .cts-btn {
        background: var(--color-bg-active); border: 1px solid var(--color-border);
        color: var(--color-text-main); border-radius: 4px; padding: 2px 8px;
        cursor: pointer; font-size: 11px;
    }
    .cts-btn:hover { background: rgba(255,215,0,0.12); color: var(--color-accent-gold); }
    .cts-date { flex: 1; text-align: center; font-weight: 500; color: var(--color-accent-gold, #d4a017); font-size: 12px; }
    .cts-slider { flex: 1; accent-color: var(--color-accent-gold, #d4a017); }
    .cts-label { font-size: 8px; color: var(--color-text-muted); white-space: nowrap; }
    .cts-speed {
        background: var(--color-bg-active); border: 1px solid var(--color-border);
        color: var(--color-text-main); border-radius: 4px; padding: 1px 4px;
        font-size: 10px; cursor: pointer;
    }

    /* ═══ SR Month Picker (control:sr_month_picker) ═══ */
    .sr-month-picker {
        background: var(--bg-content, rgba(10,10,25,0.95));
        border: 1px solid var(--color-border, rgba(255,255,255,0.12));
        border-radius: 8px; padding: 8px 10px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        font-size: 11px; margin-top: 6px;
        max-width: 850px; margin-left: auto; margin-right: auto;
    }
    .srmp-header {
        font-size: 11px; color: var(--color-text-muted);
        text-align: center; margin-bottom: 6px;
    }
    .srmp-header strong { color: var(--color-accent-gold, #d4a017); font-family: monospace; }
    .srmp-row {
        display: flex; gap: 4px; align-items: stretch;
        flex-wrap: wrap; justify-content: center;
    }
    .srmp-btn {
        background: var(--color-bg-hover);
        border: 1px solid var(--color-border, rgba(255,255,255,0.1));
        color: var(--color-text-main); border-radius: 5px;
        padding: 4px 6px; cursor: pointer;
        display: flex; flex-direction: column; align-items: center;
        line-height: 1.1; min-width: 48px;
        transition: background 0.12s, border-color 0.12s, transform 0.12s;
    }
    .srmp-btn:hover {
        background: rgba(255,215,0,0.10);
        border-color: var(--color-accent-gold, #d4a017);
        transform: translateY(-1px);
    }
    .srmp-btn.active {
        background: rgba(255,215,0,0.18);
        border-color: var(--color-accent-gold, #d4a017);
        color: var(--color-accent-gold, #d4a017);
        font-weight: 600;
    }
    .srmp-num { font-size: 11px; font-weight: 600; }
    .srmp-date { font-size: 9px; opacity: 0.7; margin-top: 1px; }
    .srmp-reset {
        background: var(--color-bg-hover);
        border: 1px solid var(--color-border, rgba(255,255,255,0.1));
        color: var(--color-text-muted); border-radius: 5px;
        padding: 4px 8px; cursor: pointer; font-size: 12px;
        align-self: center;
    }
    .srmp-reset:hover { background: rgba(255,215,0,0.10); color: var(--color-accent-gold, #d4a017); }
    [data-theme-mode="light"] .sr-month-picker,
    .sr-wheel-light .sr-month-picker {
        background: rgba(255,255,255,0.97); color: #222; border-color: #ccc;
    }
    [data-theme-mode="light"] .srmp-btn { background: rgba(0,0,0,0.04); border-color: #ccc; color: #333; }
    [data-theme-mode="light"] .srmp-btn.active { background: rgba(139,101,8,0.15); color: #8B6508; border-color: #8B6508; }
    [data-theme-mode="light"] .srmp-header { color: #666; }
    [data-theme-mode="light"] .srmp-header strong { color: #8B6508; }

    /* ═══ Light theme overrides — uses [data-theme-mode="light"] set by ChartActions ═══ */
    [data-theme-mode="light"] .chart-tooltip,
    [data-theme-mode="light"] .chart-info-card,
    [data-theme-mode="light"] .chart-house-keywords,
    [data-theme-mode="light"] .chart-aspect-detail,
    [data-theme-mode="light"] .chart-time-scrub,
    [data-theme-mode="light"] ~ .chart-info-panel,
    .sr-wheel-light .chart-tooltip,
    .sr-wheel-light .chart-info-card,
    .sr-wheel-light .chart-house-keywords,
    .sr-wheel-light .chart-aspect-detail,
    .sr-wheel-light .chart-time-scrub,
    .sr-wheel-light ~ .chart-info-panel {
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        color: #222;
        border-color: #ccc;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    [data-theme-mode="light"] .cic-position,
    [data-theme-mode="light"] .cic-asp-orb,
    [data-theme-mode="light"] .cic-asp-more,
    [data-theme-mode="light"] .cic-ring,
    [data-theme-mode="light"] .cic-dispositor,
    [data-theme-mode="light"] .chk-keywords,
    [data-theme-mode="light"] .chk-ruler,
    [data-theme-mode="light"] .cad-orb,
    [data-theme-mode="light"] .cad-sep,
    [data-theme-mode="light"] ~ .chart-info-panel .cip-position,
    [data-theme-mode="light"] ~ .chart-info-panel .cip-section-title,
    [data-theme-mode="light"] ~ .chart-info-panel .cip-asp-orb,
    [data-theme-mode="light"] ~ .chart-info-panel .cip-empty {
        color: #666;
    }
    [data-theme-mode="light"] .cic-header,
    [data-theme-mode="light"] .chk-header,
    [data-theme-mode="light"] .cad-header,
    [data-theme-mode="light"] ~ .chart-info-panel .cip-header {
        color: #8B6508;
    }
    [data-theme-mode="light"] .cic-interp-text,
    [data-theme-mode="light"] ~ .chart-info-panel .cip-chain {
        color: #333;
    }
    [data-theme-mode="light"] .cic-interp-label {
        background: rgba(139,101,8,0.1); color: #8B6508;
    }
    [data-theme-mode="light"] .cic-aspects,
    [data-theme-mode="light"] .cic-interp,
    [data-theme-mode="light"] .chk-planets {
        border-top-color: rgba(0,0,0,0.08);
    }
    [data-theme-mode="light"] .cic-dignity-domicile,
    [data-theme-mode="light"] .cic-dignity-exalt {
        background: rgba(21,128,61,0.14); color: #166534;
    }
    [data-theme-mode="light"] .cic-dignity-detriment,
    [data-theme-mode="light"] .cic-dignity-fall {
        background: rgba(185,28,28,0.14); color: #991b1b;
    }
    [data-theme-mode="light"] .cts-btn { background: rgba(0,0,0,0.05); border-color: #ccc; color: #333; }
    [data-theme-mode="light"] .cts-date { color: #8B6508; }

    /* ═══ Zoom Region (control:zoom_region) ═══ */
    .chart-interactive:has(svg.chart-zoomed) { overflow: hidden !important; border-radius: 8px; }
    /* Defensive container clip — `.chart-wheel-graphic` ships with inline
       `overflow:visible` (needed so spark beams + bloom glow can spill past
       viewBox in normal rendering). When SVG is zoomed via transform:scale,
       that visibility lets scaled-out planets bleed into neighboring panels.
       Use :has() + !important to beat the inline style during zoom only. */
    .chart-wheel-graphic:has(svg.chart-zoomed) { overflow: hidden !important; }
    /* SVG carries inline `overflow:visible` so spark beams + glow effects spill
       past the viewBox in normal rendering. When zoomed (transform: scale Nx),
       that same `overflow:visible` lets scaled-out planets bleed PAST the chart
       container box into neighboring page panels. Force overflow:hidden on the
       SVG itself during zoom (with !important to beat the inline style). Sparks
       are usually outside the zoomed viewport anyway when zoomed in. */
    .chart-interactive svg.chart-zoomed {
        cursor: grab;
        overflow: hidden !important;
    }
    .chart-zoom-reset {
        position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 130;
        background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        color: var(--color-accent-gold, #d4a017); border: 1px solid var(--color-accent-gold, #d4a017);
        border-radius: 20px; padding: 4px 14px; font-size: 0.72rem; cursor: pointer;
        font-family: var(--font-ui, system-ui, sans-serif);
        transition: background 0.15s, transform 0.15s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .chart-zoom-reset:hover { background: var(--color-accent-gold, #d4a017); color: #000; }
    [data-theme-mode="light"] .chart-zoom-reset {
        background: rgba(255,255,255,0.85); color: #8B6508; border-color: #8B6508;
    }
    [data-theme-mode="light"] .chart-zoom-reset:hover { background: #8B6508; color: #fff; }