/* Site-wide presentation layer. Default keeps the production baseline untouched. */
html[data-visual-skin="tron"] {
    color-scheme: dark;
    overflow-x: hidden;
    --skin-space: #03050a;
    --skin-space-blue: #060b15;
    --skin-graphite-0: #070a0f;
    --skin-graphite-1: #0c1118;
    --skin-graphite-2: #121923;
    --skin-graphite-3: #1a2330;
    --skin-graphite-4: #25313f;
    --skin-bg: var(--skin-space);
    --skin-surface-1: var(--skin-graphite-1);
    --skin-surface-2: var(--skin-graphite-2);
    --skin-surface-3: var(--skin-graphite-3);
    --skin-line: rgba(151, 183, 211, .19);
    --skin-line-bright: rgba(183, 221, 244, .43);
    --skin-border: var(--skin-line);
    --skin-border-active: rgba(85, 239, 255, .42);
    --skin-text: #eef8ff;
    --skin-text-muted: #aab9c8;
    --skin-text-dim: #718191;
    --skin-energy: #55efff;
    --skin-energy-soft: rgba(85, 239, 255, .09);
    --skin-focus: #fff28a;
    --skin-danger: #ff7787;
    --skin-success: #75f0b1;
    --skin-graphite-grain:
        linear-gradient(117deg, rgba(255, 255, 255, .055), transparent 18%, transparent 79%, rgba(126, 170, 198, .035)),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 10px),
        radial-gradient(circle at 24% 12%, rgba(82, 108, 130, .12), transparent 26%),
        #0e131b;
    --skin-shell-shadow:
        0 12px 24px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 -7px 18px rgba(0, 0, 0, .42);
    --skin-control-background:
        linear-gradient(160deg, rgba(255, 255, 255, .065), transparent 28%),
        linear-gradient(180deg, #171e28, #0b1017);
    --skin-control-shadow:
        0 4px 0 #06080c,
        0 9px 16px rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    --skin-shadow: var(--skin-shell-shadow);
    --skin-radius: 10px;
    --skin-led-socket: linear-gradient(180deg, #071116 0, #020609 46%, #010305 100%);
    --skin-led-socket-border: rgba(93, 133, 146, .3);
    --skin-led-socket-shadow: inset 0 1px rgba(142, 182, 194, .1), inset 0 -2px 3px #000;
    --skin-led-idle: linear-gradient(180deg, #0c1a1f 0 34%, #071115 36% 100%);
    --skin-led-pre: linear-gradient(180deg, #58b9c9 0 34%, #245e69 36% 100%);
    --skin-led-active: linear-gradient(180deg, #dffcff 0 34%, #36c9e2 36% 100%);
    min-height: 100%;
    background:
        radial-gradient(circle at 76% -16%, rgba(54, 130, 177, .13), transparent 39%),
        radial-gradient(circle at 15% 116%, rgba(37, 151, 181, .12), transparent 42%),
        linear-gradient(145deg, #03060b 0%, #06101a 47%, #02070d 100%);
    background-attachment: fixed;
}

/* Fusion cabinet navigation glyphs, attached to existing semantic section hooks. */
html[data-visual-skin="tron"] .cabinet-menu-icon {
    display: inline-block;
    width: 24px;
    min-width: 24px;
    height: 24px;
    overflow: hidden;
    color: inherit;
    background-color: currentColor;
    font-size: 0;
    -webkit-mask: var(--cabinet-reference-icon) center / 21px 21px no-repeat;
    mask: var(--cabinet-reference-icon) center / 21px 21px no-repeat;
}

/* Auth surface: Fusion space-field, material face, physical keys and input well. */
html[data-visual-skin="tron"] body:has(:is(
    #authLoginPanel,
    #authSignupPanel,
    #authPasswordResetPanel
):not([style*="display: none"])) {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

html[data-visual-skin="tron"] #pageModeSwitch[hidden],
html[data-visual-skin="tron"] #pageModeSwitch:has(#pageModeAdminButton[hidden]):has(#pageModeTestButton[hidden]):has(#pageModeLogoutButton[hidden]) {
    display: none;
}

html[data-visual-skin="tron"] body:has(:is(
    #authLoginPanel,
    #authSignupPanel,
    #authPasswordResetPanel
):not([style*="display: none"])) #pageModeAuth {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 56px 24px;
    overflow: hidden visible;
    perspective: 1500px;
    background:
        radial-gradient(circle at 76% -16%, rgba(54, 130, 177, .13), transparent 39%),
        radial-gradient(circle at 15% 116%, rgba(37, 151, 181, .12), transparent 42%),
        linear-gradient(145deg, #03060b 0%, #06101a 47%, #02070d 100%);
}

html[data-visual-skin="tron"] body:has(:is(
    #authLoginPanel,
    #authSignupPanel,
    #authPasswordResetPanel
):not([style*="display: none"])) #pageModeAuth::before {
    position: absolute;
    z-index: -4;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(100, 163, 194, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 163, 194, .022) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .92), transparent 96%);
    content: "";
}

html[data-visual-skin="tron"] body:has(:is(
    #authLoginPanel,
    #authSignupPanel,
    #authPasswordResetPanel
):not([style*="display: none"])) #pageModeAuth::after {
    position: absolute;
    z-index: -3;
    width: min(76vw, 900px);
    height: min(30vw, 330px);
    border: 1px solid rgba(102, 175, 205, .035);
    background: linear-gradient(135deg, rgba(82, 206, 226, .024), transparent 60%);
    pointer-events: none;
    transform: perspective(700px) rotateX(68deg) rotateZ(-7deg) translateY(38%);
    content: "";
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel) {
    position: relative;
    isolation: isolate;
    width: min(100%, 650px);
    margin: 0;
    padding: 34px 36px 36px;
    border: 1px solid rgba(125, 153, 178, .24);
    border-radius: 10px;
    color: var(--skin-text);
    background: var(--skin-graphite-grain);
    box-shadow:
        0 0 0 3px #04070b,
        0 0 28px rgba(74, 208, 237, .07),
        0 12px 24px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 -7px 18px rgba(0, 0, 0, .42);
    transform: translateZ(18px);
}

html[data-visual-skin="tron"] #authSignupPanel {
    width: min(100%, 730px);
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)::before {
    position: absolute;
    z-index: 0;
    top: -3px;
    right: 12%;
    left: 12%;
    height: 4px;
    border-radius: 99px;
    background: linear-gradient(90deg,
        #55f7ff 0%, #55f7ff 7%, #477dff 16%, #8c5dff 29%,
        #ed4fff 42%, #ff5063 56%, #ffae42 69%, #67ee9f 84%, #55f7ff 100%);
    box-shadow: 0 0 13px rgba(85, 239, 255, .18);
    opacity: .58;
    filter: blur(1px) saturate(1.25);
    pointer-events: none;
    content: "";
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)::after {
    position: absolute;
    z-index: -1;
    inset: 5px;
    border: 1px solid rgba(199, 226, 244, .032);
    border-radius: 7px;
    pointer-events: none;
    content: "";
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel) > * {
    position: relative;
    z-index: 1;
}

html[data-visual-skin="tron"] .auth-panel-header {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin: 0 0 24px;
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(151, 183, 211, .16);
}

html[data-visual-skin="tron"] .auth-brand-mark {
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    clip-path: polygon(50% 0, 100% 22%, 88% 83%, 50% 100%, 12% 83%, 0 22%);
    color: #dffbff;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, .12), transparent 36%),
        linear-gradient(180deg, #26313d, #090d13);
    box-shadow: inset 0 0 0 1px rgba(112, 221, 242, .34);
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

html[data-visual-skin="tron"] .auth-panel-heading {
    display: grid;
    min-width: 0;
    gap: 3px;
}

html[data-visual-skin="tron"] .auth-eyebrow {
    color: var(--skin-energy);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
}

html[data-visual-skin="tron"] .auth-panel-header h2 {
    margin: 0;
    color: var(--skin-text);
    font-size: clamp(26px, 3.2vw, 34px);
    font-weight: 720;
    letter-spacing: -.025em;
    line-height: 1.08;
}

html[data-visual-skin="tron"] .auth-panel-note {
    color: var(--skin-text-muted);
    font-size: 14px;
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel) label {
    color: var(--skin-text-soft);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: .015em;
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)
    input:not([type="checkbox"]):not([type="radio"]) {
    height: 48px;
    min-height: 48px;
    padding: 0 15px;
    border: 1px solid rgba(122, 160, 184, .2);
    border-radius: 6px;
    color: #e4eef3;
    -webkit-text-fill-color: #e4eef3;
    caret-color: #8eefff;
    background: #060a10;
    box-shadow: inset 0 6px 13px rgba(0, 0, 0, .65), inset 0 1px rgba(255, 255, 255, .03);
    transition: border-color 150ms, box-shadow 220ms, transform 220ms cubic-bezier(.2, 0, 0, 1);
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)
    input:not([type="checkbox"]):not([type="radio"])::placeholder {
    color: #97aab7;
    -webkit-text-fill-color: #97aab7;
    opacity: 1;
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)
    input:not([type="checkbox"]):not([type="radio"]):focus {
    border-color: rgba(85, 239, 255, .74);
    box-shadow:
        inset 0 6px 13px rgba(0, 0, 0, .65),
        inset 0 1px rgba(255, 255, 255, .03),
        0 0 0 2px rgba(85, 239, 255, .13),
        0 0 18px rgba(85, 239, 255, .22);
    transform: translateY(-1px);
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)
    :is(button, .password-visibility-button) {
    min-height: 48px;
    border: 1px solid rgba(136, 171, 197, .26);
    border-radius: 7px;
    color: var(--skin-text);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .065), transparent 28%),
        linear-gradient(180deg, #171e28, #0b1017);
    box-shadow:
        0 4px 0 #06080c,
        0 9px 16px rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    font-weight: 700;
    transition: transform 150ms cubic-bezier(.2, 0, 0, 1), border-color 150ms, box-shadow 150ms;
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)
    button:not(:disabled):hover {
    border-color: rgba(116, 225, 244, .5);
    transform: translateY(-1px);
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)
    button:not(:disabled):active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #030407, inset 0 4px 9px rgba(0, 0, 0, .55);
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)
    .auth-primary-action {
    position: relative;
    border-color: rgba(123, 202, 224, .42);
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), transparent 33%),
        linear-gradient(180deg, #202b37, #0e141d);
    box-shadow:
        0 7px 0 #040609,
        0 14px 22px rgba(0, 0, 0, .4),
        inset 0 1px rgba(255, 255, 255, .09);
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)
    .auth-secondary-action {
    border-color: rgba(136, 171, 197, .18);
    color: var(--skin-text-muted);
    background: rgba(7, 11, 17, .54);
    box-shadow: inset 0 0 0 1px rgba(151, 183, 211, .035);
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)
    .auth-secondary-action:not(:disabled):hover {
    border-color: rgba(151, 183, 211, .3);
    color: #c3d1dc;
    background: rgba(12, 18, 26, .72);
    box-shadow: inset 0 0 0 1px rgba(151, 183, 211, .055);
    transform: none;
}

