/*
Theme Name: StormChat App Entry
Description: App-style one-page entry screen for StormChat
Version: 11.0
Author: OpenAI
*/

:root{
  --bg:#050e15;
  --bg-top:#07131d;
  --text:#eef8ff;
  --muted:rgba(238,248,255,.62);
  --line:rgba(255,255,255,.08);
  --accent-1:#28d7ff;
  --accent-2:#0077ff;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 0%, rgba(40,215,255,.10), transparent 34%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 100%);
}

a{text-decoration:none;color:inherit}

.sc-wrap{
  min-height:100vh;
  position:relative;
  overflow:hidden;
}
.sc-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
  pointer-events:none;
}
.sc-glow{
  position:absolute;
  width:420px;
  height:420px;
  left:50%;
  top:-150px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(40,215,255,.14), transparent 66%);
  filter:blur(30px);
  pointer-events:none;
}

.sc-shell{
  width:min(760px, calc(100% - 32px));
  min-height:100vh;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  padding:32px 0;
}

.sc-card{
  width:100%;
  max-width:560px;
  text-align:center;
  padding:42px 28px 30px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(9,23,34,.72), rgba(6,15,24,.82));
  border:1px solid var(--line);
  backdrop-filter:blur(18px);
  box-shadow:
    0 24px 80px rgba(0,0,0,.42),
    0 0 70px rgba(0,140,255,.06),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.sc-logo{
  width:108px;
  height:108px;
  object-fit:contain;
  display:block;
  margin:0 auto 20px;
  filter:drop-shadow(0 14px 28px rgba(0,170,255,.16));
}

.sc-status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:#dff5ff;
  margin-bottom:18px;
}
.sc-status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#67f0a6;
  box-shadow:0 0 14px rgba(103,240,166,.8);
}

.sc-title{
  margin:0 0 10px;
  font-size:clamp(48px, 9vw, 88px);
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:800;
}

.sc-sub{
  margin:0 auto 28px;
  max-width:420px;
  color:var(--muted);
  font-size:18px;
  line-height:1.55;
}

.sc-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:360px;
  margin:0 auto 20px;
}

.sc-btn,
.sc-btn-secondary{
  min-height:58px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sc-btn{
  color:#fff;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow:
    0 14px 34px rgba(0,170,255,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.sc-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 40px rgba(0,170,255,.34),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.sc-btn-secondary{
  color:#dff5ff;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}
.sc-btn-secondary:hover{
  transform:translateY(-2px);
  border-color:rgba(40,215,255,.24);
}

.sc-meta{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}
.sc-chip{
  padding:10px 13px;
  border-radius:999px;
  font-size:13px;
  color:#d6f1ff;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}

.sc-foot{
  margin-top:22px;
  color:rgba(238,248,255,.38);
  font-size:14px;
}

@media (max-width:640px){
  .sc-card{
    padding:34px 18px 24px;
    border-radius:24px;
  }
  .sc-logo{
    width:92px;
    height:92px;
  }
  .sc-sub{
    font-size:16px;
  }
}