/* Compact standalone hotkeys switch window — a normal control window (NOT an OBS
   overlay), so a solid branded background is fine. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    display: flex; align-items: center; justify-content: center; padding: 12px;
    color: #e8ecf6; user-select: none; overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(120% 120% at 10% -20%, rgba(0, 229, 255, 0.10), transparent 60%),
        radial-gradient(120% 120% at 110% 120%, rgba(225, 25, 110, 0.16), transparent 60%),
        linear-gradient(160deg, #121936 0%, #0a0e1e 100%);
}
.panel {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-radius: 14px; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ico { font-size: 20px; opacity: 0.9; }
.label { font-size: 16px; font-weight: 800; flex: 1; letter-spacing: 0.01em; }
.switch {
    width: 58px; height: 32px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
    position: relative; flex: none; background: #3a4258; transition: background 0.18s, box-shadow 0.18s;
}
.switch.on { background: linear-gradient(135deg, #34d399 0%, #059669 100%); box-shadow: 0 0 14px rgba(16, 185, 129, 0.55); }
.knob {
    position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
    background: #fff; transition: left 0.18s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.switch.on .knob { left: 29px; }