html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel)
    .auth-secondary-action:not(:disabled):active {
    color: var(--skin-text-muted);
    background: #060a10;
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, .48);
    transform: translateY(1px);
}

html[data-visual-skin="tron"] #registrationTypeChoice:not([style*="display: none"]) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 24px;
}

html[data-visual-skin="tron"] .auth-choice-button {
    min-height: 54px !important;
    letter-spacing: .035em;
}

html[data-visual-skin="tron"] .auth-login-fields {
    margin-bottom: 22px;
}

html[data-visual-skin="tron"] .auth-login-field,
html[data-visual-skin="tron"] #studentSignupPanel > label,
html[data-visual-skin="tron"] #parentStudentLookupPanel > label,
html[data-visual-skin="tron"] .parent-details-form label {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    margin: 14px 0;
}

html[data-visual-skin="tron"] :is(#authSignupPanel, #authLoginPanel) .password-input-wrap {
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 9px;
}

html[data-visual-skin="tron"] :is(#authSignupPanel, #authLoginPanel) .password-visibility-button {
    width: 48px;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0;
    color: var(--skin-text-muted);
    font-size: 17px;
}

html[data-visual-skin="tron"] :is(.auth-login-actions, .parent-lookup-actions) {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 12px;
}

html[data-visual-skin="tron"] .auth-registration-action {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    padding: 16px 0 0;
    border: 0;
    border-top: 1px solid rgba(151, 183, 211, .1);
    border-radius: 0;
    color: var(--skin-text-muted);
    background: transparent;
    box-shadow: none;
}

