:root, .switchstyle-classic {
        --sw-w: 42px; --sw-h: 22px; --sw-r: 22px; --sw-k: 16px; --sw-kr: 50%; --sw-pad: 3px;
        --sw-off: var(--mk-slate-300-2); --sw-on: var(--mk-green-700);
        --sw-knob: #fff; --sw-knob-on: var(--sw-knob); --sw-kshadow: 0 1px 2px rgba(0,0,0,.25);
        --sw-tshadow: none; --sw-border: transparent;
        --sw-off-txt: ""; --sw-on-txt: ""; --sw-txt-off: #fff; --sw-txt-on: #fff;
        --sw-txt-font: inherit; --sw-txt-size: 9px; --sw-txt-weight: 700;
    }
    .switchstyle-ios { --sw-w: 51px; --sw-h: 31px; --sw-r: 31px; --sw-k: 27px; --sw-pad: 2px;
        --sw-off: #e9e9eb; --sw-on: #34c759; --sw-kshadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); }
    .switchstyle-theme { --sw-on: #1e40af; }
    .switchstyle-onoff { --sw-w: 66px; --sw-h: 28px; --sw-r: 28px; --sw-k: 22px; --sw-pad: 3px;
        --sw-off: #e5e7eb; --sw-on: #dcfce7; --sw-border: #d1d5db;
        --sw-tshadow: inset 0 2px 4px rgba(0,0,0,.10); --sw-kshadow: 0 2px 5px rgba(0,0,0,.22);
        --sw-off-txt: "OFF"; --sw-on-txt: "ON"; --sw-txt-off: #9ca3af; --sw-txt-on: #15803d; --sw-txt-size: 11px; }
    .switchstyle-lock { --sw-w: 64px; --sw-h: 30px; --sw-r: 30px; --sw-k: 24px; --sw-pad: 3px;
        --sw-off: #dc2626; --sw-on: #7ccf1f; --sw-kshadow: 0 2px 5px rgba(0,0,0,.25);
        --sw-off-txt: "\f023"; --sw-on-txt: "\f09c"; --sw-txt-font: "Font Awesome 5 Free"; --sw-txt-weight: 900;
        --sw-txt-size: 12px; }
    .switchstyle-square { --sw-w: 44px; --sw-h: 22px; --sw-r: 6px; --sw-k: 16px; --sw-kr: 4px; --sw-on: #2563eb; }
    .switchstyle-material { --sw-w: 38px; --sw-h: 14px; --sw-r: 14px; --sw-k: 20px; --sw-pad: 0px;
        --sw-off: #cbd5e1; --sw-on: #93c5fd; --sw-knob: #f8fafc; --sw-knob-on: #2563eb;
        --sw-kshadow: 0 1px 3px rgba(0,0,0,.35); }
    .switchstyle-neon { --sw-off: #1e293b; --sw-on: #0f172a; --sw-border: #334155; --sw-knob: #64748b;
        --sw-knob-on: #22c55e; --sw-kshadow: 0 0 6px rgba(34,197,94,.0); }
    .switchstyle-neon input[type=checkbox]:not(.no-switch):checked::before,
    .switchstyle-neon .icheckbox_square-blue.checked::before,
    .switchstyle-neon .so-switch input:checked + .so-slider::before { box-shadow: 0 0 8px 2px rgba(34,197,94,.75); }
    .switchstyle-redgreen { --sw-off: #ef4444; --sw-on: #22c55e; }

    /* 1. a plain checkbox */
    input[type=checkbox]:not(.no-switch) {
        -webkit-appearance: none; appearance: none; position: relative; display: inline-block;
        width: var(--sw-w) !important; height: var(--sw-h) !important; min-width: var(--sw-w);
        margin: 0 6px 0 0; padding: 0; border: 1px solid var(--sw-border) !important;
        border-radius: var(--sw-r) !important; outline: none; background: var(--sw-off) !important;
        box-shadow: var(--sw-tshadow) !important; vertical-align: middle; cursor: pointer;
        transition: background .18s; flex: 0 0 auto; box-sizing: border-box; overflow: visible;
    }
    /* 2. iCheck's box */
    .icheckbox_square-blue {
        position: relative; display: inline-block; vertical-align: middle; cursor: pointer;
        width: var(--sw-w) !important; height: var(--sw-h) !important; margin-right: 6px;
        border: 1px solid var(--sw-border) !important; border-radius: var(--sw-r) !important;
        background: var(--sw-off) !important; background-image: none !important;
        box-shadow: var(--sw-tshadow) !important; transition: background .18s; box-sizing: border-box;
    }
    /* 3. the app-wide .so-switch */
    .so-switch { width: var(--sw-w) !important; height: var(--sw-h) !important; }
    .so-switch .so-slider { background: var(--sw-off) !important; border-radius: var(--sw-r) !important;
        border: 1px solid var(--sw-border); box-shadow: var(--sw-tshadow); }
    /* the knob */
    input[type=checkbox]:not(.no-switch)::before, .icheckbox_square-blue::before, .so-switch .so-slider::before {
        content: ""; position: absolute; left: var(--sw-pad) !important;
        top: calc((var(--sw-h) - 2px - var(--sw-k)) / 2) !important;
        width: var(--sw-k) !important; height: var(--sw-k) !important; border-radius: var(--sw-kr) !important;
        background: var(--sw-knob) !important; box-shadow: var(--sw-kshadow); transition: transform .18s, background .18s; z-index: 1;
    }
    /* the word / icon on the track */
    input[type=checkbox]:not(.no-switch)::after, .icheckbox_square-blue::after, .so-switch .so-slider::after {
        content: var(--sw-off-txt); position: absolute; top: 50%; transform: translateY(-50%); right: 7px;
        font-family: var(--sw-txt-font); font-weight: var(--sw-txt-weight); font-size: var(--sw-txt-size);
        color: var(--sw-txt-off); line-height: 1; pointer-events: none;
    }
    /* on */
    input[type=checkbox]:not(.no-switch):checked, .icheckbox_square-blue.checked,
    .so-switch input:checked + .so-slider { background: var(--sw-on) !important; }
    input[type=checkbox]:not(.no-switch):checked::before, .icheckbox_square-blue.checked::before,
    .so-switch input:checked + .so-slider::before {
        transform: translateX(calc(var(--sw-w) - 2px - var(--sw-k) - 2 * var(--sw-pad))) !important;
        background: var(--sw-knob-on) !important; }
    input[type=checkbox]:not(.no-switch):checked::after, .icheckbox_square-blue.checked::after,
    .so-switch input:checked + .so-slider::after { content: var(--sw-on-txt); right: auto; left: 8px; color: var(--sw-txt-on); }
    input[type=checkbox]:not(.no-switch):indeterminate { background: var(--sw-on) !important; opacity: .7; }
    input[type=checkbox]:not(.no-switch):focus-visible { outline: 2px solid var(--mk-blue-500); outline-offset: 2px; }
    input[type=checkbox]:not(.no-switch):disabled, .icheckbox_square-blue.disabled { opacity: .55; cursor: not-allowed; }
    /* the input inside an .so-switch stays invisible (its slider is the drawing) */
    .so-switch input[type=checkbox] { position: absolute !important; opacity: 0; width: 0 !important; height: 0 !important; min-width: 0; }
    .so-switch input[type=checkbox]::before, .so-switch input[type=checkbox]::after { display: none; }
    /* Bootstrap's .checkbox / .checkbox-inline label leaves 20px for a box: room for the switch */
    .checkbox label, .checkbox-inline { padding-left: calc(var(--sw-w) + 8px) !important; }
    .checkbox input[type=checkbox]:not(.no-switch), .checkbox-inline input[type=checkbox]:not(.no-switch) {
        position: absolute; margin: 0 0 0 calc(-1 * (var(--sw-w) + 8px)) !important; top: 50%; transform: translateY(-50%); }
    .checkbox label { position: relative; min-height: calc(var(--sw-h) + 2px); display: inline-flex; align-items: center; }
    .checkbox label.mk-sw-row { padding-left: 14px !important; }
    .checkbox label .icheckbox_square-blue { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin: 0; }