:root{
  --blue:#0753A5;
  --blue-dark:#072b63;
  --blue-deep:#0a1e4f;
  --yellow:#FFCB05;
  --soft:#eef5ff;
  --line:#dbe6f7;
  --text:#15305d;
  --muted:#627493;
  --shadow:0 14px 34px rgba(18,58,122,.12);
  --radius:22px;
  --container:min(1280px,calc(100% - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,#f4f8ff 0,#fff 240px,#f7faff 100%)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,select{font:inherit}
.skip-link{position:absolute;left:-9999px;top:auto}.skip-link:focus{left:16px;top:16px;background:#fff;padding:10px 14px;border-radius:10px;z-index:999}
.container{width:var(--container);margin:0 auto}
.topbar,.stats-strip,.canvas-card{display:none}

.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(7,83,165,.08)}
.nav-wrap{display:flex;align-items:center;gap:24px;min-height:96px}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand img{width:134px;height:auto;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;gap:4px;line-height:1.1}
.brand-copy strong{font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--blue-deep)}
.brand-copy span{font-size:1rem;font-weight:700;color:#35527f;letter-spacing:.05em}
.main-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.main-nav a{padding:14px 18px;border-radius:999px;font-size:1.06rem;font-weight:800;color:#183a74;position:relative}
.main-nav a.active,.main-nav a:hover{background:#eef4ff;color:var(--blue)}
.header-actions{display:flex;align-items:center;gap:12px}
.search-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--blue);font-size:1.25rem;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:14px;padding:14px 22px;font-weight:800;border:0;cursor:pointer;transition:.2s ease;box-shadow:none}
.btn:hover{transform:translateY(-1px)}
.btn-yellow{background:var(--yellow);color:#162b58}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.9);color:#fff}
.canvas-login{min-width:172px}
.menu-toggle{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 14px;font-size:1.2rem}

.hero-section{padding:24px 0 8px}
.hero-slider{position:relative;overflow:hidden;min-height:470px;border-radius:28px;background:#d7e6ff;box-shadow:var(--shadow)}
.slider-stage{position:relative;min-height:470px}
.slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s ease;background-size:cover;background-position:center;display:flex;align-items:stretch}
.slide.active{opacity:1;pointer-events:auto}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,35,94,.92) 0%,rgba(8,72,168,.72) 45%,rgba(7,83,165,.25) 75%,rgba(6,38,95,.42) 100%)}
.slide::after{content:"";position:absolute;inset:auto auto 0 0;width:220px;height:120px;background:linear-gradient(135deg,transparent 10%,rgba(255,203,5,.98) 11%,rgba(255,203,5,.98) 48%,transparent 49%);opacity:.9}
.slide-content{position:relative;z-index:2;width:min(54%,640px);padding:56px 52px 70px;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:18px}
.slide-kicker{display:inline-flex;align-self:flex-start;background:var(--yellow);color:#102b60;padding:10px 16px;border-radius:999px;font-size:1rem;font-weight:800}
.slide-content h1{margin:0;font-size:3.4rem;line-height:1.03;letter-spacing:-.04em}
.slide-content p{margin:0;font-size:1.24rem;line-height:1.6;color:rgba(255,255,255,.95)}
.slide-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.slide-right-points{position:absolute;right:48px;top:50%;transform:translateY(-50%);z-index:2;display:grid;gap:16px;max-width:270px}
.slide-point{display:flex;align-items:center;gap:14px;color:#fff;background:rgba(255,255,255,.08);padding:10px 14px;border-radius:18px;backdrop-filter:blur(6px)}
.slide-point i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);font-style:normal;font-weight:800}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;border:0;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:2rem;backdrop-filter:blur(8px);cursor:pointer}
.slider-arrow.prev{left:18px}.slider-arrow.next{right:18px}
.slider-dots{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:10px;z-index:3}
.slider-dots button{width:12px;height:12px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer}
.slider-dots button.active{background:#fff;width:32px;border-radius:999px}
.slider-pause{position:absolute;right:24px;bottom:18px;z-index:3;border:0;background:rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:10px 12px;cursor:pointer}

.highlight-section{padding:14px 0 6px}
.highlight-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.highlight-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px;display:flex;align-items:center;gap:18px;box-shadow:0 10px 30px rgba(11,48,115,.08)}
.highlight-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(180deg,#1764e8,#0d49b5);color:#fff;font-size:1.8rem;font-weight:900;flex:0 0 auto}
.highlight-icon.yellow{background:linear-gradient(180deg,#ffd84d,#f0bb00);color:#173974}
.highlight-card strong{display:block;font-size:1.9rem;font-weight:900;color:var(--blue)}
.highlight-card span{display:block;font-size:1.15rem;font-weight:800;color:#21457f}
.highlight-card small{display:block;font-size:.95rem;color:var(--muted);margin-top:4px}

.section{padding:24px 0}
.section-soft{padding-top:8px;padding-bottom:26px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.section-kicker{display:inline-block;color:#c69200;font-weight:900;letter-spacing:.12em;font-size:.85rem;margin-bottom:8px;position:relative;padding-left:14px;text-transform:uppercase}
.section-kicker::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:6px;border-radius:999px;background:var(--yellow)}
.section-heading h2{margin:0;font-size:2.5rem;line-height:1.1;color:var(--blue-deep)}
.section-heading p{margin:8px 0 0;color:var(--muted);font-size:1.06rem;max-width:780px}
.section-link,.panel-link{font-weight:800;color:#1f56c0;display:inline-flex;align-items:center;gap:8px}

.course-toolbar{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin-bottom:14px}
.course-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 14px;min-height:56px;flex:1;max-width:540px;box-shadow:0 6px 18px rgba(12,49,117,.06)}
.course-search span{font-size:1.2rem;color:#6181bb}
.course-search input{border:0;outline:none;background:transparent;width:100%;color:var(--text)}
.course-search-btn{min-height:56px;padding:0 22px;border-radius:14px;border:0;background:linear-gradient(180deg,#0f68df,#0a55c0);color:#fff;font-weight:800;cursor:pointer}
.course-categories{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.course-category-btn{border:1px solid var(--line);background:#f5f9ff;color:#23477d;padding:10px 16px;border-radius:999px;font-weight:800;cursor:pointer}
.course-category-btn.active,.course-category-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.course-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.course-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 12px 26px rgba(8,55,126,.08);display:flex;flex-direction:column}
.course-media{position:relative;aspect-ratio:16/9;background:#eef4ff}
.course-media img{width:100%;height:100%;object-fit:cover}
.course-status{position:absolute;top:14px;left:14px;padding:8px 12px;border-radius:999px;font-size:.8rem;font-weight:800}
.course-status.open{background:#dff8e7;color:#0e7a43}.course-status.closed{background:#f7dcdc;color:#a53232}
.course-card-body{padding:18px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.course-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.course-category-pill{background:#eef5ff;color:#23509c;padding:7px 10px;border-radius:999px;font-size:.8rem;font-weight:800}
.course-code-mini,.course-code{color:#6a7d9f;font-size:.9rem;font-weight:700}
.course-card h3{margin:0;font-size:1.45rem;line-height:1.2;color:#17376f}
.course-summary{margin:0;color:#5d708f;line-height:1.55;min-height:72px}
.course-card-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-top:auto}
.course-card-meta span{display:flex;align-items:center;gap:6px;color:#4b6591;font-size:.92rem}
.course-card-meta i{font-style:normal;color:#1f56c0}
.course-actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.btn-course-secondary,.btn-course-primary{flex:1;display:inline-flex;justify-content:center;align-items:center;padding:12px 14px;border-radius:12px;font-weight:800}
.btn-course-secondary{border:1px solid #a8c0eb;background:#fff;color:#2557ab}
.btn-course-primary{background:var(--yellow);color:#173465;border:1px solid #efc100}
.course-closed-text{color:#8a4b4b;font-weight:700;font-size:.95rem}
.course-footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px}
.course-count{color:#4f6ea1;font-weight:800}
#courseSort{min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text)}

.lower-grid{display:grid;grid-template-columns:1.15fr 1fr .8fr;gap:18px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 10px 30px rgba(9,50,120,.07)}
.mini-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.mini-heading h3{margin:0;font-size:1.6rem;color:#16356b}
.search-box{display:flex;align-items:center;gap:10px;background:#f5f9ff;border:1px solid var(--line);border-radius:14px;padding:0 14px;min-height:48px;margin-bottom:14px}
.search-box input{border:0;outline:none;background:transparent;width:100%}
.announcement-grid{display:grid;gap:12px}
.announcement-card{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fbfdff}
.announcement-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eef5ff;color:#2755aa;font-size:.8rem;font-weight:800}
.announcement-card h3{margin:0 0 8px;font-size:1.05rem;color:#173d7d}
.announcement-card p{margin:0 0 10px;color:#60728f;line-height:1.5}
.announcement-card a{font-weight:700;color:#2159c8}
.resource-grid{display:grid;gap:12px}
.resource-card{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fbfdff}
.resource-icon{width:48px;height:48px;border-radius:14px;background:#edf4ff;color:#2559af;display:grid;place-items:center;font-size:1.4rem;font-weight:900;margin-bottom:12px}
.resource-card h3{margin:0 0 8px;font-size:1.06rem;color:#173d7d}.resource-card p{margin:0 0 10px;color:#60728f;line-height:1.5}.resource-card a{font-weight:700;color:#2159c8}
.side-banner{background:linear-gradient(135deg,#0d3d9e 0,#0a2868 100%);border-radius:18px;padding:22px;color:#fff;margin-bottom:14px;position:relative;overflow:hidden}
.side-banner::after{content:"";position:absolute;inset:auto -28px -28px auto;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,var(--yellow),transparent 70%);opacity:.25}
.banner-kicker{font-size:2rem;font-weight:900;color:#ffe169;font-style:italic}.side-banner h3{margin:6px 0 10px;font-size:1.7rem;line-height:1.12}.side-banner p{margin:0;color:rgba(255,255,255,.92);line-height:1.55}
.quick-side-list{display:grid;gap:12px}
.quick-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fbfdff;transition:.2s ease}
.quick-card:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(12,47,112,.08)}
.quick-icon{width:46px;height:46px;border-radius:14px;background:#edf4ff;color:#2559af;display:grid;place-items:center;font-size:1.25rem;font-weight:900;flex:0 0 auto}
.quick-card strong{display:block;color:#193a70;font-size:1rem}.quick-card span{display:block;color:#60728f;font-size:.92rem;margin-top:4px}

footer{background:linear-gradient(180deg,#08327f,#07265f);color:#fff;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.2fr .9fr .8fr;gap:30px;padding:28px 0}
.footer-brand{display:flex;align-items:center;gap:18px}
.footer-brand img{width:130px;height:auto;object-fit:contain;background:transparent}
.footer-brand h3{margin:0 0 6px;font-size:1.35rem}.footer-brand p{margin:0;color:rgba(255,255,255,.85)}
footer h4{margin:0 0 12px;font-size:1.08rem} footer p{margin:0 0 8px;color:rgba(255,255,255,.88)} footer a{display:block;margin:0 0 10px;color:rgba(255,255,255,.92)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14)}
.footer-bottom .container{display:flex;justify-content:space-between;gap:20px;padding:14px 0;color:rgba(255,255,255,.82);font-size:.92rem}

.course-modal{position:fixed;inset:0;background:rgba(8,22,58,.6);display:grid;place-items:center;padding:20px;z-index:120}.course-modal.hidden{display:none}.course-modal-card{max-width:880px;width:min(100%,880px);background:#fff;border-radius:24px;overflow:hidden;position:relative;box-shadow:0 18px 48px rgba(0,0,0,.22)}.course-modal-card>img{width:100%;height:320px;object-fit:cover;background:#eff5ff}.course-modal-close{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(7,21,57,.74);color:#fff;font-size:1.7rem;cursor:pointer}.course-modal-body{padding:22px}.course-modal-top{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.course-open-pill{padding:7px 10px;border-radius:999px;font-size:.8rem;font-weight:800}.course-open-pill.open{background:#dff8e7;color:#0e7a43}.course-open-pill.closed{background:#f7dcdc;color:#a53232}.course-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.course-meta-grid div{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fbfdff}.course-meta-grid span{display:block;font-size:.88rem;color:#60728f;margin-bottom:4px}.course-meta-grid strong{font-size:1rem}.course-modal-description{color:#526987;line-height:1.65}.modal-actions{margin-top:16px}.hidden{display:none!important}.empty-state{padding:16px;border:1px dashed #bfd0ed;border-radius:16px;background:#fbfdff;color:#6780a8}.toast{position:fixed;right:20px;bottom:20px;padding:14px 18px;border-radius:14px;background:#17376f;color:#fff;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(10px);transition:.25s ease;z-index:130}.toast.show{opacity:1;transform:translateY(0)} body.modal-open{overflow:hidden}

@media (max-width:1150px){
  .main-nav a{padding:12px 14px;font-size:1rem}
  .brand-copy strong{font-size:1.65rem}
  .slide-content{width:min(64%,680px);padding:48px 40px 70px}
  .slide-content h1{font-size:3rem}
  .slide-right-points{right:24px;max-width:220px}
  .highlight-grid,.course-grid{grid-template-columns:repeat(2,1fr)}
  .lower-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav-wrap{flex-wrap:wrap;gap:14px;padding:14px 0}
  .menu-toggle{display:inline-flex}
  .main-nav{display:none;width:100%;order:10;flex-direction:column;align-items:stretch;margin-left:0;background:#fff;border:1px solid var(--line);padding:10px;border-radius:18px}
  .main-nav.open{display:flex}
  .main-nav a{width:100%;text-align:center}
  .header-actions{margin-left:auto}
  .brand img{width:102px}.brand-copy strong{font-size:1.35rem}.brand-copy span{font-size:.9rem}
  .hero-slider,.slider-stage{min-height:560px}
  .slide{align-items:flex-start}.slide::before{background:linear-gradient(180deg,rgba(4,35,94,.92) 0%,rgba(8,72,168,.64) 60%,rgba(6,38,95,.92) 100%)}
  .slide-content{width:100%;padding:36px 26px 140px}.slide-content h1{font-size:2.45rem}.slide-content p{font-size:1.08rem}
  .slide-right-points{left:26px;right:26px;top:auto;bottom:54px;transform:none;grid-template-columns:repeat(2,1fr);max-width:none}
  .section-heading{flex-direction:column;align-items:flex-start}
  .course-toolbar{flex-direction:column;align-items:stretch}.course-search{max-width:none}
  .footer-grid{grid-template-columns:1fr;gap:20px}
  .footer-bottom .container{flex-direction:column}
}
@media (max-width:680px){
  :root{--container:min(100% - 22px,100%)}
  .site-header{position:static}
  .brand img{width:84px}.brand-copy strong{font-size:1.08rem}.brand-copy span{font-size:.76rem}
  .header-actions .search-btn{display:none}.canvas-login{min-width:auto;padding:12px 14px;font-size:.95rem}
  .hero-section{padding-top:14px}.hero-slider,.slider-stage{min-height:470px;border-radius:24px}
  .slider-arrow{width:42px;height:42px;font-size:1.55rem}
  .slide-content{padding:24px 18px 160px;gap:14px}.slide-kicker{font-size:.78rem;padding:8px 12px}.slide-content h1{font-size:2rem}.slide-content p{font-size:.98rem;line-height:1.55}.slide-actions .btn{padding:12px 16px;font-size:.95rem}
  .slide-right-points{grid-template-columns:1fr;gap:10px;left:18px;right:18px;bottom:58px}.slide-point{padding:8px 10px;font-size:.92rem}.slide-point i{width:34px;height:34px}
  .highlight-grid,.course-grid{grid-template-columns:1fr}.highlight-card{padding:18px}.highlight-card strong{font-size:1.6rem}.highlight-card span{font-size:1rem}
  .section{padding:18px 0}.section-heading h2{font-size:2rem}.mini-heading h3{font-size:1.35rem}
  .course-card h3{font-size:1.24rem}.course-summary{min-height:0}.course-card-meta{grid-template-columns:1fr 1fr}.course-footer-row{flex-direction:column;align-items:stretch}
  .panel{padding:16px}
  .course-modal-card>img{height:220px}.course-meta-grid{grid-template-columns:1fr}
}