html[data-visual-skin="tron"] .auth-registration-action .auth-secondary-action {
    min-height: 40px;
    padding-inline: 15px;
}

html[data-visual-skin="tron"] .auth-registration-action > span {
    color: #a9bac7;
}

html[data-visual-skin="tron"] :is(#parentStudentConfirmation, #signupSuccessPanel) {
    padding: 18px;
    border: 1px solid rgba(117, 240, 177, .22);
    border-radius: 8px;
    background: rgba(117, 240, 177, .045);
}

html[data-visual-skin="tron"] :is(#authSignupPanel, #authLoginPanel, #authPasswordResetPanel)
    .message:not(:empty) {
    min-height: 42px;
    margin-top: 16px;
    padding: 11px 13px;
    border: 1px solid rgba(151, 183, 211, .14);
    border-left: 3px solid var(--skin-energy);
    border-radius: 6px;
    color: var(--skin-text-muted);
    background: rgba(3, 8, 13, .68);
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .38);
    font-size: 13px;
    line-height: 1.45;
}

html[data-visual-skin="tron"] :is(#authSignupPanel, #authLoginPanel, #authPasswordResetPanel)
    .message.error:not(:empty) {
    border-left-color: var(--skin-danger);
    color: var(--skin-danger);
}

html[data-visual-skin="tron"] :is(#authSignupPanel, #authLoginPanel, #authPasswordResetPanel)
    .message.success:not(:empty) {
    border-left-color: var(--skin-success);
    color: var(--skin-success);
}

html[data-visual-skin="tron"] #authSignupBackButton {
    width: 100%;
    margin-top: 14px;
}

@media (max-width: 620px) {
    html[data-visual-skin="tron"] body:has(:is(
        #authLoginPanel,
        #authSignupPanel,
        #authPasswordResetPanel
    ):not([style*="display: none"])) #pageModeAuth {
        min-height: 100dvh;
        place-items: start center;
        padding: 22px 14px 36px;
        overflow: visible;
    }

    html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel) {
        width: 100%;
        margin: 0;
        padding: 25px 22px 28px;
        transform: none;
    }

    html[data-visual-skin="tron"] .auth-panel-header {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    html[data-visual-skin="tron"] .auth-brand-mark {
        width: 46px;
        height: 46px;
        font-size: 21px;
    }

    html[data-visual-skin="tron"] .auth-panel-header h2 {
        font-size: clamp(24px, 7.6vw, 30px);
    }

    html[data-visual-skin="tron"] .auth-login-field,
    html[data-visual-skin="tron"] #studentSignupPanel > label,
    html[data-visual-skin="tron"] #parentStudentLookupPanel > label,
    html[data-visual-skin="tron"] .parent-details-form label {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }
}

