:root {
            /* Accent variables */
            --color-frac-a: #f43f5e;      /* Rose for Fraction A */
            --color-frac-a-glow: rgba(244, 63, 94, 0.35);
            --color-frac-b: #38bdf8;      /* Cyan for Fraction B */
            --color-frac-b-glow: rgba(56, 189, 248, 0.35);
            --color-res: #ffb000;         /* Amber for Result */
            --color-res-glow: rgba(255, 176, 0, 0.35);
        }

        .control-label.frac-a-label { color: var(--color-frac-a); }
        .control-label.frac-b-label { color: var(--color-frac-b); }
        .control-label.res-label { color: var(--color-res); }

        .frac-a-slider::-webkit-slider-thumb { background: var(--color-frac-a) !important; box-shadow: 0 0 10px var(--color-frac-a-glow) !important; }
        .frac-b-slider::-webkit-slider-thumb { background: var(--color-frac-b) !important; box-shadow: 0 0 10px var(--color-frac-b-glow) !important; }
        .res-slider::-webkit-slider-thumb { background: var(--color-res) !important; box-shadow: 0 0 10px var(--color-res-glow) !important; }

        .color-frac-a-text { color: var(--color-frac-a); font-weight: 600; }
        .color-frac-b-text { color: var(--color-frac-b); font-weight: 600; }
        .color-res-text { color: var(--color-res); font-weight: 600; }

        .badge-status {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 6px;
            font-weight: 600;
        }

        .badge-aligned {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.2);
        }

        .badge-misaligned {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.2);
        }