:root {
  color-scheme: light;
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #e5e5ea;
  --text: #000000;
  --muted: #6c6c70;
  --faint: #8e8e93;
  --line: rgba(60, 60, 67, .18);
  --accent: #007aff;
  --accent-soft: rgba(0, 122, 255, .12);
  --danger: #ff3b30;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --sidebar: 258px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-raised: #2c2c2e;
  --surface-soft: #2c2c2e;
  --text: #ffffff;
  --muted: #aeaeb2;
  --faint: #8e8e93;
  --line: rgba(84, 84, 88, .65);
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, .18);
  --danger: #ff453a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

html { min-height: 100%; scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--bg);
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: var(--accent); }

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 3px;
}

.isHidden { display: none !important; }

.appShell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-right: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(150%);
}

.appBrand,
.mobileBrand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
}

.appBrand { padding: 4px 7px 24px; }
.appBrand img, .mobileBrand img { border-radius: 11px; box-shadow: 0 6px 16px rgba(22, 61, 120, .18); }
.appBrand span { display: flex; flex-direction: column; line-height: 1.15; }
.appBrand strong { font-size: 1rem; letter-spacing: -.02em; }
.appBrand small { margin-top: 4px; color: var(--muted); font-size: .7rem; }

.sideNav { display: grid; gap: 5px; }

.navItem,
.quietButton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  color: var(--muted);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
}

.navItem {
  min-height: 47px;
  padding: 8px 11px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 650;
  text-align: left;
}

.navItem:hover,
.navItem.isActive { color: var(--accent); background: var(--accent-soft); }
.navIcon { width: 24px; font-size: 1.35rem; line-height: 1; text-align: center; }
.navCount { min-width: 25px; margin-left: auto; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 12%, transparent); font-size: .7rem; text-align: center; }
.navItem.isActive .navCount { background: color-mix(in srgb, var(--accent) 16%, transparent); }

.sidebarFooter { margin-top: auto; padding: 16px 7px 2px; border-top: 1px solid var(--line); }
.quietButton { min-height: 39px; padding: 6px 3px; font-size: .82rem; }
.quietButton:hover { color: var(--text); }
.quietButton span:first-child { width: 21px; text-align: center; }
.sidebarFooter p { margin: 12px 0 0; color: var(--faint); font-size: .68rem; line-height: 1.5; }

