/* ---------- 1. COLORS — change these to re-theme the whole page ---------- */
  :root{
    --bg: #101014;
    --card: #1a1a20;
    --border: #2a2a32;
    --text: #f0f0f0;
    --text-dim: #a0a0a8;
    --accent: #7dd3fc;
    --code-bg: #0d0d10;
  }

  /* ---------- 2. BASE PAGE SETUP ---------- */
  * { box-sizing: border-box; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height:1.6;
    position:relative;
  }

  /* ---------- 2b. AMBIENT GLOW BACKGROUND ---------- */
  .ambient{
    position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
  }
  .blob{
    position:absolute; border-radius:50%; filter:blur(110px); opacity:.35;
    animation:drift 22s ease-in-out infinite alternate;
  }
  .blob.b1{ width:520px; height:520px; background:#FFFFFF; top:-160px; left:-120px; }
  .blob.b2{ width:480px; height:480px; background:#888888; bottom:-180px; right:-100px; animation-delay:-8s; }
  .blob.b3{ width:380px; height:380px; background:#CCCCCC; top:40%; left:55%; animation-delay:-14s; }
  @keyframes drift{
    0%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(40px,-30px) scale(1.08); }
    100%{ transform:translate(-30px,20px) scale(0.96); }
  }

  .noise{
    position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.03;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .container{
    max-width: 850px;
    margin: 0 auto;
    padding: 20px;
  }
  a{ color:var(--accent); }
  img{ max-width:100%; display:block; border-radius:8px; border:1px solid var(--border); }

  /* ---------- 3. TOP NAV BAR ---------- */
  nav{
    background:var(--card);
    border-bottom:1px solid var(--border);
    padding:14px 20px;
  }
  nav .nav-inner{
    max-width:850px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
  }
  nav a{ text-decoration:none; font-weight:bold; color:var(--text); }
  nav .back-link{ font-weight:normal; color:var(--text-dim); }

  /* ---------- 4. TITLE / HERO ---------- */
  .breadcrumb{ font-size:13px; color:var(--text-dim); margin-bottom:14px; }
  .breadcrumb a{ color:var(--text-dim); }

  .title-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
  h1{ margin:0; font-size:30px; }

  .badge{
    display:inline-block;
    padding:4px 10px;
    border-radius:6px;
    font-size:12px;
    font-weight:bold;
    background:var(--card);
    border:1px solid var(--border);
  }

  .tags{ margin-bottom:16px; }
  .tags .badge{ margin-right:6px; margin-bottom:6px; }

  .subtitle{ color:var(--text-dim); margin-bottom:30px; }

  /* ---------- 5. SECTIONS ---------- */
  .section{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:20px;
    margin-bottom:20px;
  }
  .section h2{
    font-size:20px;
    margin-top:0;
    border-bottom:1px solid var(--border);
    padding-bottom:10px;
  }
  .section h3{
    font-size:16px;
    margin-bottom:8px;
    color:var(--text);
  }
  .section p{ color:var(--text-dim); }
  .section strong{ color:var(--text); }
  .section ul{ color:var(--text-dim); padding-left:20px; }
  .section li{ margin-bottom:6px; }

  /* ---------- 6. IMAGE GRID (for screenshots) ---------- */
  .img-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:14px;
    margin:14px 0;
  }
  .img-grid.single{ grid-template-columns: 1fr; }
  .img-box{ text-align:center; }
  .img-caption{ font-size:12px; color:var(--text-dim); margin-top:6px; }

  /* Fixed-size image frame so mismatched screenshot sizes still look uniform */
  .img-frame{
    width:100%;
    height:220px;
    background:var(--code-bg);
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .img-grid.single .img-frame{ height:320px; }
  .img-frame img{
    width:100%;
    height:100%;
    object-fit:contain;
    border:none;
    border-radius:0;
    display:block;
  }
  @media (max-width:600px){
    .img-frame{ height:180px; }
    .img-grid.single .img-frame{ height:240px; }
  }

  /* ---------- 7. INFO TABLES ---------- */
  table{
    width:100%;
    border-collapse: collapse;
    margin:14px 0;
    font-size:13.5px;
  }
  th, td{
    border:1px solid var(--border);
    padding:10px;
    text-align:left;
    color:var(--text-dim);
    vertical-align:top;
  }
  th{ background:var(--code-bg); color:var(--text); }

  /* ---------- 8. CODE / VALUE BLOCK (for credentials, settings) ---------- */
  .value-block{
    background:var(--code-bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:12px 16px;
    font-family:'Courier New', monospace;
    font-size:13px;
    color:var(--accent);
    margin:12px 0;
  }
  .value-block .label{ color:var(--text-dim); font-family:Arial, sans-serif; }

  /* ---------- 9. CALLOUT BOX ---------- */
  .callout{
    background:rgba(125,211,252,0.08);
    border-left:3px solid var(--accent);
    padding:12px 16px;
    border-radius:6px;
    margin-top:14px;
    color:var(--text-dim);
  }

  /* ---------- 10. STEP LABEL ---------- */
  .step-label{
    display:inline-block;
    background:var(--accent);
    color:#101014;
    font-weight:bold;
    font-size:12px;
    padding:2px 9px;
    border-radius:20px;
    margin-right:8px;
  }

  /* ---------- 11. BOTTOM NAV ---------- */
  .btn{
    display:inline-block;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    font-size:14px;
    border:1px solid var(--border);
  }
  .btn-primary{ background:var(--accent); color:#101014; border:none; }
  .btn-ghost{ background:transparent; color:var(--text); }
  .bottom-nav{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:20px; }

  /* ---------- 12. FOOTER ---------- */
  footer{
    text-align:center;
    padding:20px;
    color:var(--text-dim);
    font-size:13px;
    border-top:1px solid var(--border);
    margin-top:40px;
  }

  /* ---------- 13. RESPONSIVE ---------- */
  @media (max-width:600px){
    .img-grid{ grid-template-columns: 1fr; }
  }
  /* ---------- 14. LIGHTBOX (click image to view full size) ---------- */
  .img-frame img{ cursor:zoom-in; }
  .lightbox-overlay{
    display:none; position:fixed; inset:0; z-index:999;
    background:rgba(0,0,0,.88); backdrop-filter:blur(6px);
    align-items:center; justify-content:center; padding:40px;
    cursor:zoom-out;
  }
  .lightbox-overlay.active{ display:flex; }
  .lightbox-overlay img{
    max-width:95vw; max-height:90vh; border-radius:10px;
    border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,.6);
  }
  .lightbox-close{
    position:absolute; top:24px; right:32px; width:42px; height:42px; border-radius:50%;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
    font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }