/* =========================
   STYLE.CSS — PART 1 (Base)
========================= */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#0b0f17;color:#eaf2ff;overflow-x:hidden}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}

.bg-gradient{
  position:fixed;inset:-25%;z-index:-1;
  background:
    radial-gradient(35% 45% at 15% 20%, rgba(124,58,237,.42), transparent 60%),
    radial-gradient(35% 45% at 85% 35%, rgba(6,182,212,.38), transparent 60%),
    linear-gradient(180deg,#0b0f17,#0b0f19 60%,#0a0e15);
  filter:saturate(1.05);
}

/* Header */
.site-header{max-width:1200px;margin:16px auto 0;padding:14px 16px;border-radius:18px;background:rgba(16,20,30,.6);backdrop-filter:blur(14px) saturate(120%);border:1px solid rgba(255,255,255,.12)}
.header-row{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;min-width:200px}
.logo-mark{width:42px;height:42px;filter:drop-shadow(0 6px 16px rgba(6,182,212,.35))}
.logo-text{font-weight:900;letter-spacing:.2px;background:linear-gradient(90deg,#a78bfa,#67e8f9 60%,#e9d5ff);-webkit-background-clip:text;color:transparent;font-size:clamp(18px,2.5vw,26px)}

/* Search with suggestions */
.header-search{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px;flex:1;min-width:260px;max-width:720px}
#searchInput{padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#eaf2ff}
.header-search button{padding:10px 14px;border-radius:14px;border:1px solid rgba(6,182,212,.45);background:linear-gradient(90deg, rgba(124,58,237,.35), rgba(6,182,212,.35));cursor:pointer;color:#031016;font-weight:800}
.suggest-box{position:absolute;left:0;right:70px;top:100%;margin-top:6px;list-style:none;background:rgba(16,20,30,.96);border:1px solid rgba(255,255,255,.16);border-radius:12px;max-height:260px;overflow:auto;display:none;z-index:20}
.suggest-box.show{display:block}
.suggest-box li{padding:10px 12px;cursor:pointer}
.suggest-box li:hover{background:rgba(255,255,255,.08)}

/* Menu */
.menu-btn{font-size:22px;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);cursor:pointer}
.side-menu{position:fixed;top:0;right:-340px;width:320px;height:100%;background:rgba(16,18,28,.96);backdrop-filter:blur(18px);border-left:1px solid rgba(255,255,255,.16);border-radius:16px 0 0 16px;box-shadow:0 14px 36px rgba(0,0,0,.45);transition:right .35s ease;z-index:1000;display:flex;flex-direction:column}
.side-menu.show{right:0}
.side-menu-head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid rgba(255,255,255,.16)}
.menu-content{display:grid;gap:10px;padding:14px}
.menu-item{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);cursor:pointer}
.menu-item.pro{background:linear-gradient(90deg,#7c3aed55,#06b6d455);color:#001014;font-weight:800}

/* Hero + 6 pills */
.hero{max-width:1100px;margin:28px auto 8px;text-align:center;padding:0 12px}
.hero h1{font-size:clamp(28px,6vw,58px);font-weight:900;background:linear-gradient(90deg,#34d399,#fde047);-webkit-background-clip:text;color:transparent}
.hero p{color:#9bd4cf;margin-top:8px}
.nav-6{max-width:1000px;margin:18px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 10px}
.pill{padding:14px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg, rgba(124,58,237,.45), rgba(244,63,94,.45));font-weight:900;letter-spacing:.3px;cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.45);transition:.28s}
.pill:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 16px 44px rgba(0,0,0,.6)}

/* Directory sections */
.directory-wrap{max-width:1200px;margin:18px auto 0}
.directory-wrap h1{text-align:center;margin:22px 0 12px;font-size:32px;font-weight:800}
.mt-XL{margin-top:46px}
.category-title{font-size:22px;padding:12px 16px;border-radius:10px;margin:24px auto 14px;width:fit-content;box-shadow:0 0 14px rgba(255,255,255,.14)}
.container{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;padding:0 16px 8px}
.card{background:rgba(255,255,255,.08);border:1px solid transparent;border-radius:14px;padding:18px;text-align:center;cursor:pointer;transition:.25s;transform-style:preserve-3d}
.card:hover{box-shadow:0 0 24px #00eaff;border-color:#00eaff}
.card img{width:62px;height:62px;object-fit:contain;background:rgba(255,255,255,.14);padding:12px;border-radius:50%;margin:0 auto 10px}

/* Robotics */
.robotics{max-width:1160px;margin:18px auto 0;padding:0 16px}
.robotics h2{font-size:22px;margin:8px 0 10px;color:#a5f3fc}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}

/* Accordion for Libraries */
.lib-header{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;margin:16px 16px 8px;cursor:pointer;transition:box-shadow .25s,border-color .25s}
.lib-header:hover{box-shadow:0 0 24px rgba(0,234,255,.35);border-color:#00eaff}
.lib-header-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800}
.lib-header-title img{width:34px;height:34px;object-fit:contain;background:rgba(255,255,255,.12);padding:7px;border-radius:50%}
.chev{transition:transform .25s;opacity:.85}
.lib-header.active .chev{transform:rotate(180deg)}
.lib-panel{overflow:hidden;max-height:0;opacity:0;transform:translateY(-6px);transition:max-height .45s,opacity .35s,transform .35s;margin:0 16px;border-left:2px solid rgba(255,255,255,.08);border-right:2px solid rgba(255,255,255,.08);border-bottom:2px solid rgba(255,255,255,.08);border-radius:0 0 14px 14px}
.lib-panel.open{max-height:1000px;opacity:1;transform:none;padding-bottom:12px}
.lib-panel.open .container{padding-top:12px}

/* Course */
.view{display:none;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.view.active{display:block;opacity:1;transform:none}
.course-page{max-width:1200px;margin:20px auto;padding:0 12px}
.course-header{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.back-home{padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);cursor:pointer}
.course-header h2{margin:0;font-size:26px;background:linear-gradient(90deg,#a78bfa,#67e8f9);-webkit-background-clip:text;color:transparent}
.course-layout{display:grid;grid-template-columns:280px 1fr;gap:14px}
.course-sidebar{position:sticky;top:16px;align-self:start;height:calc(100vh - 120px);overflow:auto;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px}
.chapter{padding:10px;border-radius:10px;margin:6px 4px;cursor:pointer;border:1px solid transparent}
.chapter:hover{background:rgba(255,255,255,.06)}
.chapter.active{background:linear-gradient(135deg, rgba(124,58,237,.22), rgba(6,182,212,.22));border-color:rgba(6,182,212,.45)}
.course-content{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;min-height:58vh}
.code{display:block;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px;font-family:ui-monospace,Menlo,Consolas,monospace;overflow:auto}

/* =========================
   STYLE.CSS — PART 2 (Popups/Chat/Responsive)
========================= */
/* Tutorials modal (blur=3) */
.modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.35);backdrop-filter:blur(3px);z-index:950}
.modal.show{display:grid}
.modal-card{width:min(96vw,1100px);max-height:84vh;overflow:hidden;background:rgba(15,18,28,.96);border:1px solid rgba(255,255,255,.16);border-radius:18px;box-shadow:0 22px 66px rgba(0,0,0,.6);transform:translateY(12px) scale(.98);opacity:0;animation:pop .28s forwards}
@keyframes pop{to{transform:none;opacity:1}}
.close-x{position:absolute;right:10px;top:8px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;border-radius:10px;padding:2px 10px;cursor:pointer}
.modal-title{margin:14px 16px;font-size:28px;background:linear-gradient(90deg,#8b5cf6,#67e8f9);-webkit-background-clip:text;color:transparent}
.tut-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 16px 10px}
.tut-btn{padding:16px;border-radius:999px;background:linear-gradient(135deg,#8b5cf6,#ef4444);border:1px solid rgba(255,255,255,.16);font-weight:900;letter-spacing:.3px;cursor:pointer}
.tut-panel{margin:10px 16px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;max-height:58vh;overflow:auto;padding:12px}
.tut-grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.tut-panel .card{padding:16px}

/* Gallery list animation */
.gallery-list{list-style:none;display:grid;gap:10px;margin:0 16px 8px}
.gallery-list li{padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);cursor:pointer;animation:slideIn .4s ease both}
.gallery-list li:nth-child(1){animation-delay:.03s}
.gallery-list li:nth-child(2){animation-delay:.06s}
.gallery-list li:nth-child(3){animation-delay:.09s}
.gallery-list li:nth-child(4){animation-delay:.12s}
.gallery-list li:nth-child(5){animation-delay:.15s}
.gallery-list li:nth-child(6){animation-delay:.18s}
@keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.coming-note{opacity:.7;margin:10px 16px 16px}

/* Toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(16px);background:rgba(16,18,28,.96);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 14px;opacity:0;pointer-events:none;transition:.28s;z-index:960}
.toast.show{opacity:1;transform:translateX(-50%)}

/* Chat */
.chatbot-container{position:fixed;right:20px;bottom:20px;display:grid;justify-items:end;gap:10px;z-index:900}
#chatbot-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:radial-gradient(circle at 40% 30%, rgba(124,58,237,.45), rgba(6,182,212,.35));border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 26px rgba(0,0,0,.45);animation:float 3.2s ease-in-out infinite alternate}
#chatbot-icon img{width:40px;height:40px;filter:drop-shadow(0 6px 14px rgba(167,139,250,.4))}
.support-btn{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(90deg, rgba(124,58,237,.28), rgba(6,182,212,.28));backdrop-filter:blur(6px);color:#001014;font-weight:800;cursor:pointer}
@keyframes float{0%{transform:translateY(0)}100%{transform:translateY(-10px)}}
.chatbox{position:fixed;right:20px;bottom:94px;width:min(92vw,520px);max-height:82vh;overflow-y:auto;background:rgba(16,18,28,.96);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.22);border-radius:18px;box-shadow:0 18px 46px rgba(0,0,0,.65);transform:translateY(-24px) scale(.94);opacity:0;pointer-events:none;transition:all .28s}
.chatbox.show{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.chat-header{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:linear-gradient(180deg, rgba(124,58,237,.24), rgba(6,182,212,.18));border-bottom:1px solid rgba(255,255,255,.16)}
.chat-body{padding:14px;display:grid;gap:10px}
.fld span{font-size:12px;color:#a5f3fc;margin-bottom:4px}
.fld input,.fld textarea{width:100%;padding:14px 12px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#eaf2ff}
.cta{justify-self:end;padding:10px 16px;border-radius:12px;border:1px solid rgba(6,182,212,.45);background:linear-gradient(90deg, rgba(124,58,237,.35), rgba(6,182,212,.35));color:#001014;font-weight:800;cursor:pointer}

/* Footer */
.site-footer{max-width:1200px;margin:30px auto 40px;text-align:center;padding:16px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:#b7c4d6}

/* Responsive */
@media (max-width:1000px){.course-layout{grid-template-columns:1fr}}
@media (max-width:860px){.tut-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){
  .header-row{flex-direction:column;align-items:center}
  .header-search{width:100%}
  .menu-btn{align-self:flex-end}
  .nav-6{grid-template-columns:1fr;gap:10px}
}