:root { --bg:#0A1628; --card:rgba(10,22,40,0.45); --gold:#7DD3FC; --green:#22c55e; --red:#ef4444; --text:#FFFFFF; --muted:#93c5e8; --line:rgba(125,211,252,0.2); }
*{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{margin:0;font-family:Tajawal,Arial,sans-serif;background:#0A1628;color:var(--text)}
header{padding:20px 24px;background:transparent;border-bottom:1px solid var(--line)}
h1{margin:0;font-size:22px;color:#FFFFFF}
.sub{color:var(--muted);font-size:13px;margin-top:6px}
main{max-width:1100px;margin:0 auto;padding:20px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:rgba(10,22,40,0.22);border:1px solid var(--line);border-radius:14px;padding:16px;color:#FFFFFF}
.card.sel{border-color:rgba(125,211,252,0.55);box-shadow:0 0 0 1px rgba(56,189,248,0.35)}
.card:hover{border-color:rgba(125,211,252,0.4)}
.big{font-size:28px;font-weight:700;color:#7DD3FC}
.muted{color:var(--muted);font-size:13px}
.btn{display:inline-block;background:var(--gold);color:#111;border:0;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;font-family:inherit}
.btn.alt{background:#1e293b;color:var(--text);border:1px solid var(--line)}
.btn.danger{background:var(--red);color:#fff}
label{display:block;margin:8px 0 4px;color:var(--muted);font-size:13px}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,0.08);color:#FFFFFF;font-family:inherit}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px;border-bottom:1px solid var(--line);text-align:right}
a{color:var(--gold)}
.ok{color:var(--green)} .warn{color:var(--gold)} .bad{color:var(--red)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nav a{margin-left:12px}
.notice{background:rgba(10,22,40,0.55);border:1px solid rgba(125,211,252,0.2);border-radius:12px;padding:12px;margin:12px 0}
/* AUTH-CARD aurora — literal owner CSS + hover + mobile. CSS-only, no images. */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: #0A1628;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow-x: hidden;
}
.auth-card-bg,
.auth-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  min-width: 0;
  min-height: 550px;
  border-radius: 24px;
  background: #0A1628;
  overflow: hidden;
  border: 1px solid rgba(125, 211, 252, 0.15);
  box-shadow:
    0 20px 60px -10px rgba(0, 0, 0, 0.5),
    0 0 80px -20px rgba(56, 189, 248, 0.2);
  isolation: isolate;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
  box-sizing: border-box;
}
form.auth-card-bg { margin: 0; }
.auth-card-bg::before,
.auth-card::before {
  content: '';
  position: absolute;
  bottom: -15%;
  right: -15%;
  inset-inline-end: -15%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #38BDF8 0%, #2563EB 40%, #1E40AF 100%);
  filter: blur(50px);
  opacity: 0.9;
  z-index: 0;
}
.auth-card-bg::after,
.auth-card::after {
  content: '';
  position: absolute;
  top: -10%;
  right: -20%;
  inset-inline-end: -20%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #BAE6FD 0%, #7DD3FC 50%, #38BDF8 100%);
  filter: blur(45px);
  opacity: 0.95;
  z-index: 1;
  mix-blend-mode: screen;
}
.auth-card-bg:hover,
.auth-card:hover {
  border-color: rgba(125, 211, 252, 0.35);
  box-shadow:
    0 24px 70px -10px rgba(0, 0, 0, 0.55),
    0 0 100px -12px rgba(56, 189, 248, 0.35);
}
.auth-card-content {
  position: relative;
  z-index: 10;
  padding: 40px 32px;
  color: #FFFFFF;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.12) 0%, rgba(10, 22, 40, 0.32) 100%);
  min-height: 550px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.auth-card-content header {
  padding: 0 0 16px;
  background: transparent;
  border-bottom: 1px solid rgba(125, 211, 252, 0.15);
}
.auth-card-content main {
  max-width: none;
  margin: 0;
  padding: 16px 0 0;
}
.auth-card-content .grid,
.auth-card-content .subscribe-grid {
  grid-template-columns: 1fr;
}
.auth-card-content input,
.auth-card-content select,
.auth-card-content textarea {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border: 1px solid rgba(125, 211, 252, 0.2);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.auth-card-content input::placeholder,
.auth-card-content textarea::placeholder {
  color: rgba(186, 230, 253, 0.55);
}
@media (max-width: 640px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .auth-page {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    padding: 16px !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .auth-card-bg,
  form.auth-card-bg,
  .auth-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    min-height: 480px;
    box-sizing: border-box;
  }
  .auth-card-bg::before,
  .auth-card::before {
    width: 48%;
    right: -25%;
    inset-inline-end: -25%;
    bottom: -8%;
    filter: blur(28px);
  }
  .auth-card-bg::after,
  .auth-card::after {
    width: 45%;
    right: -25%;
    inset-inline-end: -25%;
    top: -6%;
    filter: blur(25px);
  }
  .auth-card-content {
    min-height: 480px;
    padding: 28px 16px;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    min-width: 0;
  }
  .auth-card-content input,
  .auth-card-content select,
  .auth-card-content textarea,
  .auth-card-content button,
  .auth-card-content .btn {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  .auth-card-content .grid,
  .auth-card-content .subscribe-grid,
  .grid {
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  .auth-card-content .row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .auth-card-content .row label {
    width: 100%;
    flex: 1 1 100%;
  }
}