@import url("https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500;600;700;800&display=swap");:root{--pink:#f18eaa;--pink-600:#e9789a;--blue:#45b3df;--teal:#05b1ab;--base:#04364a;--muted:#5b7785;--faint:#9bb0bb;--blue-light:#eaf7fc;--line:#e4eef3;--bg:#f4fafd;--card:#ffffff;--radius-card:20px;--radius-pill:999px;--shadow-sm:0 6px 24px rgba(4,54,74,0.06);--shadow-lg:0 20px 50px rgba(4,54,74,0.1);--sidebar-w:264px;--font:"Montserrat Alternates",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0;width:100%;min-height:100vh}body{font-family:var(--font);line-height:1.5;color:var(--base);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}button{font-family:inherit}.app{display:flex;min-height:100vh}.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--base);padding:6px 8px 18px}.brand-dot{width:26px;height:26px;border-radius:9px;background:linear-gradient(135deg,var(--pink),var(--blue))}.nav{display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--muted);font-weight:600;font-size:15px;cursor:pointer;border:none;background:none;width:100%;text-align:left}.nav-item:hover{background:#f3f8fb;color:var(--base)}.nav-item.active{background:var(--blue-light);color:var(--base)}.nav-item svg{flex:0 0 20px}.nav-sep{height:1px;background:var(--line);margin:14px 4px}.sidebar-foot{margin-top:auto}.user-card{gap:10px;padding:10px 8px}.avatar,.user-card{display:flex;align-items:center}.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--teal));color:#fff;justify-content:center;font-weight:700;flex:0 0 38px}.user-meta{min-width:0}.user-name{font-weight:700;font-size:14px}.user-email,.user-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-email{font-size:12px;color:var(--faint)}.app-main{flex:1 1 auto;min-width:0;padding:32px clamp(20px,4vw,48px)}.page-head{margin:0 0 24px}.page-eyebrow{color:var(--muted);margin:0;font-size:14px}.page-title{font-size:clamp(24px,3vw,32px);margin:4px 0 0;font-weight:800}.app-topbar{display:none;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}.hamburger{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.scrim{display:none}@media (max-width:899px){.app{flex-direction:column}.app-topbar{display:flex}.sidebar{position:fixed;left:0;top:0;height:100vh;transform:translateX(-100%);transition:transform .22s ease;z-index:60;box-shadow:var(--shadow-lg)}.sidebar.open{transform:translateX(0)}.scrim.show{display:block;position:fixed;inset:0;background:rgba(4,54,74,.35);z-index:55}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:14px;font-weight:700;font-size:15px;border:none;cursor:pointer;text-decoration:none}.btn-primary{background:var(--pink);color:#fff}.btn-primary:hover{background:var(--pink-600)}.btn-ghost{background:#fff;color:var(--base);border:1px solid var(--line)}.btn-blue{background:var(--blue);color:#fff}.card{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}.course-card{background:var(--card);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-sm);color:inherit;display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}.course-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.course-card-cover{width:100%;aspect-ratio:16/10;object-fit:cover;background:#eef3f6}.course-card-body{padding:16px 18px}.course-card-title{font-size:16px;font-weight:700;margin:0}.pill{display:inline-block;padding:4px 12px;border-radius:var(--radius-pill);font-size:13px;font-weight:600}.pill-pink{background:#fde7ee;color:var(--pink-600)}.pill-teal{background:#e0f6f4;color:#058a85}.empty{text-align:center;color:var(--muted);max-width:460px;margin:48px auto}.course-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}.course-layout>*{min-width:0}@media (max-width:1100px){.course-layout{grid-template-columns:1fr}}.player{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius-card);overflow:hidden;background:#04364a;box-shadow:var(--shadow-lg)}.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.lesson-list{background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);padding:10px;max-height:70vh;overflow:auto}.lesson-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:none;background:none;cursor:pointer;color:var(--base);font:inherit}.lesson-row:hover{background:#f3f8fb}.lesson-row.active{background:var(--blue-light)}.lesson-num{flex:0 0 30px;height:30px;border-radius:50%;background:#eef3f6;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}.lesson-row.active .lesson-num{background:var(--blue);color:#fff}.lesson-details{overflow-wrap:break-word;word-break:break-word}.lesson-details img{max-width:100%;height:auto;display:block;margin:10px 0;border-radius:10px}.lesson-details p{margin:8px 0}.lesson-details h3,.lesson-details h4,.lesson-details h5{margin:14px 0 6px;font-size:16px}.lesson-details ol,.lesson-details ul{margin:8px 0;padding-left:20px}.lesson-details a{color:var(--blue)}.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 500px at 80% -10%,#fde7ee 0,transparent 60%),radial-gradient(1000px 500px at -10% 110%,#e2f4fb 0,transparent 60%),var(--bg);padding:24px}.auth-card{width:100%;max-width:400px;background:var(--card);border-radius:26px;padding:34px;box-shadow:var(--shadow-lg)}.field{width:100%;padding:13px 15px;border-radius:13px;border:1px solid var(--line);font-size:15px;font-family:inherit;color:var(--base);background:#fff}.field:focus{outline:2px solid var(--blue);border-color:transparent}