:root {
            --bg: #f4f5f7;
            --card: #ffffff;
            --border: #d9dee6;
            --text: #1d2733;
            --muted: #6b7280;
            --accent: #2f6fed;
            --danger-bg: #fff1f1;
            --danger-border: #f2b8b5;
            --danger-text: #9f1d1d;
            --button: #de6b6b;
            --button-hover: #c95b5b;
            --shadow: 0 10px 24px rgba(0,0,0,.08);
            --radius: 16px;
        }

        * {
            box-sizing: border-box;
        }

        html {
            height: 100%;
            scroll-padding-bottom: 14rem;
        }

        body {
            margin: 0;
            min-height: 100dvh;
            font-family: Arial, Helvetica, sans-serif;
            background: var(--bg);
            color: var(--text);
        }

        .page {
            min-height: 100dvh;
            display: flex;
            justify-content: flex-start;
            align-items: stretch;
            padding:
                max(16px, env(safe-area-inset-top))
                16px
                max(16px, env(safe-area-inset-bottom))
                16px;
        }

        .wrap {
            width: 100%;
            max-width: 420px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 18px 16px;
        }

        .brand {
            text-align: center;
            padding: 14px 12px;
        }

        .brand img {
            max-width: 100%;
            height: auto;
            max-height: 84px;
            object-fit: contain;
        }

        .title {
            margin: 0 0 6px;
            font-size: 1.35rem;
            line-height: 1.2;
        }

        .subtitle {
            margin: 0 0 16px;
            color: var(--muted);
            font-size: 0.95rem;
        }

        .error {
            margin: 0 0 14px;
            padding: 12px 14px;
            border: 1px solid var(--danger-border);
            background: var(--danger-bg);
            color: var(--danger-text);
            border-radius: 12px;
            font-size: 0.95rem;
        }

        .field {
            margin-bottom: 14px;
        }

        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 700;
            font-size: 0.98rem;
        }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            height: 52px;
            padding: 0 14px;
            border: 1px solid #cfd6df;
            border-radius: 12px;
            background: #fff;
            font-size: 16px; /* prevents iPhone zoom */
            line-height: 1.2;
            outline: none;
            transition: border-color .2s, box-shadow .2s;
        }

        input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 4px rgba(47, 111, 237, .14);
        }

        .button {
            width: 100%;
            min-height: 52px;
            border: 0;
            border-radius: 12px;
            background: var(--button);
            color: #fff;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            margin-top: 4px;
        }

        .button:hover,
        .button:focus {
            background: var(--button-hover);
        }

        .support {
            text-align: center;
            font-size: 0.94rem;
            color: var(--muted);
            line-height: 1.5;
        }

        .support a,
        .footer a {
            color: #1f4fbf;
            text-decoration: none;
        }

        .support a:hover,
        .footer a:hover {
            text-decoration: underline;
        }

        .footer {
            text-align: center;
            font-size: 0.88rem;
            color: var(--muted);
            line-height: 1.5;
            padding-bottom: 8px;
        }

        @media (max-height: 700px) {
            .brand img {
                max-height: 64px;
            }

            .card {
                padding: 16px 14px;
            }

            .field {
                margin-bottom: 12px;
            }
        }