:root{
    --bg:#0b1220;
    --panel:#09121a;
    --accent:#00b4d8;
    --accent-2:#6be6c1;
    --muted:#9fb3c8;
    --glass: rgba(255,255,255,0.03);
    --glass-2: rgba(255,255,255,0.04);
  }
  
  /* Reset & base */
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg, #070b10 0%, #071024 40%, #071b2b 100%);
    color:#dbeef7;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    min-height:100vh;
    scroll-behavior: smooth;
  }
  
  /* Navbar */
  .nav-tech{
    background: linear-gradient(90deg, rgba(8,12,20,.9), rgba(6,10,16,.85));
    border-bottom: 1px solid rgba(255,255,255,0.03);
    backdrop-filter: blur(6px);
  }
  .navbar-brand { font-weight:700; letter-spacing:.2px; color:var(--accent); }
  .nav-link { color:var(--muted) !important; margin-left:.25rem; margin-right:.25rem;}
  .nav-link.active, .nav-link:hover { color: #fff !important; }
  
  /* Glass card */
  .glass{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:12px;
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
  }
  
  /* headings */
  h1,h2,h3,h4,h5 { color:#dff7ff; }
  .lead { color: #98c1d9; }
  
  /* capsule card */
  .capsule-card{
    border-radius:12px;
    padding:18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.03);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .capsule-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(3,8,25,0.65); }
  
  .badge-type{
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    font-size:.7rem;
    padding:.35rem .6rem;
    border-radius:8px;
    background: var(--accent);
    color: #02111a;
  }
  
  /* Buttons */
  .btn-primary { background: linear-gradient(90deg,var(--accent), #00e0a6); border: none; color:#02111a; font-weight:700; }
  .btn-outline-light { border:1px solid rgba(255,255,255,0.06); color:var(--muted); background:transparent; }
  
  /* Forms */
  .form-control, .form-select {
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.03);
    color: #dbeef7;
    border-radius:8px;
    padding:.5rem .75rem;
  }
  .form-label { color:var(--muted); font-weight:600; }
  
  /* Learn area styles */
  .tab-btn { background: transparent; color: var(--muted); border:1px solid rgba(255,255,255,0.03); border-radius:6px; padding:.35rem .6rem; cursor:pointer; }
  .tab-btn.active { background: rgba(255,255,255,0.02); color:#fff; border-color: rgba(255,255,255,0.06); }
  
  /* Flashcard */
  .flashcard {
    width: 100%;
    max-width:520px;
    height: 260px;
    margin: 0 auto 18px;
    perspective: 1200px;
    cursor:pointer;
  }
  .flashcard-inner{
    width:100%;
    height:100%;
    border-radius:12px;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
    transform-style: preserve-3d;
    box-shadow: 0 14px 40px rgba(2,6,23,0.6);
    border:1px solid rgba(255,255,255,0.04);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  }
  .flashcard.flipped .flashcard-inner { transform: rotateY(180deg); }
  
  .flashcard-face{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:22px; backface-visibility:hidden;
    color:#e8fbff; text-align:center;
  }
  .flashcard-front{ background: linear-gradient(90deg,#0f2330, #042b3a); }
  .flashcard-back{ background: linear-gradient(90deg,#04323f,#02575f); transform: rotateY(180deg); }
  
  /* quiz options */
  .quiz-option{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.03);
    padding:.8rem 1rem; border-radius:8px; cursor:pointer; margin-bottom:.5rem;
    color:#dbeef7;
    transition: transform .2s;
  }
  .quiz-option:hover{ transform: translateY(-3px); }
  .quiz-option.correct{ background:#00d97e; color:#02111a; }
  .quiz-option.incorrect{ background:#ff4c4c; color:#fff; }
  
  /* author card */
  .author-card{ border-radius:12px; padding:20px; }
  .author-avatar{ width:120px; height:120px; object-fit:cover; border:3px solid rgba(255,255,255,0.04); }
  
  /* social icons */
  .social-icon{ display:inline-flex; width:40px; height:40px; border-radius:8px; align-items:center; justify-content:center; background:linear-gradient(90deg,var(--accent),#00d2b0); color:#02111a; text-decoration:none; }
  
  /* small utilities */
  .small-muted { color: var(--muted); font-size: .9rem; }
  .hidden { display:none !important; }
  .text-center { text-align:center; }
  
  /* footer */
  footer{
    margin-top:40px;
    padding:20px 0;
    background: var(--panel);
    text-align:center;
    font-size:.9rem;
    color:var(--muted);
    border-top:1px solid rgba(255,255,255,0.03);
  }
  
  /* responsive tweaks */
  @media (max-width:760px){
    .flashcard{ height:200px; }
    .lead{ font-size: 0.95rem; }
  }