:root{
  --text:#e9eef8;
  --muted:rgba(233,238,248,.7);
  --glass: rgba(12,16,26,.65);
  --glass2: rgba(12,16,26,.45);
  --stroke: rgba(255,255,255,.12);
  --shadow: 0 18px 60px rgba(0,0,0,.6);
  --radius:18px;

  --fb1:#2f5ea8; --fb2:#1f3f7c;
  --yt1:#b31217; --yt2:#6f0c10;
  --tt1:#121318; --tt2:#0a0b10;
  --ig1:#ffb14a; --ig2:#7d3cff;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#05070c;
  overflow-x:hidden;
}

/* ============================= */
/* SOCIAL AUTH LINKS (HOME TOP)  */
/* ============================= */
.socialAuthLinks{
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2147483001;
  display: flex;
  gap: 10px;
  align-items: center;
}
.socialAuthBtn{
  text-decoration: none;
  color: rgba(233,238,248,.95);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select: none;
}
.socialAuthBtn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }
.socialAuthBtn:active{ transform: translateY(0px); }
.socialAuthBtnPrimary{
  background: linear-gradient(180deg, rgba(155,183,255,.26), rgba(0,0,0,.35));
  border-color: rgba(155,183,255,.35);
}

@media (max-width: 480px){
  .socialAuthLinks{ top: 10px; right: 10px; gap: 8px; }
  .socialAuthBtn{ padding: 9px 10px; font-size: 12px; }
}

/* ============================= */
/* GALAXY + STARS BACKGROUND     */
/* ============================= */
.bg{
  position: fixed;
  top:0; left:0;
  width:100vw;
  height:100vh;
  z-index:-0;
  pointer-events:none;

  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 80% 40%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 50% 80%, rgba(255,255,255,.45), transparent),
    radial-gradient(2px 2px at 60% 20%, rgba(255,255,255,.25), transparent),
    radial-gradient(2px 2px at 30% 70%, rgba(255,255,255,.18), transparent),
    url("/galaxy.jpg"),
    linear-gradient(180deg, #05070c, #02030a);

  background-repeat:
    repeat,
    repeat,
    repeat,
    repeat,
    repeat,
    no-repeat,
    no-repeat;

  background-size:
    320px 320px,
    420px 420px,
    520px 520px,
    620px 620px,
    720px 720px,
    cover,
    cover;

  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    center top,
    center;

  filter: brightness(1.08) contrast(1.02) saturate(1.05);
}

.bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.12);
}

/* ============================= */
/* LAYOUT                        */
/* ============================= */
.wrap{
  position:relative;
  z-index: 1;
  max-width:980px;
  margin:0 auto;
  padding:28px 18px 44px;
}

.hero{
  text-align:center;
  margin-bottom:22px;
}

.logo{
  width:170px;
  height:auto;
  margin-bottom:10px;
  filter: drop-shadow(0 18px 25px rgba(0,0,0,.6));
}

