:root{
 --bg: #f3f4f6;
 --card: #ffffff;
 --text: #111827;
 --muted: #6b7280;
 --line: #e5e7eb;

 --primary: #2563eb;
 --primary2: #1d4ed8;
}

*{ box-sizing: border-box; }

body{
 margin: 0;
 background: linear-gradient(180deg, #eef2ff 0%, var(--bg) 100%);
 font-family: Arial, sans-serif;
 color: var(--text);
}

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

main.auth-box{
 width: 100%;
 max-width: 420px;
 background: var(--card);
 border: 1px solid rgba(0,0,0,.06);
 border-radius: 14px;
 box-shadow: 0 10px 24px rgba(17,24,39,.12);
 overflow: hidden;
}

.hero{
 padding: 18px 18px 10px;
 background: linear-gradient(135deg, #111827, #1f2937);
 color: #fff;
}

.hero h1{
 margin: 0;
 font-size: 18px;
 line-height: 1.1;
}

.hero p{
 margin: 6px 0 0;
 color: #cbd5e1;
 font-size: 13px;
}

.card{
 padding: 14px 18px 18px;
}

.card h2{
 margin: 0 0 12px;
 font-size: 16px;
}

.msg{
 background: #fef3c7;
 border: 1px solid #fde68a;
 color: #92400e;
 padding: 8px 10px;
 border-radius: 10px;
 margin-bottom: 12px;
 font-size: 13px;
}

form{
 display: flex;
 flex-direction: column;
 gap: 10px;
}

label{
 font-size: 13px;
 color: var(--text);
 font-weight: 600;
}

select,
input[type="password"]{
 width: 100%;
 padding: 10px 12px;
 border: 1px solid var(--line);
 border-radius: 10px;
 outline: none;
 font-size: 14px;
 background: #fff;
}

select:focus,
input[type="password"]:focus{
 border-color: rgba(37,99,235,.6);
 box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

button[type="submit"]{
 margin-top: 4px;
 padding: 10px 12px;
 border: none;
 border-radius: 10px;
 background: var(--primary);
 color: #fff;
 font-weight: 700;
 cursor: pointer;
 font-size: 14px;
}

button[type="submit"]:hover{
 background: var(--primary2);
}

.link-btn{
 display: inline-block;
 margin-top: 6px;
 text-align: center;
 font-size: 13px;
 color: var(--primary);
 text-decoration: none;
 font-weight: 700;
}

.link-btn:hover{
 text-decoration: underline;
}