@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;300;400;500;600;700&display=swap');

:root{
    --bg: #1e1f23;
    --panel-main: #212327; /* match main app background */
    --muted: #b7bac0;
    --card: #2f3438;
    --accent: #5b8cff;
}

*{box-sizing:border-box;margin:0;padding:0;font-family: 'JetBrains Mono', monospace}

html,body{height:100%}

/* Full-screen split layout */
.split{
    display:flex;
    height:100vh;
    width:100vw;
}

.left-panel{
    flex:1;
    background:var(--panel-main);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.left-content{max-width:420px;padding:40px}
.brand{font-size:40px;letter-spacing:1px;margin-bottom:8px}
.tag{color:var(--muted);margin-top:6px}

.right-panel{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg, rgba(0,0,0,0.03), transparent);
}

.auth-card{
    width:400px;
    background:var(--card);
    color:#fff;
    padding:36px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
    text-align:left;
}

.auth-card h2{font-size:22px;margin-bottom:6px}
.muted{color:var(--muted);margin-bottom:18px}

.form-box{display:flex;flex-direction:column;gap:12px}
label{font-size:13px;color:var(--muted)}
input{padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff;font-size:14px}
input::placeholder{color:rgba(255,255,255,0.45)}

button{margin-top:8px;padding:12px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
button:hover{filter:brightness(.95)}

.signup{color:var(--muted);margin-top:14px;text-align:center}
.signup a{color:var(--accent);text-decoration:none}

/* Responsive: stack on small screens */
@media (max-width:800px){
    .split{flex-direction:column}
    .left-panel{height:200px}
    .right-panel{padding:40px}
    .auth-card{width:100%;max-width:420px}
}