.circuit-root {
    position: relative;
    background: #050505;
    --circuit-bg: #050505;
    --grid-stroke: rgba(64, 126, 255, 0.2);
    --chip-fill: rgba(14, 14, 14, 0.98);
    --chip-stroke: rgba(255, 255, 255, 0.25);
    --chip-inner-fill: #000;
    --chip-inner-stroke: rgba(255, 255, 255, 0.15);
    --island-fill: rgba(255, 255, 255, 0.04);
    --island-stroke: rgba(255, 255, 255, 0.28);
    --island-label: rgba(255, 255, 255, 0.7);
    --path-stroke: rgba(255, 255, 255, 0.15);
    --path-stroke-thick: rgba(255, 255, 255, 0.25);
    --path-active: rgba(255, 255, 255, 0.6);
    --node-fill: rgba(255, 255, 255, 0.5);
}

.circuit-root.light {
    background: #f6f7f9;
    --circuit-bg: #f6f7f9;
    --grid-stroke: rgba(20, 20, 20, 0.12);
    --chip-fill: rgba(245, 245, 245, 0.98);
    --chip-stroke: rgba(0, 0, 0, 0.2);
    --chip-inner-fill: #fff;
    --chip-inner-stroke: rgba(0, 0, 0, 0.12);
    --island-fill: rgba(0, 0, 0, 0.03);
    --island-stroke: rgba(0, 0, 0, 0.22);
    --island-label: rgba(0, 0, 0, 0.65);
    --path-stroke: rgba(0, 0, 0, 0.35);
    --path-stroke-thick: rgba(0, 0, 0, 0.45);
    --path-active: rgba(0, 0, 0, 0.7);
    --node-fill: rgba(0, 0, 0, 0.55);
}

.circuit-root .island-icon {
    opacity: 0.85;
}

.circuit-root .circuit-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.circuit-root .chip-outer {
    fill: var(--chip-fill);
    stroke: var(--chip-stroke);
    stroke-width: 2;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}

.circuit-root .chip-inner-svg {
    fill: var(--chip-inner-fill);
    stroke: var(--chip-inner-stroke);
    stroke-width: 1;
}

.circuit-root .chip-logo {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}

.circuit-root .svg-island {
    fill: var(--island-fill);
    stroke: var(--island-stroke);
    stroke-width: 2;
}

.circuit-root .svg-island-label {
    fill: var(--island-label);
    font-size: 18px;
    letter-spacing: 1px;
    text-anchor: middle;
    dominant-baseline: middle;
    font-family: 'Courier New', monospace;
}

.circuit-root .circuit-path {
    fill: none;
    stroke: var(--path-stroke);
    stroke-width: 2;
    stroke-linecap: round;
}

.circuit-root .circuit-path-thick {
    fill: none;
    stroke: var(--path-stroke-thick);
    stroke-width: 3;
    stroke-linecap: round;
}

.circuit-root .circuit-path-active {
    fill: none;
    stroke: var(--path-active);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 10, 200;
    animation: dataFlow 2s linear infinite;
    will-change: stroke-dashoffset;
}

.circuit-root .circuit-node {
    fill: var(--node-fill);
}

@keyframes dataFlow {
    0% { stroke-dashoffset: 210; }
    100% { stroke-dashoffset: 0; }
}