/* Solo TV auth — Netflix-style sign-in */
:root{
  color-scheme:dark;
  --bg:#141414;
  --card:#1f1f1f;
  --fg:#e5e5e5;
  --muted:#a3a3a3;
  --faint:#6b6b6b;
  --accent:#e50914;
  --accent-h:#ff1a27;
  --ok:#46d369;
  --line:rgba(255,255,255,.1);
  --input-bg:#2a2a2a;
  --input-border:rgba(255,255,255,.14);
  --radius:6px;
  font-family:"Manrope",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
}

/* ---- outer layout ---- */
main{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:40px 20px 60px;
}

/* ---- logo ---- */
a.logo{
  font-family:"Anton","Arial Narrow",sans-serif;
  font-size:36px;
  letter-spacing:.5px;
  color:var(--accent);
  text-decoration:none;
  text-transform:uppercase;
  line-height:1;
  user-select:none;
  margin-bottom:36px;
  display:block;
}
a.logo span{color:var(--fg)}

/* ---- form card ---- */
#content{
  width:100%;
  max-width:420px;
  background:rgba(0,0,0,.6);
  border:1px solid var(--line);
  border-radius:12px;
  padding:40px 40px 36px;
  backdrop-filter:blur(10px);
}
@media(max-width:480px){
  #content{padding:28px 22px 24px;border-radius:10px}
}

/* ---- headings & body text ---- */
#content h1{
  font-size:28px;
  font-weight:800;
  letter-spacing:-.4px;
  color:var(--fg);
  margin-bottom:8px;
}
#content p{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  margin-bottom:24px;
}
#content p:last-child{
  margin-bottom:0;
  margin-top:18px;
}

/* ---- form ---- */
form{
  display:grid;
  gap:0;
}
label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:18px;
  margin-bottom:6px;
  display:block;
}
input{
  width:100%;
  padding:14px 16px;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--radius);
  color:var(--fg);
  font:600 15px "Manrope",system-ui,sans-serif;
  outline:none;
  transition:border-color .2s;
  min-width:0;
}
input:focus{border-color:rgba(255,255,255,.4)}
input::placeholder{color:var(--faint)}
small{
  display:block;
  color:var(--faint);
  font-size:11.5px;
  margin-top:6px;
}

/* ---- submit button ---- */
form button[type=submit]{
  margin-top:24px;
  width:100%;
  padding:15px;
  background:var(--accent);
  color:#fff;
  font:800 15px "Manrope",system-ui,sans-serif;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  letter-spacing:.2px;
  transition:background .2s,transform .1s;
}
form button[type=submit]:hover{background:var(--accent-h)}
form button[type=submit]:active{transform:scale(.98)}
form button[type=submit]:disabled{opacity:.5;cursor:wait;transform:none}

/* ---- links ---- */
a{color:#e5e5e5;text-decoration:none;font-weight:700}
a:hover{text-decoration:underline}

/* ---- notice / error ---- */
#notice{
  max-width:420px;
  width:100%;
  margin-top:18px;
  color:#ffb3b8;
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  overflow-wrap:anywhere;
  min-height:20px;
  text-align:center;
}

/* ---- admin / waiting pages ---- */
article{
  border:1px solid var(--line);
  padding:18px 20px;
  margin:12px 0;
  border-radius:10px;
  background:var(--input-bg);
}
article h2{
  font-size:17px;
  font-weight:700;
  margin-bottom:6px;
}
article p{
  margin:5px 0;
  font-size:13px;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.status{font-weight:700;color:var(--muted)}
article.approved .status{color:var(--ok)}
article.rejected .status,article.revoked .status{color:#ff6b6b}

.top{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:20px;
}
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
button,.button{
  padding:10px 16px;
  background:var(--input-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--fg);
  font:600 13px "Manrope",system-ui,sans-serif;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s,border-color .15s;
  min-height:40px;
  white-space:nowrap;
}
button:hover,.button:hover{background:var(--surface-2,#3a3a3a);border-color:rgba(255,255,255,.22)}
button:disabled{opacity:.4;cursor:default}

.reset-link{
  width:100%;
  margin-top:10px;
  font-size:12px;
  background:rgba(0,0,0,.4);
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 12px;
  min-width:0;
}