/* Shared styles for ChatGraPhT pages */

:root{ 
  --bg:#0b0d10; 
  --fg:#e8eef5; 
  --muted:#a8b3c7; 
  --accent:#5c9eff; 
  --card:#12161c; 
}

*{ 
  box-sizing:border-box; 
}

html, body{ 
  height:100%; 
}

body{ 
  margin:0; 
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; 
  background:linear-gradient(180deg,#0b0d10,#0e1014); 
  color:var(--fg); 
}

a{ 
  color:var(--accent); 
  text-decoration:none; 
}

a:hover{ 
  text-decoration:underline; 
}

/* Navigation */
.nav{ 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  max-width:1080px; 
  margin:0 auto; 
  padding:16px 24px; 
}

.logo{ 
  display:flex; 
  gap:10px; 
  align-items:center; 
  font-weight:700; 
  letter-spacing:.3px; 
  color:var(--fg); 
}

.logo-dot{ 
  width:10px; 
  height:10px; 
  border-radius:50%; 
  background:var(--accent); 
  box-shadow:0 0 12px rgba(92,158,255,.6); 
}

/* Layout */
.container{ 
  max-width:800px; 
  margin:24px auto; 
  padding:0 24px; 
}

.back-link{ 
  color:var(--muted); 
  font-size:14px; 
  margin-bottom:24px; 
  display:inline-block; 
}

.back-link:hover{ 
  color:var(--accent); 
}

/* Typography */
h1{ 
  font-size: clamp(28px, 4vw, 42px); 
  line-height:1.2; 
  margin:0 0 8px; 
}

h2{ 
  font-size: clamp(20px, 3vw, 24px); 
  margin:32px 0 16px; 
  color:var(--fg); 
}

h3{ 
  font-size: clamp(16px, 2.5vw, 18px); 
  margin:24px 0 12px; 
  color:var(--fg); 
}

p, li{ 
  line-height:1.6; 
  margin-bottom:16px; 
  color:var(--fg); 
}

ul, ol{ 
  margin:16px 0; 
  padding-left:24px; 
}

li{ 
  margin-bottom:8px; 
}

.last-updated{ 
  color:var(--muted); 
  font-size:14px; 
  margin-bottom:32px; 
}

.section{ 
  margin-bottom:32px; 
}

/* Footer */
.foot{ 
  max-width:1080px; 
  margin:48px auto; 
  padding:0 24px; 
  display:flex; 
  justify-content:space-between; 
  color:#9aa6b6; 
  font-size:14px; 
}

/* Responsive */
@media (max-width: 768px){ 
  .container{ 
    padding:0 16px; 
  }
  
  .nav{ 
    padding:16px; 
  }
  
  .foot{ 
    padding:0 16px; 
    flex-direction:column; 
    gap:16px; 
    text-align:center; 
  }
}