/* DBS Manga Core — original indigo/orange fan-guide design.
   Dark is the default; a visitor's light choice is stored in the browser. */
:root,
html[data-dbs-theme="dark"] {
    --dbs-bg: #0d1020;
    --dbs-bg-2: #151936;
    --dbs-surface: #1a1f42;
    --dbs-surface-2: #232957;
    --dbs-text: #f4f2ea;
    --dbs-muted: #b9bdd6;
    --dbs-line: rgba(255, 255, 255, 0.14);
    --dbs-accent: #ff8a2a;
    --dbs-accent-2: #39b6ff;
    --dbs-good: #48d597;
    --dbs-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
html[data-dbs-theme="light"] {
    --dbs-bg: #f7f3e9;
    --dbs-bg-2: #fffaf0;
    --dbs-surface: #ffffff;
    --dbs-surface-2: #fff1dc;
    --dbs-text: #1b2036;
    --dbs-muted: #5b6178;
    --dbs-line: rgba(27, 32, 54, 0.14);
    --dbs-accent: #e76a00;
    --dbs-accent-2: #0077c8;
    --dbs-good: #087f52;
    --dbs-shadow: 0 18px 45px rgba(66, 45, 0, 0.12);
}

.dbs-main {
    background:
        radial-gradient(circle at 12% 0%, rgba(57, 182, 255, 0.16), transparent 34rem),
        radial-gradient(circle at 88% 8%, rgba(255, 138, 42, 0.18), transparent 30rem),
        var(--dbs-bg);
    color: var(--dbs-text);
    padding: clamp(1.25rem, 4vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.dbs-shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
.dbs-narrow { max-width: 920px; }
.dbs-main a { color: var(--dbs-accent-2); }
.dbs-main h1, .dbs-main h2, .dbs-main h3 { color: var(--dbs-text); letter-spacing: -0.02em; }
.dbs-main h1 { font-size: clamp(2.15rem, 6vw, 4.4rem); line-height: 0.98; margin: 0.35rem 0 1rem; }
.dbs-main h2 { font-size: clamp(1.55rem, 3.4vw, 2.35rem); line-height: 1.08; margin: 2.2rem 0 0.85rem; }
.dbs-main h3 { line-height: 1.16; }
.dbs-main p, .dbs-main li, .dbs-main dd { line-height: 1.68; }
.dbs-kicker, .dbs-card-kicker {
    color: var(--dbs-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.dbs-lede { color: var(--dbs-muted); font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 780px; }
.dbs-muted { color: var(--dbs-muted); }

.dbs-breadcrumbs { margin-bottom: 1.3rem; }
.dbs-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.dbs-breadcrumbs li { color: var(--dbs-muted); font-size: 0.92rem; }
.dbs-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.45rem; color: var(--dbs-accent); }

.dbs-hero-banner { margin: 1.6rem 0 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--dbs-line); box-shadow: var(--dbs-shadow); }
.dbs-hero-banner img { display: block; width: 100%; height: auto; }

.dbs-hero, .dbs-guide-hero, .dbs-archive-hero {
    background: linear-gradient(145deg, var(--dbs-surface), var(--dbs-bg-2));
    border: 1px solid var(--dbs-line);
    border-radius: 28px;
    box-shadow: var(--dbs-shadow);
    padding: clamp(1.4rem, 4vw, 3rem);
    overflow: hidden;
    position: relative;
}
.dbs-hero::after, .dbs-guide-hero::after {
    content: "";
    position: absolute;
    width: 280px; height: 280px;
    border: 34px solid rgba(255, 138, 42, 0.16);
    border-radius: 50%;
    right: -90px; top: -110px;
    pointer-events: none;
}
.dbs-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr); gap: 2rem; align-items: center; position: relative; z-index: 1; }
.dbs-orbit-card {
    background: var(--dbs-surface-2);
    border: 1px solid var(--dbs-line);
    border-radius: 22px;
    padding: 1.2rem;
}
.dbs-orbit-card strong { display: block; font-size: 3.8rem; line-height: 1; color: var(--dbs-accent); }
.dbs-orbit-card span { color: var(--dbs-muted); }

.dbs-button-row, .dbs-guide-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.dbs-button {
    appearance: none;
    background: var(--dbs-surface);
    border: 1px solid var(--dbs-line);
    border-radius: 999px;
    color: var(--dbs-text) !important;
    cursor: pointer;
    display: inline-flex;
    font-weight: 750;
    justify-content: center;
    padding: 0.72rem 1.05rem;
    text-decoration: none !important;
}
.dbs-button-primary { background: var(--dbs-accent); border-color: var(--dbs-accent); color: #1b1200 !important; }
html[data-dbs-theme="light"] .dbs-button-primary { color: #fff !important; }
.dbs-button-ghost { background: transparent; }
.dbs-text-link { font-weight: 750; }

.dbs-status-chip, .dbs-status-panel, .dbs-official-panel, .dbs-info-card, .dbs-side-card {
    background: var(--dbs-surface);
    border: 1px solid var(--dbs-line);
    border-radius: 20px;
    padding: 1.1rem 1.2rem;
}
.dbs-status-chip { display: flex; flex-wrap: wrap; gap: 0.45rem 0.8rem; margin-top: 1rem; }
.dbs-status-chip span { color: var(--dbs-good); font-weight: 750; }
.dbs-status-panel { display: grid; grid-template-columns: 1.5fr 0.7fr; gap: 1.5rem; align-items: center; margin: 1.4rem 0; }
.dbs-status-panel h2 { margin-top: 0.25rem; }
.dbs-status-actions { display: grid; gap: 0.7rem; }

.dbs-grid { display: grid; gap: 1rem; }
.dbs-chapter-grid, .dbs-character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dbs-arc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dbs-card {
    background: var(--dbs-surface);
    border: 1px solid var(--dbs-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.dbs-card-body { padding: 1rem; }
.dbs-card h3 { margin: 0.65rem 0 0.5rem; font-size: 1.08rem; }
.dbs-card h3 a { color: var(--dbs-text) !important; text-decoration: none; }
.dbs-card p { color: var(--dbs-muted); font-size: 0.95rem; }
.dbs-card-art {
    align-items: flex-start;
    background:
        radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.3) 0 22px, transparent 23px),
        linear-gradient(145deg, var(--dbs-accent), #7c3aed 58%, var(--dbs-accent-2));
    color: #fff !important;
    display: flex;
    flex-direction: column;
    min-height: 128px;
    padding: 1rem;
    text-decoration: none !important;
}
.dbs-card-number { font-size: 2.6rem; font-weight: 900; line-height: 1; }
.dbs-card-art .dbs-card-kicker { color: #fff; margin-top: auto; }
.dbs-chip {
    background: rgba(57, 182, 255, 0.14);
    border: 1px solid rgba(57, 182, 255, 0.3);
    border-radius: 999px;
    color: var(--dbs-text);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 750;
    margin: 0 0.3rem 0.35rem 0;
    padding: 0.28rem 0.55rem;
}
.dbs-chip-muted { background: transparent; border-color: var(--dbs-line); color: var(--dbs-muted); }

.dbs-section { margin-top: clamp(2rem, 5vw, 4rem); }
.dbs-section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.dbs-section-head h2 { margin-bottom: 0.3rem; }
.dbs-section-head p { color: var(--dbs-muted); margin-top: 0; }

.dbs-guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.2rem; margin-top: 1.2rem; align-items: start; }
.dbs-guide-body, .dbs-guide-sidebar { min-width: 0; }
.dbs-guide-sidebar { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.dbs-article-body { font-size: 1.04rem; }
.dbs-article-body p, .dbs-article-body li { color: var(--dbs-text); }
.dbs-spoiler-note, .dbs-source-line {
    background: rgba(255, 138, 42, 0.12);
    border-left: 4px solid var(--dbs-accent);
    border-radius: 10px;
    padding: 0.85rem 1rem;
}
.dbs-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.dbs-info-grid dt { color: var(--dbs-muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.dbs-info-grid dd { margin: 0.25rem 0 0; font-weight: 700; }
.dbs-pill-list { display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; padding: 0; }
.dbs-pill-list li { background: var(--dbs-surface-2); border: 1px solid var(--dbs-line); border-radius: 999px; padding: 0.42rem 0.7rem; }
.dbs-mini-list { padding-left: 1.1rem; }
.dbs-mini-list li { margin: 0.45rem 0; }

.dbs-prev-next { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.7rem; margin: 1.2rem 0; }
.dbs-prev-next .dbs-button:last-child { justify-self: end; }
.dbs-chapter-selector { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; }
.dbs-chapter-selector label { font-weight: 800; }
.dbs-chapter-selector select, .dbs-filter-bar input, .dbs-filter-bar select {
    background: var(--dbs-bg-2);
    border: 1px solid var(--dbs-line);
    border-radius: 12px;
    color: var(--dbs-text);
    min-height: 46px;
    padding: 0.65rem 0.75rem;
}
.dbs-chapter-selector select { max-width: min(620px, 100%); }

.dbs-filter-bar {
    background: var(--dbs-surface);
    border: 1px solid var(--dbs-line);
    border-radius: 20px;
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 0.8fr)) auto;
    gap: 0.8rem;
    margin: 1.2rem 0;
    padding: 1rem;
}
.dbs-filter-bar label { display: grid; gap: 0.35rem; font-weight: 750; }
.dbs-result-count { color: var(--dbs-muted); }
.dbs-pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; }

.dbs-faqs { margin-top: 2rem; }
.dbs-faq {
    background: var(--dbs-surface);
    border: 1px solid var(--dbs-line);
    border-radius: 15px;
    margin: 0.65rem 0;
    padding: 0.9rem 1rem;
}
.dbs-faq summary { cursor: pointer; font-weight: 800; }
.dbs-faq-answer { color: var(--dbs-muted); }

.dbs-volume-table-wrap { overflow-x: auto; }
.dbs-table { border-collapse: collapse; min-width: 680px; width: 100%; }
.dbs-table th, .dbs-table td { border-bottom: 1px solid var(--dbs-line); padding: 0.75rem; text-align: left; }
.dbs-table th { color: var(--dbs-accent); }
.dbs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.2rem 0; }
.dbs-stat { background: var(--dbs-surface); border: 1px solid var(--dbs-line); border-radius: 18px; padding: 1rem; }
.dbs-stat strong { display: block; font-size: 1.7rem; color: var(--dbs-accent); }
.dbs-stat span { color: var(--dbs-muted); }

.dbs-disclaimer {
    background: #090b16;
    color: #c9ccdd;
    padding: 1.2rem 0;
}
.dbs-disclaimer .dbs-shell { display: flex; gap: 1rem; justify-content: space-between; align-items: center; }
.dbs-disclaimer p { font-size: 0.88rem; line-height: 1.55; margin: 0; max-width: 940px; }
.dbs-theme-toggle {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: inherit;
    cursor: pointer;
    flex: 0 0 auto;
    font-weight: 750;
    padding: 0.6rem 0.85rem;
}
.dbs-empty, .dbs-empty-state { background: var(--dbs-surface); border: 1px dashed var(--dbs-line); border-radius: 18px; padding: 1.2rem; }

@media (max-width: 1020px) {
    .dbs-chapter-grid, .dbs-character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dbs-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dbs-guide-layout { grid-template-columns: 1fr; }
    .dbs-guide-sidebar { position: static; }
}
@media (max-width: 720px) {
    .dbs-hero-grid, .dbs-status-panel { grid-template-columns: 1fr; }
    .dbs-chapter-grid, .dbs-character-grid, .dbs-arc-grid, .dbs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dbs-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dbs-prev-next { grid-template-columns: 1fr; }
    .dbs-prev-next .dbs-button:last-child { justify-self: stretch; }
    .dbs-filter-bar { grid-template-columns: 1fr; }
    .dbs-disclaimer .dbs-shell { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 460px) {
    .dbs-chapter-grid, .dbs-character-grid, .dbs-arc-grid, .dbs-stats, .dbs-info-grid { grid-template-columns: 1fr; }
    .dbs-shell { width: min(100% - 1.25rem, 1180px); }
    .dbs-hero, .dbs-guide-hero, .dbs-archive-hero { border-radius: 20px; }
}

/* Opening direct-answer section (AEO) + byline (E-E-A-T) — topical heading, no "quick answer" label */
.dbs-quick-answer{border:1px solid var(--dbs-accent,#ff8c1a);border-left-width:5px;border-radius:12px;padding:16px 20px;margin:20px 0;background:rgba(255,140,26,.07)}
.dbs-quick-answer h2{margin-top:0}
.dbs-byline{opacity:.75;font-size:.9rem;margin-top:6px}

/* Motion system (owner order 13 Nov 2026): transform/opacity only, reduced-motion safe */
.dbs-card{transition:transform .35s ease,box-shadow .35s ease}
.dbs-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(0,0,0,.35),0 0 0 1px var(--dbs-accent,#ff8c1a),0 0 22px rgba(255,140,26,.25)}
.dbs-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.dbs-reveal.dbs-in{opacity:1;transform:none}
.dbs-hero{animation:dbsHeroIn .8s ease both}
@keyframes dbsHeroIn{from{opacity:0;transform:translateY(16px) scale(.995)}to{opacity:1;transform:none}}
.dbs-hero .dbs-button{transition:transform .3s ease,box-shadow .3s ease}
.dbs-hero .dbs-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,140,26,.35)}
.dbs-faq details{transition:background .3s ease}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .dbs-reveal{opacity:1;transform:none}
}