/* ShimantoVerse — shared stylesheet
   Used by every page (index.php, course.php, and any page you add later).
   Fix a visual bug ONCE here and it's fixed everywhere — that's the whole point
   of pulling this out of the old per-page <style> blocks. */

:root{
    --ink:#f6efe4;
    --ink-soft:rgba(246,239,228,0.72);
    --ink-dim:rgba(246,239,228,0.5);
    --horizon-teal:#7fe9d8;
    --horizon-teal-2:#48b6a2;
    --paper:#ffffff;
    --paper-dim:rgba(255,255,255,0.08);
    --amber:#ffb454;
    --amber-2:#ffd28a;
    --coral:#ff8a65;
    --mist:rgba(255,255,255,0.22);
    --line:rgba(255,255,255,0.16);
    --shadow: 0 24px 60px -24px rgba(0,0,0,0.55);

    --radius:22px;

    /* Fixed-header layout: header and the floating course toggle are both
       position:fixed now, so they're taken out of normal document flow.
       These two variables record their rendered heights so the page content
       (and the toggle itself) can be pushed down by the right amount instead
       of being hidden underneath them. Nudge these if you change the header
       or toggle's padding/font-size and see a gap or overlap appear. */
    --header-h:70px;
    --toggle-h:84px;

    /* ---------- Fonts ----------
       Bangla regular text -> Noto Sans Bengali (Google's own Bengali sans; "Google Sans" itself is
       proprietary, not on Google Fonts, and has no Bengali glyphs, so this is the closest match)
       Bangla headline text -> Hind Siliguri
       English text -> Lexend */
    --font-bn-body:'Noto Sans Bengali','Lexend',sans-serif;
    --font-bn-head:'Hind Siliguri','Lexend',sans-serif;
    --font-en:'Lexend',sans-serif;

    /* Liquid glass surface tokens */
    --glass-bg: rgba(255,255,255,0.10);
    --glass-bg-strong: rgba(255,255,255,0.16);
    --glass-bg-soft: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.30);
    --glass-border-soft: rgba(255,255,255,0.14);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 0 0 1px rgba(255,255,255,0.04);
    --glass-blur: blur(24px) saturate(180%);
  }
  *{box-sizing:border-box;}
  [hidden]{display:none !important;}
  html{scroll-behavior:smooth;}
  html,body{overflow-x:hidden;width:100%;}
  body{
    margin:0;
    min-height:100vh;
    color:var(--ink);
    font-family:var(--font-bn-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(1100px 620px at 8% -8%, rgba(255,180,84,0.28), transparent 60%),
      radial-gradient(900px 700px at 96% 12%, rgba(127,233,216,0.16), transparent 55%),
      radial-gradient(1200px 900px at 50% 115%, rgba(255,138,101,0.16), transparent 60%),
      linear-gradient(180deg,#241408 0%, #1a0f08 30%, #150c07 60%, #0f0906 100%);
    background-attachment:fixed;
    /* Header is now fixed and out of flow — reserve its height so page content
       doesn't start underneath it. */
    padding-top:var(--header-h);
  }
  h1,h2,h3,h4,.display{
    font-family:var(--font-bn-head);
    font-weight:700;
    margin:0;
    color:var(--ink);
  }
  .eyebrow{
    font-family:var(--font-bn-body);
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:.72rem;
    font-weight:600;
    color:var(--amber);
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
  button{font-family:inherit;cursor:pointer;}
  ::selection{background:var(--amber-2);color:#241408;}

  /* ---------- Focus ---------- */
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:3px solid var(--amber);
    outline-offset:3px;
    border-radius:6px;
  }

  /* ---------- Header ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    width:100%;
    z-index:110;
    background:rgba(30,18,10,0.42);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border-bottom:1px solid var(--glass-border-soft);
    box-shadow:0 1px 0 rgba(255,255,255,0.06), 0 12px 30px -18px rgba(0,0,0,0.5);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:10px;
    padding:16px 28px;max-width:1180px;margin:0 auto;
  }
  .logo{display:flex;align-items:center;gap:10px;font-family:var(--font-en);font-weight:700;font-size:1.28rem;color:var(--ink);}
  .logo .mark{width:38px;height:38px;flex:none;border-radius:12px;object-fit:cover;box-shadow:0 4px 14px -4px rgba(0,0,0,.5);}
  .logo .sub{font-family:var(--font-en);font-weight:400;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-top:-2px;}
  .nav-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .ghost-btn{font-weight:600;font-size:.9rem;color:var(--ink);padding:9px 14px;border-radius:999px;transition:background .2s ease;}
  .ghost-btn:hover{background:var(--glass-bg-soft);}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
    color:var(--ink);
    padding:11px 22px;border-radius:999px;font-weight:600;font-size:.9rem;
    border:1px solid var(--glass-border);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-highlight), 0 8px 20px -10px rgba(0,0,0,0.5);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .btn:hover{transform:translateY(-2px);box-shadow:var(--glass-highlight), 0 14px 28px -12px rgba(0,0,0,0.6);}
  .btn.amber{background:linear-gradient(180deg, rgba(255,180,84,0.9), rgba(255,138,101,0.85));border-color:rgba(255,210,138,.6);color:#241408;}
  .btn.outline{background:rgba(255,255,255,0.05);color:var(--ink);border:1px solid rgba(255,255,255,.3);}
  .btn.outline:hover{background:rgba(255,255,255,.12);}
  /* ---------- Floating glass course toggle ---------- */
  .course-toggle-wrap{
    position:fixed; top:var(--header-h); left:0; right:0; z-index:90;
    display:flex; justify-content:center;
    pointer-events:none;
    margin-bottom:-4px;
  }
  .course-toggle{
    pointer-events:auto;
    display:flex; gap:4px;
    margin-top:16px;
    padding:6px;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:999px;
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    box-shadow:0 14px 34px -12px rgba(0,0,0,0.55), var(--glass-highlight);
  }
  .course-toggle button{
    display:flex; align-items:center; gap:7px;
    background:transparent; border:0;
    padding:10px 20px;
    border-radius:999px;
    font-weight:700; font-size:.88rem;
    color:var(--ink-soft);
    transition:background .25s ease, color .25s ease, box-shadow .25s ease;
    white-space:nowrap;
  }
  .course-toggle button .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;transition:opacity .25s ease;}
  .course-toggle button:hover{color:var(--ink);}
  .course-toggle button.active{
    background:linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.10));
    color:#241408;
    box-shadow:0 6px 18px -6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.7);
  }
  .course-toggle button.active .dot{background:var(--coral);opacity:1;}
  @media (max-width:640px){
    .course-toggle{gap:2px;padding:5px;}
    .course-toggle button{padding:9px 14px;font-size:.8rem;}
  }

  /* Homepage: the floating toggle sits fixed above the free/paid/app sections,
     so #top needs its own extra top padding equal to the toggle's height —
     on top of the header padding already reserved on body. */
  #top{padding-top:var(--toggle-h);}

  /* ---------- courses ---------- */
  .course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .course-card{
    border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-highlight), 0 18px 40px -26px rgba(0,0,0,0.6);
    transition:transform .2s, box-shadow .2s, background .2s;
  }
  .course-card:hover{transform:translateY(-6px);background:var(--glass-bg-strong);box-shadow:var(--glass-highlight), var(--shadow);}
  .course-thumb{aspect-ratio:16/9;height:auto;position:relative;display:flex;align-items:flex-end;padding:14px;}
  .course-thumb .badge{background:rgba(255,255,255,.85);color:#241408;font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:999px;backdrop-filter:blur(8px);}
  .course-thumb .discount-badge{position:absolute;top:12px;right:12px;background:linear-gradient(180deg,var(--coral),#e8543a);color:#fff;font-size:.75rem;font-weight:800;padding:5px 10px;border-radius:999px;box-shadow:0 4px 12px -4px rgba(0,0,0,.5);}
  .course-body{padding:20px;}
  .course-body .tag{font-size:.72rem;color:var(--coral);font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
  .course-body h3{font-size:1.08rem;margin:8px 0 8px;line-height:1.35;color:#fff;}
  .course-meta{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:.85rem;margin-bottom:16px;}
  .avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.68rem;font-weight:700;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.35);}
  .course-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--glass-border-soft);padding-top:14px;}
  .price{font-family:var(--font-bn-body);font-weight:700;color:#fff;}
  .price .old{font-family:var(--font-bn-body);font-size:.78rem;color:var(--ink-dim);text-decoration:line-through;font-weight:400;margin-right:6px;}
  .mini-link{font-size:.85rem;font-weight:700;color:var(--horizon-teal);background:none;border:none;font-family:inherit;padding:0;}
  .mini-link:disabled{color:#8ee6b8;cursor:default;opacity:.85;}

  /* ---------- course detail page ---------- */
  .course-detail-card{
    display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch;
    border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;
    background:var(--glass-bg);backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-highlight), var(--shadow);
  }
  .course-detail-thumb{
    aspect-ratio:16/9;height:auto;align-self:center;
    background-color:rgba(255,180,84,0.08);
    background-size:contain;background-repeat:no-repeat;background-position:center;
    position:relative;
  }
  .course-detail-thumb .badge{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.85);color:#241408;font-size:.75rem;font-weight:700;padding:6px 13px;border-radius:999px;}
  .course-detail-body{padding:32px;display:flex;flex-direction:column;justify-content:center;}
  .course-detail-body .tag{font-size:.74rem;color:var(--coral);font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
  .course-detail-body h2{color:#fff;font-size:1.6rem;margin:10px 0 10px;line-height:1.32;}
  .course-detail-body .course-meta{margin:0 0 20px;padding-bottom:20px;border-bottom:1px dashed var(--glass-border-soft);}
  .course-detail-price-box{
    display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    background:var(--glass-bg-soft);border:1px solid var(--glass-border-soft);
    border-radius:16px;padding:14px 20px;margin-bottom:24px;width:fit-content;
  }
  .course-detail-price{font-family:var(--font-bn-body);font-size:1.7rem;font-weight:800;color:#fff;margin:0;line-height:1;}
  .course-detail-price .old{font-family:var(--font-bn-body);font-size:1rem;color:var(--ink-dim);text-decoration:line-through;font-weight:400;margin-right:10px;}
  .course-detail-actions{display:flex;gap:14px;flex-wrap:wrap;}
  .course-detail-desc-card{
    margin-top:24px;
    background:var(--glass-bg);border-radius:var(--radius);border:1px solid var(--glass-border);padding:30px 32px;
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-highlight), 0 18px 40px -26px rgba(0,0,0,0.6);
  }
  .course-detail-description{color:var(--ink-soft);font-size:.95rem;line-height:1.85;margin:0 0 26px;white-space:pre-line;}
  .course-detail-desc-card .course-detail-actions{padding-top:24px;border-top:1px dashed var(--glass-border-soft);}
  @media (max-width:760px){
    .course-detail-card{grid-template-columns:1fr;}
    .course-detail-thumb{align-self:auto;}
    .course-detail-body{padding:22px;}
    .course-detail-price-box{width:100%;justify-content:center;}
    .course-detail-actions{gap:10px;}
    .course-detail-actions .btn{flex:1 1 auto;justify-content:center;text-align:center;}
    .course-detail-desc-card{padding:20px;}
  }

  /* ---------- app cta ---------- */
  .app-cta{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    color:#fff;border-radius:32px;position:relative;overflow:hidden;
    padding:56px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-highlight), var(--shadow);
  }
  .app-cta::before{
    content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
    background:radial-gradient(circle,var(--amber) 0%, transparent 70%);opacity:.45;
  }
  .app-cta h2{color:#fff;font-size:1.9rem;position:relative;}
  .app-cta p{color:var(--ink-soft);max-width:44ch;margin-top:14px;position:relative;}
  .app-badges{display:flex;gap:12px;margin-top:26px;position:relative;flex-wrap:wrap;}
  .store-badge{
    display:flex;align-items:center;gap:10px;background:var(--glass-bg-soft);
    border:1px solid var(--glass-border-soft);padding:10px 18px;border-radius:14px;
    backdrop-filter:blur(12px);
  }
  .store-badge span{display:block;line-height:1.15;}
  .store-badge .small{font-size:.65rem;color:var(--ink-dim);}
  .store-badge .big{font-size:.92rem;font-weight:700;font-family:var(--font-en);color:#fff;}
  .phone-mock{width:200px;position:relative;z-index:1;}

  /* ---------- footer ---------- */
  footer{background:rgba(15,9,6,0.6);color:var(--ink-soft);padding:64px 0 26px;border-top:1px solid var(--glass-border-soft);backdrop-filter:blur(20px);}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--glass-border-soft);}
  .footer-logo{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-en);font-weight:700;font-size:1.2rem;margin-bottom:14px;}
  .footer-grid p{font-size:.88rem;line-height:1.7;max-width:32ch;}
  .footer-grid h4{color:#fff;font-size:.92rem;margin-bottom:16px;font-family:var(--font-bn-head);letter-spacing:.03em;}
  .footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;}
  .footer-grid ul a{font-size:.88rem;transition:color .18s;}
  .footer-grid ul a:hover{color:var(--amber);}
  .social-row{display:flex;gap:10px;margin-top:18px;}
  .social-row a{
    width:36px;height:36px;border-radius:50%;border:1px solid var(--glass-border);
    background:var(--glass-bg-soft);
    display:flex;align-items:center;justify-content:center;transition:all .18s;
  }
  .social-row a:hover{background:var(--amber);border-color:var(--amber);color:#241408;}
  .bottom-bar{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:.8rem;flex-wrap:wrap;gap:10px;}

  /* ---------- reveal animation ---------- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1;transform:none;transition:none;}
  }

  /* ---------- nav auth state ---------- */
  .nav-state{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
  .nav-state[hidden]{display:none;}
  .nav-hello{font-size:.86rem;font-weight:600;color:var(--ink-soft);}

  /* ---------- hamburger menu (logged-in header) ---------- */
  .nav-menu-wrap{position:relative;}
  .menu-toggle-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    width:42px;height:42px;flex:none;border-radius:12px;
    background:var(--glass-bg-soft);border:1px solid var(--glass-border-soft);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:background .18s ease;
  }
  .menu-toggle-btn:hover{background:var(--glass-bg-strong);}
  .menu-toggle-btn .menu-bar{width:19px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease;}
  .menu-toggle-btn.open .menu-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle-btn.open .menu-bar:nth-child(2){opacity:0;}
  .menu-toggle-btn.open .menu-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .nav-dropdown{
    position:absolute;top:calc(100% + 10px);right:0;min-width:200px;z-index:120;
    display:flex;flex-direction:column;gap:2px;padding:8px;
    background:rgba(36,23,14,0.9);border:1px solid var(--glass-border);border-radius:16px;
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-highlight), var(--shadow);
  }
  .nav-dropdown[hidden]{display:none;}
  .nav-dropdown-item{
    display:flex;align-items:center;width:100%;text-align:left;
    padding:11px 14px;border-radius:10px;border:none;background:transparent;
    font-family:inherit;font-weight:600;font-size:.9rem;color:var(--ink);
    transition:background .18s ease;
  }
  .nav-dropdown-item:hover{background:var(--glass-bg-soft);}
  .nav-dropdown-item.logout-link{color:#ffab91;}
  .nav-dropdown .dropdown-divider{height:1px;background:var(--glass-border-soft);margin:6px 4px;}

  /* ---------- auth modal ---------- */
  .overlay{position:fixed;inset:0;background:rgba(10,6,4,.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;}
  .overlay[hidden]{display:none;}
  .modal{
    background:rgba(36,23,14,0.55);
    border:1px solid var(--glass-border);
    border-radius:24px;max-width:420px;width:100%;padding:32px 28px;position:relative;
    box-shadow:var(--glass-highlight), var(--shadow);max-height:90vh;overflow:auto;
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    color:var(--ink);
  }
  .modal-close{position:absolute;top:14px;right:14px;background:var(--glass-bg-soft);border:1px solid var(--glass-border-soft);width:32px;height:32px;border-radius:50%;font-size:1rem;color:var(--ink-soft);}
  .modal h3{font-size:1.25rem;margin-bottom:18px;color:#fff;}
  .role-tabs,.mode-tabs{display:flex;gap:8px;margin-bottom:16px;background:var(--glass-bg-soft);padding:4px;border-radius:14px;border:1px solid var(--glass-border-soft);}
  .role-tabs button,.mode-tabs button{flex:1;border:none;background:transparent;padding:9px;border-radius:10px;font-weight:600;font-size:.86rem;color:var(--ink-soft);font-family:inherit;}
  .role-tabs button.active,.mode-tabs button.active{background:rgba(255,255,255,0.18);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px;color:var(--ink-soft);}
  .field input{width:100%;padding:11px 13px;border:1px solid var(--glass-border-soft);border-radius:12px;font-family:inherit;font-size:.94rem;background:rgba(0,0,0,0.18);color:var(--ink);}
  .field textarea{width:100%;padding:11px 13px;border:1px solid var(--glass-border-soft);border-radius:12px;font-family:inherit;font-size:.94rem;background:rgba(0,0,0,0.18);color:var(--ink);resize:vertical;line-height:1.5;}
  .current-file-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:.8rem;color:var(--ink-soft);}
  .remove-file-check{display:flex;align-items:center;gap:6px;font-size:.8rem;color:#ffab91;cursor:pointer;}
  .remove-file-check input{width:auto;}
  .field input::placeholder{color:var(--ink-dim);}
  .field input:focus-visible{outline:2px solid var(--horizon-teal);outline-offset:1px;}
  .field small{display:block;margin-top:5px;font-size:.74rem;color:var(--ink-dim);}
  .submit-btn{width:100%;background:linear-gradient(180deg,var(--amber),var(--coral));color:#241408;border:none;padding:12px;border-radius:13px;font-weight:700;font-size:.95rem;margin-top:6px;font-family:inherit;box-shadow:0 10px 24px -12px rgba(255,138,101,.6);}
  .submit-btn:hover{filter:brightness(1.05);}
  .auth-msg{margin-top:12px;font-size:.85rem;text-align:center;min-height:1.2em;}
  .auth-msg.error{color:#ff9d84;}
  .auth-msg.success{color:#7fe9b4;}
  .demo-hint{margin-top:16px;font-size:.72rem;color:var(--ink-soft);background:var(--glass-bg-soft);border:1px solid var(--glass-border-soft);padding:10px 12px;border-radius:12px;line-height:1.6;}

  /* ---------- dashboards ---------- */
  .dash-section{padding:70px 0;min-height:60vh;background:transparent;}
  .dash-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:32px;}
  .dash-head h2{font-size:1.7rem;color:#fff;}
  .dash-head p{color:var(--ink-soft);margin-top:6px;}
  .back-link{font-size:.86rem;font-weight:700;color:var(--horizon-teal);}
  .dash-card{
    background:var(--glass-bg);border-radius:20px;border:1px solid var(--glass-border);padding:24px;
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-highlight), 0 18px 40px -26px rgba(0,0,0,0.6);
  }
  .status-badge{font-size:.72rem;font-weight:700;padding:4px 11px;border-radius:999px;display:inline-block;white-space:nowrap;}
  .status-pending{background:rgba(255,180,84,0.18);color:#ffcf8c;border:1px solid rgba(255,180,84,.35);}
  .status-approved{background:rgba(127,233,216,0.16);color:#8ff0d7;border:1px solid rgba(127,233,216,.35);}
  .status-rejected{background:rgba(255,138,101,0.16);color:#ffab91;border:1px solid rgba(255,138,101,.35);}
  .app-row{display:grid;grid-template-columns:1.2fr 1fr .8fr .7fr 1fr .8fr 1fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--glass-border-soft);font-size:.87rem;}
  .pw-cell{font-family:var(--font-en),monospace;background:rgba(0,0,0,0.22);padding:3px 8px;border-radius:8px;display:inline-block;font-size:.82rem;}
  .lesson-row{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--glass-border-soft);gap:12px;flex-wrap:wrap;}
  .lesson-row:last-child{border-bottom:none;}
  .lesson-num{font-family:var(--font-en);font-size:.78rem;color:var(--horizon-teal);font-weight:700;margin-right:10px;}
  .lesson-title{font-weight:700;color:#fff;}
  .lesson-desc{color:var(--ink-soft);font-size:.85rem;margin-top:3px;}
  .lesson-module{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--coral);font-weight:700;margin:26px 0 6px;}
  .lesson-module:first-child{margin-top:0;}
  .locked-note{background:rgba(255,138,101,0.14);color:#ffab91;border:1px solid rgba(255,138,101,.3);border-radius:14px;padding:16px 18px;font-size:.92rem;}
  .app-row.head{font-weight:700;color:var(--ink-soft);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--glass-border-soft);}
  .app-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .status-select{
    width:100%;max-width:190px;padding:8px 12px;border-radius:10px;font-family:inherit;
    font-size:.82rem;font-weight:700;cursor:pointer;
    background-color:#2a1a10;border:1px solid var(--glass-border-soft);
  }
  .status-select option{background:#2a1a10;color:var(--ink);font-weight:600;}
  .status-select.status-pending{color:#ffcf8c;border-color:rgba(255,180,84,.35);}
  .status-select.status-approved{color:#8ff0d7;border-color:rgba(127,233,216,.35);}
  .status-select.status-rejected{color:#ffab91;border-color:rgba(255,138,101,.35);}
  .status-select:disabled{opacity:.5;cursor:wait;}
  .mini-btn{border:1px solid var(--glass-border-soft);padding:7px 13px;border-radius:10px;font-size:.78rem;font-weight:700;font-family:inherit;backdrop-filter:blur(10px);}
  .mini-btn.approve{background:rgba(127,233,216,0.2);color:#8ff0d7;}
  .mini-btn.reject{background:rgba(255,138,101,0.2);color:#ffab91;}
  .mini-btn.pending{background:rgba(255,180,84,0.2);color:#ffcf8c;}
  .mini-btn:disabled{opacity:.4;}
  .filter-tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap;}
  .filter-tabs button{border:1px solid var(--glass-border-soft);background:var(--glass-bg-soft);padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:600;font-family:inherit;color:var(--ink-soft);backdrop-filter:blur(10px);}
  .filter-tabs button.active{background:rgba(255,255,255,0.2);color:#fff;border-color:var(--glass-border);}
  .empty-note{color:var(--ink-dim);font-size:.9rem;padding:24px 0;text-align:center;}

  /* ---------- teacher dashboard: search boxes (enrolled students / all users) ---------- */
  .search-box{position:relative;margin-bottom:16px;max-width:340px;}
  .search-box input{width:100%;padding:10px 14px 10px 36px;border:1px solid var(--glass-border-soft);border-radius:11px;font-family:inherit;font-size:.85rem;background:rgba(0,0,0,0.2);color:var(--ink);}
  .search-box input::placeholder{color:var(--ink-dim);}
  .search-box input:focus{outline:none;border-color:var(--amber);}
  .search-box .search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.85rem;color:var(--ink-soft);pointer-events:none;}
  @media (max-width:640px){ .search-box{max-width:100%;} }

  /* ---------- payment method dropdown (readable dark styling, incl. native option list) ---------- */
  .payment-select{
    width:100%;padding:11px 13px;border:1px solid var(--glass-border-soft);border-radius:12px;
    font-family:inherit;font-size:.94rem;background:#2a1a10;color:var(--ink);
  }
  .payment-select option{background:#2a1a10;color:var(--ink);}
  .payment-select option:disabled{color:var(--ink-dim);}
  .thumb-preview{margin-top:10px;width:240px;max-width:100%;aspect-ratio:16/9;height:auto;border-radius:12px;border:1px solid var(--glass-border-soft);object-fit:cover;}

  /* ---------- teacher dashboard: top tab-bar layout ---------- */
  .teacher-layout{display:flex;flex-direction:column;gap:20px;}
  .teacher-sidebar{
    width:100%;flex-shrink:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;
    background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:18px;padding:10px;
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  .teacher-sidebar button{
    display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;padding:11px 18px;border-radius:12px;
    font-family:inherit;font-weight:600;font-size:.88rem;color:var(--ink-soft);background:transparent;border:none;
    transition:background .2s ease,color .2s ease;flex:1 1 auto;white-space:nowrap;
  }
  .teacher-sidebar button:hover{background:var(--glass-bg-soft);color:var(--ink);}
  .teacher-sidebar button.active{background:linear-gradient(180deg,var(--amber),var(--coral));color:#241408;}
  .teacher-sidebar .side-icon{font-size:1.05rem;line-height:1;}
  .teacher-content{flex:1;min-width:0;width:100%;}
  .teacher-panel > .dash-card{margin-bottom:22px;}
  @media (max-width:860px){
    .teacher-sidebar{flex-wrap:nowrap;overflow-x:auto;}
    .teacher-sidebar button{flex:0 0 auto;}
  }

  /* ---------- running-course picker (section 2) ---------- */
  .running-course-row{
    display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
    padding:16px 4px;border-bottom:1px solid var(--glass-border-soft);
  }
  .running-course-row:last-child{border-bottom:none;}
  .rc-title{font-weight:700;color:#fff;}
  .rc-meta{font-size:.78rem;color:var(--ink-soft);margin-top:3px;}
  .rc-counts{display:flex;gap:8px;flex-wrap:wrap;}
  .rc-count{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--glass-bg-soft);color:var(--ink-soft);}

  /* ---------- all-users table (section 4) ---------- */
  .user-row{display:grid;grid-template-columns:1.1fr .9fr .8fr 1fr .8fr .8fr .9fr .9fr;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--glass-border-soft);font-size:.85rem;}
  .user-row.head{font-weight:700;color:var(--ink-soft);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--glass-border-soft);}
  .role-pill{font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;display:inline-block;}
  .role-pill.student{background:rgba(255,180,84,0.18);color:#ffcf8c;}
  .role-pill.teacher{background:rgba(127,233,216,0.18);color:#8ff0d7;}
  @media (max-width:760px){
    .user-row{grid-template-columns:1fr 1fr;row-gap:6px;}
  }
  .stu-course-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--glass-border-soft);gap:12px;flex-wrap:wrap;}
  .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(120%);background:rgba(30,18,10,.75);border:1px solid var(--glass-border);color:#fff;padding:13px 22px;border-radius:14px;font-size:.86rem;z-index:300;transition:transform .3s ease;box-shadow:var(--shadow);max-width:88vw;text-align:center;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);}

  /* ---------- whatsapp floating button ---------- */
  .whatsapp-float{
    position:fixed; right:22px; bottom:22px; z-index:250;
    width:58px; height:58px; border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px -8px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.15) inset;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .whatsapp-float:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 32px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.2) inset;}
  .whatsapp-float svg{width:30px;height:30px;}
  @media (max-width:680px){
    .whatsapp-float{right:16px;bottom:16px;width:52px;height:52px;}
    .whatsapp-float svg{width:27px;height:27px;}
  }
  .toast.show{transform:translateX(-50%) translateY(0);}

  /* ---------- topic content (video + pdf) ---------- */
  .topic-btn-row{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--glass-border-soft);}
  .topic-pill-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--glass-bg-soft);color:var(--ink-soft);
    border:1px solid var(--glass-border-soft);border-radius:999px;
    padding:9px 16px;font-weight:700;font-size:.85rem;
    backdrop-filter:blur(10px);
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .topic-pill-btn .tp-num{
    background:rgba(255,255,255,.1);color:var(--ink-soft);
    border-radius:999px;font-size:.72rem;font-weight:800;
    padding:2px 7px;
  }
  .topic-pill-btn:hover{border-color:var(--horizon-teal);color:#fff;}
  .topic-pill-btn.active{background:rgba(127,233,216,0.2);border-color:var(--horizon-teal);color:#fff;}
  .topic-pill-btn.active .tp-num{background:rgba(255,255,255,.22);color:#fff;}
  .topic-block{padding:0;}
  .topic-title{font-weight:700;margin-bottom:12px;font-size:1.05rem;color:#fff;}
  .video-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:16px;overflow:hidden;background:#000;margin-bottom:10px;border:1px solid var(--glass-border-soft);}
  .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .no-video-note{background:var(--glass-bg-soft);color:var(--ink-soft);border:1px solid var(--glass-border-soft);border-radius:12px;padding:12px 14px;font-size:.85rem;margin-bottom:10px;}
  .pdf-link-btn{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:700;color:var(--horizon-teal);border:1px solid var(--glass-border-soft);padding:8px 14px;border-radius:11px;background:var(--glass-bg-soft);backdrop-filter:blur(10px);}
  .pdf-link-btn:hover{background:var(--glass-bg-strong);}

  /* ---------- course content: social / community buttons (top-middle) ---------- */
  .course-social-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:20px;}
  .course-social-headline{font-weight:700;font-size:.95rem;color:#fff;text-align:center;max-width:560px;line-height:1.5;}
  .course-social-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
  .social-link-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;font-weight:700;font-size:.85rem;border:1px solid transparent;color:#fff;transition:transform .15s ease,filter .15s ease;}
  .social-link-btn:hover{transform:translateY(-2px);filter:brightness(1.08);}
  .social-link-btn svg{width:18px;height:18px;flex:none;}
  .social-link-btn.yt{background:linear-gradient(180deg,#ff4d4f,#c4171a);}
  .social-link-btn.fb{background:linear-gradient(180deg,#4267ff,#2947c4);}
  .social-link-btn.fb-group{background:linear-gradient(180deg,#4267ff,#2947c4);}
  .social-link-btn.wa-group{background:linear-gradient(180deg,#33d478,#1fa855);}

  /* ---------- teacher: course/free-class management ---------- */
  .course-manage-row{display:flex;flex-direction:column;gap:10px;padding:16px 0;border-bottom:1px solid var(--glass-border-soft);}
  .course-manage-row:last-child{border-bottom:none;}
  .cm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
  .cm-title{font-weight:700;color:#fff;}
  .cm-meta{font-size:.78rem;color:var(--ink-soft);margin-top:3px;}
  .cm-type-badge{font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;}
  .cm-type-badge.free{background:rgba(127,233,216,0.18);color:#8ff0d7;}
  .cm-type-badge.paid{background:rgba(255,180,84,0.18);color:#ffcf8c;}
  .cm-actions{display:flex;gap:8px;flex-wrap:wrap;}
  .topic-manage-list{margin-top:6px;}
  .topic-manage-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;background:var(--glass-bg-soft);border:1px solid var(--glass-border-soft);border-radius:11px;margin-bottom:8px;font-size:.85rem;}
  .topic-manage-item .tm-links{display:flex;gap:12px;font-size:.76rem;color:var(--ink-soft);margin-top:3px;flex-wrap:wrap;}
  .topic-add-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
  .topic-add-form input{flex:1;min-width:150px;padding:9px 12px;border:1px solid var(--glass-border-soft);border-radius:11px;font-family:inherit;font-size:.85rem;background:rgba(0,0,0,0.2);color:var(--ink);}
  .topic-add-form button{background:linear-gradient(180deg,var(--horizon-teal),var(--horizon-teal-2));color:#0f2621;border:none;padding:9px 16px;border-radius:11px;font-weight:700;font-size:.85rem;font-family:inherit;flex:none;}
  #courseForm{display:flex;flex-direction:column;gap:0;}
  #courseForm .field{margin-bottom:12px;}

  @media (max-width:680px){
    .app-row{grid-template-columns:1fr 1fr;font-size:.82rem;row-gap:6px;}
    .app-row .app-actions{grid-column:1/-1;}
  }

  /* ---------- responsive ---------- */
  section{padding:84px 0;}
  @media (max-width:980px){
    .course-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .app-cta{grid-template-columns:1fr;padding:40px 30px;text-align:center;}
    .app-cta::before{display:none;}
    .app-badges{justify-content:center;}
    .phone-mock{margin:0 auto;}
  }
  @media (max-width:680px){
    .course-grid{grid-template-columns:1fr;}
    section{padding:56px 0;}
    .footer-grid{grid-template-columns:1fr;}
  }

  /* ---------- mobile refinements ---------- */
  @media (max-width:600px){
    :root{ --header-h:64px; --toggle-h:68px; }
    .wrap{padding:0 16px;}
    .nav{padding:12px 16px;}
    .logo{font-size:1.05rem;gap:8px;}
    .logo .mark{width:32px;height:32px;border-radius:10px;}
    .logo .sub{font-size:.56rem;}
    .btn{padding:9px 15px;font-size:.84rem;gap:6px;}
    .ghost-btn{padding:8px 12px;font-size:.84rem;}
    .nav-hello{font-size:.8rem;}

    .course-detail-body{padding:18px;}
    .course-detail-body h2{font-size:1.25rem;}
    .app-cta{padding:30px 20px;}
    .app-cta h2{font-size:1.45rem;}
    .app-badges{gap:10px;}
    .store-badge{padding:9px 14px;}
    .phone-mock{width:150px;}

    .modal{padding:24px 18px;border-radius:20px;}
    .modal h3{font-size:1.1rem;}
    .role-tabs button,.mode-tabs button{font-size:.8rem;padding:8px 4px;}

    .dash-section{padding:44px 0;}
    .dash-head h2{font-size:1.35rem;}
    .dash-card{padding:18px;border-radius:16px;}

    .app-row{grid-template-columns:1fr 1fr;font-size:.8rem;}
    .user-row{grid-template-columns:1fr 1fr;font-size:.8rem;}
    .user-row.head{display:none;}

    .footer-grid{gap:28px;}
    .bottom-bar{flex-direction:column;text-align:center;}

    .course-social-headline{font-size:.88rem;}
    .social-link-btn{padding:9px 16px;font-size:.8rem;}
  }

  @media (max-width:400px){
    .logo .sub{display:none;}
    .btn{padding:8px 12px;font-size:.8rem;}
  }