.hero h1{
  font-size: clamp(34px,4.2vw,54px);
  margin:0 0 6px;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

.lede{
  color:var(--muted);
  font-size:18px;
  max-width:720px;
  margin:0 auto 4px;
  line-height:1.45;
}

.sublede{
  font-size:15px;
  color:rgba(233,238,248,.55);
  margin:0;
}

/* ============================= */
/* GRID                          */
/* ============================= */
.grid{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  grid-template-areas:
    "left right"
    "bottomLeft bottomRight";
  gap:16px;
}

.left{grid-area:left;}
.right{grid-area:right;}
.bottomLeft{grid-area:bottomLeft;}
.bottomRight{grid-area:bottomRight;}

/* ============================= */
/* CARDS                         */
/* ============================= */
.card{
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.glass{
  background:linear-gradient(180deg,var(--glass),var(--glass2));
  backdrop-filter: blur(10px);
}

.cardTitle{
  font-size:32px;
  font-weight:800;
  margin:18px 18px 8px;
  letter-spacing:-0.02em;
}

.cardText{
  margin:0 18px 14px;
  color:var(--muted);
  line-height:1.45;
}

/* ============================= */
/* BUTTON STACK                  */
/* ============================= */
.btnStack{
  padding:0 14px 18px;
  display:grid;
  gap:12px;
}

.btn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  transition: transform .12s ease, filter .12s ease;
  background: rgba(255,255,255,.06);
}

.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.ico{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  font-weight:900;
}

.btnText{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.btnMain{font-size:20px;font-weight:800;}

.fb, .facebook { background:linear-gradient(135deg,var(--fb1),var(--fb2)); }
.yt, .youtube  { background:linear-gradient(135deg,var(--yt1),var(--yt2)); }
.tt, .tiktok   { background:linear-gradient(135deg,var(--tt1),var(--tt2)); }
.ig, .instagram{ background:linear-gradient(135deg,var(--ig1),var(--ig2)); }

/* ============================= */
/* RIGHT PANELS                  */
/* ============================= */
.panel{
  margin:14px;
  padding:14px;
  border-radius:14px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.1);
}

.panelRow{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.dot{
  width:12px;
  height:12px;
  border-radius:50%;
  margin-top:6px;
  background:#aaa;
}

.dot.live{
  background:#35d36a;
  box-shadow:0 0 18px rgba(53,211,106,.6);
}

.panelH{font-weight:900;font-size:18px;margin-bottom:2px;}
.panelP{font-size:13px;color:var(--muted);margin:0;}

.miniBtn{
  display:inline-block;
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:var(--text);
  text-decoration:none;
  font-weight:800;
}

.miniBtn:hover{ filter: brightness(1.08); }

.miniBtn.ghost{
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
}

.shareRow{
  display:flex;
  gap:10px;
  margin-top:10px;
  align-items:center;
}

.shareInput{
  flex:1;
  padding:12px;
  border-radius:12px;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  outline:none;
}

.copyBtn{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
}

.copyBtn:hover{ filter: brightness(1.08); }

/* ============================= */
/* BOTTOM CARDS                  */
/* ============================= */
.rowIcon{
  display:flex;
  gap:14px;
  padding:16px;
  align-items:flex-start;
}

.bolt,.warn{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.3);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  font-size:18px;
}

.bolt{color:#ffd34a;}
.warn{color:#ffcc5a;}

/* ============================= */
/* ✅ STORM MODE (FIXED: FILLS CARD) */
/* ============================= */

/* Make the whole Storm Mode area a vertical flex layout */
.stormCard{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Header stays natural height */
.stormHeader{
  display:flex;
  gap:14px;
  padding:18px 18px 12px;
  align-items:flex-start;
}

.stormIcon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  font-size:20px;
  color:#ffd34a;
  flex-shrink:0;
}

/* ✅ Radar area grows to fill remaining height */
.stormEmbed{
  width:100%;
  padding:0 18px 12px;
  flex: 1 1 auto;
  display:flex;
  min-height: 420px; /* ✅ makes the radar BIG on desktop */
}

/* ✅ iframe fills the embed area (no aspect-ratio on desktop) */
.stormEmbed iframe{
  width:100%;
  height:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  display:block;
}

/* Status stays at bottom and does NOT steal space */
.stormStatus{
  padding:0 18px 18px;
  font-size:13px;
  color:rgba(233,238,248,.75);
}

/* ============================= */
/* TIP FORM                      */
/* ============================= */
.tipForm{
  margin-top: 12px;
  display: grid;
  gap: 12px;
}

.tipGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field{
  display:grid;
  gap: 6px;
}

.fieldLabel{
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(233,238,248,.70);
  font-weight: 800;
  text-transform: uppercase;
}

.fieldInput{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: var(--text);
  outline: none;
  font-family: inherit;
}

.fieldInput::placeholder{
  color: rgba(233,238,248,.45);
}

.fieldInput:focus{
  border-color: rgba(120,170,255,.35);
  box-shadow: 0 0 0 3px rgba(120,170,255,.14);
}

.fieldArea{
  min-height: 120px;
  resize: vertical;
}

.fileField{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
}

.fileInput{ display:none; }

.fileBtn{
  display:inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  cursor:pointer;
}

.fileBtn:hover{ filter: brightness(1.08); }

.fileName{
  color: rgba(233,238,248,.65);
  font-size: 12px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tipAgree{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top: 2px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

.tipAgree input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: rgba(120,170,255,.95);
}

.tipAgree span{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(233,238,248,.78);
}

.tipAgree a{
  color: rgba(233,238,248,.92);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tipAgree a:hover{
  filter: brightness(1.12);
}

.tipActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.tipStatus{
  min-height: 18px;
  font-size: 13px;
  color: rgba(233,238,248,.75);
}

.tipStatus.ok{ color: rgba(53,211,106,.95); }
.tipStatus.err{ color: rgba(255,120,120,.95); }

.miniBtn[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* ============================= */
/* FOOTER                        */
/* ============================= */
.footer{
  text-align:center;
  margin-top:18px;
  font-size:13px;
  color:rgba(233,238,248,.55);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

.footer a{
  color: rgba(233,238,248,.75);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer a:hover{
  color: rgba(233,238,248,.95);
  filter: brightness(1.1);
}

/* ============================= */
/* RESPONSIVE                    */
/* ============================= */
@media(max-width:920px){
  .grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "left"
      "right"
      "bottomLeft"
      "bottomRight";
  }
  .cardTitle{ font-size:30px; }
  .tipGrid{ grid-template-columns: 1fr; }
}

/* ============================= */
/* MOBILE-ONLY REFINEMENTS       */
/* ============================= */
@media (max-width: 640px){

  .wrap{
    padding: 18px 14px 28px;
  }

  .logo{
    width: 130px;
    margin-bottom: 6px;
  }

  .hero h1{
    font-size: 30px;
    margin-bottom: 4px;
  }

  .lede{
    font-size: 15px;
    line-height: 1.4;
  }

  .sublede{
    font-size: 13px;
  }

  .cardTitle{
    font-size: 22px;
    margin: 14px 14px 6px;
  }

  .cardText{
    font-size: 14px;
    margin: 0 14px 10px;
  }

  .btnStack{
    padding: 0 12px 14px;
    gap: 10px;
  }

  .btn{
    padding: 10px 12px;
    border-radius: 12px;
  }

  .ico{
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .btnMain{
    font-size: 16px;
  }

  .panel{
    margin: 10px;
    padding: 12px;
  }

  .panelH{
    font-size: 16px;
  }

  .panelP{
    font-size: 12px;
  }

  /* ✅ Storm Mode on phone */
  .stormHeader{
    padding:16px 16px 10px;
  }

  .stormEmbed{
    padding:0 16px 12px;
    min-height: 320px; /* ✅ big enough to read radar + see ad */
  }

  .stormEmbed iframe{
    border-radius:14px;
  }

  .stormStatus{
    padding:0 16px 14px;
    font-size:12px;
  }

  .tipForm{
    gap: 10px;
  }

  .fieldInput{
    padding: 10px;
  }

  .fieldArea{
    min-height: 90px;
  }

  .fileField{
    padding: 8px;
  }

  .footer{
    font-size: 12px;
    margin-top: 14px;
  }
}