.mainContent {
  grid-column: 2;
  width: min(100%, 1120px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 60px clamp(28px, 5vw, 76px) 90px;
}

.mobileHeader { display: none; }
.mobileHeaderActions { display: flex; align-items: center; gap: 4px; }

.contentHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.contentHeader h1 {
  margin: 0;
  font-size: clamp(2.25rem, 4.2vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -.055em;
}

.viewDescription { max-width: 660px; margin: 14px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }

.secondaryButton,
.primaryButton {
  min-height: 42px;
  padding: 10px 17px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .83rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.secondaryButton:hover { border-color: var(--accent); color: var(--accent); }
.primaryButton { border-color: var(--accent); color: white; background: var(--accent); }

.searchPanel { margin-top: 34px; }

.searchBox {
  height: 60px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.searchBox:focus-within { border-color: color-mix(in srgb, var(--accent) 65%, var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow); }
.searchBox > span { color: var(--faint); font-size: 1.6rem; }
.searchBox input { min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 1rem; }
.searchBox input::placeholder { color: var(--faint); }
.searchBox kbd { min-width: 28px; padding: 4px 8px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 7px; color: var(--faint); background: var(--bg); font-size: .72rem; text-align: center; }
.searchHint { margin: 9px 3px 0; color: var(--faint); font-size: .72rem; }

.contentArea { margin-top: 36px; }

.sectionHeader { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.sectionHeader h2 { margin: 0; font-size: 1.05rem; letter-spacing: -.02em; }
.sectionHeader p, .resultMeta { margin: 0; color: var(--muted); font-size: .78rem; }

.quickGrid,
.chapterGrid,
.classificationGrid {
  display: grid;
  gap: 12px;
}

.quickGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chapterGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.classificationGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.quickCard,
.chapterCard,
.classificationCard {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.quickCard:hover,
.chapterCard:hover,
.classificationCard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); box-shadow: var(--shadow); }

.quickCard { min-height: 108px; flex-direction: column; justify-content: space-between; padding: 16px; }
.quickCard span { color: var(--accent); font-size: 1.5rem; }
.quickCard strong { font-size: .83rem; }

.chapterCard { min-height: 112px; align-items: center; gap: 14px; padding: 17px; }
.chapterInitial { width: 43px; height: 43px; flex: 0 0 43px; display: grid; place-items: center; border-radius: 13px; color: var(--chapter-color, var(--accent)); background: color-mix(in srgb, var(--chapter-color, var(--accent)) 13%, transparent); font-size: 1rem; font-weight: 850; }
.chapterCard strong, .classificationCard strong { display: block; font-size: .88rem; line-height: 1.35; }
.chapterCard small, .classificationCard small { display: block; margin-top: 5px; color: var(--muted); font-size: .7rem; }

.classificationCard { min-height: 108px; align-items: center; gap: 14px; padding: 18px; }
.classificationMark { width: 9px; align-self: stretch; flex: 0 0 9px; border-radius: 8px; background: var(--class-color); }

.recentSection { margin-top: 34px; }
.recentList { display: flex; flex-wrap: wrap; gap: 8px; }
.recentChip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: .76rem; cursor: pointer; }
.recentChip:hover { color: var(--accent); border-color: var(--accent); }
.textButton { padding: 0; border: 0; color: var(--accent); background: transparent; font-size: .74rem; cursor: pointer; }

.filterBar { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; overflow-x: auto; scrollbar-width: none; }
.filterBar::-webkit-scrollbar { display: none; }
.filterChip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: .74rem; font-weight: 650; white-space: nowrap; cursor: pointer; }
.filterChip.isActive, .filterChip:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: var(--accent-soft); }

.codeList { display: grid; gap: 8px; }

.codeRow {
  min-height: 76px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
}

.codeRow:hover { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); background: color-mix(in srgb, var(--surface) 93%, var(--accent-soft)); }
.codeBadge { min-height: 42px; display: grid; place-items: center; padding: 7px; border-radius: 11px; color: var(--accent); background: var(--accent-soft); font-size: .82rem; font-weight: 850; letter-spacing: .02em; }
.codeInfo { min-width: 0; }
.codeInfo strong { display: block; overflow: hidden; font-size: .9rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.codeInfo small { display: block; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }

.rowFavorite,
.favoriteButton,
.iconButton {
  display: grid;
  place-items: center;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.rowFavorite { width: 42px; height: 42px; border-radius: 11px; font-size: 1.45rem; }
.rowFavorite:hover, .rowFavorite.isFavorite { color: var(--accent); background: var(--accent-soft); }

.emptyState {
  display: grid;
  justify-items: center;
  padding: 70px 24px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  text-align: center;
}

.emptyIcon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; color: var(--accent); background: var(--accent-soft); font-size: 1.7rem; }
.emptyState h2 { margin: 18px 0 0; font-size: 1.15rem; }
.emptyState p { max-width: 430px; margin: 9px 0 0; color: var(--muted); font-size: .83rem; line-height: 1.55; }
.emptyState .primaryButton { margin-top: 20px; }

.loadingState { min-height: 280px; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--muted); font-size: .82rem; }
.loader { width: 27px; height: 27px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.detailDialog {
  width: min(620px, 100%);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  color: var(--text);
  background: var(--surface);
  box-shadow: -20px 0 60px rgba(12, 25, 45, .18);
}

.detailDialog::backdrop { background: rgba(9, 18, 32, .34); backdrop-filter: blur(3px); }
.detailShell { min-height: 100%; }
.detailHeader { position: sticky; top: 0; z-index: 2; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 91%, transparent); backdrop-filter: blur(18px); }
.detailActions { display: flex; gap: 5px; }
.iconButton, .favoriteButton { width: 40px; height: 40px; border-radius: 11px; font-size: 1.25rem; }
.iconButton:hover, .favoriteButton:hover { color: var(--accent); background: var(--accent-soft); }
.favoriteButton { font-size: 1.5rem; }
.favoriteButton.isFavorite { color: var(--accent); background: var(--accent-soft); }

