/* ------------------------------------------------------------------ 
   styles.css — Computer-Network Topology Background (clean & modern)
   Brand palette: primary #0f4c81, accent #dcd66c
   Notes:
   - No external assets (SVG is inlined as data URI) → CSP-safe
   - Subtle parallax via background-position animation
   - Respects prefers-reduced-motion
-------------------------------------------------------------------*/
:root{
  --primary:#0f4c81;
  --accent:#dcd66c; /* hover color */
  --ink:#101418; --muted:#6b7280;
  --surface:#ffffff; --bg:#f3f7ff;
  --ring:rgba(15,76,129,.40);
  --error:#b3261e; --success:#1f7a46;
  --shadow:0 10px 30px rgba(16,20,24,.08);
}

*,
*::before,
*::after{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Kufi Arabic","Noto Sans Arabic","Dubai","Tajawal",Arial,sans-serif;
  color:var(--ink);
  /* soft light base wash */
  background: linear-gradient(165deg,#e9f1ff 0%,#f3f7ff 45%,#fafcff 100%);
  line-height:1.6;
}

.page{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:2rem;
  position:relative;
  z-index:1;
}

/* =================== NETWORK TOPOLOGY BACKGROUND =================== */
/* Tile with network icons + dashed links (SVG data URI) */
.page::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.9; filter:saturate(112%);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='560' viewBox='0 0 900 560'>  <rect width='900' height='560' fill='none'/>  <!-- cloud -->  <g transform='translate(420 60)'>    <path d='M72 36a24 24 0 0 0-46-8 34 34 0 0 0-62 12 22 22 0 0 0 5 43h98a28 28 0 0 0 5-47z' fill='%230f4c81' fill-opacity='.08' stroke='%230f4c81' stroke-opacity='.28' stroke-width='1.5'/>  </g>  <!-- firewall (shield) -->  <g transform='translate(700 110)'>    <path d='M40 4l36 12v30c0 22-19 36-36 42-17-6-36-20-36-42V16L40 4z' fill='%23ffffff'/>    <path d='M40 4l36 12v30c0 22-19 36-36 42-17-6-36-20-36-42V16L40 4z' fill='none' stroke='%230f4c81' stroke-opacity='.35' stroke-width='1.5'/>    <path d='M24 38h32M24 50h32M24 26h32' stroke='%230f4c81' stroke-opacity='.25' stroke-width='2'/>    <circle cx='40' cy='22' r='3' fill='%23dcd66c'/>  </g>  <!-- switch -->  <rect x='360' y='210' width='160' height='52' rx='7' ry='7' fill='%23ffffff' stroke='%230f4c81' stroke-opacity='.35' stroke-width='1.6'/>  <g fill='%23dcd66c'>    <circle cx='380' cy='236' r='2.2'/> <circle cx='395' cy='236' r='2.2'/> <circle cx='410' cy='236' r='2.2'/>    <circle cx='425' cy='236' r='2.2'/> <circle cx='440' cy='236' r='2.2'/> <circle cx='455' cy='236' r='2.2'/>  </g>  <!-- server rack -->  <g>    <rect x='120' y='290' width='84' height='108' rx='10' fill='%23ffffff' stroke='%230f4c81' stroke-opacity='.35' stroke-width='1.6'/>    <rect x='134' y='314' width='56' height='10' fill='%230f4c81' fill-opacity='.18'/>    <rect x='134' y='336' width='56' height='10' fill='%230f4c81' fill-opacity='.18'/>    <rect x='134' y='358' width='56' height='10' fill='%230f4c81' fill-opacity='.18'/>    <circle cx='192' cy='302' r='3' fill='%23dcd66c'/>  </g>  <!-- globe (internet) -->  <g transform='translate(650 320)'>    <circle cx='36' cy='36' r='34' fill='%23ffffff'/>    <circle cx='36' cy='36' r='33' fill='none' stroke='%230f4c81' stroke-opacity='.35' stroke-width='1.6'/>    <path d='M2 36h68M36 2v68M15 14c11 9 15 21 15 24s-4 15-15 24M57 14c-11 9-15 21-15 24s4 15 15 24' stroke='%230f4c81' stroke-opacity='.25' stroke-width='1.3' fill='none'/>  </g>  <!-- WiFi AP -->  <g transform='translate(320 390)'>    <rect x='0' y='0' width='72' height='40' rx='9' fill='%23ffffff' stroke='%230f4c81' stroke-opacity='.35' stroke-width='1.6'/>    <circle cx='18' cy='20' r='3.2' fill='%23dcd66c'/>    <path d='M46 28a14 14 0 0 1 0-18m9 23a23 23 0 0 1 0-28' stroke='%230f4c81' stroke-opacity='.35' stroke-width='2.2' fill='none'/>  </g>  <!-- Fiber/SFP icon -->  <g transform='translate(510 400)'>    <rect x='0' y='0' width='82' height='38' rx='6' fill='%23ffffff' stroke='%230f4c81' stroke-opacity='.35' stroke-width='1.6'/>    <rect x='8' y='8' width='40' height='8' fill='%230f4c81' fill-opacity='.18'/>    <rect x='8' y='22' width='40' height='8' fill='%230f4c81' fill-opacity='.18'/>    <circle cx='66' cy='19' r='4' fill='%23dcd66c'/>  </g>  <!-- dashed links (L2/L3) -->  <path d='M440 120 L440 210' stroke='%230f4c81' stroke-opacity='.30' stroke-width='2' stroke-linecap='round' stroke-dasharray='4 10' fill='none'/>  <path d='M360 236 C 300 236, 210 270, 170 290' stroke='%230f4c81' stroke-opacity='.30' stroke-width='2' stroke-linecap='round' stroke-dasharray='4 10' fill='none'/>  <path d='M520 236 C 585 246, 680 280, 690 320' stroke='%230f4c81' stroke-opacity='.30' stroke-width='2' stroke-linecap='round' stroke-dasharray='4 10' fill='none'/>  <path d='M405 262 C 355 300, 340 350, 332 390' stroke='%230f4c81' stroke-opacity='.30' stroke-width='2' stroke-linecap='round' stroke-dasharray='4 10' fill='none'/>  <path d='M475 262 C 520 298, 575 336, 686 336' stroke='%230f4c81' stroke-opacity='.30' stroke-width='2' stroke-linecap='round' stroke-dasharray='4 10' fill='none'/></svg>");
  background-size: 900px 560px;   /* tile size */
  background-repeat: repeat;
  animation: topoShift 60s linear infinite; /* gentle parallax */
}
@keyframes topoShift{
  0%{background-position:0 0}
  50%{background-position:-240px -140px}
  100%{background-position:0 0}
}

