.topbar { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.topbar.center { position: relative; justify-content: center; }
.topbar strong { font-size: 17px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-size: 19px; font-weight: 800; letter-spacing: 0; }
.brand-mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; color: #fff; background: var(--navy); box-shadow: 0 5px 11px rgba(7,27,61,.16); font-size: 13px; font-weight: 900; }
.icon-btn, .back-btn { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 10px; color: var(--navy); background: transparent; }
.topbar.center .back-btn { position: absolute; left: 0; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 13px; border: 1px solid #CBD7E7; border-radius: 8px; color: #8794A8; background: #FFF; box-shadow: none; font-size: 13px; }
.search .icon { width: 18px; height: 18px; }
.section { margin-top: 24px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; font-size: 18px; line-height: 1.3; }
.section-title > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.section-title > span:first-child::before { width: 14px; height: 2px; border-radius: 0; background: var(--blue); content: ""; }
.section-action { color: var(--muted); font-size: 12px; font-weight: 500; }
.section-action .icon { width: 14px; height: 14px; vertical-align: -3px; }
.button, .button-outline, .button-danger { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 14px; border-radius: 7px; font-size: 13px; font-weight: 800; }
.button { color: #FFF; background: var(--blue); box-shadow: 0 7px 16px rgba(28, 94, 200, .23); }
.button-outline { border: 1px solid #C8D7F7; color: var(--blue); background: #FFF; }
.button-danger { border: 1px solid #F3C7C7; color: var(--red); background: #FFF9F9; }
.button.wide, .fixed-action .button { min-width: 154px; }
.tag { display: inline-flex; align-self: flex-start; padding: 3px 6px; border-radius: 4px; color: var(--blue); background: var(--blue-pale); font-size: 10px; font-weight: 800; }
.tag.gold { color: #9C6A25; background: var(--gold-pale); }
.tag.success { color: var(--green); background: var(--green-pale); }
.tag.warn { color: var(--orange); background: var(--orange-pale); }
.tag.danger { color: var(--red); background: var(--red-pale); }
.tabs { display: flex; gap: 19px; overflow-x: auto; margin: 0 -2px 13px; padding: 0 2px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: 0 0 auto; padding: 6px 0 7px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 700; }
.tabs a.active { border-color: var(--blue); color: var(--navy); }
.cover { position: relative; overflow: hidden; border-radius: 9px; background: #DCE7FA; isolation: isolate; }
.cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cover::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,27,61,.03) 22%, rgba(7,27,61,.56)); content: ""; pointer-events: none; }
.cover .tag { position: absolute; z-index: 1; top: 7px; left: 7px; color: #FFF; background: rgba(8, 24, 56, .65); }
.cover .tag.gold { background: rgba(157, 105, 38, .83); }
.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.course-card { position: relative; overflow: hidden; border: 1px solid rgba(220,228,240,.95); border-radius: 8px; background: #FFF; box-shadow: 0 4px 12px rgba(21, 36, 72, .04); }
.course-card .cover { height: 105px; border-radius: 0; }
.course-copy { padding: 9px 10px 11px; }
.course-copy strong { display: -webkit-box; overflow: hidden; min-height: 35px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; line-height: 1.28; }
.course-copy span { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.price { margin-top: 7px; color: var(--red); font-size: 16px; font-weight: 900; }
.list-card, .detail-card, .task-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #FFF; box-shadow: 0 2px 8px rgba(23, 40, 76, .025); }
.list-card { display: flex; gap: 11px; padding: 10px; margin-bottom: 11px; }
.list-card .cover { width: 116px; height: 82px; flex: 0 0 116px; }
.list-card .body { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.list-card h3 { margin: 4px 0 5px; font-size: 15px; line-height: 1.3; }
.meta { color: var(--muted); font-size: 12px; line-height: 1.5; }
.button-row { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; color: var(--blue); font-size: 12px; font-weight: 800; }
.button-row .button, .button-row .button-outline { min-height: 31px; padding: 0 10px; font-size: 11px; }
.progress { height: 5px; margin: 8px 0 4px; overflow: hidden; border-radius: 99px; background: #E9EEF6; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--blue-2)); }
.quick-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 18px 0 4px; }
.quick-nav a { display: grid; justify-items: center; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 700; }
.quick-icon { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(28,94,200,.08); border-radius: 8px; color: var(--blue); background: var(--blue-pale); }
.quick-icon.gold { color: var(--gold); background: var(--gold-pale); }
.quick-icon .icon { width: 23px; height: 23px; }
.ad-card { position: relative; display: flex; min-height: 80px; align-items: center; justify-content: space-between; margin-top: 19px; padding: 13px 14px 13px 18px; overflow: hidden; border: 1px solid #19345E; border-radius: 8px; color: #FFF; background: #071B3D; box-shadow: 0 7px 15px rgba(7,27,61,.09); }
.ad-card::before { position: absolute; top: 15px; bottom: 15px; left: 0; width: 3px; background: var(--gold); content: ""; }
.ad-card::after { content: none; }
.ad-card strong { position: relative; display: block; color: #E5C283; font-size: 23px; }
.ad-card span { position: relative; display: block; margin-top: 3px; font-size: 13px; }
.ad-card .button { position: relative; min-height: 31px; color: var(--navy); background: #EBD8B2; box-shadow: none; font-size: 12px; }
.ad-card small { position: absolute; z-index: 1; top: 7px; right: 10px; color: rgba(255,255,255,.48); }
.bottom-nav { position: fixed; right: auto; bottom: 0; left: 50%; z-index: 10; display: grid; width: min(var(--content-w), 100%); grid-template-columns: repeat(4, 1fr); height: 71px; padding: 7px 9px max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); border-top: 1px solid #E7EBF4; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.bottom-nav a { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; color: #7D889A; font-size: 11px; }
.bottom-nav a.active { color: var(--blue); font-weight: 800; }
.bottom-nav a.active::before { position: absolute; top: -8px; width: 24px; height: 2px; background: var(--blue); content: ""; }
.bottom-nav .icon { width: 20px; height: 20px; }
.fixed-action { position: fixed; right: auto; bottom: 0; left: 50%; z-index: 11; display: flex; width: min(var(--content-w), 100%); height: 75px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); border-top: 1px solid var(--line); background: rgba(255,255,255,.985); box-shadow: 0 -6px 18px rgba(13,35,76,.045); backdrop-filter: blur(12px); }
.fixed-action strong { color: var(--red); font-size: 21px; }
.notice { display: flex; gap: 8px; padding: 10px; border-left: 2px solid #AFC8ED; border-radius: 0 6px 6px 0; color: #46628F; background: #F0F5FC; font-size: 12px; line-height: 1.45; }
.notice .icon { width: 17px; height: 17px; flex: 0 0 17px; }
.task-card { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 10px; }
.task-step { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border-radius: 6px; color: var(--blue); background: var(--blue-pale); font-size: 12px; font-weight: 800; }
.task-step.lock { color: #8D98A9; background: #F0F3F7; }
.task-card h3 { margin: 0; font-size: 14px; }
.task-card p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.task-card .button, .task-card .button-outline, .task-card .tag { margin-left: auto; }
.form-card { padding: 0 13px; }
.form-row { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
.form-row:last-child { border-bottom: 0; }
.form-row strong { font-weight: 700; }
.form-row span { color: var(--muted); text-align: right; }
.status-line { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 10px; color: var(--green); background: var(--green-pale); font-size: 12px; }
.status-line .icon { width: 17px; height: 17px; }

/* Financial-certification refinement: editorial home rhythm */
.route-home .section { margin-top: 30px; }
.route-home .quick-nav { margin-top: 20px; }
.route-home .quick-icon { width: 40px; height: 40px; border-color: transparent; background: #F2F6FD; }
.route-home .quick-icon.gold { background: #FBF6EC; }
.route-home .ad-card { min-height: 72px; border: 1px solid #E2D4B5; color: var(--navy); background: #FFFDF8; box-shadow: none; }
.route-home .ad-card strong { color: var(--navy); font-size: 19px; }
.route-home .ad-card span { color: #7D705C; font-size: 12px; }
.route-home .ad-card small { color: #AA9673; }
.route-home .ad-card .button { color: #FFF; background: var(--navy); }

/* Training pages use structured content rows instead of floating cards. */
.route-training .list-card, .route-topics .list-card, .route-bundles .list-card {
  margin-bottom: 0;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.route-training .list-card:first-child, .route-topics .list-card:first-child, .route-bundles .list-card:first-child { padding-top: 4px; }
.route-training .list-card .cover, .route-topics .list-card .cover, .route-bundles .list-card .cover { border-radius: 6px; }
.route-training .list-card .body, .route-topics .list-card .body, .route-bundles .list-card .body { justify-content: center; }

/* Reusable certification-path treatment for course and topic package tasks. */
.route-course .section .task-card, .route-study .section .task-card, .route-bundle .section .task-card {
  position: relative;
  overflow: visible;
  min-height: 60px;
  margin: 0;
  padding: 11px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.route-course .section .task-card:not(:last-child)::after, .route-study .section .task-card:not(:last-child)::after, .route-bundle .section .task-card:not(:last-child)::after {
  position: absolute;
  top: 43px;
  bottom: -8px;
  left: 16px;
  width: 1px;
  background: #C8D8EF;
  content: "";
}
.route-course .section .task-step, .route-study .section .task-step, .route-bundle .section .task-step {
  position: relative;
  z-index: 1;
  width: 33px;
  height: 33px;
  flex-basis: 33px;
  border: 1px solid #BFD1EC;
  border-radius: 50%;
  color: var(--blue);
  background: #FFF;
}
.route-course .section .task-step.lock, .route-study .section .task-step.lock, .route-bundle .section .task-step.lock { border-color: #D9E0EA; color: #8794A8; background: #F7F9FC; }
.route-course .section .task-card .button-outline, .route-study .section .task-card .button-outline, .route-bundle .section .task-card .button-outline { border-radius: 6px; }