.detailContent { padding: 42px clamp(24px, 6vw, 52px) 70px; }
.detailCode { display: inline-flex; padding: 8px 12px; border-radius: 11px; color: var(--accent); background: var(--accent-soft); font-size: 1rem; font-weight: 850; }
.detailContent h2 { max-width: 520px; margin: 18px 0 12px; font-size: clamp(1.8rem, 5vw, 2.65rem); line-height: 1.08; letter-spacing: -.04em; }
.detailMeta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 34px; }
.metaPill, .cidPill, .linkedCode { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: .7rem; }
.metaPill { color: var(--muted); background: var(--surface-soft); }
.detailField { padding: 21px 0; border-top: 1px solid var(--line); }
.detailField h3 { margin: 0 0 8px; color: var(--muted); font-size: .72rem; letter-spacing: .035em; text-transform: uppercase; }
.detailField p { margin: 0; font-size: .94rem; line-height: 1.67; white-space: pre-line; }
.pillRow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.cidPill { color: #8b4d00; background: #fff1d9; font-weight: 750; }
:root[data-theme="dark"] .cidPill { color: #ffc269; background: #3d2d16; }
.linkedCode { border: 0; color: var(--accent); background: var(--accent-soft); font-weight: 750; cursor: pointer; }
.detailDisclaimer { margin: 30px 0 0; padding: 15px; border-radius: 12px; color: var(--muted); background: var(--surface-soft); font-size: .72rem; line-height: 1.55; }

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: calc(26px + var(--safe-bottom));
  max-width: min(90vw, 420px);
  padding: 11px 16px;
  border-radius: 999px;
  color: white;
  background: #14233a;
  box-shadow: var(--shadow);
  font-size: .78rem;
  font-weight: 650;
  opacity: 0;
  transform: translate(-50%, 15px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.toast.isVisible { opacity: 1; transform: translate(-50%, 0); }

.updateNotice {
  position: fixed;
  z-index: 110;
  left: 50%;
  bottom: calc(26px + var(--safe-bottom));
  width: min(calc(100vw - 32px), 480px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 13px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
  backdrop-filter: blur(22px) saturate(160%);
  font-size: .82rem;
  font-weight: 600;
}

.updateNotice button {
  min-height: 34px;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.bottomNav { display: none; }

@media (max-width: 1020px) {
  :root { --sidebar: 224px; }
  .mainContent { padding-inline: 34px; }
  .quickGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapterGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .appShell { display: block; }
  .sidebar { display: none; }
  .mainContent { width: 100%; padding: 0 max(16px, var(--safe-right)) calc(100px + var(--safe-bottom)) max(16px, var(--safe-left)); }
  .mobileHeader { min-height: calc(64px + var(--safe-top)); padding-top: var(--safe-top); display: flex; align-items: center; justify-content: space-between; }
  .mobileBrand { font-size: .9rem; }
  .contentHeader { align-items: flex-start; }
  .contentHeader h1 { font-size: 2.25rem; }
  .viewDescription { font-size: .88rem; }
  .secondaryButton { padding-inline: 12px; }
  .searchPanel { margin-top: 26px; }
  .searchBox { height: 54px; border-radius: 14px; padding-inline: 14px; }
  .searchBox kbd, .searchHint { display: none; }
  .contentArea { margin-top: 28px; }
  .chapterGrid, .classificationGrid { grid-template-columns: 1fr; }
  .codeRow { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
  .bottomNav {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    min-height: calc(64px + var(--safe-bottom));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 7px max(8px, var(--safe-right)) var(--safe-bottom) max(8px, var(--safe-left));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(20px) saturate(150%);
  }
  .bottomNavItem { display: grid; justify-items: center; align-content: center; gap: 3px; border: 0; color: var(--faint); background: transparent; cursor: pointer; }
  .bottomNavItem > span { font-size: 1.3rem; line-height: 1; }
  .bottomNavItem small { font-size: .61rem; font-weight: 700; }
  .bottomNavItem.isActive { color: var(--accent); }
  .detailDialog { width: 100%; }
  .detailDialog::backdrop { background: transparent; }
  .detailContent { padding-top: 30px; }
  .toast, .updateNotice { bottom: calc(82px + var(--safe-bottom)); }
}

@media (max-width: 440px) {
  .quickGrid { grid-template-columns: 1fr 1fr; }
  .quickCard { min-height: 98px; }
  .contentHeader { display: block; }
  .contentHeader .secondaryButton { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Native CIAP2 alignment */
.sidebar {
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(30px) saturate(180%);
}

.mainContent {
  width: min(100%, 980px);
  padding-top: 48px;
}

.contentHeader { align-items: center; }
.contentHeader h1 { font-size: clamp(2.15rem, 3.8vw, 3rem); line-height: 1.08; letter-spacing: -.04em; }
.viewDescription { margin-top: 9px; }
.eyebrow { display: none; }

.navIcon,
.searchSymbol,
.chevron,
.iconButton::before,
.rowFavorite::before,
.favoriteButton::before {
  display: block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.navIcon { width: 22px; height: 22px; flex: 0 0 22px; }
.navIcon[data-icon="search"], .searchSymbol {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.7 3a7.7 7.7 0 1 0 4.82 13.7l4.39 4.39a1 1 0 0 0 1.41-1.42l-4.38-4.38A7.7 7.7 0 0 0 10.7 3Zm0 2a5.7 5.7 0 1 1 0 11.4 5.7 5.7 0 0 1 0-11.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10.7 3a7.7 7.7 0 1 0 4.82 13.7l4.39 4.39a1 1 0 0 0 1.41-1.42l-4.38-4.38A7.7 7.7 0 0 0 10.7 3Zm0 2a5.7 5.7 0 1 1 0 11.4 5.7 5.7 0 0 1 0-11.4Z'/%3E%3C/svg%3E");
}
.navIcon[data-icon="bookmark"], .rowFavorite::before, .favoriteButton::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2.5h10A2.5 2.5 0 0 1 19.5 5v16a1 1 0 0 1-1.58.81L12 17.58l-5.92 4.23A1 1 0 0 1 4.5 21V5A2.5 2.5 0 0 1 7 2.5Zm0 2a.5.5 0 0 0-.5.5v14.06l4.92-3.52a1 1 0 0 1 1.16 0l4.92 3.52V5a.5.5 0 0 0-.5-.5H7Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2.5h10A2.5 2.5 0 0 1 19.5 5v16a1 1 0 0 1-1.58.81L12 17.58l-5.92 4.23A1 1 0 0 1 4.5 21V5A2.5 2.5 0 0 1 7 2.5Zm0 2a.5.5 0 0 0-.5.5v14.06l4.92-3.52a1 1 0 0 1 1.16 0l4.92 3.52V5a.5.5 0 0 0-.5-.5H7Z'/%3E%3C/svg%3E");
}
.navIcon[data-icon="chapters"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h14a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H5Zm3 3h9a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2Zm0 4h9a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2Zm0 4h6a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h14a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H5Zm3 3h9a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2Zm0 4h9a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2Zm0 4h6a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2Z'/%3E%3C/svg%3E");
}
.navIcon[data-icon="stethoscope"] {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2a1 1 0 0 1 1 1v1h1a1 1 0 1 1 0 2H7v3a5 5 0 0 0 10 0V6h-1a1 1 0 1 1 0-2h1V3a1 1 0 1 1 2 0v6a7 7 0 0 1-6 6.93V17a3 3 0 0 0 6 0v-1.18A3 3 0 1 1 21 13v4a5 5 0 0 1-10 0v-1.07A7 7 0 0 1 5 9V3a1 1 0 0 1 1-1Zm14 12a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2a1 1 0 0 1 1 1v1h1a1 1 0 1 1 0 2H7v3a5 5 0 0 0 10 0V6h-1a1 1 0 1 1 0-2h1V3a1 1 0 1 1 2 0v6a7 7 0 0 1-6 6.93V17a3 3 0 0 0 6 0v-1.18A3 3 0 1 1 21 13v4a5 5 0 0 1-10 0v-1.07A7 7 0 0 1 5 9V3a1 1 0 0 1 1-1Zm14 12a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z'/%3E%3C/svg%3E");
}

.searchPanel { margin-top: 26px; }
.searchBox {
  height: 48px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  background: var(--surface-soft);
  box-shadow: none;
}
.searchBox:focus-within { border: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.searchSymbol { width: 19px; height: 19px; color: var(--faint); }
.searchBox input { font-size: 1rem; }
.searchBox kbd { background: var(--surface); }

.contentArea { margin-top: 28px; }
.quickGrid { gap: 10px; }
.quickCard {
  min-height: 96px;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
}
.quickCard img { width: 30px; height: 30px; object-fit: contain; }
.quickCard strong { font-size: .9rem; }

.chapterGrid,
.classificationGrid { grid-template-columns: 1fr; gap: 10px; }

.chapterCard,
.classificationCard {
  min-height: 56px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  transform: none;
}
.chapterCard { background: var(--surface); }
.classificationCard { min-height: 78px; color: #000; background: var(--class-color); }
.chapterCard:hover,
.classificationCard:hover { transform: none; border: 0; box-shadow: none; }
:root[data-theme="dark"] .chapterCard:hover { filter: brightness(1.08); }
.categoryIcon { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; }
.classificationCard .categoryIcon { width: 32px; height: 32px; flex-basis: 32px; }
.categoryCopy { min-width: 0; flex: 1; }
.chapterCard strong,
.classificationCard strong { font-size: 1rem; font-weight: 650; }
.chapterCard strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapterCard small,
.classificationCard small { margin-top: 3px; font-size: .72rem; }
.classificationCard small { color: rgba(0, 0, 0, .58); }
.chevron {
  width: 8px;
  height: 14px;
  flex: 0 0 8px;
  color: currentColor;
  opacity: .34;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath fill='black' d='M1.1.3a1 1 0 0 1 1.4 0l5 5a2.4 2.4 0 0 1 0 3.4l-5 5a1 1 0 1 1-1.4-1.4l5-5a.4.4 0 0 0 0-.6l-5-5a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath fill='black' d='M1.1.3a1 1 0 0 1 1.4 0l5 5a2.4 2.4 0 0 1 0 3.4l-5 5a1 1 0 1 1-1.4-1.4l5-5a.4.4 0 0 0 0-.6l-5-5a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
}

.codeList { gap: 0; overflow: hidden; border-radius: 12px; background: var(--surface); }
.codeRow {
  min-height: 70px;
  grid-template-columns: 50px minmax(0, 1fr) 44px;
  gap: 12px;
  padding: 9px 8px 9px 14px;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  position: relative;
}
.codeRow + .codeRow::before { content: ""; position: absolute; top: 0; right: 0; left: 76px; height: 1px; background: var(--line); }
.codeRow:hover { border: 0; background: color-mix(in srgb, var(--surface) 94%, var(--accent)); }
.codeBadge {
  width: 48px;
  min-height: 48px;
  padding: 4px;
  border-radius: 50%;
  color: #000;
  background: var(--classification-color);
  font-size: .77rem;
  font-weight: 750;
}
.codeInfo strong { font-size: 1rem; font-weight: 450; }
.codeInfo small { font-size: .78rem; }
.rowFavorite,
.favoriteButton { font-size: 0; }
.rowFavorite::before,
.favoriteButton::before { content: ""; width: 22px; height: 22px; }
.rowFavorite.isFavorite::before,
.favoriteButton.isFavorite::before { background: var(--accent); -webkit-mask-image: none; mask-image: none; clip-path: polygon(18% 0,82% 0,100% 15%,100% 100%,50% 72%,0 100%,0 15%); }
.rowFavorite:hover,
.rowFavorite.isFavorite,
.favoriteButton.isFavorite { color: var(--accent); background: transparent; }

.emptyState { border: 0; border-radius: 12px; background: var(--surface); }

.detailDialog { background: var(--bg); }
.detailHeader { height: 58px; background: color-mix(in srgb, var(--surface) 84%, transparent); }
.iconButton::before { content: ""; width: 20px; height: 20px; }
.iconButton[data-icon="close"]::before { content: "×"; display: grid; place-items: center; background: none; font-size: 1.7rem; line-height: 1; }
.iconButton[data-icon="copy"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 2h11a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3h-1v1a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h1V5a3 3 0 0 1 2-3Zm0 4h7a3 3 0 0 1 3 3v8h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v1Zm-3 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 2h11a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3h-1v1a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h1V5a3 3 0 0 1 2-3Zm0 4h7a3 3 0 0 1 3 3v8h1a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v1Zm-3 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H5Z'/%3E%3C/svg%3E");
}
.iconButton[data-icon="share"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1a1 1 0 0 1 .7.3l4 4a1 1 0 1 1-1.4 1.4L13 4.42V15a1 1 0 1 1-2 0V4.41L8.7 6.7a1 1 0 0 1-1.4-1.4l4-4A1 1 0 0 1 12 1ZM5 9a3 3 0 0 1 3-3h1v2H8a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-1V6h1a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1a1 1 0 0 1 .7.3l4 4a1 1 0 1 1-1.4 1.4L13 4.42V15a1 1 0 1 1-2 0V4.41L8.7 6.7a1 1 0 0 1-1.4-1.4l4-4A1 1 0 0 1 12 1ZM5 9a3 3 0 0 1 3-3h1v2H8a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-1V6h1a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9Z'/%3E%3C/svg%3E");
}
.iconButton[data-icon="install"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3a1 1 0 1 1 2 0v10.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 0 1 1.4-1.42l3.3 3.3V3ZM5 18a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3a1 1 0 1 1 2 0v10.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 0 1 1.4-1.42l3.3 3.3V3ZM5 18a1 1 0 0 1 1 1v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
}
.iconButton:hover,
.favoriteButton:hover { background: transparent; }
.detailContent { padding-top: 28px; }
.detailCode {
  display: block;
  padding: 0;
  color: var(--text);
  background: transparent;
  font-size: 2.125rem;
  font-weight: 700;
}
.detailContent h2 { margin: 13px 0 8px; font-size: 1.1rem; line-height: 1.35; letter-spacing: 0; }
.detailMeta { margin-bottom: 22px; }
.detailField { padding: 16px; border-top: 1px solid var(--line); background: var(--surface); }
.detailField:first-of-type { border-radius: 12px 12px 0 0; }
.detailField h3 { margin-bottom: 5px; font-size: .82rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.detailField p { font-size: 1rem; line-height: 1.5; }
.detailDisclaimer { background: var(--surface); }

@media (min-width: 761px) {
  .chapterGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .classificationGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .mainContent { padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right)); }
  .mobileHeader { min-height: calc(56px + var(--safe-top)); height: auto; padding-top: var(--safe-top); }
  .contentHeader h1 { font-size: 2.125rem; }
  .viewDescription { display: none; }
  .contentArea { margin-top: 20px; }
  .classificationCard { min-height: 76px; }
  .bottomNav {
    min-height: calc(68px + var(--safe-bottom));
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    backdrop-filter: blur(30px) saturate(180%);
  }
  .bottomNavItem { min-width: 44px; min-height: 44px; }
  .bottomNavItem .navIcon { width: 23px; height: 23px; }
  .bottomNavItem small { font-size: .63rem; font-weight: 550; }
  .detailHeader {
    height: calc(58px + var(--safe-top));
    padding-top: var(--safe-top);
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }
}