/* === NSO Library Design System === */

:root {
  --nso-primary: #f57c00; --nso-primary-hover: #e65100; --nso-primary-light: #fff3e0; --nso-primary-glow: rgba(245,124,0,0.2);
  --nso-surface: #fff; --nso-bg: #f8f8f8; --nso-border: #e5e5e5; --nso-border-hover: #d0d0d0;
  --nso-text: #222; --nso-text-secondary: #666; --nso-text-muted: #999;
  --nso-gold: #B8860B; --nso-green: #1F7A3E; --nso-red: #d32f2f;
  --nso-radius: 8px; --nso-radius-sm: 6px; --nso-radius-pill: 20px;
  --nso-shadow: 0 2px 8px rgba(0,0,0,0.06); --nso-shadow-lg: 0 4px 16px rgba(0,0,0,0.1);
  --nso-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --nso-transition: 0.2s ease;
}

/* === Theme Override: full-width on NSO pages === */
body.nbnso-page #secondary, body.nbnso-page .sidebar, body.nbnso-page aside.widget-area { display: none !important; }
body.nbnso-page #primary, body.nbnso-page .content-area, body.nbnso-page .site-content > .container { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; }
body.nbnso-page .site-content { padding: 0; }

/* === Base === */
.nso-library { font-family: var(--nso-font); color: var(--nso-text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.nso-library *, .nso-library *::before, .nso-library *::after { box-sizing: border-box; }
.nso-library a { color: var(--nso-primary); text-decoration: none; transition: color var(--nso-transition); }
.nso-library a:hover { color: var(--nso-primary-hover); }

/* === Layout === */
.nbnso-wrap { max-width: 1160px; margin: 0 auto; padding: 2rem 1.5rem; }

/* === Hero === */
.nbnso-hero { text-align: center; padding: 3rem 1rem 2rem; background: linear-gradient(180deg, var(--nso-primary-light) 0%, var(--nso-bg) 100%); border-radius: 0 0 var(--nso-radius) var(--nso-radius); margin-bottom: 2rem; }
.nbnso-hero h1 { font-size: 2rem; margin: 0 0 0.5rem; color: var(--nso-text); }
.nbnso-hero p { color: var(--nso-text-secondary); margin: 0 0 1.5rem; font-size: 1.05rem; }
.nbnso-hero-compact { padding: 1.25rem 1rem; margin-bottom: 1.5rem; }
.nbnso-hero-compact h1 { font-size: 1.3rem; margin-bottom: 0.75rem; }
.nbnso-hero-compact p { display: none; }

/* === Search === */
form.nbnso-search { max-width: 600px; margin: 0 auto 1.5rem; position: relative; }
.nbnso-search-box { display: flex; align-items: center; gap: 0.5rem; background: var(--nso-surface); border: 2px solid var(--nso-border); border-radius: var(--nso-radius); padding: 0.5rem 0.75rem; transition: border-color var(--nso-transition), box-shadow var(--nso-transition); }
.nbnso-search-box:focus-within { border-color: var(--nso-primary); box-shadow: 0 0 0 3px var(--nso-primary-glow); }
.nbnso-search-icon { font-size: 1.2rem; color: var(--nso-text-muted); flex-shrink: 0; }
.nbnso-search-box input { flex: 1; border: none; outline: none; font-size: 1rem; background: transparent; color: var(--nso-text); min-width: 0; }
.nbnso-search-box input::placeholder { color: var(--nso-text-muted); }
.nbnso-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--nso-primary); color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: var(--nso-radius-sm); cursor: pointer; font-weight: 600; font-size: 0.95rem; transition: background var(--nso-transition); min-height: 38px; }
.nbnso-btn:hover { background: var(--nso-primary-hover); }

