:root{
  --bg:#0b1220;
  --panel:#121b2e;
  --border:#2a3b62;
  --text:#e7ecff;
  --muted:#9aa7cf;
  --accent:#7aa2ff;
  --accent2:#9dd7ff;
}

*{
  box-sizing:border-box;
}

/* -------------------------
   CORE LAYOUT STABILITY
------------------------- */
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden; /* prevent sideways bleed */
}

/* iOS SAFE AREA + RENDER FIX */
body{
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  min-height:100vh;
  position:relative;

  /* 🔥 critical mobile Safari fixes */
  -webkit-font-smoothing:antialiased;
  transform:translateZ(0);
}

/* -------------------------
   HEADER FIX (no bleed)
------------------------- */
.app-header{
  padding:20px 16px 12px;
  border-bottom:1px solid var(--border);

  position:sticky;
  top:0;
  z-index:100; /* ensure above panels */

  background:rgba(11,18,32,.96);
  backdrop-filter:blur(8px);
}

/* prevent header text overlap */
.app-header h1{
  margin:6px 0 4px;
}

h1{
  margin:0 0 6px;
  font-size:1.7rem;
}

h2{
  margin:0 0 12px;
  font-size:1.15rem;
}

h3{
  margin:0 0 8px;
  font-size:1.05rem;
}

/* prevent text stacking artifacts */
h1,h2,h3{
  position:relative;
  z-index:2;
}

/* -------------------------
   BODY CONTAINER FIX
------------------------- */
.container{
  padding:16px;
  max-width:760px;
  margin:0 auto;

  position:relative;
  z-index:1;

  /* prevents bottom clipping */
  padding-bottom:40px;
}

/* -------------------------
   PANEL STABILITY
------------------------- */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin-bottom:16px;

  position:relative;
  overflow:hidden; /* prevents visual bleed */
}

/* -------------------------
   GRID + CARDS
------------------------- */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.card-link{
  display:block;
  text-decoration:none;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;

  position:relative;
}

.card-link p{
  margin:0;
  color:var(--muted);
}

/* -------------------------
   SMALL UI ELEMENTS
------------------------- */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  display:inline-block;
  padding:8px 10px;
  border-radius:999px;
  background:#17233d;
  border:1px solid var(--border);
  color:var(--accent2);
  font-size:.9rem;
}

/* -------------------------
   FORMS
------------------------- */
label{
  display:block;
  font-size:.95rem;
  margin-bottom:10px;
}

input,textarea{
  width:100%;
  margin-top:6px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0d1527;
  color:var(--text);
  padding:12px;
  font-size:16px;
}

textarea{
  min-height:110px;
  resize:vertical;
}

button{
  appearance:none;
  border:none;
  background:var(--accent);
  color:white;
  padding:12px 14px;
  border-radius:12px;
  font-weight:600;
  font-size:16px;
}

/* -------------------------
   OUTPUT / LOG BLOCKS
------------------------- */
.output{
  white-space:pre-wrap;
  word-break:break-word;
  background:#0d1527;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  margin-top:12px;
  min-height:84px;
}

/* -------------------------
   LISTS
------------------------- */
.simple-list{
  padding-left:18px;
  margin:0;
}

.simple-list li{
  margin-bottom:8px;
}

.list-item{
  padding:12px 0;
  border-bottom:1px solid rgba(154,167,207,.15);
}

.list-item:last-child{
  border-bottom:none;
}

/* -------------------------
   UTILITY
------------------------- */
.muted{
  color:var(--muted);
}

.back-link{
  display:inline-block;
  margin-bottom:8px;
  color:var(--accent2);
  text-decoration:none;
}

.scroll-card p{
  margin:0;
  line-height:1.55;
}

/* -------------------------
   MOBILE FIX: PREVENT GHOST LAYERS
------------------------- */
main, .panel, .container{
  will-change:transform;
}

/* -------------------------
   RESPONSIVE
------------------------- */
@media (min-width:700px){
  .grid{
    grid-template-columns:1fr 1fr;
  }
}