:root{
  --bg:#0e1117;
  --card:#161b22;
  --text:#e6edf3;
  --muted:#9da7b3;
  --accent:#e5a00d;   /* style Plex */
  --danger:#d9534f;
  --line:#2b3138;
}

*{ box-sizing:border-box }

/* =========================
   BODY — MODE LOGIN (DEFAULT)
   ========================= */
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* =========================
   BODY — MODE ADMIN
   ========================= */
body.admin-page{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* =========================
   CARD — MODE LOGIN (DEFAULT)
   ========================= */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px 26px;
  width:100%;
  max-width:420px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

/* =========================
   CARD — MODE ADMIN
   ========================= */
body.admin-page .card{
  max-width:none;
  width:auto;
  box-shadow:none;
}

/* =========================
   TITRES
   ========================= */

h1{
  text-align:center;
  text-transform: uppercase;
}

h2{
  margin:0 0 16px;
  text-align:center;
  font-weight:700;
}

h3{
  text-align:center;
}

/* Titres admin alignés à gauche */
body.admin-page h2{
  text-align:left;
}

/* =========================
   FORMULAIRES
   ========================= */
input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0b0f14;
  color:var(--text);
  outline:none;
}

input:focus{
  border-color:var(--accent);
}

button{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:none;
  background:var(--accent);
  color:#000;
  font-weight:800;
  cursor:pointer;
}

button:hover{ opacity:.9 }

/* =========================
   MESSAGES
   ========================= */
.msg-error{
  background:#2a1414;
  border:1px solid var(--danger);
  color:#ffb3b3;
  padding:10px;
  border-radius:10px;
  margin-bottom:12px;
  text-align:center;
}

.msg-ok{
  background:#132a18;
  border:1px solid #2ecc71;
  color:#b8f5c8;
  padding:10px;
  border-radius:10px;
  margin-bottom:12px;
  text-align:center;
}

/* =========================
   LIENS
   ========================= */
.links{
  text-align:center;
  margin-top:14px;
}

.links a{
  color:var(--muted);
  text-decoration:none;
}

.links a:hover{ color:#fff }
body.admin-page a{ text-decoration: none; text-transform: uppercase; color:#e5a00d; }

/* =========================
   PATCH Plex Zone Auth (login/register/forgot/reset)
   A coller en fin de fichier
   ========================= */

/* fond un peu plus vivant (uniquement hors admin) */
body:not(.admin-page){
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(229,160,13,.08), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(0,225,255,.05), transparent 55%),
    var(--bg);
}

/* card un peu plus premium (uniquement hors admin) */
body:not(.admin-page) .card{
  position:relative;
  overflow:hidden;
}

body:not(.admin-page) .card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(520px 220px at 10% 0%, rgba(229,160,13,.16), transparent 60%);
  pointer-events:none;
}

/* inputs */
input{
  transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

input::placeholder{
  color: rgba(157,167,179,.75);
}

input:focus{
  box-shadow: 0 0 0 3px rgba(229,160,13,.18);
}

input:active{
  transform: translateY(1px);
}

/* bouton */
button{
  transition: transform .08s ease, filter .15s ease, opacity .15s ease;
}

button:hover{
  filter: brightness(1.05);
  opacity:1;
}

button:active{
  transform: translateY(1px);
}

/* liens : on garde ton style mais on rend ça plus net */
.links a{
  font-weight:700;
}

.links a:hover{
  text-decoration: underline;
}

/* Messages : tu as déjà msg-error/msg-ok, on ajoute une version "générique" si besoin */
.msg{
  background:#101622;
  border:1px solid var(--line);
  color: var(--muted);
  padding:10px;
  border-radius:10px;
  margin-bottom:12px;
  text-align:center;
}

/* responsive étroit (Fold fermé & co) */
@media (max-width:420px){
  body{ padding:14px; }
  .card{ padding:18px; border-radius:12px; }
  input,button{ border-radius:11px; }
  h2{ font-size:1.2rem; }
}