.learn-page,
.guide-workspace,
.advisor-page {
  max-width: 1320px;
}

.guide-category-arrow {
  position: fixed;
  top: 52%;
  z-index: 30;
  display: flex;
  gap: .45rem;
  align-items: center;
  max-width: 46px;
  min-height: 74px;
  padding: .7rem .75rem;
  overflow: hidden;
  border: 1px solid #cfdaed;
  background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
  color: var(--bs-body-color);
  box-shadow: 0 .45rem 1.2rem rgba(25, 45, 82, .12);
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: max-width .2s ease, border-color .2s ease, background .2s ease;
}

.guide-category-arrow:hover,
.guide-category-arrow:focus-visible {
  max-width: 245px;
  border-color: var(--bs-primary);
  background: var(--bs-body-bg);
}

.guide-category-arrow-prev {
  left: 0;
  border-radius: 0 .8rem .8rem 0;
}

.guide-category-arrow-next {
  right: 0;
  justify-content: flex-end;
  border-radius: .8rem 0 0 .8rem;
}

.guide-category-arrow span {
  flex: 0 0 auto;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}

.guide-category-mobile-nav {
  display: none;
}

.learn-hero,
.guide-hero,
.advisor-hero {
  background: linear-gradient(125deg, #eef4ff, #fff 62%, #f4fbff);
  border: 1px solid #dce4f1;
  border-radius: .85rem;
}

.learn-hero h1,
.guide-hero h1,
.advisor-hero h1 {
  font-size: 1.25rem;
}

.learn-hero p,
.guide-hero p,
.advisor-hero p {
  max-width: 920px;
  font-size: .86rem;
}

.learn-card {
  height: 100%;
  border: 1px solid #dce4f1;
  border-radius: 1rem;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.learn-card:hover {
  transform: translateY(-3px);
  border-color: rgba(67, 97, 238, .36);
  box-shadow: 0 .5rem 1.1rem rgba(22, 45, 91, .1);
}

.learn-card-advisor {
  background: linear-gradient(140deg, rgba(67, 97, 238, .1), rgba(71, 190, 170, .06));
}

.learn-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: .8rem;
  background: rgba(67, 97, 238, .11);
  color: var(--bs-primary);
  font-size: 1.35rem;
}

.guide-shell {
  border: 1px solid #dce4f1;
  border-radius: 1rem;
  overflow: hidden;
}

.guide-sidebar {
  background: var(--bs-tertiary-bg);
  border-right: 1px solid var(--bs-border-color);
  padding: 1rem;
}

.guide-sidebar-title,
.guide-kicker,
.guide-label,
.advisor-label {
  color: #5e6e8a;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.guide-kicker {
  color: var(--bs-primary);
}

.guide-node {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: .55rem;
  padding: .62rem .7rem;
  color: var(--bs-body-color);
  font-size: .88rem;
}

.guide-node:hover,
.guide-node.active {
  background: rgba(67, 97, 238, .11);
  color: #2349af;
}

.guide-node.active {
  font-weight: 700;
}

.guide-children {
  margin: .1rem 0 .4rem .7rem;
  padding-left: .65rem;
  border-left: 1px solid #ced9ef;
}

.guide-child {
  padding: .4rem .55rem;
  font-size: .79rem;
}

.guide-detail {
  min-height: 650px;
  padding: 1.25rem;
}

.guide-empty {
  min-height: 590px;
  display: grid;
  place-items: center;
  color: var(--bs-secondary-color);
  text-align: center;
}

.guide-empty i {
  display: block;
  margin-bottom: .75rem;
  color: var(--bs-primary);
  font-size: 2.5rem;
}

.guide-detail-card {
  animation: guide-enter .22s ease-out;
}

.guide-visual {
  position: relative;
  min-height: 260px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dce4f1;
  border-radius: .85rem;
  background: linear-gradient(135deg, #f4f7ff, #fff);
}

.guide-visual svg {
  width: min(100%, 520px);
  height: 250px;
}

.guide-visual-caption {
  position: absolute;
  right: .65rem;
  bottom: .55rem;
  max-width: calc(100% - 1.3rem);
  padding: .28rem .5rem;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: .45rem;
  background: rgba(255, 255, 255, .9);
  color: #43516a;
  font-size: .7rem;
  backdrop-filter: blur(5px);
}

.guide-uploaded-image,
.guide-photo-crop,
.guide-board-crop {
  width: 100%;
  height: 260px;
}

.guide-uploaded-image {
  object-fit: contain;
}

.guide-photo-crop {
  background-image: var(--guide-photo-url);
  background-repeat: no-repeat;
  background-size: 300% 200%;
}

.guide-board-crop {
  background-repeat: no-repeat;
}

.guide-photo-carbon { background-position: left top; }
.guide-photo-glass { background-position: center top; }
.guide-photo-aramid { background-position: right top; }
.guide-photo-uhmwpe { background-position: left bottom; }
.guide-photo-basalt { background-position: center bottom; }
.guide-photo-ceramic,
.guide-photo-quartz { background-position: right bottom; }

.guide-fact {
  height: 100%;
  border: 1px solid #dce4f1;
  border-radius: .75rem;
  padding: .85rem;
  background: var(--bs-body-bg);
}

.guide-advantage { border-top: 3px solid #198754; }
.guide-limitation { border-top: 3px solid #dc3545; }

.guide-score {
  display: grid;
  grid-template-columns: 142px 1fr 28px;
  gap: .55rem;
  align-items: center;
  margin-bottom: .45rem;
  font-size: .78rem;
}

.guide-meter {
  height: .44rem;
  overflow: hidden;
  border-radius: 99px;
  background: #e7edf8;
}

.guide-meter > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #4361ee, #70a1ff);
}

.guide-properties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .65rem;
}

.guide-property {
  border: 1px solid #dce4f1;
  border-radius: .65rem;
  padding: .65rem;
  font-size: .82rem;
}

.guide-property strong,
.guide-property span { display: block; }
.guide-property strong {
  margin-bottom: .15rem;
  color: #5e6e8a;
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.guide-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}

.guide-chip {
  padding: .3rem .52rem;
  border: 1px solid #d7e0ef;
  border-radius: 999px;
  background: #f7f9fd;
  color: #3d4f6d;
  font-size: .74rem;
}

.guide-materials {
  border-top: 1px solid var(--bs-border-color);
}

.guide-material-link {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
  color: inherit;
  font-size: .78rem;
  text-decoration: none;
}

.design-detail {
  max-width: 100%;
}

.design-header {
  max-width: 980px;
}

.design-visual {
  height: 100%;
  min-height: 310px;
}

.design-visual svg,
.design-visual .guide-uploaded-image {
  width: 100%;
  height: 310px;
}

.design-visual-compact,
.design-visual-compact svg {
  min-height: 245px;
  height: 245px;
}

.guide-sandwich-photo {
  object-fit: cover;
}

.design-callout {
  padding: .85rem 1rem;
  border: 1px solid #dce4f1;
  border-radius: .75rem;
  background: var(--bs-body-bg);
  font-size: .86rem;
}

.design-callout-primary {
  border-left: 4px solid var(--bs-primary);
  background: rgba(67, 97, 238, .055);
}

.design-callout-label {
  display: block;
  margin-bottom: .28rem;
  color: #53647f;
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.design-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.design-section {
  padding: .9rem 1rem;
  border: 1px solid #dce4f1;
  border-radius: .8rem;
  background: var(--bs-body-bg);
}

.design-section h3 {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: 0 0 .55rem;
  color: #334561;
  font-size: .82rem;
}

.design-section h3 i {
  color: var(--bs-primary);
}

.design-section ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--bs-secondary-color);
  font-size: .8rem;
}

.design-section li + li {
  margin-top: .38rem;
}

.design-table-section {
  overflow: hidden;
  border: 1px solid #dce4f1;
  border-radius: .8rem;
  background: var(--bs-body-bg);
}

.design-table-section > h3 {
  padding: .85rem 1rem .45rem;
}

.design-table {
  min-width: 780px;
  font-size: .76rem;
  vertical-align: middle;
}

.design-table thead th {
  position: sticky;
  top: 0;
  padding: .55rem .65rem;
  background: #eaf0fb;
  color: #40516e;
  font-size: .68rem;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.design-table tbody th {
  min-width: 150px;
  color: #263a5b;
  font-weight: 700;
}

.design-table td,
.design-table tbody th {
  padding: .55rem .65rem;
}

.design-table tbody tr:nth-child(even) > * {
  background: rgba(67, 97, 238, .035);
}

.design-table td.design-cell-best {
  background: rgba(25, 135, 84, .13) !important;
  color: #146c43;
  font-weight: 700;
}

.design-table td.design-cell-worst {
  background: rgba(220, 53, 69, .11) !important;
  color: #a52834;
  font-weight: 700;
}

.design-table td.design-cell-caution {
  background: rgba(255, 193, 7, .14) !important;
  color: #805d00;
}

.design-table-note {
  padding: .65rem 1rem .8rem;
  border-top: 1px solid var(--bs-border-color-translucent);
  color: var(--bs-secondary-color);
  font-size: .72rem;
}

.guide-related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .55rem;
}

.guide-related-links a {
  display: flex;
  gap: .55rem;
  align-items: center;
  padding: .7rem .8rem;
  border: 1px solid rgba(67, 97, 238, .28);
  border-radius: .68rem;
  background: rgba(67, 97, 238, .055);
  color: var(--bs-body-color);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
}

.guide-related-links a:hover {
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}

.balance-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
}