/* Soft color depth wash */
.page::after{
  content:"";
  position:fixed; inset:-14%; z-index:0; pointer-events:none;
  background:
    radial-gradient(820px 460px at 78% 16%, rgba(220,214,108,.18), transparent 60%),
    radial-gradient(980px 560px at 14% 84%, rgba(15,76,129,.16), transparent 62%);
  filter: blur(34px) saturate(110%);
  opacity:.65;
  animation: washFloat 36s ease-in-out infinite alternate;
}
@keyframes washFloat{
  0%{transform:translate3d(1%,-1%,0)}
  100%{transform:translate3d(-1%,1%,0)}
}
@media (prefers-reduced-motion: reduce){
  .page::before,.page::after{animation:none}
}

/* ========================= CARD & FORM ========================= */
.card{
  width:100%; max-width:520px; background:var(--surface);
  border-radius:20px; box-shadow:var(--shadow); padding:2rem; position:relative;
}
.card::before{
  content:""; position:absolute; inset:-1.5rem; z-index:-1;
  background: radial-gradient(520px 240px at 50% 0%, rgba(255,255,255,.80), transparent 70%);
  filter:blur(20px); border-radius:28px; pointer-events:none;
}

.card__header{text-align:center;margin-bottom:1.5rem}
.brand__logo{display:inline-block;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.brand__title{margin:.75rem 0 .25rem;font-size:1.125rem;font-weight:800;color:var(--primary)}
.brand__subtitle{margin:0;font-size:.95rem;color:var(--muted)}

.form{display:grid;gap:1rem}
.field__label{display:inline-block;font-size:.95rem;margin-bottom:.35rem}
.field__help{display:inline-block;font-size:.8rem;color:var(--muted);margin-top:.35rem}

.input{
  display:grid; grid-template-columns:40px 1fr 40px; align-items:center;
  border:1px solid #e5e7eb; background:#fff; border-radius:14px; overflow:hidden;
  transition: box-shadow .2s, border-color .2s;
}
.input:focus-within{border-color:var(--primary); box-shadow:0 0 0 4px var(--ring)}
.input input{border:0; outline:none; padding:.9rem .75rem; font-size:1rem; background:transparent; color:var(--ink)}
.input__icon,.input__action{display:grid; place-items:center; height:100%; width:40px}
.input__action{border:0; background:transparent; cursor:pointer}
.icon{width:20px; height:20px; fill:#6b7280}

/* Center the primary action button */
.actions{margin-top:.5rem; display:flex; justify-content:center; align-items:center}

.btn{
  appearance:none; border:0; padding:.9rem 1.2rem; border-radius:14px;
  font-size:1rem; font-weight:700; cursor:pointer;
  transition: transform .02s, filter .2s, box-shadow .2s, background .25s, color .25s;
}
.btn--primary{
  background: linear-gradient(135deg, var(--primary), #0b3b66);
  color:#fff; box-shadow:0 8px 18px rgba(15,76,129,.25);
}
.btn--primary:hover{
  background: linear-gradient(135deg, var(--accent), #c7c160);
  color:#0b3b66; filter:none;
}
.btn--primary:focus-visible{outline:none; box-shadow:0 0 0 4px var(--ring), 0 8px 18px rgba(15,76,129,.25)}
.btn--primary:active{transform:translateY(1px)}

.card__footer{margin-top:1.25rem; text-align:center; color:var(--muted); font-size:.9rem}

/* Alerts */
.alert{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:.75rem;
  padding:.75rem .9rem; border-radius:12px; font-size:.95rem; margin-bottom:1rem; border:1px solid transparent;
}
.alert--error{background:#fff4f4; color:var(--error); border-color:rgba(179,38,30,.25)}
.alert--success{background:#f1fff6; color:var(--success); border-color:rgba(31,122,70,.25)}
.alert__close{appearance:none; border:0; background:transparent; font-size:1.1rem; line-height:1; cursor:pointer; color:inherit; padding:.25rem .4rem; border-radius:8px}
.alert__close:hover{background:rgba(0,0,0,.05)}

@media (max-width:420px){
  .card{padding:1.25rem}
  .brand__title{font-size:1rem}
}