/* Scoped to the code utility: never changes other guide cards. */
.codes-page #codes-list, .codes-page #codes-leveling, .codes-page #codes-maybe { scroll-margin-top:110px; }
.codes-page .codes-review-note { color:#4b5b73; font-size:.88rem; line-height:1.7; }
.codes-page .codes-freshness { display:flex; flex-wrap:wrap; gap:6px 16px; margin:12px 0; font-size:.87rem; line-height:1.6; color:#4b5b73; }
.codes-page .codes-freshness strong { color:#175440; }
.codes-page .codes-freshness a { color:#235ba0; text-decoration:underline; text-underline-offset:3px; }
.codes-page details.codes-personal:not([open]) { padding:0 14px; }
.codes-page details.codes-personal>summary { min-height:48px; padding:12px 0; box-sizing:border-box; cursor:pointer; font-weight:750; font-size:.9rem; line-height:1.6; }
.codes-page details.codes-personal[open]>.codes-personal-head { margin-top:8px; }
.codes-page details.codes-personal>summary:focus-visible { outline:3px solid #416dde; outline-offset:3px; border-radius:8px; }
body.dark-mode.codes-page .codes-freshness { color:#c2d1e7; }
body.dark-mode.codes-page .codes-freshness strong { color:#a9f0cd; }
body.dark-mode.codes-page .codes-freshness a { color:#9bd5ff; }
.codes-page .codes-disputed-link { display:inline-flex; align-items:center; min-height:44px; margin:6px 12px; }
.codes-page .codes-duration-note, .codes-page .codes-source-difference { display:block; color:#52617a; font-size:.82rem; line-height:1.6; margin:6px 0 0; }
.codes-page .codes-copy-result { grid-column:1/-1; margin:0; padding:10px 12px; background:#eaf4ff; border-left:3px solid #3170bf; color:#204770; line-height:1.6; font-size:.84rem; overflow-wrap:anywhere; }
.codes-page .codes-bulk-action { display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.codes-page .codes-bulk-action span { color:#52617a; font-size:.85rem; }
.codes-page #codes-leveling { padding:20px; background:linear-gradient(120deg,#edf7ff,#edfaf1); border-color:#8ebdaf; }
.codes-page #codes-level-title { margin:0; padding:0; background:none; border:0; font-size:1.2rem; line-height:1.5; color:#164b40; }
.codes-page #codes-level-title:before,.codes-page #codes-level-title:after { display:none; }
.codes-page #codes-leveling p { margin:8px 0 14px; }
.codes-page #codes-level-form label { display:block; font-weight:800; margin:0 0 7px; }
.codes-page .codes-level-input { display:flex; gap:10px; max-width:560px; }
.codes-page #codes-level { min-width:0; flex:1; width:100%; min-height:46px; box-sizing:border-box; border:1px solid #899ebd; border-radius:12px; background:#fff; color:#18344f; padding:10px 14px; font:inherit; }
.codes-page .codes-level-input button { white-space:nowrap; }
.codes-page .codes-sea-links { display:flex; flex-wrap:wrap; gap:8px 16px; margin:12px 0 18px; }
.codes-page .codes-sea-links a { display:inline-flex; align-items:center; min-height:44px; font-weight:750; color:#185c8c; }
.codes-page .codes-result-help { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0 0; }
.codes-page .codes-result-help>div { border:1px solid #b7c7dd; border-radius:14px; padding:14px; background:#f4f7fc; color:#233d5d; }
.codes-page .codes-result-help p { font-size:.88rem; margin:8px 0 0; line-height:1.7; }
.codes-page #codes-level:focus-visible, .codes-page .codes-btn:focus-visible { outline:3px solid #416dde; outline-offset:3px; }
body.dark-mode.codes-page .codes-review-note, body.dark-mode.codes-page .codes-duration-note, body.dark-mode.codes-page .codes-source-difference, body.dark-mode.codes-page .codes-bulk-action span { color:#c2d1e7; }
body.dark-mode.codes-page .codes-copy-result { background:#1a3551; color:#deefff; border-color:#8abcfa; }
body.dark-mode.codes-page #codes-leveling { background:linear-gradient(120deg,#183044,#193e33); color:#edf7ff; border-color:#529b90; }
body.dark-mode.codes-page #codes-level-title { color:#b7f2d8; }
body.dark-mode.codes-page #codes-level { background:#122138; color:#edf7ff; border-color:#8babc2; }
body.dark-mode.codes-page #codes-level::placeholder { color:#b9cce1; opacity:1; }
body.dark-mode.codes-page .codes-sea-links a { color:#9bd5ff; }
body.dark-mode.codes-page .codes-result-help>div { background:#1a2e46; border-color:#657e9d; color:#e2edff; }
body.dark-mode.codes-page .site-main .codes-btn.primary { background:#285bbb; border-color:#739beb; color:#fff; }
@media(max-width:650px) {
  .codes-page .codes-result-help { grid-template-columns:1fr; }
  .codes-page .codes-level-input { flex-direction:column; }
  .codes-page #codes-leveling { padding:15px; }
  .codes-page .codes-bulk-action { align-items:flex-start; }
}
.codes-personal[hidden], .codes-empty[hidden], .codes-reset-confirm[hidden], .codes-used-toggle[hidden] { display:none !important; }
.codes-personal { margin-top:18px; padding:18px; border:1px solid #b9ccec; border-radius:18px; background:linear-gradient(120deg,#eef5ff,#f4f4ff); color:#152746; }
.codes-personal-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#codes-personal-title { margin:0; padding:0; border:0; min-height:0; font-size:1.14rem; line-height:1.45; color:inherit; background:none; }
#codes-personal-title::before, #codes-personal-title::after { display:none; }
#codes-personal-title .guide-section-link-btn { display:none; }
#codes-personal { scroll-margin-top:110px; }
.codes-personal p { margin:7px 0 0; line-height:1.65; font-size:.9rem; }
.codes-personal .codes-progress { display:block; margin-top:10px; font-weight:800; }
.codes-personal-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
.codes-personal button, .codes-empty button { min-height:44px; padding:10px 14px; border:1px solid #a9bcda; border-radius:12px; background:#fff; color:#173a68; font:inherit; font-weight:700; cursor:pointer; }
.codes-personal .codes-hide-label { display:flex; align-items:center; gap:9px; min-height:44px; font-weight:750; cursor:pointer; }
.codes-personal input { width:19px; height:19px; accent-color:#2454aa; }
.codes-personal .codes-reset { font-size:.86rem; }
.codes-reset-confirm { padding:12px; margin-top:12px; border:1px solid #ba7934; border-radius:12px; }
.codes-reset-confirm p { margin:0 0 8px; }
.codes-personal #codes-storage-status { color:#596780; }
.codes-personal #codes-storage-status.is-warning { color:#985600; font-weight:750; }
.site-main .codes-item[data-scope="active"] { grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) 124px; }
.site-main .codes-col { min-width:0; }
.site-main .codes-item code { display:inline-block; overflow-wrap:anywhere; max-width:100%; }
.site-main .codes-item .act { display:grid; gap:6px; }
.site-main .codes-item .codes-copy { min-height:44px; }
.codes-used-toggle { min-height:44px; padding:8px 6px; background:#f4f7fc; border:1px solid #bcc9dc; border-radius:10px; color:#405370; cursor:pointer; font:inherit; font-size:.83rem; font-weight:750; }
.codes-used-toggle[aria-pressed="true"] { color:#166248; background:#e7f7ef; border-color:#53a77f; }
.site-main .codes-item.is-used { border-color:#8cb5a0; }
.codes-empty { margin:12px 0; padding:18px; border-radius:14px; background:#f1f5fb; color:#203a5e; }
.codes-empty p { margin:0 0 12px; }
.codes-personal button:focus-visible, .codes-used-toggle:focus-visible, .codes-empty button:focus-visible { outline:3px solid #416dde; outline-offset:3px; }
body.dark-mode .codes-personal { background:linear-gradient(120deg,#15283e,#222540); color:#e6efff; border-color:#4e6386; }
body.dark-mode .codes-personal button, body.dark-mode .codes-empty button, body.dark-mode .codes-used-toggle { background:#1a2a43; border-color:#617694; color:#e2eaff; }
body.dark-mode .codes-used-toggle[aria-pressed="true"] { background:#173c30; border-color:#64b694; color:#a9f0cd; }
body.dark-mode .codes-personal #codes-storage-status { color:#bccbe2; }
body.dark-mode .codes-personal #codes-storage-status.is-warning { color:#ffd48f; }
body.dark-mode .codes-empty { background:#1a2a43; color:#e2eaff; }
body.dark-mode.codes-page .site-main .guide-detail-card { background:#162238; border-color:#405473; color:#e1eaff; }
body.dark-mode.codes-page .site-main .codes-hero { background:#1b2e4d; border-color:#405473; }
body.dark-mode.codes-page .site-main .codes-lead,
body.dark-mode.codes-page .site-main .codes-safe-note,
body.dark-mode.codes-page .site-main .codes-count,
body.dark-mode.codes-page .site-main .codes-summary-card span { color:#c9d7eb; opacity:1; }
body.dark-mode.codes-page .site-main .codes-search::placeholder { color:#b5c5dd; opacity:1; }
body.dark-mode.codes-page .site-main .guide-detail-card h2 { color:#edf3ff; }
.site-main .codes-toast { max-width:calc(100vw - 32px); width:max-content; box-sizing:border-box; border-radius:14px; text-align:center; }
@media(max-width:650px) {
  .codes-personal { padding:14px; }
  .codes-personal-head { display:block; }
  .codes-personal-head>button { margin-top:10px; width:100%; }
  .codes-personal-actions { justify-content:space-between; }
  .site-main .codes-item[data-scope="active"] { grid-template-columns:minmax(0,1fr); }
  .site-main .codes-item[data-scope="active"] .act { grid-template-columns:1fr 1fr; }
}