:root {
    --dark-bg: #090c15;
    --card-bg: #121826;
    --border-color: #1f293d;
    --text-color: #f3f4f6;
    --text-muted: #9ca3af;

    --ps-blue: #00439c;
    --xbox-green: #107c11;
    --dualsense-purple: #7b2cbf;

    --widget-accent: #00d4ff;
    --widget-success: #00f593;
    --widget-warn: #ff8c00;
    --widget-error: #ff3e3e;
}

.tab-btn.active-dualsense {
    border-color: var(--dualsense-purple);
    background-color: rgba(123, 44, 191, 0.08);
    box-shadow: 0 0 15px rgba(123, 44, 191, 0.15);
}
.tab-btn.active-playstation {
    border-color: var(--ps-blue);
    background-color: rgba(0, 67, 156, 0.08);
    box-shadow: 0 0 15px rgba(0, 67, 156, 0.15);
}
.tab-btn.active-xbox {
    border-color: var(--xbox-green);
    background-color: rgba(16, 124, 17, 0.08);
    box-shadow: 0 0 15px rgba(16, 124, 17, 0.15);
}

canvas.radar-canvas {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1;
    background: rgba(0,0,0,0.4);
    border-radius: 50%;
}
canvas.osc-canvas {
    width: 100%;
    height: 45px;
    background: #08090c;
    border: 1px solid #1a1d24;
    margin-top: 8px;
    border-radius: 3px;
}