:root{
    --bg:#0b0e14;
    --panel:rgba(255,255,255,.07);
    --text:rgba(255,255,255,.94);
    --muted:rgba(255,255,255,.72);
    --border:rgba(255,255,255,.14);
    --accent:rgba(0,255,180,.9);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  
  /* ✅ FIX: remove the “band/cut” by removing the linear strip + keeping only soft radials
     ✅ Also makes the background feel continuous while scrolling */
  body{
    margin:0;
    font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--text);
  
    background:
      radial-gradient(1200px 700px at 18% -10%, rgba(120,120,255,.18), transparent 62%),
      radial-gradient(1100px 700px at 82% 6%, rgba(0,255,180,.12), transparent 60%),
      radial-gradient(1000px 900px at 50% 115%, rgba(255,255,255,.04), transparent 58%),
      var(--bg);
  
    background-repeat:no-repeat;
    background-attachment:fixed;
  }
  
  a{color:inherit;text-decoration:none;opacity:.9}
  a:hover{opacity:1;text-decoration:underline}
  
  .wrap{max-width:980px;margin:0 auto;padding:18px}
  
  /* =========================
     Header
  ========================= */
  .header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(11,14,20,.74);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:750;
    letter-spacing:.2px;
  }
  
  .dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 18px rgba(0,255,180,.25);
  }
  
  .nav{display:flex;gap:14px;font-size:.95rem}
  
  /* =========================
     Hero
  ========================= */
  .hero{
    padding:34px 0 12px;
    position:relative;
  }
  
  .hero h1{
    font-size:2.45rem;
    margin:10px 0 8px;
    letter-spacing:-.4px;
  }
  
  .lead{
    color:var(--muted);
    font-size:1.1rem;
    margin:0 0 18px;
    max-width:70ch;
  }
  
  /* ✅ FIX: remove hero band/glow that can create a “cut” line across sections */
  .hero::after{ content:none; }
  
  /* =========================
     Containers
  ========================= */
  .panel{
    background:rgba(20,24,33,.78);
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    padding:16px;
    margin:18px 0;
    box-shadow:0 16px 40px rgba(0,0,0,.25);
    backdrop-filter:blur(12px);
  }
  
  .card{
    background:rgba(20,24,33,.78);
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    padding:14px;
    overflow:hidden;
    min-width:0;
    box-shadow:0 14px 34px rgba(0,0,0,.22);
    backdrop-filter:blur(12px);
  
    /* ✅ hover animation everywhere */
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  
  /* global hover: applies to featured + info blocks */
  .card:hover{
    transform:translateY(-2px);
    border-color:rgba(0,255,180,.30);
    box-shadow:
      0 0 0 1px rgba(0,255,180,.12),
      0 22px 48px rgba(0,0,0,.35);
  }
  
  /* featured tiles: slightly stronger */
  .preview-card:hover{
    border-color:rgba(0,255,180,.38);
    box-shadow:
      0 0 0 1px rgba(0,255,180,.16),
      0 26px 54px rgba(0,0,0,.38);
  }
  
  .card h3{margin:0 0 8px}
  
  /* =========================
     Code box
  ========================= */
  .code{
    display:block;
    padding:12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.42);
    overflow-x:auto;
    user-select:all;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  }
  
  /* =========================
     Buttons / rows
  ========================= */
  .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
  
  .btn{
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.10);
    color:var(--text);
    padding:10px 12px;
    border-radius:12px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:background .15s ease,border-color .15s ease,transform .15s ease;
  }
  
  .btn:hover{
    background:rgba(255,255,255,.14);
    border-color:rgba(0,255,180,.35);
  }
  
  .btn.secondary{background:transparent}
  
  .hint{color:var(--muted);margin:12px 0 0;font-size:.95rem}
  .small{font-size:.9rem;color:var(--muted)}
  
  /* =========================
     Grid
  ========================= */
  .grid{
    display:grid;
    gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    margin-top:14px;
    align-items:start;
  }
  
  /* =========================
     Images (tile safe)
  ========================= */
  .img-frame{
    width:100%;
    height:240px;
    overflow:hidden;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(0,0,0,.22);
    margin-bottom:10px;
  }
  
  .preview-card img,
  .card img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:240px !important;
    object-fit:cover !important;
  }
  
  /* =========================
     Divider (subtle + no harsh line)
  ========================= */
  /* ✅ FIX: ditch the line-based divider that can look like a “cut”.
     This becomes a soft spacer glow instead. */
  .section-divider{
    height:22px;
    margin:18px 0 12px;
    background:radial-gradient(55% 140% at 50% 50%, rgba(255,255,255,.06), transparent 70%);
    opacity:.75;
    border:0;
  }
  .section-divider::before,
  .section-divider::after{ content:none; }
  
  /* =========================
     FAQ (hover animation too)
  ========================= */
  .faq{margin-top:26px}
  .faq h2{margin:0 0 10px}
  
  details{
    background:rgba(20,24,33,.78);
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    padding:12px;
    margin:10px 0;
    backdrop-filter:blur(12px);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  
  details:hover{
    transform:translateY(-2px);
    border-color:rgba(0,255,180,.26);
    box-shadow:
      0 0 0 1px rgba(0,255,180,.10),
      0 20px 44px rgba(0,0,0,.32);
  }
  
  summary{cursor:pointer;font-weight:650}
  
  /* =========================
     Footer
  ========================= */
  .footer{padding:26px 0 40px;color:var(--muted)}
  
  /* =========================
     Forms / Admin
  ========================= */
  label{
    display:inline-block;
    margin-bottom:6px;
    color:var(--muted);
    font-size:.95rem;
  }
  
  input,textarea,select{
    width:100%;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(0,0,0,.22);
    color:var(--text);
    outline:none;
  }
  
  input::placeholder,textarea::placeholder{
    color:rgba(255,255,255,.45);
  }
  
  input:focus,textarea:focus,select:focus{
    border-color:rgba(0,255,180,.55);
    box-shadow:0 0 0 3px rgba(0,255,180,.12);
  }
  
  textarea{resize:vertical;min-height:120px}
  .form-row{margin-bottom:14px}
  .panel form{max-width:680px}
  
  .error{
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,120,120,.35);
    background:rgba(255,80,80,.08);
    color:rgba(255,210,210,.95);
    font-weight:650;
  }
  
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
  
  .admin-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  
  .admin-title{margin:0}
  .admin-logout{margin:0}
  .admin-subtitle{margin-top:18px}
  
  .preview-title{margin:0 0 6px}
  .preview-desc{margin:0;color:var(--muted)}