/*
 * ARSIP ASTRAL — lapisan konsolidasi publik Monsalidus.
 * Prinsip: Matrix gelap, aksen hijau hanya untuk navigasi/status,
 * teks naratif netral terang, dan permukaan yang konsisten lintas halaman.
 */
:root {
    --surface-0: #070b08;
    --surface-1: #0d1510;
    --surface-2: #132017;
    --surface-raised: rgba(13, 21, 16, .90);
    --ink-strong: #f2f5ee;
    --ink: #d8ded3;
    --ink-muted: #a4aea1;
    --accent: var(--tc, #00ff88);
    --accent-soft: var(--tc-lo, rgba(0, 255, 136, .18));
    --accent-shadow: var(--tc-sh, rgba(0, 255, 136, .35));
    --rule: color-mix(in srgb, var(--accent) 34%, transparent);
    --page-width: min(1180px, calc(100% - 32px));
    --reader-width: 760px;
    --story-color: var(--ink-strong);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent);
}

html { background: var(--surface-0); }
body {
    color: var(--ink);
    background: var(--surface-0);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.65;
}
body::before { background-color: var(--surface-0); }
::selection { color: #05110a; background: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: var(--focus-ring); }

/* Shell bersama: header dan navigasi selalu kontras di seluruh halaman. */
header,
.site-header {
    color: var(--ink-strong);
    background: rgba(6, 11, 8, .94);
    border-bottom-color: var(--rule);
}
header nav a,
.site-header nav a { color: var(--ink-muted); }
header nav a:hover,
header nav a.active,
.site-header nav a:hover,
.site-header nav a.active { color: var(--accent); }
.nbtn,
.ibtn {
    color: var(--ink-strong);
    border-color: var(--rule);
    background: rgba(18, 32, 23, .72);
}
.nbtn:hover,
.nbtn:focus-visible,
.ibtn:hover,
.ibtn:focus-visible {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent);
}
.bbar { background: rgba(6, 11, 8, .95); border-top-color: var(--rule); }
.ibtn i { color: var(--accent); }

/* Permukaan umum untuk formulir, panel, kartu, dan halaman pembaca. */
input[type=text],
input[type=number],
input[type=password],
select,
textarea,
.fa-form input[type=text],
.fa-form textarea,
.kar-search input,
.world-search input {
    color: var(--ink-strong);
    background: rgba(4, 9, 6, .82);
    border-color: var(--rule);
}
input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--ink-muted) 78%, transparent); }
input:focus,
select:focus,
textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }

.world-page,
.eonara-world,
.km-wrap,
.ch-wrap { color: var(--ink); }
#main-wrap.world-page,
#main-wrap.eonara-world,
.eonara-world#main-wrap {
    width: var(--page-width) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
}
.ch-wrap { width: min(var(--reader-width), calc(100% - 32px)); }

