:root{
--accent:#95b806;
--danger:#ff3b3b;
--warning:#ffd000;
}

/* base */

html, body{
height:100%;
}

body{
margin:0;
background:#0b0b0b;
font-family:"Inter", sans-serif;
color:#d4d4d4;
}

.container{
max-width:1000px;
margin:auto;
padding:0 20px;
}

/* header */

.header{
margin-top:22px;
background:#242424;
border-radius:6px;
overflow:hidden;
box-shadow:0 0 10px rgba(0,0,0,.5);
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 20px;
}

.rainbow{
height:3px;
background:linear-gradient(90deg,#ff3b3b,#ff8c00,#ffd000,#6cff00,#00e5ff,#0066ff,#a200ff);
}

.logo{
font-size:26px;
font-weight:600;
}

.logo span{
color:var(--accent);
}

/* nav */

.nav{
padding:10px 22px 18px;
}

.nav a{
color:#bdbdbd;
text-decoration:none;
transition:.2s;
margin-right:10px;
}

.nav a:hover,
.nav a.active{
color:var(--accent);
text-shadow:0 0 6px rgba(149,184,6,.7);
}

/* AUTH (LOGIN PAGE) */

.auth-wrapper{
display:flex;
justify-content:center;
align-items:center;
min-height:calc(100vh - 140px);
}

.auth-box{
width:360px;
background:#242424;
border:1px solid #2e2e2e;
border-radius:6px;
box-shadow:0 0 20px rgba(0,0,0,.6);
overflow:hidden;
transition:.2s;
}

.auth-box:hover{
box-shadow:0 0 25px rgba(149,184,6,.15);
}

.auth-title{
background:#303030;
padding:12px;
text-align:center;
font-weight:500;
font-size:18px;
letter-spacing:.5px;
}

.auth-body{
padding:20px;
}

.auth-body input{
margin-bottom:12px;
}

/* inputs */

input, select{
background:#1c1c1c;
border:1px solid #333;
color:#d4d4d4;
padding:10px;
border-radius:4px;
width:100%;
}

/* buttons */

button{
background:#303030;
border:1px solid #3a3a3a;
color:#d4d4d4;
padding:10px;
border-radius:4px;
cursor:pointer;
transition:.2s;
width:100%;
}

button:hover{
color:var(--accent);
border-color:var(--accent);
}

/* error */

.error{
color:var(--danger);
margin-bottom:12px;
}