:root{
  color-scheme:dark;
  --bg:#080c11;
  --panel:#111820;
  --panel-2:#17212b;
  --line:#263542;
  --text:#ecf6f7;
  --muted:#8da1a8;
  --cyan:#43d9cf;
  --green:#56d99b;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(67,217,207,.16),
      transparent 34rem
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(86,217,155,.10),
      transparent 34rem
    ),
    var(--bg);
}

.portal-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:2rem;
}

.portal-card{
  width:min(900px,100%);
  padding:clamp(1.5rem,4vw,3rem);
  border:1px solid var(--line);
  border-radius:1.5rem;
  background:
    linear-gradient(
      145deg,
      rgba(18,25,34,.96),
      rgba(10,15,21,.98)
    );
  box-shadow:
    0 30px 90px rgba(0,0,0,.35);
}

.portal-mark{
  width:4rem;
  height:4rem;
  display:grid;
  place-items:center;
  margin-bottom:1.4rem;
  border-radius:1.1rem;
  color:#05100e;
  font-size:2rem;
  font-weight:900;
  background:
    linear-gradient(
      135deg,
      var(--cyan),
      var(--green)
    );
}

.eyebrow{
  margin-bottom:.45rem;
  color:var(--cyan);
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.18em;
}

h1{
  max-width:700px;
  margin:0;
  font-size:clamp(2rem,5vw,3.6rem);
  line-height:1.02;
}

.lead{
  max-width:720px;
  margin:1.2rem 0 0;
  color:var(--muted);
  font-size:1rem;
  line-height:1.7;
}

.preview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
  margin-top:2rem;
}

.preview-grid article{
  display:grid;
  gap:.45rem;
  padding:1.1rem;
  border:1px solid var(--line);
  border-radius:1rem;
  background:rgba(255,255,255,.025);
}

.preview-icon{
  color:var(--green);
  font-size:1.25rem;
}

.preview-grid strong{
  font-size:.88rem;
}

.preview-grid small{
  color:var(--muted);
  font-size:.72rem;
  line-height:1.5;
}

.coming-soon{
  display:inline-flex;
  margin-top:2rem;
  padding:.55rem .75rem;
  border:1px solid rgba(67,217,207,.3);
  border-radius:999px;
  color:#aff4ed;
  background:rgba(67,217,207,.08);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.06em;
}

footer{
  margin-top:2rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.06);
  color:#647981;
  font-size:.65rem;
}

@media(max-width:720px){
  .portal-shell{
    padding:1rem;
  }

  .preview-grid{
    grid-template-columns:1fr;
  }
}

.primary-button,
.secondary-button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:2rem;
  border-radius:.8rem;
  text-decoration:none;
  cursor:pointer;
  font:inherit;
  font-size:.78rem;
  font-weight:850;
}

.primary-button{
  padding:.85rem 1.15rem;
  border:1px solid rgba(67,217,207,.35);
  color:#06110f;
  background:
    linear-gradient(
      135deg,
      var(--cyan),
      var(--green)
    );
  box-shadow:
    0 10px 30px rgba(67,217,207,.12);
}

.primary-button:hover{
  filter:brightness(1.06);
}

.secondary-button{
  margin-top:0;
  padding:.65rem .9rem;
  border:1px solid var(--line);
  color:var(--text);
  background:rgba(255,255,255,.035);
}

.twitch-button{
  min-width:180px;
}

.compact-card{
  width:min(650px,100%);
}

.compact-title{
  font-size:clamp(1.8rem,4vw,2.8rem);
}

.dashboard-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.5rem;
}

.identity{
  display:flex;
  align-items:center;
  gap:1rem;
}

.profile-image,
.profile-placeholder{
  width:72px;
  height:72px;
  flex:0 0 72px;
  border-radius:1rem;
  border:1px solid var(--line);
}

.profile-image{
  display:block;
  object-fit:cover;
}

.profile-placeholder{
  display:grid;
  place-items:center;
  color:#05100e;
  font-size:1.5rem;
  font-weight:900;
  background:
    linear-gradient(
      135deg,
      var(--cyan),
      var(--green)
    );
}

.dashboard-title{
  font-size:clamp(1.6rem,4vw,2.6rem);
}

.identity-login{
  margin:.35rem 0 0;
  color:var(--muted);
  font-size:.8rem;
}

.status-banner{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-top:2rem;
  padding:.9rem 1rem;
  border:1px solid rgba(86,217,155,.25);
  border-radius:.85rem;
  color:#bdf5d8;
  background:rgba(86,217,155,.06);
  font-size:.78rem;
  font-weight:750;
}

.status-banner small{
  color:var(--muted);
  font-weight:500;
}

.status-dot{
  width:.55rem;
  height:.55rem;
  flex:0 0 .55rem;
  border-radius:50%;
  background:var(--green);
  box-shadow:
    0 0 18px rgba(86,217,155,.8);
}

.dashboard-grid{
  margin-top:1.25rem;
}

@media(max-width:720px){
  .dashboard-header{
    flex-direction:column;
  }

  .identity{
    align-items:flex-start;
  }

  .status-banner{
    align-items:flex-start;
    flex-wrap:wrap;
  }
}

.status-list{
  display:grid;
  gap:.55rem;
  margin-top:.9rem;
}

.status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-top:.55rem;
  border-top:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-size:.72rem;
}

.status-row:first-child{
  padding-top:0;
  border-top:0;
}

.status-row b{
  color:var(--text);
  font-size:.72rem;
  font-weight:800;
  text-align:right;
}

.status-row .status-good{
  color:var(--green);
}

.status-row .status-off{
  color:#d8a57b;
}

.status-banner-warning{
  border-color:rgba(216,165,123,.28);
  color:#f0c49d;
  background:rgba(216,165,123,.07);
}

.status-dot-warning{
  background:#d8a57b;
  box-shadow:0 0 18px rgba(216,165,123,.55);
}