/* Ensiklopedia dan detail informasi. */
.world-page-heading,
.world-card,
.world-detail-card,
.world-search,
.world-alphabet,
.world-region-group,
.world-region-overview,
.eonara-card,
.eonara-time-card,
.info-card,
.story-box,
.comment-panel,
.km-page-info,
.km-card,
.km-form-box,
.km-legend,
.kcard-box,
.org-box {
    color: var(--ink);
    background: var(--surface-raised);
    border-color: var(--rule);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .24);
}
.judul-halaman,
.note-acc,
.bab-acc,
.bab-locked,
.fa-form,
.fa-item,
.kar-card,
.kar-search input,
.kar-view-toggle,
.info-card,
.comment-panel,
.ch-header-box,
.ch-story-media,
.ch-quote-box {
    border-color: var(--rule) !important;
    background: var(--surface-raised) !important;
}
.bab-label,
.bab-link,
.bi,
.kar-view-toggle,
.back-link,
.kcard-badge,
.kcard-desc,
.kar-back-btn,
.kar-komen-box input,
.kar-komen-box textarea {
    border-color: var(--rule) !important;
    color: var(--accent) !important;
}
.bi,
.kcard-tag,
.param-item,
.kar-tier-box,
.kar-stats-grid div,
.kar-atkdef div,
.kar-komen-item { background: rgba(4, 9, 6, .72) !important; }
.bab-acc summary:hover,
.bi:hover,
.kar-card:hover,
.fa-item:hover { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.status-tag { border-color: #55bf76 !important; }
.world-page-heading h1,
.world-detail-heading h2,
.world-card-body strong,
.world-kicker,
.world-section h3,
.world-section > summary,
.eonara-kicker,
.eonara-section > h2,
.eonara-subheading,
.story-title,
.cp-title,
.km-header h1,
.km-page-info h2,
.kcard-tag b,
.bio-section h4,
.kar-name-tag,
.judul-halaman { color: var(--accent); text-shadow: none; }
.world-page-heading p,
.world-card-description,
.world-detail-lead,
.world-detail-row,
.world-event-part span,
.world-related-links a,
.eonara-card p,
.eonara-time-card p,
.info-card p,
.story-content,
.km-msg,
.kcard-desc,
.bio-row,
.bio-text,
.bio-list { color: var(--ink); }
.world-card-subtitle,
.world-card-meta,
.world-related-links span,
.eonara-lead,
.eonara-card span,
.eonara-card small,
.km-time,
.km-count,
.visitor-tag { color: var(--ink-muted); }
.world-card:hover,
.world-region-overview:hover,
.eonara-card:hover { border-color: var(--accent); background: rgba(19, 32, 23, .95); }

/* Tombol berbasis aksen memakai teks gelap untuk rasio kontras yang aman. */
.world-admin-edit,
.world-card-admin-edit,
.world-row-admin-edit,
.world-discussion-button,
.cp-button,
.btn-diskusi,
.character-view-photo-button,
.world-detail-view-image-button,
.sbtn,
.km-submit,
.pbtn.pb-tc,
.story-admin-actions a,
.kar-admin-btn,
.kar-admin-detail-edit {
    color: #06110a !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    text-shadow: none;
}
.world-admin-add,
.kar-admin-card-edit,
.bi-edit { color: var(--accent); border-color: var(--rule); background: rgba(6, 11, 8, .7); }

/* Panel tetap terbaca saat mode tema berubah. */
#chapter-panel,
#theme-panel,
#panel-otak,
#comment-panel,
.ui-drawer,
.music-box {
    color: var(--ink);
    background: rgba(7, 12, 9, .96);
    border-color: var(--rule);
}
.music-box:not(.mpos-static) {
    right: 12px;
    bottom: calc(var(--bb, 64px) + 12px);
    left: auto;
    transform: none;
}
.panel-title,
.ch-sec,
.ci.active,
.kn,
.rbtn,
.music-box .controls button { color: var(--accent); }
.ci,
.ki,
.kcard-tag,
.param-item,
.kar-tier-box,
.kar-stats-grid div,
.kar-atkdef div { color: var(--ink); background: rgba(4, 9, 6, .72); border-color: var(--rule); }

/* Pembaca: aksen dipisahkan dari teks naratif agar nyaman dibaca panjang. */
.ch-header-box,
.ch-story-media,
.ch-quote-box,
.ch-inline-special { border-color: var(--rule); background: rgba(9, 15, 11, .84); }
.ch-bab-nama,
.ch-chap-nama,
.ch-quote-label,
.ch-quote-box cite,
.ch-nav-bawah a { color: var(--accent); }
.ch-teks,
.bc-teks,
[data-reader-text],
.story-content { color: var(--ink-strong) !important; line-height: 1.86; }
.ch-teks { font-size: clamp(16px, 1.35vw, 19px) !important; }

/* Kondisi status dan gerak: tidak ada animasi lebar yang menggeser isi. */
.status-tag { color: #9ff4bc; border-color: #55bf76; background: rgba(85, 191, 118, .12); }
.banner-line { background: linear-gradient(90deg, transparent, var(--accent), transparent) !important; box-shadow: none !important; }
.banner-content h1 { color: var(--accent); text-shadow: 0 0 20px var(--accent-shadow); }
.banner-content h2,
.banner-content p { color: var(--ink-strong); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 650px) {
    :root { --page-width: calc(100% - 20px); }
    body { font-size: 15px; }
    .world-card-grid { grid-template-columns: 1fr !important; }
    .world-card { display: flex !important; min-height: 146px; }
    .world-card-main { display: flex !important; }
    .world-card-image { width: 104px; min-width: 104px; height: auto; }
    .world-card-body { padding: 13px; }
    .world-card-description { display: block; }
    .world-card-meta { display: flex; }
    .ch-wrap { width: calc(100% - 24px); }
    .music-box:not(.mpos-static) { right: 8px; bottom: calc(var(--bb, 64px) + 8px); }
}