@media (max-width: 420px) {
    html[data-visual-skin="tron"] body:has(:is(
        #authLoginPanel,
        #authSignupPanel,
        #authPasswordResetPanel
    ):not([style*="display: none"])) #pageModeAuth {
        padding: 12px 8px 28px;
    }

    html[data-visual-skin="tron"] body:has(:is(
        #authLoginPanel,
        #authSignupPanel,
        #authPasswordResetPanel
    ):not([style*="display: none"])) #pageModeAuth::after {
        display: none;
    }

    html[data-visual-skin="tron"] :is(#authLoginPanel, #authSignupPanel, #authPasswordResetPanel) {
        padding: 22px 16px 25px;
        border-radius: 8px;
        box-shadow:
            0 0 0 2px #04070b,
            0 10px 22px rgba(0, 0, 0, .4),
            inset 0 1px rgba(255, 255, 255, .06),
            inset 0 -7px 18px rgba(0, 0, 0, .42);
    }

    html[data-visual-skin="tron"] .auth-panel-header {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
    }

    html[data-visual-skin="tron"] .auth-brand-mark {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }

    html[data-visual-skin="tron"] .auth-eyebrow {
        font-size: 9px;
        letter-spacing: .1em;
    }

    html[data-visual-skin="tron"] .auth-panel-note {
        font-size: 12px;
    }

    html[data-visual-skin="tron"] :is(.auth-login-actions, .parent-lookup-actions),
    html[data-visual-skin="tron"] #registrationTypeChoice:not([style*="display: none"]) {
        grid-template-columns: minmax(0, 1fr);
    }

    html[data-visual-skin="tron"] .auth-registration-action {
        grid-template-columns: auto auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 15px 0 0;
    }

    html[data-visual-skin="tron"] .auth-registration-action button {
        width: auto;
    }
}

