/* MegaFleet Portal — shared styles (index.php + forgot.php) */
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',system-ui,sans-serif;background:#05070f}
a{color:inherit;text-decoration:none}
input:focus,textarea:focus{outline:none}

@keyframes scanline{0%{transform:translateX(-60%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(60%);opacity:0}}
@keyframes flicker{0%,100%{opacity:1}48%{opacity:1}50%{opacity:.72}52%{opacity:1}}
@keyframes floatUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
@keyframes runRoute{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes hubPulse{0%,100%{opacity:.30}50%{opacity:.78}}
@keyframes popIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}

.stage{position:relative;width:100%;min-height:100vh;overflow:hidden;
  background:radial-gradient(circle at 50% 120%, #16204a 0%, #0a0f22 45%, #05070f 100%)}
.flagstripes{position:absolute;inset:0;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(180deg,#d42a34 0 46px,transparent 46px 92px)}
.stars-wrap{position:absolute;top:54px;left:50%;transform:translateX(-50%);width:min(640px,82vw);
  pointer-events:none;z-index:1;text-align:center}
.stars-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:15px 30px;opacity:.13}
.stars-label{margin-top:14px;color:rgba(159,184,255,.28);font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:6px}

/* --- live freight network backdrop --- */
.netlayer{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.netlayer svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(1500px,138vw);height:auto;
  mask-image:radial-gradient(120% 100% at 50% 50%, #000 45%, transparent 88%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%, #000 45%, transparent 88%)}
.route{fill:none;stroke:rgba(91,141,239,.17);stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round}
.comet{fill:none;stroke:#7fd9ff;stroke-width:1.7;stroke-linecap:round;
  stroke-dasharray:5 95;stroke-dashoffset:100;
  filter:drop-shadow(0 0 5px rgba(127,217,255,.95));
  animation:runRoute linear infinite}
.hub{fill:#a8c8ff;animation:hubPulse 5s ease-in-out infinite}
.hub-halo{fill:rgba(127,217,255,.055)}
.horizon{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;z-index:0;
  background:linear-gradient(to top, rgba(91,141,239,.11), rgba(91,141,239,.03) 45%, transparent 78%)}

/* --- gate / shell --- */
.gate{position:relative;z-index:4;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:40px 24px}
.brand{text-align:center;animation:floatUp .8s ease both}
.brand-row{display:inline-flex;align-items:center;gap:12px;margin-bottom:26px}
.brand-ico{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#5b8def,#2f5bd0);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(91,141,239,.6)}
.brand-txt{font-family:'Orbitron',sans-serif;color:rgba(255,255,255,.85);font-size:15px;font-weight:700;letter-spacing:4px}
h1{font-family:'Orbitron',sans-serif;font-size:58px;font-weight:900;letter-spacing:2px;line-height:1;
  background:linear-gradient(180deg,#ffffff,#8fb0ff);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;text-shadow:0 0 40px rgba(91,141,239,.35);animation:flicker 6s infinite;
  text-align:center}
h1.sm{font-size:40px}
.subtitle{color:rgba(159,184,255,.75);font-size:15px;margin-top:16px;letter-spacing:.5px;text-align:center;
  max-width:440px;line-height:1.5}

.truck-scene{position:relative;width:100%;max-width:820px;margin:24px 0 6px;animation:floatUp 1s ease .15s both}
.ground-glow{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);width:74%;height:40px;
  background:radial-gradient(ellipse, rgba(91,141,239,.4), transparent 70%);filter:blur(14px);pointer-events:none}
.truck-wrap{position:relative}
.truck-wrap .rig{display:block;width:100%;height:auto;border-radius:12px;background:#05070f;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.road-dash{position:absolute;left:4%;right:4%;bottom:22px;height:3px;
  background:repeating-linear-gradient(90deg,#5b8def 0 40px,transparent 40px 80px);opacity:.55}
.road-line{position:absolute;left:0;right:0;bottom:16px;height:2px;
  background:linear-gradient(90deg, transparent, rgba(91,141,239,.5), transparent)}

/* --- card + form --- */
.card{position:relative;width:100%;max-width:400px;margin-top:8px;padding:28px;border-radius:22px;
  background:rgba(16,26,58,.55);border:1px solid rgba(91,141,239,.35);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;animation:floatUp 1s ease .25s both}
.card.wide{max-width:460px}
.card.shake{animation:shake .5s}
.scanline{position:absolute;top:0;left:0;width:40%;height:2px;
  background:linear-gradient(90deg, transparent, #7fd9ff, transparent);animation:scanline 3.5s ease-in-out infinite}
.card label{display:block;color:rgba(159,184,255,.85);font-size:12px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:12px}
.field{margin-bottom:18px}
.field:last-of-type{margin-bottom:0}
.input-row{display:flex;align-items:center;gap:10px;padding:0 16px;border-radius:13px;
  background:rgba(5,9,20,.6);border:1px solid rgba(91,141,239,.3);
  transition:border-color .2s}
.input-row.err{border-color:rgba(255,107,138,.6)}
.input-row:focus-within{border-color:rgba(127,217,255,.65)}
.input-row input{flex:1;background:transparent;border:none;color:#fff;font-size:17px;letter-spacing:2px;
  padding:15px 0;font-family:'Inter',sans-serif;min-width:0}
.input-row.text input{font-size:15px;letter-spacing:.3px}
.input-box{padding:12px 16px;border-radius:13px;background:rgba(5,9,20,.6);
  border:1px solid rgba(91,141,239,.3);transition:border-color .2s}
.input-box:focus-within{border-color:rgba(127,217,255,.65)}
.input-box textarea{width:100%;background:transparent;border:none;color:#fff;font-size:15px;
  font-family:'Inter',sans-serif;resize:vertical;min-height:74px;line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err-msg{color:#ff6b8a;font-size:13px;margin-top:12px;display:flex;align-items:flex-start;gap:6px;line-height:1.45}
.ok-msg{color:#3ecf8e;font-size:13px;margin-top:12px;display:flex;align-items:flex-start;gap:6px;line-height:1.45}
.submit-btn{width:100%;margin-top:20px;padding:15px;border:none;border-radius:13px;
  background:linear-gradient(135deg,#5b8def,#2f5bd0);color:#fff;font-size:15px;font-weight:700;
  letter-spacing:1px;cursor:pointer;box-shadow:0 0 28px rgba(91,141,239,.5);
  transition:transform .15s, box-shadow .2s;font-family:'Inter',sans-serif}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 34px rgba(91,141,239,.7)}
.submit-btn:active{transform:translateY(0)}
.submit-btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}
.link-row{margin-top:18px;text-align:center}
.link-sm{color:rgba(159,184,255,.6);font-size:13px;letter-spacing:.2px;
  border-bottom:1px solid rgba(159,184,255,.22);padding-bottom:1px;transition:color .2s, border-color .2s}
.link-sm:hover{color:#9fd4ff;border-color:rgba(159,212,255,.6)}
.gate-foot{margin-top:28px;color:rgba(159,184,255,.4);font-size:12px;letter-spacing:.5px;
  animation:floatUp 1s ease .3s both;text-align:center}

/* --- sent confirmation --- */
.sent-ico{width:64px;height:64px;border-radius:18px;margin:0 auto 20px;
  background:linear-gradient(135deg,#3ecf8e,#17a06b);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 30px rgba(62,207,142,.45);animation:popIn .45s cubic-bezier(.34,1.56,.64,1) both}
.sent-h{color:#fff;font-size:20px;font-weight:700;text-align:center;letter-spacing:-.01em}
.sent-p{color:rgba(159,184,255,.7);font-size:14px;text-align:center;margin-top:10px;line-height:1.55}

/* --- launchpad (post-unlock) --- */
.launch-badge-wrap{text-align:center;margin-top:84px;margin-bottom:8px;position:relative;z-index:2}
.launch-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.launch-badge-ico{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#6c8cff,#3f5bd8);
  display:flex;align-items:center;justify-content:center}
.launch-badge-txt{color:rgba(255,255,255,.9);font-size:14px;font-weight:600;letter-spacing:.2px}
.launch-h1{color:#fff;font-size:40px;font-weight:700;letter-spacing:-.02em;margin-top:28px;text-align:center;
  position:relative;z-index:2;font-family:'Inter',sans-serif}
.launch-sub{color:rgba(255,255,255,.55);font-size:16px;margin-top:10px;text-align:center;position:relative;z-index:2}
.launch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,240px));gap:48px 64px;
  justify-content:center;margin-top:64px;margin-bottom:60px;max-width:900px;width:100%;
  position:relative;z-index:2;margin-left:auto;margin-right:auto}
.tile{display:flex;flex-direction:column;align-items:center;gap:20px;cursor:pointer}
.tile-ico{display:block;width:196px;height:196px;
  filter:drop-shadow(0 20px 44px rgba(0,0,0,.6));
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s ease}
.tile:hover .tile-ico{transform:translateY(-10px) scale(1.07);
  filter:drop-shadow(0 26px 52px rgba(0,0,0,.7)) brightness(1.06)}
.tile:active .tile-ico{transform:translateY(-4px) scale(1.02)}
.tile-name{color:#fff;font-size:18px;font-weight:600;letter-spacing:-.01em;text-align:center;
  max-width:210px;margin:0 auto;line-height:1.3}
.tile-sub{color:rgba(255,255,255,.5);font-size:13px;margin-top:6px;line-height:1.4;
  max-width:200px;margin-left:auto;margin-right:auto;text-align:center}
.launch-foot{position:relative;z-index:2;text-align:center;padding-bottom:40px;
  color:rgba(255,255,255,.35);font-size:12.5px}
.logout{position:absolute;top:20px;right:24px;z-index:5;color:rgba(255,255,255,.4);font-size:12px;
  padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05)}
.logout:hover{color:#fff;border-color:rgba(255,255,255,.3)}

@media (max-width:520px){
  h1{font-size:40px}
  h1.sm{font-size:30px}
  .stars-wrap{display:none}
  .launch-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:34px 24px;margin-top:44px}
  .tile-ico{width:144px;height:144px}
  .tile-name{font-size:16px;max-width:170px}
  .tile-sub{font-size:12.5px;max-width:170px}
}
@media (prefers-reduced-motion: reduce){
  h1{animation:none}
  .scanline{display:none}
  .comet{display:none}
  .hub{animation:none;opacity:.5}
  .sent-ico{animation:none}
}