.catbox-view { min-width: 0; padding: 2px 0 24px; }
.catbox-header {
  display: grid; grid-template-columns: auto minmax(0,1fr) 54px; align-items: center; gap: 14px;
  min-width: 0; margin-bottom: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 22px;
  background: rgba(255,252,247,.92); box-shadow: 0 16px 42px rgba(99,67,40,.09);
}
.catbox-header > div { min-width: 0; text-align: center; }
.catbox-header p { margin: 0 0 2px; color: #bd7846; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.catbox-header h1 { margin: 0; font-size: clamp(25px,5vw,34px); }
.catbox-header > img { width: 50px; height: 50px; object-fit: contain; }
.catbox-back {
  min-height: 44px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 14px;
  background: #fffaf3; color: var(--ink); font-weight: 900; cursor: pointer;
}

.catbox-score-hero {
  position: relative; overflow: hidden; margin-bottom: 10px; padding: 20px 22px 17px;
  border: 1px solid #e5c59f; border-radius: 24px;
  background: linear-gradient(135deg,rgba(255,252,247,.98),rgba(252,232,204,.88));
  box-shadow: 0 16px 36px rgba(136,85,43,.1);
}
.catbox-score-hero::after {
  content: "✦"; position: absolute; right: 20%; top: 17px; color: rgba(196,126,62,.18); font-size: 38px; transform: rotate(12deg);
}
.score-hero-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.score-hero-heading div { display: grid; gap: 2px; }
.score-hero-heading span { color: var(--muted); font-size: 13px; font-weight: 900; }
.score-hero-heading strong { color: #a75e34; font-size: clamp(38px,8vw,56px); line-height: 1; letter-spacing: -.04em; }
.score-hero-heading img { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(149,89,40,.12)); }
.score-title-status {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 13px; padding: 10px 12px; border: 1px solid rgba(211,168,116,.46); border-radius: 15px;
  background: rgba(255,252,247,.64);
}
.score-title-status > div { display: grid; min-width: 0; gap: 2px; }
.score-title-status span { color: var(--muted); font-size: 10px; font-weight: 850; }
.score-title-status strong {
  max-width: 100%; overflow: hidden; color: #925b39; font-size: 16px; text-overflow: ellipsis;
  white-space: nowrap; word-break: keep-all; overflow-wrap: normal;
}
.score-title-status button { flex: 0 0 auto; min-height: 44px; padding: 7px 12px; border: 1px solid #dfbf99; border-radius: 12px; background: #fff8ef; color: #9b603c; font-size: 11px; font-weight: 900; cursor: pointer; }
.score-title-status button:disabled { cursor: default; opacity: .55; }
.catbox-score-hero > p { margin: 11px 0 7px; color: #7d5b43; font-size: 12px; font-weight: 850; }
.catbox-score-hero .next-title-label { margin-bottom: -5px; color: #a06743; }
.score-progress, .discovery-progress {
  position: relative; height: 9px; overflow: hidden; border-radius: 999px; background: rgba(137,94,59,.13);
  box-shadow: inset 0 1px 2px rgba(102,68,42,.08);
}
.score-progress span, .discovery-progress span {
  display: block; width: 0; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg,#e8aa6a,#cf7845); transition: width .36s ease;
}
.catbox-score-hero .score-progress-text { margin: 6px 0 0; color: var(--muted); font-size: 11px; text-align: right; }

.catbox-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; min-width: 0; margin-bottom: 13px; }
.catbox-summary > button {
  display: grid; align-content: center; min-width: 0; min-height: 72px; padding: 11px 13px;
  border: 1px solid #ead4b9; border-radius: 17px; background: rgba(255,250,243,.9); color: var(--ink);
  text-align: left; box-shadow: 0 9px 22px rgba(99,67,40,.065); cursor: pointer;
}
.catbox-summary > button:hover:not(:disabled) { border-color: #dcb98e; transform: translateY(-1px); }
.catbox-summary > button:disabled { cursor: default; opacity: .72; }
.catbox-summary span { color: var(--muted); font-size: 11px; font-weight: 800; }
.catbox-summary strong { margin-top: 4px; color: #b5683f; font-size: 18px; line-height: 1.12; overflow-wrap: anywhere; }

.catbox-nav-sticky {
  position: sticky; z-index: 14; top: max(4px,env(safe-area-inset-top)); display: grid; gap: 7px;
  margin: 0 -4px 2px; padding: 5px 4px 8px;
  background: linear-gradient(180deg,rgba(247,239,227,.98) 76%,rgba(247,239,227,0));
}
.catbox-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 5px; border: 1px solid var(--line); border-radius: 17px; background: rgba(244,231,213,.9); backdrop-filter: blur(8px); }
.catbox-tabs button { min-height: 44px; border: 0; border-radius: 13px; background: transparent; color: var(--muted); font-weight: 900; cursor: pointer; }
.catbox-tabs button[aria-selected="true"] { background: #fffaf3; color: #b5683f; box-shadow: 0 5px 16px rgba(99,67,40,.1); }
.catbox-toolbar-shell { min-width: 0; }
.catbox-toolbar {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: end; gap: 8px;
  padding: 8px 10px; border: 1px solid rgba(226,205,178,.86); border-radius: 15px; background: rgba(255,252,247,.94); backdrop-filter: blur(8px);
}
.catbox-toolbar label { display: grid; min-width: 0; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 850; }
.catbox-toolbar select { width: 100%; min-width: 0; min-height: 38px; padding: 6px 28px 6px 9px; border: 1px solid var(--line); border-radius: 11px; background: #fffaf3; color: var(--ink); font-size: 12px; font-weight: 850; }
.favorite-only-toggle { display: flex !important; align-items: center; justify-content: center; gap: 6px !important; min-height: 38px; padding: 6px 10px; border: 1px solid #e8c6c4; border-radius: 11px; background: #fff6f5; color: #9b5960 !important; cursor: pointer; white-space: nowrap; }
.favorite-only-toggle input { width: 17px; height: 17px; margin: 0; accent-color: #dc7e86; }
.discovery-subtabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; min-width: 0; padding: 6px; border: 1px solid rgba(226,205,178,.86); border-radius: 15px; background: rgba(255,252,247,.94); backdrop-filter: blur(8px); }
.discovery-subtabs button { display: grid; place-items: center; min-width: 0; min-height: 44px; padding: 5px 4px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 900; cursor: pointer; }
.discovery-subtabs button span { margin-top: 1px; color: #aa8164; font-size: 9px; font-weight: 800; }
.discovery-subtabs button[aria-selected="true"] { background: #fff5e8; color: #a45e38; box-shadow: inset 0 0 0 1px #ead1b3,0 4px 12px rgba(99,67,40,.08); }

.catbox-panel { min-width: 0; padding: 10px 0 0; }
.cat-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; min-width: 0; }
.cat-card {
  position: relative; min-width: 0; border: 1px solid #e8d5bd; border-radius: 18px;
  background: rgba(255,252,247,.96); box-shadow: 0 9px 24px rgba(99,67,40,.07); overflow: hidden;
}
.cat-card[data-rarity="rare"] { border-color: #a9cbc5; background: linear-gradient(145deg,#fffaf4,#edf7f4); }
.cat-card[data-rarity="special"] { border-color: #c9b3d7; background: linear-gradient(145deg,#fffaf4,#f3edf8); }
.cat-card[data-rarity="collection"] { border: 2px solid #e0ae55; background: linear-gradient(145deg,#fffaf4,#fff2cf); }
.cat-card-open { display: grid; width: 100%; min-width: 0; padding: 7px 7px 9px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.cat-card-open:focus-visible, .cat-card-favorite:focus-visible { outline: 3px solid rgba(207,116,65,.3); outline-offset: -2px; }
.cat-card-visual { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.66); overflow: hidden; }
.cat-card-visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cat-card-placeholder { width: 42%; aspect-ratio: 1; border-radius: 50%; background: rgba(213,191,164,.25); animation: cat-placeholder-pulse 1.2s ease-in-out infinite alternate; }
.cat-card-rarity { position: absolute; z-index: 2; top: 7px; left: 7px; max-width: calc(100% - 48px); padding: 3px 7px; border: 1px solid rgba(139,112,89,.24); border-radius: 999px; background: rgba(255,250,243,.94); color: #765c49; font-size: 9px; font-weight: 950; }
.cat-card[data-rarity="rare"] .cat-card-rarity { color: #477d79; }
.cat-card[data-rarity="special"] .cat-card-rarity { color: #785b91; }
.cat-card[data-rarity="collection"] .cat-card-rarity { color: #a0671f; }
.cat-card-favorite {
  position: absolute; z-index: 3; top: 4px; right: 4px; display: grid; place-items: center; width: 34px; height: 34px;
  padding: 0; border: 0; border-radius: 50%; background: rgba(255,250,247,.88); color: #aa7c72;
  box-shadow: 0 3px 9px rgba(95,59,39,.09); font-size: 19px; line-height: 1; cursor: pointer;
}
.cat-card-favorite[data-favorite="true"] { color: #dd737a; background: #fff1f1; }
.cat-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; margin-top: 6px; }
.cat-card-meta strong { flex: 0 1 auto; min-width: 0; color: #9d5c38; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.cat-card-trait { flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 2px 5px; border: 1px solid #d3dce0; border-radius: 999px; background: #f2f7f8; color: #526e73; font-size: 9px; font-weight: 900; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.cat-card-trait[data-trait="size_mini"] { border-color: #a6d8df; background: #e9f8fa; color: #357783; }
.cat-card-trait[data-trait="size_giant"] { border-color: #e6ba86; background: #fff0df; color: #a45c25; }
.cat-card-trait[data-trait="odd_eye"], .cat-card-trait[data-trait="fantasy_eye_glow"] { border-color: #c7b4dd; background: #f2ecfa; color: #725294; }
.cat-card-trait[data-trait="tailless"] { border-color: #cbb19b; background: #f6ede5; color: #775742; }
.cat-card-trait[data-trait="special_mark_heart"] { border-color: #e8b4bd; background: #fff0f3; color: #a44c61; }
.cat-card-trait[data-trait="special_mark_star"], .cat-card-trait[data-trait="premium_coat_combo"] { border-color: #e5c37b; background: #fff6dc; color: #90681b; }
.cat-card-trait[data-trait="special_mark_clover"], .cat-card-trait[data-trait="glow_mint"] { border-color: #abd1b1; background: #edf8ef; color: #4a7753; }
.cat-card-trait[data-trait="glow_lavender"] { border-color: #cab7da; background: #f3edf8; color: #755b8c; }
.cat-card-trait[data-trait="glow_moonlight"] { border-color: #afc0df; background: #edf2fb; color: #526d9d; }
.cat-card-trait[data-trait="glow_pearl"] { border-color: #cabfdc; background: linear-gradient(110deg,#f8e9ef,#edf5fb,#edf8f3); color: #725f80; }
.cat-card-trait[data-trait="collection"] { border-color: #e0ae55; background: #fff2cf; color: #94601d; }

.cat-grid-status { min-height: 20px; margin: 13px 0 7px; color: var(--muted); font-size: 12px; text-align: center; }
.load-more-cats { display: block; min-width: 150px; min-height: 44px; margin: 0 auto; padding: 9px 18px; border: 1px solid #ddbd98; border-radius: 14px; background: #fff8ef; color: #a66038; font-weight: 900; cursor: pointer; }
.catbox-empty { display: grid; justify-items: center; padding: 44px 18px; border: 1px dashed #ddc3a4; border-radius: 22px; background: rgba(255,250,243,.66); text-align: center; }
.catbox-empty img { width: 78px; height: 78px; object-fit: contain; opacity: .85; }
.catbox-empty h2 { margin: 8px 0 4px; font-size: 21px; }
.catbox-empty p { margin: 0 0 16px; color: var(--muted); font-size: 13px; }

.discovery-progress-card { margin-bottom: 15px; padding: 18px 20px; border: 1px solid #dccbbd; border-radius: 22px; background: linear-gradient(135deg,#fffaf3,#f5edf7); box-shadow: 0 11px 28px rgba(93,64,47,.07); }
.discovery-progress-card > div:first-child { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.discovery-progress-card span { color: #7a5e83; font-size: 14px; font-weight: 900; }
.discovery-progress-card strong { color: #79588b; font-size: 24px; }
.discovery-progress-card > p { margin: 6px 0 11px; color: var(--muted); font-size: 12px; }
.discovery-progress span { background: linear-gradient(90deg,#c8afd8,#8e70a5); }
.discovery-progress-card .discovery-progress-text { margin: 6px 0 0; font-size: 11px; text-align: right; }
.discovery-grid { display: grid; gap: 17px; min-width: 0; }
.discovery-group { min-width: 0; }
.discovery-group-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 3px 8px; }
.discovery-group-heading h2 { margin: 0; color: var(--ink); font-size: 18px; }
.discovery-group-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.discovery-group-heading strong { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #f2e7da; color: #9b6848; font-size: 11px; }
.discovery-group-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.discovery-card { position: relative; min-width: 0; min-height: 138px; padding: 16px 10px 13px; border: 1px solid #e7d5c0; border-radius: 18px; background: linear-gradient(145deg,rgba(255,252,247,.96),rgba(248,237,222,.88)); color: var(--ink); text-align: center; }
button.discovery-card { cursor: pointer; }
.discovery-card[data-accent="rose"] { --discovery-accent: #bd6f7e; --discovery-soft: #fff0f3; }
.discovery-card[data-accent="gold"] { --discovery-accent: #9b6d24; --discovery-soft: #fff5d8; }
.discovery-card[data-accent="green"], .discovery-card[data-accent="mint"] { --discovery-accent: #56805d; --discovery-soft: #edf8ef; }
.discovery-card[data-accent="cyan"] { --discovery-accent: #477e88; --discovery-soft: #ebf7f8; }
.discovery-card[data-accent="orange"] { --discovery-accent: #a7632d; --discovery-soft: #fff0df; }
.discovery-card[data-accent="violet"], .discovery-card[data-accent="lavender"], .discovery-card[data-accent="moonlight"] { --discovery-accent: #72588a; --discovery-soft: #f2ecf8; }
.discovery-card[data-accent="pearl"] { --discovery-accent: #725f80; --discovery-soft: linear-gradient(115deg,#f8e9ef,#edf5fb,#edf8f3); }
.discovery-card.is-unlocked { border-color: color-mix(in srgb,var(--discovery-accent,#b8885a) 38%,#e8d5bd); background: var(--discovery-soft,#fff8ef); box-shadow: 0 8px 20px rgba(87,60,42,.07); }
.discovery-card.is-locked { border-style: dashed; filter: grayscale(.34); opacity: .68; }
.discovery-symbol { position: relative; display: grid; place-items: center; width: 55px; height: 55px; margin: 0 auto 9px; border: 1px solid #dcc7ae; border-radius: 18px; background: radial-gradient(circle at 35% 32%,#fff,#f5e8d8); color: #9d795e; font-size: 25px; font-weight: 950; box-shadow: inset 0 0 0 4px rgba(255,255,255,.48); }
.discovery-symbol img { width: 43px; height: 43px; object-fit: contain; }
.discovery-card.is-locked .discovery-symbol::after { content: "?"; position: absolute; color: #8f7c70; font-size: 15px; }
.discovery-card.is-locked .discovery-symbol > * { opacity: .22; }
.discovery-card.is-unlocked .discovery-symbol { border-color: color-mix(in srgb,var(--discovery-accent,#b8885a) 32%,#dcc7ae); color: var(--discovery-accent,#9d795e); }
.discovery-card h3 { margin: 0; font-size: 14px; }
.discovery-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.discovery-new { position: absolute; top: 7px; right: 7px; padding: 3px 6px; border-radius: 999px; background: #e9918c; color: white; font-size: 8px; font-weight: 950; }
.coat-book-progress { background: linear-gradient(135deg,#fffaf3,#f5eee2); }
.coat-book-progress .discovery-progress span { background: linear-gradient(90deg,#e6b36f,#bd7548); }
.coat-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.coat-card {
  position: relative; display: grid; align-content: start; min-width: 0; min-height: 130px; padding: 14px 10px 12px;
  border: 1px solid #e5d0b6; border-radius: 17px; background: linear-gradient(145deg,#fffdf9,#f7ecdc); color: var(--ink); text-align: left;
}
button.coat-card { cursor: pointer; }
.coat-card.is-locked { border-style: dashed; opacity: .72; }
.coat-swatches { display: flex; min-height: 38px; margin-bottom: 10px; overflow: hidden; border: 3px solid rgba(255,255,255,.8); border-radius: 13px; box-shadow: 0 3px 10px rgba(91,60,38,.09); }
.coat-swatch { flex: 1 1 0; min-width: 0; }
.coat-card.is-locked .coat-swatches { filter: blur(5px) saturate(.55); transform: scale(.96); }
.coat-card h3 { margin: 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.coat-card p { margin: 5px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.secret-progress { background: linear-gradient(135deg,#fffaf3,#f1e9df); }
.secret-progress .discovery-progress span { background: linear-gradient(90deg,#baa38d,#856e5b); }
.secret-records-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; min-width: 0; }
.secret-card {
  position: relative; min-width: 0; min-height: 170px; padding: 17px 13px 14px; overflow: hidden;
  border: 1px solid #dfcab2; border-radius: 19px; background: linear-gradient(148deg,#fffaf3,#f2e6d8); color: var(--ink); text-align: left;
}
button.secret-card { cursor: pointer; }
.secret-card.is-locked { border-style: dashed; background: linear-gradient(148deg,#f8f1e8,#eee5da); }
.secret-seal { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 10px; border: 1px solid #d7b995; border-radius: 50% 48% 52% 46%; background: #f5dfc2; color: #986949; font-size: 21px; transform: rotate(-4deg); }
.secret-card.is-locked .secret-seal { background: #e7ddd1; color: #93867a; filter: grayscale(.45); }
.secret-card h3 { margin: 0; font-size: 15px; }
.secret-card p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.secret-reward {
  display: inline-block; max-width: 100%; margin-top: 9px; overflow: hidden; padding: 3px 7px;
  border: 1px solid #e1c08e; border-radius: 999px; background: #fff1cf; color: #93631e;
  font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; overflow-wrap: normal;
}
.catbox-back-to-top { position: fixed; z-index: 18; right: max(15px,env(safe-area-inset-right)); bottom: max(18px,env(safe-area-inset-bottom)); min-height: 40px; padding: 8px 12px; border: 1px solid #dcbf9e; border-radius: 999px; background: rgba(255,250,243,.94); color: #9b603c; box-shadow: 0 8px 24px rgba(81,52,35,.16); font-size: 12px; font-weight: 900; cursor: pointer; }

@keyframes cat-placeholder-pulse { to { opacity: .45; transform: scale(.92); } }

.catbox-detail-dialog { width: min(510px,calc(100% - 26px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 20px; border: 2px solid var(--line); border-radius: 25px; background: #fffaf3; color: var(--ink); box-shadow: 0 28px 90px rgba(63,42,28,.28); }
.title-dialog { width: min(470px,calc(100% - 26px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 20px; border: 2px solid var(--line); border-radius: 25px; background: #fffaf3; color: var(--ink); box-shadow: 0 28px 90px rgba(63,42,28,.28); }
.title-dialog::backdrop { background: rgba(67,48,37,.42); backdrop-filter: blur(3px); }
.title-dialog-note { margin: 12px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.title-options { display: grid; gap: 7px; margin: 12px 0 18px; }
.title-option { display: flex; align-items: center; gap: 10px; min-height: 47px; padding: 9px 12px; border: 1px solid #e5d1b8; border-radius: 14px; background: #fffdf9; cursor: pointer; }
.title-option input { width: 18px; height: 18px; margin: 0; accent-color: #ca7546; }
.title-option span {
  flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 900; text-overflow: ellipsis;
  white-space: nowrap; word-break: keep-all; overflow-wrap: normal;
}
.title-option small { margin-left: auto; color: var(--muted); font-size: 10px; }
.catbox-detail-dialog::backdrop { background: rgba(67,48,37,.42); backdrop-filter: blur(3px); }
.catbox-detail-visual { position: relative; display: grid; place-items: center; min-height: 270px; margin: 14px 0 10px; border-radius: 20px; background: radial-gradient(circle,#fff 0 34%,#f8eee1 78%); overflow: hidden; }
.catbox-detail-visual img { display: block; width: min(330px,78vw); max-height: 330px; object-fit: contain; }
.catbox-detail-loading { position: absolute; color: var(--muted); font-size: 12px; font-weight: 800; }
.catbox-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0; }
.catbox-detail-heading strong { color: #aa673e; font-size: 14px; }
.catbox-detail-rarity { padding: 5px 10px; border: 1px solid #dfc7ab; border-radius: 999px; background: #f8eee1; font-size: 11px; font-weight: 950; }
.dialog-actions { display: flex; align-items: center; gap: 8px; }
.dialog-actions > * { flex: 1 1 0; }
.favorite-action { min-height: 44px; padding: 9px 16px; border: 1px solid #e5b8ba; border-radius: 13px; background: #fff2f2; color: #a8515a; font-weight: 900; cursor: pointer; }
.favorite-action[data-favorite="true"] { border-color: #df9297; background: #ffe8e9; color: #b84650; }

@media (max-width: 700px) {
  .cat-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .discovery-group-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .coat-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 430px) {
  .catbox-view { padding-bottom: 18px; }
  .catbox-header { grid-template-columns: 70px minmax(0,1fr) 42px; gap: 7px; margin-bottom: 9px; padding: 9px 10px; border-radius: 18px; }
  .catbox-header > img { width: 40px; height: 40px; }
  .catbox-header p { font-size: 9px; }
  .catbox-header h1 { font-size: 24px; }
  .catbox-back { min-height: 44px; padding: 7px 8px; font-size: 12px; }
  .catbox-score-hero { margin-bottom: 8px; padding: 15px 16px 13px; border-radius: 19px; }
  .score-hero-heading span { font-size: 12px; }
  .score-hero-heading strong { font-size: 38px; }
  .score-hero-heading img { width: 52px; height: 52px; }
  .catbox-summary { gap: 6px; margin-bottom: 8px; }
  .catbox-summary > button { min-height: 65px; padding: 8px; border-radius: 14px; }
  .catbox-summary span { font-size: 9px; }
  .catbox-summary strong { font-size: 15px; }
  .catbox-nav-sticky { gap: 5px; padding-bottom: 6px; }
  .catbox-tabs button { min-height: 44px; }
  .catbox-toolbar { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 5px; padding: 6px; }
  .catbox-toolbar label { font-size: 9px; }
  .catbox-toolbar select { min-height: 36px; padding-inline: 6px 20px; font-size: 10.5px; }
  .favorite-only-toggle { min-height: 44px; padding: 5px 7px; font-size: 10px !important; }
  .favorite-only-toggle input { width: 15px; height: 15px; }
  .discovery-subtabs { gap: 4px; padding: 4px; }
  .discovery-subtabs button { min-height: 44px; padding-inline: 2px; font-size: 10.5px; }
  .catbox-panel { padding-top: 7px; }
  .cat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .cat-card { border-radius: 14px; }
  .cat-card-open { padding: 5px 5px 7px; }
  .cat-card-visual { border-radius: 10px; }
  .cat-card-rarity { top: 5px; left: 5px; padding: 2px 5px; font-size: 8px; }
  .cat-card-favorite { top: 2px; right: 2px; width: 32px; height: 32px; font-size: 18px; }
  .cat-card-meta { display: grid; gap: 3px; }
  .cat-card-meta strong { font-size: 9.5px; }
  .cat-card-trait { justify-self: start; max-width: 100%; font-size: 8.5px; }
  .discovery-progress-card { padding: 14px 15px; border-radius: 18px; }
  .discovery-group-heading h2 { font-size: 16px; }
  .discovery-group-heading p { max-width: 250px; font-size: 10px; }
  .discovery-group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .coat-card-grid, .secret-records-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .coat-card { min-height: 120px; padding: 11px 8px 10px; }
  .secret-card { min-height: 158px; padding: 14px 10px 12px; }
  .discovery-card { min-height: 127px; padding: 13px 7px 11px; border-radius: 15px; }
  .discovery-symbol { width: 50px; height: 50px; font-size: 23px; }
  .catbox-back-to-top span { display: none; }
  .catbox-back-to-top { width: 44px; height: 44px; padding: 0; }
  .catbox-detail-dialog {
    width: 100%; max-width: none; max-height: calc(100vh - var(--xhs-overlay-clearance-top));
    max-height: calc(100dvh - var(--xhs-overlay-clearance-top)); margin: auto 0 0;
    padding: 17px 14px max(17px,env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
  }
  .title-dialog { width: 100%; max-width: none; max-height: 88dvh; margin: auto 0 0; padding: 17px 14px max(17px,env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; }
  .catbox-detail-visual { min-height: 235px; }
  .catbox-detail-visual img { width: min(290px,82vw); max-height: 285px; }
}

@media (max-width: 360px) {
  .catbox-summary strong { font-size: 14px; }
  .cat-card-meta strong { font-size: 9px; }
  .cat-card-trait { font-size: 8px; }
  .discovery-group-heading p { max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-card-placeholder { animation: none; }
  .score-progress span, .discovery-progress span { transition: none; }
}

.trait-chip[data-trait="glow_sakura"],.cat-card-trait[data-trait="glow_sakura"]{background:#fbece6;border-color:#daab9f;color:#995f56;}

/* PC-TX-T0B-01: saved detail only; standard viewport/safe-area, no host overlay positions. */
#catbox-detail-dialog { box-sizing:border-box; width:calc(100% - 16px); max-width:560px; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); margin:auto; padding:14px; border-radius:24px; overflow:hidden; }
#catbox-detail-dialog[open] { display:flex; flex-direction:column; }
#catbox-detail-dialog > .dialog-heading { flex:none; gap:8px; padding-bottom:8px; }
#catbox-detail-dialog .dialog-heading > div { min-width:0; }
#catbox-detail-dialog h2 { overflow-wrap:anywhere; font-size:clamp(20px,5vw,28px); line-height:1.3; }
#catbox-detail-dialog .dialog-close { flex:none; min-width:44px; min-height:44px; }
#catbox-detail-dialog .catbox-detail-scroll { min-height:0; overflow:auto; overscroll-behavior:contain; padding-right:3px; }
#catbox-detail-dialog .catbox-detail-visual { min-height:0; height:auto; display:flex; flex-direction:column; justify-content:center; padding:10px; gap:8px; margin:4px 0 12px; }
#catbox-detail-image { width:min(100%,260px); height:230px; max-height:none; object-fit:contain; flex:none; }
#catbox-detail-image[hidden] { display:none; }
#catbox-detail-dialog .catbox-detail-loading { position:static; display:flex; align-items:center; justify-content:center; min-height:230px; padding:12px; text-align:center; box-sizing:border-box; line-height:1.6; }
#catbox-detail-dialog .catbox-detail-loading[hidden], #catbox-detail-retry[hidden] { display:none; }
#catbox-detail-retry { min-height:44px; padding:8px 18px; border:2px solid var(--line); border-radius:14px; background:#fffaf3; color:var(--ink); font:inherit; }
#catbox-detail-dialog .touch-hint { margin:0; text-align:center; }
#catbox-detail-dialog .catbox-detail-heading { flex-wrap:wrap; }
#catbox-detail-dialog .detail-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#catbox-detail-dialog .detail-list > div { min-width:0; padding:12px; overflow-wrap:anywhere; }
#catbox-detail-dialog > .dialog-actions { flex:none; flex-wrap:wrap; padding-top:10px; padding-bottom:env(safe-area-inset-bottom,0px); background:#fffaf3; }
#catbox-detail-dialog button { min-height:44px; }
#catbox-detail-dialog .dialog-actions > button { min-width:0; padding:9px 6px; white-space:normal; line-height:1.3; }
@media(max-width:360px) { #catbox-detail-dialog { padding:10px; } #catbox-detail-image, #catbox-detail-dialog .catbox-detail-loading { height:200px; min-height:200px; } #catbox-detail-dialog .dialog-actions { gap:5px; } }
#catbox-detail-dialog .catbox-detail-loading { padding-bottom:64px; }
#catbox-detail-retry { position:absolute; top:185px; left:50%; transform:translateX(-50%); white-space:nowrap; }
@media(max-width:360px) { #catbox-detail-retry { top:155px; } }