body {
            background: #001A26;
            color: #ffffff;
        }

        .login-shell {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 28px 18px;
        }

        .login-panel {
            width: 100%;
            max-width: 760px;
            background: #ffffff;
            color: #001A26;
            padding: 44px 36px;
            border-radius: 34px;
            position: relative;
        }

        .login-panel > .lang-switcher {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 20;
        }

        .lang-switcher {
            position: relative;
            display: inline-flex;
        }

        .lang-toggle {
            min-width: 64px;
            height: 42px;
            border-radius: 999px;
            border: 2px solid #001A26;
            background: #FFFFFF;
            color: #001A26;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 0 8px;
        }

        .lang-flag {
            width: 18px;
            height: 12px;
            border-radius: 2px;
            border: 1px solid rgba(0, 26, 38, 0.22);
            background-color: #E5E7E9;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

        .lang-caret {
            line-height: 1;
            font-size: 0.56rem;
            opacity: 0.86;
        }

        .lang-toggle:hover {
            background: rgba(0, 26, 38, 0.08);
        }

        .lang-toggle:active {
            transform: scale(0.96);
        }

        .lang-menu {
            position: absolute;
            right: 0;
            top: calc(100% + 8px);
            min-width: 178px;
            border-radius: 16px;
            border: 2px solid #001A26;
            background: #FFFFFF;
            padding: 6px;
            box-shadow: 0 16px 34px rgba(0, 26, 38, 0.24);
            z-index: 120;
            display: grid;
            gap: 4px;
        }

        .lang-menu[hidden] {
            display: none;
        }

        .lang-option {
            border: 0;
            border-radius: 11px;
            background: transparent;
            color: #001A26;
            padding: 9px 10px;
            width: 100%;
            cursor: pointer;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 10px;
            text-align: left;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .lang-option-flag {
            width: 20px;
            height: 14px;
            border-radius: 2px;
            border: 1px solid rgba(0, 26, 38, 0.22);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-color: #E5E7E9;
        }

        .lang-option-name {
            line-height: 1.2;
        }

        .lang-option-code {
            font-size: 0.68rem;
            line-height: 1;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .lang-option:hover {
            background: #F2F4F5;
        }

        .lang-option.active {
            background: #001A26;
            color: #FFFFFF;
        }

        .flag-us {
            background:
              linear-gradient(#3C3B6E, #3C3B6E) 0 0 / 40% 55% no-repeat,
              repeating-linear-gradient(
                to bottom,
                #B22234 0 7.69%,
                #FFFFFF 7.69% 15.38%
              );
        }

        .flag-es {
            background: linear-gradient(
              to bottom,
              #AA151B 0 25%,
              #F1BF00 25% 75%,
              #AA151B 75% 100%
            );
        }

        .flag-de {
            background: linear-gradient(
              to bottom,
              #000000 0 33.33%,
              #DD0000 33.33% 66.66%,
              #FFCE00 66.66% 100%
            );
        }

        .brand-row {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 26px;
        }

        .login-icon {
            width: 38px;
            height: 38px;
            object-fit: cover;
        }

        .login-brand {
            font-size: 1.05rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        h1 {
            margin: 0;
            font-size: clamp(2rem, 4.8vw, 3.25rem);
            line-height: 1;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .subtitle {
            margin: 14px 0 32px;
            font-size: 16px;
            line-height: 26px;
            letter-spacing: 0.5px;
            color: #001A26;
        }

        .form-group {
            margin-bottom: 18px;
        }

        .xibo-client-setup[hidden] {
            display: none;
        }

        .form-group small {
            display: block;
            margin-top: 9px;
            color: #5f747e;
            font-size: 0.78rem;
            line-height: 1.5;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.76rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #001A26;
        }

        input {
            width: 100%;
            border: 2px solid #001A26;
            padding: 12px 14px;
            font-size: 1rem;
            color: #001A26;
            background: #ffffff;
            outline: none;
            border-radius: 16px;
        }

        input:focus {
            border-color: #E60000;
        }

        .auth-btn {
            width: 100%;
            text-align: left;
            margin-top: 12px;
        }

        .auth-btn:disabled {
            cursor: not-allowed;
            opacity: 0.55;
        }

        .login-message {
            min-height: 24px;
            margin: 16px 0 0;
            color: #315968;
            font-size: 0.88rem;
            line-height: 1.5;
        }

        .login-message.is-error {
            color: #b00020;
            font-weight: 600;
        }

        .login-foot {
            margin-top: 20px;
            color: #90A7B2;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        @media (max-width: 640px) {
            .login-panel {
                padding: 30px 18px;
            }

            .login-panel > .lang-switcher {
                top: 12px;
                right: 12px;
            }

            .lang-toggle {
                min-width: 58px;
                height: 38px;
                gap: 5px;
                padding: 0 8px;
                font-size: 0.66rem;
            }

            .lang-flag {
                width: 17px;
                height: 11px;
            }

            .lang-menu {
                min-width: 164px;
            }

            .lang-option {
                font-size: 0.75rem;
                padding: 8px 9px;
            }

            .lang-option-code {
                font-size: 0.64rem;
            }

            .auth-btn {
                font-size: 0.85rem;
            }
        }