*,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --bm: #2471b8;
     --bd: #1a4a7a;
     --bl: #4a9fd8;
     --bp: #e8f3fb;
     --bg: #f0f7fd;
     --ac: #f5a623;
     --td: #1c2d3e;
     --tm: #4a6580;
     --tl: #7a95ae;
     --w: #fff;
     --br: #d4e6f3;
     --ss: 0 1px 4px rgba(36, 113, 184, .10);
     --sm: 0 4px 16px rgba(36, 113, 184, .14);
 }

 html,
 body {
     height: 100%;
 }

 body {
     font-family: 'Prompt', sans-serif;
     background: var(--bg);
     color: var(--td);
     min-height: 100vh;
     display: flex;
     flex-direction: column;
 }

 /* NAVBAR */
 .navbar {
     background: var(--w);
     border-bottom: 1px solid var(--br);
     box-shadow: var(--ss);
     padding: 0 2rem;
     height: 60px;
     display: flex;
     align-items: center;
     position: sticky;
     top: 0;
     z-index: 100;
 }

 .brand {
     display: flex;
     align-items: center;
     gap: .6rem;
     text-decoration: none;
 }

 .brand-logo {
     width: 44px;
     height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .brand-logo svg {
     width: 44px;
     height: 44px;
 }

 .brand-text {
     line-height: 1.15;
 }

 .brand-text .t1 {
     font-size: .9rem;
     font-weight: 700;
     color: var(--bd);
 }

 .brand-text .t2 {
     font-size: .58rem;
     color: var(--tl);
 }

 /* SUB-NAV */
 .sub-nav {
     background: var(--w);
     border-bottom: 1px solid var(--br);
     padding: 0 2rem;
     display: flex;
     gap: 0;
     overflow-x: auto;
 }

 .sub-link {
     padding: .65rem 1rem;
     font-size: .8rem;
     font-weight: 500;
     color: var(--tm);
     border-bottom: 2.5px solid transparent;
     cursor: pointer;
     transition: color .15s;
     white-space: nowrap;
     text-decoration: none;
     display: inline-block;
 }

 .sub-link:hover {
     color: var(--bm);
 }

 .sub-link.active {
     color: var(--bm);
     border-bottom-color: var(--bm);
     font-weight: 600;
 }

 /* SUB-NAV */
 .sub-nav {
     background: var(--w);
     border-bottom: 1px solid var(--br);
     padding: 0 2rem;
     display: flex;
     gap: 0;
     overflow-x: auto;
 }

 .sub-link {
     padding: .65rem 1.1rem;
     font-size: .82rem;
     font-weight: 500;
     color: var(--tm);
     border-bottom: 2.5px solid transparent;
     cursor: pointer;
     transition: color .15s;
     white-space: nowrap;
     text-decoration: none;
     display: inline-block;
     margin-bottom: -1px;
 }

 .sub-link:hover {
     color: var(--bm);
 }

 .sub-link.active {
     color: var(--bm);
     border-bottom-color: var(--bm);
     font-weight: 600;
 }

 /* BREADCRUMB */
 .breadcrumb-bar {
     background: #ddeef9;
     border-bottom: 1px solid var(--br);
     padding: .45rem 2rem;
     display: flex;
     align-items: center;
     gap: .35rem;
     font-size: .78rem;
 }

 .breadcrumb-bar a {
     color: var(--bm);
     text-decoration: none;
     font-weight: 500;
 }

 .breadcrumb-bar a::before {
     content: '«  ';
 }

 .breadcrumb-bar a:hover {
     text-decoration: underline;
 }

 .breadcrumb-bar .sep {
     color: var(--tl);
     margin: 0 .1rem;
 }

 .breadcrumb-bar .cur {
     color: var(--td);
     font-weight: 600;
 }

 /* MAIN */
 main {
     flex: 1;
     max-width: 1200px;
     width: 100%;
     margin: 0 auto;
     padding: 2rem;
 }

 /* FOOTER */
 .footer {
     text-align: center;
     padding-bottom: 1.2rem;
 }

 .footer-line {
     height: 1px;
     background: linear-gradient(to right, transparent, var(--br), transparent);
     margin-bottom: .8rem;
 }

 .footer-title {
     font-size: .72rem;
     color: var(--tl);
     letter-spacing: .03em;
 }

 @media (max-width: 768px) {
     .navbar {
         padding: 0 1rem;
     }

     main {
         padding: 1rem;
     }
 }

 .sub-nav {
     background: var(--w);
     border-bottom: 1px solid var(--br);
     padding: 0 2rem;
     display: flex;
     gap: 0;
     overflow-x: auto;
     position: sticky;
     top: 0;
     z-index: 1000;
 }

 .sub-link {
     padding: .65rem 1.1rem;
     font-size: .82rem;
     font-weight: 500;
     color: var(--tm);
     border-bottom: 2.5px solid transparent;
     cursor: pointer;
     transition: color .15s;
     white-space: nowrap;
     text-decoration: none;
     display: inline-block;
     margin-bottom: -1px;
 }

 .sub-link:hover {
     color: var(--bm);
 }

 .sub-link.active {
     color: var(--bm);
     border-bottom-color: var(--bm);
     font-weight: 600;
 }

 .page-header {
     text-align: center;
     margin-bottom: 1.75rem
 }

 .page-header h1 {
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--bm);
     margin-bottom: .3rem
 }

 .page-header p {
     font-size: .82rem;
     color: var(--tl)
 }

 .stat-banner {
     background: var(--w);
     border: 1px solid var(--br);
     border-radius: 14px;
     padding: 1.25rem 1.75rem;
     box-shadow: var(--ss);
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0;
     margin-bottom: 2rem;
     text-align: center
 }

 .stat-item {
     padding: .25rem 1rem
 }

 .stat-item+.stat-item {
     border-left: 1px solid var(--br)
 }

 .stat-val {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--bm);
     line-height: 1
 }

 .stat-lbl {
     font-size: .7rem;
     color: var(--tl);
     margin-top: .25rem
 }

 .cat-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
     gap: 1.1rem;
     margin-bottom: 2rem
 }

 .cat-card {
     background: var(--w);
     border: 1px solid var(--br);
     border-radius: 14px;
     padding: 1.35rem 1.4rem;
     box-shadow: var(--ss);
     cursor: pointer;
     transition: box-shadow .2s, transform .15s;
     text-decoration: none;
     display: block
 }

 .cat-card:hover {
     box-shadow: var(--sm);
     transform: translateY(-2px)
 }

 .cat-card-top {
     display: flex;
     align-items: center;
     gap: .85rem;
     margin-bottom: .85rem
 }

 .cat-icon {
     width: 42px;
     height: 42px;
     border-radius: 10px;
     background: var(--bp);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .cat-icon svg {
     width: 20px;
     height: 20px;
     color: var(--bm)
 }

 .cat-name {
     font-size: .92rem;
     font-weight: 700;
     color: var(--td)
 }

 .cat-desc {
     font-size: .76rem;
     color: var(--tl);
     line-height: 1.5
 }

 .cat-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: .85rem;
     padding-top: .75rem;
     border-top: 1px solid var(--br)
 }

 .cat-count {
     font-size: .72rem;
     color: var(--tm);
     font-weight: 500
 }

 .cat-arrow {
     font-size: .75rem;
     color: var(--bm);
     font-weight: 600
 }

 .sub-tags {
     display: flex;
     flex-wrap: wrap;
     gap: .4rem;
     margin-top: .55rem
 }

 .sub-tag {
     font-size: .68rem;
     color: var(--bm);
     background: var(--bp);
     border-radius: 4px;
     padding: .15rem .5rem;
     font-weight: 500
 }


 


 .degree-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 8px 0;
}

.degree-card {
  background: var(--w);
  border: 1px solid var(--br);
  border-radius: 16px;
  min-height: 130px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: var(--ss);
  text-align: center;
}

.degree-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--bm);
  margin-bottom: 12px;
}

.degree-label {
  font-size: 16px;
  font-weight: 400;
  color: var(--tm);
  line-height: 1.4;
}

@media (max-width: 992px) {
  .degree-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .degree-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}