:root{--bg: #F9F9F9;--card: #FFFFFF;--ink: #323232;--ink2: rgba(50,50,50,.6);--ink3: rgba(50,50,50,.35);--border: rgba(50,50,50,.08);--teal: #7AB4BF;--teal-deep: #004751;--grad: linear-gradient(135deg, #004751, #7AB4BF);--r: 16px;--r-sm: 10px;--r-lg: 22px;--sh: 0 4px 24px rgba(50,50,50,.06);--sh-md: 0 8px 32px rgba(50,50,50,.08);--serif: "Cormorant Garamond", Georgia, serif;--sans: "Outfit", "Segoe UI", sans-serif;--sidebar-w: 256px;--ease: cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font-family:var(--sans)}.app-shell{display:flex;min-height:100vh}.app-sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}.main-content{flex:1;min-width:0}.sidebar-header{padding:20px 18px;border-bottom:1px solid var(--border)}.sidebar-header .logo{font-family:var(--serif);font-size:1.15rem;font-weight:500}.sidebar-header .tagline{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-top:4px}.nav-link{display:flex;align-items:center;gap:10px;padding:10px 18px;font-size:.85rem;color:var(--ink2);cursor:pointer;transition:background .15s,color .15s;border-left:3px solid transparent}.nav-link:hover{background:#7ab4bf0f;color:var(--ink)}.nav-link.active{background:#7ab4bf1a;color:var(--teal-deep);border-left-color:var(--teal);font-weight:500}.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--border);background:var(--card)}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--sh)}.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.course-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:transform .15s,box-shadow .15s;position:relative;overflow:hidden}.course-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}.course-card.locked{opacity:.5}.course-card .lock-badge{position:absolute;top:12px;right:12px;font-size:1rem;opacity:.6}.course-card .icon{font-size:1.6rem;color:var(--teal-deep)}.course-card .title{font-family:var(--serif);font-size:1.05rem}.course-card .desc{font-size:.78rem;color:var(--ink2);line-height:1.5}.level-tag{display:inline-block;font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:20px;background:#7ab4bf1f;color:var(--teal-deep)}.widget-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px}.progress-circle{transform:rotate(-90deg)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#32323259;display:flex;align-items:center;justify-content:center;z-index:200}.modal-box{background:var(--card);border-radius:var(--r-lg);padding:28px;max-width:420px;width:90%;box-shadow:var(--sh-md)}.legal-footer{padding:18px 28px;border-top:1px solid var(--border);font-size:.68rem;color:var(--ink3);line-height:1.6}.legal-footer a{color:var(--teal-deep);margin-right:14px}.notepad{width:100%;resize:vertical;border-radius:var(--r-sm);border:1px solid var(--border);padding:10px;font-family:var(--sans);font-size:.8rem;color:var(--ink);background:var(--bg)}.hamburger{display:none;position:fixed;top:10px;left:10px;z-index:200;width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--border);align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh)}.overlay-mobile{display:none}@media (max-width: 768px){.hamburger{display:flex}.app-sidebar{position:fixed!important;top:0;left:0;height:100vh;transform:translate(-100%);transition:transform .3s var(--ease);z-index:100}.app-sidebar.open{transform:translate(0)}.overlay-mobile{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;z-index:99}.topbar{padding-left:56px}}