/* === Autocomplete === */
.nbnso-ac { position: absolute; top: 100%; left: 0; right: 0; background: var(--nso-surface); border: 1px solid var(--nso-border); border-radius: var(--nso-radius-sm); box-shadow: var(--nso-shadow-lg); z-index: 100; max-height: 380px; overflow-y: auto; margin-top: 4px; display: none; }
.nbnso-ac-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; cursor: pointer; transition: background var(--nso-transition); text-decoration: none; color: var(--nso-text); }
.nbnso-ac-item:hover, .nbnso-ac-item.active { background: var(--nso-primary-light); }
.nbnso-ac-search { font-weight: 600; border-bottom: 1px solid var(--nso-border); color: var(--nso-primary); }
.nbnso-ac-search-icon { flex-shrink: 0; }
.nbnso-ac-thumb { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; flex-shrink: 0; border-radius: 4px; background: var(--nso-bg); }
.nbnso-ac-thumb-fb { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; border-radius: 4px; background: var(--nso-bg); }
.nbnso-ac-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nbnso-ac-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.9rem; }
.nbnso-ac-sub { color: var(--nso-text-muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbnso-ac-badge { font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--nso-bg); color: var(--nso-text-secondary); font-weight: 600; text-transform: uppercase; flex-shrink: 0; letter-spacing: 0.02em; }
.nbnso-ac-empty { padding: 0.75rem; text-align: center; color: var(--nso-text-muted); font-size: 0.9rem; }
.nbnso-ac-loading { padding: 0.75rem; text-align: center; color: var(--nso-text-muted); font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.nbnso-ac-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--nso-border); border-top-color: var(--nso-primary); border-radius: 50%; animation: nbnso-spin 0.6s linear infinite; }
@keyframes nbnso-spin { to { transform: rotate(360deg); } }

/* === Popular Chips === */
.nbnso-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; }
.nbnso-chip { display: inline-block; padding: 0.35rem 0.85rem; background: var(--nso-primary-light); border-radius: var(--nso-radius-pill); font-size: 0.85rem; color: var(--nso-primary-hover); text-decoration: none; transition: background var(--nso-transition); }
.nbnso-chip:hover { background: #ffe0b2; color: var(--nso-primary-hover); }

/* === Topbar === */
.nbnso-topbar { position: sticky; top: 0; z-index: 90; background: var(--nso-surface); border-bottom: 1px solid var(--nso-border); padding: 0.6rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
.nbnso-topbar .nbnso-search { margin: 0; max-width: 320px; flex-shrink: 1; }
.nbnso-topbar .nbnso-search-box { padding: 0.35rem 0.6rem; border-width: 1px; }
.nbnso-topbar .nbnso-search-box input { font-size: 0.9rem; }
.nbnso-topbar-title { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.nbnso-topbar-title a { color: var(--nso-text); }

/* === Breadcrumb === */
.nbnso-crumbs { font-size: 0.85rem; color: var(--nso-text-muted); margin-bottom: 1rem; }
.nbnso-crumbs a { color: var(--nso-text-secondary); }
.nbnso-crumbs a:hover { color: var(--nso-primary); }
.nbnso-crumbs span.sep { margin: 0 0.4rem; color: var(--nso-border); }

/* === Category Grid === */
.nbnso-catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.nbnso-cat { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--nso-surface); border: 1px solid var(--nso-border); border-radius: var(--nso-radius); text-decoration: none; color: inherit; transition: box-shadow var(--nso-transition), border-color var(--nso-transition); }
.nbnso-cat:hover { box-shadow: var(--nso-shadow); border-color: var(--nso-primary); }
.nbnso-cat-icon { font-size: 1.5rem; flex-shrink: 0; }
.nbnso-cat-body { flex: 1; min-width: 0; }
.nbnso-cat-body b { display: block; font-size: 1rem; }
.nbnso-cat-body small { color: var(--nso-text-muted); font-size: 0.8rem; }
.nbnso-cat-count { font-weight: 600; color: var(--nso-primary); min-width: 2rem; text-align: right; flex-shrink: 0; }

/* === Card Grid === */
.nbnso-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.6rem; }
.nbnso-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--nso-surface); border: 1px solid var(--nso-border); border-radius: var(--nso-radius-sm); text-decoration: none; color: inherit; transition: border-color var(--nso-transition), box-shadow var(--nso-transition); }
.nbnso-card:hover { border-color: var(--nso-primary); box-shadow: var(--nso-shadow); }
.nbnso-card-icon { font-size: 1.25rem; width: 2rem; text-align: center; flex-shrink: 0; }
.nbnso-card-body { flex: 1; min-width: 0; }
.nbnso-card-body b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nbnso-card-body small { color: var(--nso-text-muted); font-size: 0.8rem; }
.nbnso-card-arrow { color: var(--nso-border-hover); flex-shrink: 0; transition: color var(--nso-transition); }
.nbnso-card:hover .nbnso-card-arrow { color: var(--nso-primary); }

