<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <title>Red Talent — Login</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
    <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" crossorigin="anonymous"></script>
    <style>
        * { font-family: 'Vazirmatn', sans-serif; box-sizing: border-box; }
        .ms { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none; }
        .ms-fill { font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }
        .hide-sb::-webkit-scrollbar { display: none; }
        .hide-sb { -ms-overflow-style: none; scrollbar-width: none; }
        @keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
        @keyframes pop { 0%{transform:scale(0.85);opacity:0} 60%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
        @keyframes slide { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
        .fade-up { animation: fadeUp 0.3s ease both; }
        .pop-in { animation: pop 0.4s cubic-bezier(.34,1.56,.64,1) both; }
        .slide-in { animation: slide 0.25s ease both; }
        html { min-height: 100%; }
        .app-page {
            min-height: 100vh;
            min-height: 100dvh;
            margin: 0;
            background: #eef2f7;
        }
        .app-shell {
            width: 100%;
            min-height: 100vh;
            min-height: 100dvh;
            padding: 24px;
            display: grid;
            place-items: center;
        }
        .app-container {
            position: relative;
            width: min(100%, 430px);
            height: min(844px, calc(100vh - 48px));
            height: min(844px, calc(100dvh - 48px));
            min-height: min(640px, calc(100vh - 48px));
            min-height: min(640px, calc(100dvh - 48px));
            overflow: hidden;
            background: #F5F7FA;
            border-radius: 28px;
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22), 0 4px 18px rgba(15, 23, 42, 0.08);
        }
        .app-container button {
            transition-property: translate, transform, box-shadow, background-color, border-color, color, opacity;
            transition-duration: 180ms;
            transition-timing-function: ease;
        }
        .app-container button:disabled { translate: none; transform: none; }
        @media (hover: hover) {
            .app-container button:not(:disabled):hover { translate: 0 -1px; }
        }
        @media (min-width: 768px) {
            .app-shell { padding: 32px; }
            .app-container {
                width: min(430px, calc(100vw - 64px));
                height: min(844px, calc(100vh - 64px));
                height: min(844px, calc(100dvh - 64px));
                min-height: min(680px, calc(100vh - 64px));
                min-height: min(680px, calc(100dvh - 64px));
            }
        }
        @media (max-width: 640px) {
            .app-shell { min-height: 100vh; min-height: 100dvh; padding: 0; display: block; }
            .app-container {
                width: 100vw;
                height: 100vh;
                height: 100dvh;
                min-height: 100vh;
                min-height: 100dvh;
                border-radius: 0;
                box-shadow: none;
            }
        }
    </style>
</head>