.balance-choice-grid button {
  padding: .55rem .65rem;
  border: 1px solid #d1dced;
  border-radius: .58rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: .76rem;
  font-weight: 650;
}

.balance-choice-grid button:hover,
.balance-choice-grid button.active {
  border-color: var(--bs-primary);
  background: rgba(67, 97, 238, .1);
  color: #2349af;
}

.advisor-layout {
  display: grid;
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.advisor-form,
.advisor-results {
  border: 1px solid #dce4f1;
  border-radius: 1rem;
}

.advisor-form {
  position: sticky;
  top: 1rem;
}

.advisor-step {
  padding: .9rem 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.advisor-step:last-of-type { border-bottom: 0; }
.advisor-step .form-label { font-size: .82rem; font-weight: 650; }
.advisor-help { color: var(--bs-secondary-color); font-size: .72rem; }

.advisor-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}

.advisor-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.advisor-choice span {
  display: block;
  height: 100%;
  padding: .55rem .6rem;
  border: 1px solid #d7dfec;
  border-radius: .55rem;
  background: var(--bs-body-bg);
  font-size: .78rem;
  cursor: pointer;
}

.advisor-choice input:checked + span {
  border-color: var(--bs-primary);
  background: rgba(67, 97, 238, .1);
  color: #2349af;
  box-shadow: inset 0 0 0 1px var(--bs-primary);
}

.advisor-results {
  min-height: 560px;
  padding: 1rem;
}

.advisor-result-card {
  border: 1px solid #dce4f1;
  border-radius: .8rem;
  padding: .9rem;
  background: var(--bs-body-bg);
}

.advisor-result-card + .advisor-result-card { margin-top: .7rem; }
.advisor-result-title { display: flex; align-items: center; gap: .55rem; }
.advisor-rank {
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: .5rem;
  background: rgba(67, 97, 238, .12);
  color: #2349af;
  font-size: .75rem;
  font-weight: 800;
}

.advisor-reason-list {
  margin: .55rem 0 0;
  padding-left: 1.05rem;
  color: var(--bs-secondary-color);
  font-size: .78rem;
}

.advisor-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.advisor-caution {
  border-left: 3px solid #e7a33e;
  background: rgba(231, 163, 62, .08);
}

@keyframes guide-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 991.98px) {
  .guide-category-arrow { display: none; }
  .guide-category-mobile-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
  }
  .guide-category-mobile-nav a {
    display: flex;
    gap: .55rem;
    align-items: center;
    padding: .75rem;
    border: 1px solid #d6dfed;
    border-radius: .7rem;
    color: var(--bs-body-color);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
  }
  .guide-category-mobile-nav a:last-child { justify-content: flex-end; text-align: right; }
  .guide-category-mobile-nav small { display: block; color: var(--bs-secondary-color); font-weight: 400; }
  .guide-sidebar {
    max-height: 340px;
    overflow: auto;
    border-right: 0;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .guide-detail { min-height: 0; }
  .guide-empty { min-height: 260px; }
  .advisor-layout { grid-template-columns: 1fr; }
  .advisor-form { position: static; }
}

@media (max-width: 575.98px) {
  .advisor-choice-grid,
  .advisor-summary-grid { grid-template-columns: 1fr; }
  .guide-score { grid-template-columns: 112px 1fr 26px; }
  .guide-visual,
  .guide-uploaded-image,
  .guide-photo-crop { min-height: 220px; height: 220px; }
  .guide-board-crop { min-height: 220px; height: 220px; }
  .design-section-grid { grid-template-columns: 1fr; }
  .design-visual,
  .design-visual svg,
  .design-visual .guide-uploaded-image { min-height: 235px; height: 235px; }
  .balance-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) and (max-width: 1450px) {
  .guide-category-arrow span { display: none; }
  .guide-category-arrow:hover,
  .guide-category-arrow:focus-visible { max-width: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .learn-card,
  .guide-detail-card { transition: none; animation: none; }
}