html[data-visual-skin="tron"] .cabinet-menu-button {
    gap: 11px;
}

html[data-visual-skin="tron"] .cabinet-menu-button[data-section="home"] .cabinet-menu-icon {
    --cabinet-reference-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.5 12 4.5l8.5 7V20h-6v-5.5h-5V20h-6z'/%3E%3C/svg%3E");
}

html[data-visual-skin="tron"] .cabinet-menu-button[data-section="learning"] .cabinet-menu-icon {
    --cabinet-reference-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5C7 4.5 9.5 5 12 7v12c-2.5-2-5-2.5-8-1.5zM20 5.5c-3-1-5.5-.5-8 1.5v12c2.5-2 5-2.5 8-1.5zM12 7v12'/%3E%3C/svg%3E");
}

html[data-visual-skin="tron"] .cabinet-menu-button[data-section="lessons"] .cabinet-menu-icon {
    --cabinet-reference-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3zM8 3v4m8-4v4M4 10h16m-12 4h3m2 0h3'/%3E%3C/svg%3E");
}

html[data-visual-skin="tron"] .cabinet-menu-button[data-section="progress"] .cabinet-menu-icon {
    --cabinet-reference-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19V9M12 19V5M19 19v-7M3 19h18'/%3E%3C/svg%3E");
}

html[data-visual-skin="tron"] .cabinet-menu-button[data-section="notifications"] .cabinet-menu-icon {
    --cabinet-reference-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 17h12l-1.5-2.5V10a4.5 4.5 0 0 0-9 0v4.5zM10 20h4'/%3E%3C/svg%3E");
}

html[data-visual-skin="tron"] .cabinet-menu-button[data-section="settings"] .cabinet-menu-icon {
    --cabinet-reference-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM19 13.5v-3l-2-.7-.5-1.2.9-1.9-2.1-2.1-1.9.9-1.2-.5-.7-2h-3l-.7 2-1.2.5-1.9-.9-2.1 2.1.9 1.9-.5 1.2-2 .7v3l2 .7.5 1.2-.9 1.9 2.1 2.1 1.9-.9 1.2.5.7 2h3l.7-2 1.2-.5 1.9.9 2.1-2.1-.9-1.9.5-1.2z'/%3E%3C/svg%3E");
}

html[data-visual-skin="tron"] body {
    position: relative;
    min-height: 100vh;
    color: var(--skin-text);
    background: transparent !important;
    font-family: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

@supports (min-height: 100dvh) {
    html[data-visual-skin="tron"] body {
        min-height: 100dvh;
    }
}

/* Fusion space-field recipe is mapped to a fixed production pseudo-layer. */
html[data-visual-skin="tron"] body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(100, 163, 194, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 163, 194, .022) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .92), transparent 96%);
    content: "";
}

html[data-visual-skin="tron"] :where(h1, h2, h3, h4, strong) {
    color: var(--skin-text);
}

html[data-visual-skin="tron"] :where(.muted, .small, .cabinet-notification-card-description,
    .cabinet-notification-date, .cabinet-placeholder, .cabinet-settings-status) {
    color: var(--skin-text-muted);
}

