html[data-page] .site-header {--blue: #2f80ed; --blue-deep: #082942; --green: #00b388; --ink: #102939; --muted: #667085; --surface: #fff; --surface-soft: #f6f9fc; --border: rgba(16,41,57,.11); --header: rgba(255,255,255,.9); --shadow: 0 22px 60px rgba(8,41,66,.14); --max: 1240px; font-family: Inter, Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: normal; color: var(--ink); text-align: left;}
html[data-page][data-theme="dark"] .site-header {--ink: #f7fafc; --muted: #aab8c4; --surface: #081a28; --surface-soft: #0c2334; --border: rgba(230,241,255,.1); --header: rgba(7,24,37,.91); --shadow: 0 22px 60px rgba(0,0,0,.32);}
html[data-page] .site-header * {box-sizing: border-box;}
html[data-page] .site-header a {color: inherit; text-decoration: none;}
html[data-page] .site-header :where(button) {font: inherit; color: inherit;}
html[data-page] .site-header {position: fixed; inset: 0px 0px auto; z-index: 100; height: 84px; background: var(--header); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px) saturate(145%);}
html[data-page] .nav-shell {width: min(var(--max), calc(100% - 48px)); height: 100%; margin: auto; display: flex; align-items: center; gap: 28px;}
html[data-page] .brand {display: inline-flex; flex: 0 0 auto;}
html[data-page] .brand img {width: 220px; height: auto; display: block;}
html[data-page] .main-nav {display: flex; align-items: center; justify-content: center; gap: 28px; margin-left: auto;}
html[data-page] .main-nav a {position: relative; font-size: 14px; font-weight: 650; color: var(--muted); padding: 30px 0px; white-space: nowrap; transition: color 0.25s;}
html[data-page] .main-nav a::after {content: ""; position: absolute; height: 2px; left: 50%; right: 50%; bottom: 19px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--green)); transition: 0.25s;}
html[data-page] .main-nav a:hover,
html[data-page] .main-nav a.active {color: var(--ink);}
html[data-page] .main-nav a:hover::after,
html[data-page] .main-nav a.active::after {left: 0px; right: 0px;}
html[data-page] .nav-actions {display: flex; align-items: center; gap: 10px;}
html[data-page] .theme-toggle,
html[data-page] .menu-toggle {width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; transition: 0.2s;}
html[data-page] .theme-toggle:hover,
html[data-page] .menu-toggle:hover {transform: translateY(-2px); border-color: rgba(47, 128, 237, 0.45);}
html[data-page] .menu-toggle {display: none;}
html[data-page] .nav-dropdown {position: relative; align-self: stretch; display: flex; align-items: center;}
html[data-page] .courses-trigger {position: relative; padding: 30px 0px; display: flex; align-items: center; gap: 7px; border: 0px; background: transparent; color: var(--muted); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 14px; font-weight: 650; white-space: nowrap; cursor: pointer; transition: color 0.25s;}
html[data-page] .courses-trigger::after {content: ""; position: absolute; height: 2px; left: 50%; right: 50%; bottom: 19px; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--green)); transition: 0.25s;}
html[data-page] .courses-trigger svg {transform: rotate(90deg); transition: transform 0.25s;}
html[data-page] .courses-trigger:hover,
html[data-page] .nav-dropdown:is(.open, .is-open) .courses-trigger {color: var(--ink);}
html[data-page] .courses-trigger:hover::after,
html[data-page] .nav-dropdown:is(.open, .is-open) .courses-trigger::after {left: 0px; right: 0px;}
html[data-page] .nav-dropdown:is(.open, .is-open) .courses-trigger svg {transform: rotate(270deg);}
html[data-page] .courses-panel {position: absolute; z-index: 20; top: calc(100% - 5px); left: 50%; width: 255px; padding: 9px; display: grid; gap: 3px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: rgba(5, 25, 40, 0.18) 0px 24px 55px; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -8px); transition: opacity 0.2s, visibility 0.2s, transform 0.2s;}
html[data-page] .nav-dropdown:is(.open, .is-open) .courses-panel {opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0px);}
html[data-page] .courses-panel a {min-height: 43px; padding: 0px 12px 0px 15px; display: flex; align-items: center; justify-content: space-between; border-radius: 11px; color: var(--muted); font-size: 12px; font-weight: 650; transition: background 0.2s, color 0.2s, transform 0.2s;}
html[data-page] .courses-panel a::after {display: none;}
html[data-page] .courses-panel a svg {color: var(--blue); opacity: 0; transform: translateX(-5px); transition: 0.2s;}
html[data-page] .courses-panel a:hover {color: var(--ink); background: var(--surface-soft); transform: translateX(2px);}
html[data-page] .courses-panel a:hover svg {opacity: 1; transform: none;}
html[data-page] .courses-trigger:focus-visible,
html[data-page] .courses-panel a:focus-visible {outline: rgba(47, 128, 237, 0.25) solid 3px; outline-offset: 2px;}
@media (max-width: 1100px) {
html[data-page] .main-nav {gap: 17px;}
html[data-page] .main-nav a {font-size: 12px;}
html[data-page] .brand img {width: 190px;}
html[data-page] .courses-trigger {font-size: 12px;}
}
@media (max-width: 900px) {
html[data-page] .site-header {height: 74px;}
html[data-page] .nav-shell {width: min(100% - 30px, var(--max));}
html[data-page] .brand img {width: 178px;}
html[data-page] .menu-toggle {display: grid;}
html[data-page] .main-nav {position: fixed; top: 74px; left: 15px; right: 15px; padding: 18px; align-items: stretch; flex-direction: column; gap: 0px; background: var(--surface); border: 1px solid var(--border); border-radius: 0px 0px 20px 20px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: 0.25s; max-height: calc(-88px + 100vh); overflow-y: auto;}
html[data-page] .main-nav.is-open {opacity: 1; visibility: visible; transform: none;}
html[data-page] .main-nav a {padding: 13px 10px;}
html[data-page] .main-nav a::after {display: none;}
html[data-page] .nav-dropdown {width: 100%; display: block; align-self: auto;}
html[data-page] .courses-trigger {width: 100%; padding: 13px 10px; justify-content: space-between; color: var(--muted); font-size: 12px; text-align: left;}
html[data-page] .courses-trigger::after {display: none;}
html[data-page] .courses-trigger svg {margin-right: 2px;}
html[data-page] .courses-panel {position: static; width: 100%; max-height: 0px; padding: 0px 6px; margin: 0px; gap: 2px; overflow: hidden; border-width: 0px 0px 0px 2px; border-top-style: initial; border-right-style: initial; border-bottom-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-image: initial; border-left-style: solid; border-left-color: transparent; border-radius: 12px; background: var(--surface-soft); box-shadow: none; opacity: 1; visibility: visible; pointer-events: none; transform: none; transition: max-height 0.28s, padding 0.28s, margin 0.28s, border-color 0.28s;}
html[data-page] .nav-dropdown:is(.open, .is-open) .courses-panel {max-height: 340px; padding: 6px; margin: 0px 0px 7px; border-left-color: var(--green); pointer-events: auto; transform: none;}
html[data-page] .courses-panel a {min-height: 40px; padding: 0px 10px 0px 18px; border-radius: 9px; font-size: 11px;}
html[data-page] .courses-panel a svg {opacity: 0.65; transform: none;}
html[data-page] .courses-panel a:hover {transform: none;}
}
@media (max-width: 600px) {
html[data-page] .nav-shell {width: calc(100% - 24px);}
html[data-page] .brand img {width: 154px;}
html[data-page] .nav-actions {gap: 7px;}
}
html[data-page] .login-nav-trigger {min-height: 44px; border-radius: 14px; box-shadow: rgba(47, 128, 237, 0.25) 0px 10px 25px; transition: transform 0.2s, box-shadow 0.2s; padding: 0px 17px !important; background: linear-gradient(135deg, var(--blue), #1d69d2) !important; color: rgb(255, 255, 255) !important; font-weight: 800 !important;}
html[data-page] .login-nav-trigger:hover,
html[data-page] .login-dropdown.open .login-nav-trigger,
html[data-page] .login-dropdown.is-open .login-nav-trigger {transform: translateY(-2px); box-shadow: rgba(47, 128, 237, 0.35) 0px 14px 32px; color: rgb(255, 255, 255) !important;}
html[data-page] .login-nav-trigger::after {display: none !important;}
html[data-page] .login-nav-trigger svg {transition: transform 0.22s; transform: none !important;}
html[data-page] .login-dropdown.open .login-nav-trigger svg,
html[data-page] .login-dropdown.is-open .login-nav-trigger svg {transform: rotate(180deg) !important;}
html[data-page] .login-dropdown .courses-panel {left: auto; right: 0px; width: 210px; min-width: 210px; transform: translateY(-8px);}
html[data-page] .login-dropdown.open .courses-panel,
html[data-page] .login-dropdown.is-open .courses-panel,
html[data-page] .login-dropdown:hover .courses-panel {transform: translateY(0px);}
html[data-page] .login-panel a {font-weight: 750;}
@media (max-width: 920px) {
html[data-page] .login-nav-trigger {width: 100%; min-height: 48px; text-align: left; padding: 0px 14px !important; justify-content: space-between !important;}
html[data-page] .login-dropdown .courses-panel {position: static; right: auto; width: 100%; min-width: 0px; transform: none !important;}
}
@media (min-width: 921px) {
html[data-page] .nav-shell {position: relative; display: grid; grid-template-columns: minmax(170px, 220px) minmax(0px, 1fr) minmax(170px, 220px); gap: 20px;}
html[data-page] .brand {grid-column: 1; justify-self: start;}
html[data-page] .brand img {max-width: 100%;}
html[data-page] .main-nav {grid-column: 2; justify-self: center; margin-left: 0px;}
html[data-page] .main-nav > .login-dropdown {position: absolute; top: 50%; right: 52px; width: auto; transform: translateY(-50%);}
html[data-page] .nav-actions {grid-column: 3; justify-self: end;}
}
@media (max-width: 900px) {
html[data-page] .nav-dropdown:is(.open, .is-open) .courses-panel {max-height: 390px;}
}