/* File: style.css */
/* Dark Galaxy theme — shared styles for index + docs */
:root{
  --bg-1: #07101b;
  --bg-2: #0b1530;
  --accent-1: #8a5cff;
  --accent-2: #55d7ff;
  --muted: #9fb0c8;
  --card: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.03);
  --surface: #0f1724;
  --radius:14px;
  --accent-highlight: #ffd3f7;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;color:#e6f2ff;background:linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 100%);-webkit-font-smoothing:antialiased}
a{color:var(--accent-2);text-decoration:none}
.panel{width:100%;max-width:1060px;margin:28px auto;border-radius:16px;padding:28px;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.6);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.12));border:1px solid rgba(255,255,255,0.03)}
/* subtle galaxy layer (no seams, full cover) */
.panel::before{
  content:"";position:absolute;inset:0;background-image:
    radial-gradient(800px 800px at 10% 20%, rgba(138,92,255,0.12), transparent 6%),
    radial-gradient(600px 500px at 85% 80%, rgba(85,215,255,0.08), transparent 8%),
    radial-gradient(400px 300px at 50% 50%, rgba(255,211,247,0.03), transparent 6%);
  pointer-events:none;mix-blend-mode:screen;opacity:1;
  border-radius:16px;
}
.header{display:flex;gap:20px;align-items:center;position:relative;z-index:2}
.logo-wrap{width:96px;height:96px;flex:0 0 96px;display:flex;align-items:center;justify-content:center}
.logo.drop{width:76px;height:76px;border-radius:18px;background:linear-gradient(180deg,#ffd3f7,#b8f7ff);box-shadow:0 12px 30px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.06);display:block}
.header-text h1{margin:0;font-size:22px;color:#ffffff}
.lead{margin:6px 0 0;color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr 300px;gap:20px;margin-top:18px;position:relative;z-index:2}
.card{background:var(--surface);padding:18px;border-radius:12px;color:#e8f6ff;border:1px solid rgba(255,255,255,0.03)}
.links{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;font-weight:600;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:#fff;border:1px solid rgba(255,255,255,0.04)}
.meta{display:flex;flex-direction:column;gap:12px}
.meta-card{padding:14px;background:rgba(255,255,255,0.02);border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.small{font-size:13px;color:var(--muted)}
.footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px;z-index:2}
.footer-nav a{color:var(--muted)}
/* docs style */
.doc-panel{max-width:900px;margin:32px auto;padding:20px}
.doc{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.doc h1{margin-top:0}
.doc .lead{color:var(--muted)}
.doc dt{font-weight:700}
.doc dd{color:var(--muted);margin:8px 0 14px 0}
.doc-foot{margin-top:18px;color:var(--muted);font-size:13px}
/* responsive */
@media (max-width:820px){
  .grid{grid-template-columns:1fr; }
  .logo-wrap{width:72px;height:72px}
  .logo.drop{width:56px;height:56px}
  .header{align-items:flex-start}
  .header-text h1{font-size:18px}
}
/* mobile header: stack and center for Option A */
@media (max-width:520px){
  .header{flex-direction:column;align-items:center;text-align:center}
  .logo-wrap{margin-top:6px}
  .header-text{margin-top:6px}
  .panel{padding:18px}
  .btn{width:100%}
}