html[data-visual-skin="tron"] :where(.section, .admin-theme-card, .theme-card, .signup-card,
    .cabinet-profile-card, .cabinet-lesson-card, .cabinet-notification-card,
    .cabinet-settings-card, .admin-tail-card, .admin-controls-panel,
    .admin-tails-section, .admin-student-settings-card) {
    border: 1px solid rgba(125, 153, 178, .24);
    border-radius: 10px;
    color: var(--skin-text);
    background: var(--skin-graphite-grain);
    box-shadow: var(--skin-shell-shadow);
}

html[data-visual-skin="tron"] #pageModeAuth,
html[data-visual-skin="tron"] #pageModeAdmin,
html[data-visual-skin="tron"] #pageModeTest,
html[data-visual-skin="tron"] .cabinet-shell,
html[data-visual-skin="tron"] .cabinet-workspace {
    color: var(--skin-text);
    background: transparent;
}

html[data-visual-skin="tron"] body :where(
    button,
    select,
    textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"])
) {
    border-color: rgba(136, 171, 197, .26);
    color: var(--skin-text);
    background: var(--skin-control-background);
    box-shadow: var(--skin-control-shadow);
}

html[data-visual-skin="tron"] body :where(select, textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) {
    background: #060a10;
    box-shadow: inset 0 6px 13px rgba(0, 0, 0, .65), inset 0 1px rgba(255, 255, 255, .03);
}

html[data-visual-skin="tron"] body :where(input, textarea)::placeholder {
    color: var(--skin-text-dim);
    opacity: 1;
}

html[data-visual-skin="tron"] body button:not(:disabled):not([aria-disabled="true"]):hover {
    border-color: rgba(116, 202, 224, .3);
    color: #e6f8ff;
    box-shadow: 0 5px 0 #040609, 0 10px 18px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .06);
}

html[data-visual-skin="tron"] body :where(button, input, select, textarea):focus-visible {
    outline: 2px solid var(--skin-focus);
    outline-offset: 3px;
}

html[data-visual-skin="tron"] body :where(button, input, select, textarea):disabled,
html[data-visual-skin="tron"] body [aria-disabled="true"] {
    cursor: not-allowed;
    color: var(--skin-text-dim);
    border-color: rgba(113, 129, 145, .22);
    background: #0a0e14;
    box-shadow: inset 0 5px 10px rgba(0, 0, 0, .62);
}

html[data-visual-skin="tron"] .page-mode-switch {
    padding: 5px;
    border: 1px solid var(--skin-line);
    border-radius: 10px;
    background: #04070b;
    box-shadow: inset 0 4px 10px #000, 0 10px 24px rgba(0, 0, 0, .28);
}

html[data-visual-skin="tron"] .page-mode-switch button.active {
    border-color: rgba(123, 202, 224, .34);
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), transparent 33%),
        linear-gradient(180deg, #202b37, #0e141d);
    box-shadow: 0 7px 0 #040609, 0 14px 22px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .09);
}

html[data-visual-skin="tron"] .cabinet-panel {
    border-color: var(--skin-line);
    background: var(--skin-graphite-0);
    box-shadow: 0 20px 42px rgba(0, 0, 0, .46);
}

html[data-visual-skin="tron"] .cabinet-shell {
    grid-template-columns: 188px minmax(0, 1fr);
    perspective: 1500px;
}

html[data-visual-skin="tron"] .cabinet-shell.sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr);
}

html[data-visual-skin="tron"] :where(.cabinet-sidebar, .admin-sidebar) {
    gap: 7px;
    padding: 12px 10px 10px;
    border: 1px solid rgba(125, 153, 178, .24);
    border-radius: 10px;
    background: var(--skin-graphite-grain);
    box-shadow: var(--skin-shell-shadow);
}

html[data-visual-skin="tron"] :where(.cabinet-sidebar-footer, .admin-sidebar-footer) {
    border-top-color: rgba(125, 153, 178, .24);
}