/* === Browse Header + Filters === */
.nbnso-browse-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.nbnso-browse-header h1 { font-size: 1.5rem; margin: 0; }
.nbnso-browse-header .nbnso-count { font-size: 0.9rem; color: var(--nso-text-muted); }
.nbnso-browse-header .nbnso-sort { margin-left: auto; }
.nbnso-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.nbnso-filter-group select, .nbnso-filter-group input { padding: 0.4rem 0.6rem; border: 1px solid var(--nso-border); border-radius: var(--nso-radius-sm); font-size: 0.9rem; background: var(--nso-surface); color: var(--nso-text); }

/* === Pagination === */
.nbnso-pagination { display: flex; justify-content: center; align-items: center; gap: 0.25rem; margin-top: 2rem; flex-wrap: wrap; }
.nbnso-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 0.5rem; border: 1px solid var(--nso-border); border-radius: var(--nso-radius-sm); text-decoration: none; color: var(--nso-text); font-size: 0.9rem; transition: all var(--nso-transition); }
.nbnso-page-link:hover { border-color: var(--nso-primary); color: var(--nso-primary); }
.nbnso-page-link.active { background: var(--nso-primary); color: #fff; border-color: var(--nso-primary); font-weight: 600; }
.nbnso-page-link.disabled { color: var(--nso-border-hover); pointer-events: none; }

/* === Detail Page === */
.nbnso-detail { background: var(--nso-surface); border: 1px solid var(--nso-border); border-radius: var(--nso-radius); padding: 2rem; }
.nbnso-detail-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.nbnso-detail-header h1 { font-size: 1.6rem; margin: 0; line-height: 1.3; }
.nbnso-detail-header h1 small { display: block; font-size: 0.85rem; font-weight: 400; color: var(--nso-text-secondary); margin-top: 0.25rem; }

/* === Tags/Badges === */
.nbnso-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.nbnso-tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; background: var(--nso-bg); color: var(--nso-text-secondary); }
.nbnso-tag-npc { background: #e3f2fd; color: #1565c0; }
.nbnso-tag-boss { background: #fce4ec; color: #c62828; }
.nbnso-tag-quai { background: #fff3e0; color: #e65100; }
.nbnso-tag-item { background: #f3e5f5; color: #7b1fa2; }
.nbnso-tag-map { background: #e8f5e9; color: var(--nso-green); }
.nbnso-tag-skill { background: #ede7f6; color: #4527a0; }
.nbnso-tag-quest { background: #fff8e1; color: var(--nso-gold); }
.nbnso-tag-store { background: #e0f2f1; color: #00695c; }
.nbnso-tag-class { background: #fbe9e7; color: #bf360c; }

/* === Stats Grid === */
.nbnso-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; margin-bottom: 1.5rem; }
.nbnso-stat-label { font-size: 0.85rem; color: var(--nso-text-muted); padding: 0.35rem 0; border-bottom: 1px solid var(--nso-bg); }
.nbnso-stat-value { font-weight: 600; padding: 0.35rem 0; border-bottom: 1px solid var(--nso-bg); }

/* === Section Headings === */
.nbnso-h2 { font-size: 1.35rem; margin: 2rem 0 1rem; display: flex; align-items: center; gap: 0.5rem; }
.nbnso-h2-center { justify-content: center; }
.nbnso-h3 { font-size: 1.1rem; margin: 1.5rem 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.nbnso-count { font-size: 0.8rem; color: var(--nso-text-muted); font-weight: 400; }

/* === Relation Cards === */
.nbnso-rel-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid var(--nso-border); border-radius: var(--nso-radius-sm); text-decoration: none; color: inherit; transition: border-color var(--nso-transition); }
.nbnso-rel-card:hover { border-color: var(--nso-primary); }
.nbnso-rel-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.nbnso-rel-body { flex: 1; min-width: 0; }
.nbnso-rel-body b { display: block; font-size: 0.95rem; }
.nbnso-rel-body small { color: var(--nso-text-muted); font-size: 0.8rem; }

/* === Data Table === */
.nbnso-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch; }
.nbnso-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.nbnso-table th { text-align: left; padding: 0.6rem 0.75rem; background: var(--nso-bg); border-bottom: 2px solid var(--nso-border); font-weight: 600; white-space: nowrap; }
.nbnso-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--nso-border); }
.nbnso-table tbody tr:nth-child(even) { background: var(--nso-bg); }
.nbnso-table tbody tr:hover { background: var(--nso-primary-light); }
.nbnso-table a { font-weight: 500; }

/* === Icon Placeholder === */
.nbnso-icon-placeholder { width: 48px; height: 48px; border-radius: var(--nso-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700; flex-shrink: 0; background: var(--nso-bg); color: var(--nso-text-secondary); }
.nbnso-icon-placeholder.npc { background: #e3f2fd; color: #1565c0; }
.nbnso-icon-placeholder.boss { background: #fce4ec; color: #c62828; }
.nbnso-icon-placeholder.quai { background: #fff3e0; color: #e65100; }
.nbnso-icon-placeholder.item { background: #f3e5f5; color: #7b1fa2; }
.nbnso-icon-placeholder.map { background: #e8f5e9; color: var(--nso-green); }
.nbnso-icon-placeholder.skill { background: #ede7f6; color: #4527a0; }
.nbnso-icon-placeholder.quest { background: #fff8e1; color: var(--nso-gold); }
.nbnso-icon-placeholder.store { background: #e0f2f1; color: #00695c; }
.nbnso-icon-placeholder.class { background: #fbe9e7; color: #bf360c; }

/* === Empty State === */
.nbnso-empty { text-align: center; padding: 3rem 1rem; color: var(--nso-text-muted); }
.nbnso-empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.nbnso-empty b { display: block; margin-bottom: 0.5rem; color: var(--nso-text-secondary); font-size: 1.05rem; }

/* === Footer === */
.nbnso-foot { text-align: center; color: var(--nso-text-muted); font-size: 0.8rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--nso-border); }

/* === Search Results === */
.nbnso-results-section { margin-bottom: 2rem; }
.nbnso-results-section-title { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--nso-text-muted); padding-bottom: 0.5rem; border-bottom: 1px solid var(--nso-border); margin-bottom: 0.75rem; }

/* === Store Item === */
.nbnso-store-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--nso-border); }
.nbnso-store-item:last-child { border-bottom: none; }
.nbnso-store-price { margin-left: auto; font-weight: 600; color: var(--nso-gold); white-space: nowrap; flex-shrink: 0; }

/* === Quest Steps === */
.nbnso-quest-steps { list-style: none; padding: 0; margin: 0; counter-reset: qstep; }
.nbnso-quest-steps li { counter-increment: qstep; position: relative; padding: 0.75rem 0.75rem 0.75rem 2.75rem; border-bottom: 1px solid var(--nso-border); }
.nbnso-quest-steps li::before { content: counter(qstep); position: absolute; left: 0.75rem; top: 0.75rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--nso-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }
.nbnso-quest-steps li:last-child { border-bottom: none; }

/* === Level / Skill Table === */
.nbnso-level-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.nbnso-level-table th { background: var(--nso-bg); padding: 0.4rem 0.6rem; text-align: center; font-weight: 600; border: 1px solid var(--nso-border); }
.nbnso-level-table td { padding: 0.4rem 0.6rem; text-align: center; border: 1px solid var(--nso-border); }
.nbnso-level-table tbody tr:nth-child(even) { background: var(--nso-bg); }

/* === Map Entity List === */
.nbnso-map-entities { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.5rem; }

/* === Note Box === */
.nbnso-note { padding: 0.75rem 1rem; border-radius: var(--nso-radius-sm); background: #fff8e1; border-left: 3px solid var(--nso-gold); font-size: 0.9rem; color: #5d4037; margin-bottom: 1.5rem; }
.nbnso-note-warn { background: #fce4ec; border-left-color: var(--nso-red); color: #b71c1c; }

/* === Accessibility === */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.nso-library :focus-visible { outline: 2px solid var(--nso-primary); outline-offset: 2px; }

/* === Responsive: Tablet (1024px) === */
@media (max-width: 1024px) {
  .nbnso-catgrid { grid-template-columns: repeat(2, 1fr); }
  .nbnso-detail { padding: 1.5rem; }
  .nbnso-stats { gap: 0.4rem 1rem; }
}

/* === Responsive: Mobile (760px) === */
@media (max-width: 760px) {
  .nbnso-wrap { padding: 1.25rem 1rem; }
  .nbnso-hero { padding: 2rem 1rem 1.5rem; }
  .nbnso-hero h1 { font-size: 1.5rem; }
  .nbnso-topbar { padding: 0.5rem 1rem; flex-wrap: wrap; }
  .nbnso-topbar .nbnso-search { max-width: 100%; order: 10; flex-basis: 100%; }
  .nbnso-browse-header h1 { font-size: 1.25rem; }
  .nbnso-cards { grid-template-columns: 1fr; }
  .nbnso-detail { padding: 1.25rem; }
  .nbnso-detail-header { flex-direction: column; gap: 0.75rem; }
  .nbnso-detail-header h1 { font-size: 1.3rem; }
  .nbnso-stats { grid-template-columns: 1fr 1fr; gap: 0.3rem 0.75rem; }
  .nbnso-map-entities { grid-template-columns: 1fr; }
  .nbnso-page-link { min-width: 40px; height: 40px; }
}

/* === Responsive: Small Mobile (640px) === */
@media (max-width: 640px) {
  .nbnso-wrap { padding: 1rem 0.75rem; }
  .nbnso-hero h1 { font-size: 1.3rem; }
  .nbnso-catgrid { grid-template-columns: 1fr; }
  .nbnso-btn { width: 100%; justify-content: center; min-height: 44px; }
  .nbnso-search-box { padding: 0.5rem; }
  .nbnso-search-box input { font-size: 16px; }
  .nbnso-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .nbnso-page-link { min-width: 44px; height: 44px; }
  .nbnso-ac-item { padding: 0.75rem; min-height: 44px; }
  .nbnso-cat { padding: 0.75rem; min-height: 44px; }
  .nbnso-card { padding: 0.75rem; min-height: 44px; }
  .nbnso-rel-card { padding: 0.75rem; min-height: 44px; }
  .nbnso-store-item { min-height: 44px; }
}

/* === Asset Images === */
.nbnso-asset-img { object-fit: contain; image-rendering: pixelated; image-rendering: -moz-crisp-edges; }
.nbnso-card .nbnso-asset-img { width: 48px; height: 48px; flex-shrink: 0; }
.nbnso-detail-header .nbnso-asset-img { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--nso-radius-sm); background: var(--nso-bg); }
.nbnso-rel-card .nbnso-asset-img { width: 36px; height: 36px; flex-shrink: 0; }
@media (max-width: 640px) {
  .nbnso-detail-header .nbnso-asset-img { width: 60px; height: 60px; }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  .nso-library, .nso-library *, .nso-library *::before, .nso-library *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}