html[data-visual-skin="tron"] :where(.cabinet-sidebar-toggle, .cabinet-menu-button,
    .cabinet-sidebar-footer #pageModeLogoutButton,
    .admin-sidebar button) {
    position: relative;
    min-height: 48px;
    border: 1px solid rgba(121, 151, 174, .14);
    border-radius: 7px;
    color: #92a2b0;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, .035), transparent 30%),
        linear-gradient(180deg, #121923, #090d13);
    box-shadow: 0 2px 0 #040609, inset 0 2px 8px rgba(0, 0, 0, .38);
}

html[data-visual-skin="tron"] :where(.cabinet-menu-button,
    .cabinet-sidebar-footer #pageModeLogoutButton, .admin-sidebar button):hover {
    color: #e6f8ff;
    border-color: rgba(116, 202, 224, .3);
    box-shadow: 0 5px 0 #040609, 0 10px 18px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .06);
}

html[data-visual-skin="tron"] .cabinet-menu-button.active,
html[data-visual-skin="tron"] .admin-sidebar button.active {
    border-color: rgba(123, 202, 224, .34);
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .075), transparent 33%),
        linear-gradient(180deg, #202b37, #0e141d);
    box-shadow: 0 7px 0 #040609, 0 14px 22px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .09);
}

html[data-visual-skin="tron"] .cabinet-menu-button.active {
    transform: translateY(-3px) translateZ(18px);
}

html[data-visual-skin="tron"] .cabinet-menu-button.active::before,
html[data-visual-skin="tron"] .admin-sidebar button.active::before {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -2px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--skin-energy);
    box-shadow: 0 0 10px rgba(85, 239, 255, .42);
    content: "";
}

html[data-visual-skin="tron"] :where(.cabinet-profile-card-title,
    .cabinet-notification-card-title, .cabinet-settings-field) {
    color: var(--skin-text);
}

html[data-visual-skin="tron"] .cabinet-notification-card {
    border-left-color: var(--skin-energy);
}

html[data-visual-skin="tron"] .cabinet-notification-icon,
html[data-visual-skin="tron"] .cabinet-notification-badge {
    color: var(--skin-energy);
    background: rgba(85, 239, 255, .1);
}

html[data-visual-skin="tron"] .cabinet-placeholder {
    border-color: rgba(151, 183, 211, .16);
    background:
        linear-gradient(90deg, transparent, rgba(85, 239, 255, .03), transparent),
        #090f16;
}

html[data-visual-skin="tron"] [data-site-visual-skin-selector="true"] {
    border-color: rgba(122, 160, 184, .2);
    color: var(--skin-text);
    background: #060a10;
    box-shadow: inset 0 6px 13px rgba(0, 0, 0, .65), inset 0 1px rgba(255, 255, 255, .03);
}

html[data-visual-skin="tron"] :where(.message.error, .error) {
    color: var(--skin-danger);
}

html[data-visual-skin="tron"] :where(.message.success, .success) {
    color: var(--skin-success);
}

@media (prefers-reduced-motion: reduce) {
    html[data-visual-skin="tron"] *,
    html[data-visual-skin="tron"] *::before,
    html[data-visual-skin="tron"] *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    html[data-visual-skin="tron"] :where(.section, .cabinet-sidebar, .cabinet-workspace,
        .cabinet-settings-card, .cabinet-profile-card, .cabinet-notification-card,
        .admin-sidebar, .admin-theme-card) {
        border: 1px solid CanvasText;
        forced-color-adjust: auto;
    }

    html[data-visual-skin="tron"] :where(.cabinet-menu-button.active,
        .admin-sidebar button.active, .page-mode-switch button.active) {
        border-color: Highlight;
        color: HighlightText;
        background: Highlight;
    }
}

/* Keep the reference glyph geometry after legacy cabinet-menu declarations. */
html[data-visual-skin="tron"] .cabinet-menu-icon {
    display: inline-block;
    width: 24px;
    min-width: 24px;
    height: 24px;
    overflow: hidden;
    color: inherit;
    background-color: currentColor;
    font-size: 0;
    -webkit-mask: var(--cabinet-reference-icon) center / 21px 21px no-repeat;
    mask: var(--cabinet-reference-icon) center / 21px 21px no-repeat;
}