/* ===== Tema terang PUSRI untuk seluruh situs =====
   Dimuat setelah app.css dan live.css pada semua halaman KECUALI tiga halaman
   seminar, yang sudah punya seminar-theme.css sendiri dan menjadi rujukan tema
   ini. Karena berkas ini hanya dimuat lewat <link> di halaman non-seminar,
   aturan di bawah tidak pernah menyentuh halaman seminar.

   Palet diambil dari logo PUSRI: biru #0054A8, kuning #F0D80C, dan langit
   #CCE4FC. Latarnya sama dengan halaman seminar -- foto dengan lapisan tipis
   warna langit -- supaya seluruh situs terbaca sebagai satu produk.

   app.css dan live.css menulis tema gelapnya dengan dua cara: sebagian lewat
   variabel di :root, sebagian lagi sebagai warna hardcoded. Yang pertama
   ditangani dengan mendefinisikan ulang variabelnya, yang kedua ditimpa satu
   per satu. */

:root {
    color-scheme: light;

    /* Remap variabel tema gelap app.css. */
    --bg: #eaf3fc;
    --panel: #ffffff;
    --panel-hi: #f1f7fd;
    --line: rgba(0, 84, 168, .14);
    --text: #0b2545;
    --muted: #5f7796;
    --primary: #0054a8;
    --primary-dark: #003f7d;
    --success: #12a06a;
    --danger: #d64545;

    /* Variabel yang dipakai bersama halaman seminar, supaya komponen bersama
       (tombol, modal, alert) tampil sama di seluruh situs. */
    --sem-ink: #0b2545;
    --sem-muted: #5f7796;
    --sem-line: rgba(0, 84, 168, .14);
    --sem-surface: rgba(255, 255, 255, .93);
    --sem-surface-soft: rgba(255, 255, 255, .8);
    --sem-blue: #0054a8;
    --sem-blue-bright: #1b7fd4;
    --sem-sky: #cce4fc;
}

body {
    color: var(--text);
    font-family: 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Latar foto + lapisan langit. Dipasang di tiap halaman, bukan di body, karena
   app.css memberi .landing-page, .guest-page, dan .participant-page latar
   sendiri yang lebih spesifik daripada body. */
.app-shell,
.guest-page,
.participant-page,
.landing-page {
    background-color: #eaf3fc;
    background-image:
        linear-gradient(rgba(234, 243, 252, .72), rgba(234, 243, 252, .78)),
        url('../images/brand/seminar-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* .landing-page::before menimpa latar dengan kotak-kotak gelap; di tema terang
   polanya dibuang dan hanya foto yang tersisa. */
.landing-page::before {
    display: none;
}
.landing-ambient {
    display: none;
}

/* ---------- Shell admin ---------- */
.sidebar {
    background: rgba(255, 255, 255, .93);
    border-right: 1px solid var(--line);
    box-shadow: 2px 0 24px rgba(11, 37, 69, .06);
    backdrop-filter: blur(12px);
}
.sidebar .brand {
    border-bottom: 1px solid var(--line);
}
.sidebar-footer {
    background: rgba(255, 255, 255, .8);
    border-top: 1px solid var(--line);
}
.sidebar-logout {
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.sidebar-logout:hover,
.sidebar-logout:focus-visible {
    color: var(--danger);
}
.nav-section-label {
    color: #8aa2bd;
}
.nav-list a {
    color: var(--muted);
}
.nav-list a:hover {
    color: var(--sem-blue);
}
.nav-list a.active {
    color: var(--sem-blue);
    border-left-color: var(--sem-blue);
}
.avatar {
    background: rgba(0, 84, 168, .1);
    color: var(--sem-blue);
}
/* Bawaan app.css memberi teks #11135c, yang hanya terbaca di atas ungu muda;
   di atas biru PUSRI teksnya harus putih. Dipakai di halaman login, peserta,
   dan Dashboard TV. */
.brand-mark {
    color: #fff;
    background: var(--sem-blue);
}

.topbar {
    background: rgba(255, 255, 255, .85);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}
.menu-toggle {
    color: var(--text);
}
.content {
    color: var(--text);
}

/* ---------- Panel, tabel, form ---------- */
.panel {
    background: var(--sem-surface);
    border: 1px solid var(--line);
    box-shadow: 0 8px 28px rgba(11, 37, 69, .08);
}
.panel-toolbar {
    border-bottom: 1px solid var(--line);
}
.eyebrow {
    /* Bawaan app.css memakai hijau terang yang tak terbaca di panel putih. */
    color: var(--sem-blue) !important;
}
.status-dot {
    background: var(--success);
    box-shadow: 0 0 10px rgba(18, 160, 106, .45);
}
.status-dot.inactive {
    background: var(--muted);
    box-shadow: none;
}

input,
select,
textarea {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--line);
}
input::placeholder,
textarea::placeholder {
    color: #93a8bf;
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--sem-blue);
    box-shadow: 0 0 0 3px rgba(0, 84, 168, .12);
}

table th,
table td {
    border-bottom: 1px solid var(--line);
}
table th {
    color: var(--muted);
}
tbody tr:hover {
    background: rgba(0, 84, 168, .04);
}
td small {
    color: var(--muted);
}
.empty-cell {
    color: var(--muted);
}

.badge {
    background: rgba(18, 160, 106, .1);
    border: 1px solid rgba(18, 160, 106, .28);
    color: #0a6b46;
}
.badge-danger {
    color: #a32020;
    background: rgba(214, 69, 69, .1);
    border-color: rgba(214, 69, 69, .3);
}

/* ---------- Tombol ---------- */
/* --primary kini biru PUSRI, jadi teks di atasnya harus putih; bawaan
   app.css memakai #10115a yang hanya terbaca di atas ungu muda. */
.btn-primary {
    color: #fff;
    background: var(--sem-blue);
}
.btn-primary:hover {
    background: var(--sem-blue-bright);
    filter: none;
}
.btn-secondary {
    color: var(--text);
    background: #fff;
    border-color: var(--line);
}
.btn-secondary:hover {
    border-color: var(--sem-blue);
    color: var(--sem-blue);
    filter: none;
}
.btn-ghost {
    color: var(--muted);
    border-color: var(--line);
    background: rgba(255, 255, 255, .8);
}
.btn-ghost:hover {
    color: var(--sem-blue);
    border-color: var(--sem-blue);
    filter: none;
}
.btn-danger {
    color: #a32020;
    border-color: rgba(214, 69, 69, .35);
    background: rgba(214, 69, 69, .08);
}
.btn:focus-visible {
    outline: 3px solid rgba(0, 84, 168, .4);
    outline-offset: 2px;
}
.pagination-bar button:disabled,
.pagination-bar .is-disabled {
    opacity: .4;
}

/* ---------- Alert ---------- */
.alert {
    border-radius: 9px;
}
.alert-success {
    background: rgba(18, 160, 106, .1);
    color: #0a6b46;
    border: 1px solid rgba(18, 160, 106, .28);
}
.alert-error {
    background: rgba(214, 69, 69, .08);
    color: #a32020;
    border: 1px solid rgba(214, 69, 69, .28);
}
/* idempotency.css memuat .alert-warning versi gelap dan dimuat setelah
   app.css, jadi peringatan di halaman admin/login/peserta/TV harus ditimpa
   di sini. */
.alert-warning {
    background: rgba(240, 216, 12, .14);
    color: #7a5c00;
    border: 1px solid rgba(196, 158, 0, .35);
}
.field-error {
    color: #a32020 !important;
}

/* ---------- Dialog ---------- */
.confirmation-modal {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--text);
    box-shadow: 0 28px 80px rgba(11, 37, 69, .28);
}
.confirmation-modal::backdrop {
    background: rgba(11, 37, 69, .45);
    backdrop-filter: blur(3px);
}
.confirmation-icon {
    background: rgba(214, 69, 69, .1);
    border: 1px solid rgba(214, 69, 69, .32);
    color: #a32020;
}
.modal-form-fields label {
    color: var(--muted);
}
.category-modal-content .confirmation-actions {
    border-top: 1px solid var(--line);
}
.form-panel label,
.form-panel label > small,
.stacked-form label {
    color: var(--muted);
}
.form-actions {
    border-top: 1px solid var(--line);
}
.permission-fieldset {
    border: 1px solid var(--line);
}
.choice-card {
    background: #fff;
    border: 1px solid var(--line);
}
.search-control {
    color: var(--muted);
}
.record-counter,
.muted {
    color: var(--muted);
}

/* ---------- Logo PUSRI ---------- */
/* Sidebar dan header landing memakai pusri-logo-light.svg, yang seluruhnya
   putih dan hanya terbaca di atas latar gelap. Sekarang latarnya putih, jadi
   logo diletakkan di atas chip biru PUSRI -- pola yang sama dengan chip logo
   di navbar seminar, hanya terbalik karena logonya yang putih. */
.sidebar .brand,
.landing-pusri-brand {
    width: max-content;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--sem-blue);
    box-shadow: 0 6px 20px rgba(11, 37, 69, .16);
}
.landing-pusri-brand:focus-visible {
    outline: 3px solid rgba(0, 84, 168, .5);
    outline-offset: 4px;
}
/* Chip ini memuat logo putih, jadi tidak boleh diwarisi aturan chip seminar
   yang memberi latar terang. */
.sidebar .brand .pusri-logo,
.landing-pusri-brand .pusri-logo {
    display: block;
}

/* ---------- Notifikasi admin ---------- */
.admin-notifications > summary {
    color: var(--muted);
    border: 1px solid var(--line);
}
.admin-notifications > summary:hover,
.admin-notifications[open] > summary {
    color: var(--sem-blue);
    background: var(--panel-hi);
}
.notification-count {
    color: #fff;
    background: var(--sem-blue);
    border: 2px solid #fff;
}
.notification-dropdown {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(11, 37, 69, .18);
}
.notification-dropdown header {
    border-bottom: 1px solid var(--line);
}
.notification-item {
    color: var(--text);
    border-bottom: 1px solid var(--line);
}
.notification-item:hover {
    background: rgba(0, 84, 168, .05);
}
.notification-item small,
.notification-item time {
    color: var(--muted);
}
.notification-dot {
    background: var(--sem-blue);
    box-shadow: 0 0 10px rgba(0, 84, 168, .4);
}
.notification-empty {
    color: var(--muted);
}

/* ---------- Pemilih bahasa ---------- */
.language-switcher {
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--line);
}
.language-switcher button {
    color: var(--muted);
}
.language-switcher button.active {
    color: #fff;
    background: var(--sem-blue);
}
.language-switcher button:focus-visible {
    outline: 2px solid var(--sem-blue);
    outline-offset: 2px;
}

/* ---------- Glossary ---------- */
.glossary-comparison-toggle {
    border: 1px solid var(--line);
    background: rgba(0, 84, 168, .04);
}
.glossary-comparison-toggle button {
    color: var(--muted);
}
.glossary-comparison-toggle button.active {
    color: #fff;
    background: var(--sem-blue);
}
.glossary-comparison-toggle button:focus-visible {
    outline: 2px solid var(--sem-blue);
    outline-offset: 2px;
}
.glossary-upload-field {
    color: var(--text);
    border: 1px dashed rgba(0, 84, 168, .4);
    background: rgba(255, 255, 255, .8);
}
.glossary-upload-field > small {
    color: var(--muted);
}
.glossary-upload-field input[type="file"] {
    background: #fff;
}
.glossary-upload-field input[type="file"]::file-selector-button {
    color: var(--text);
    border: 1px solid var(--line);
    background: var(--panel-hi);
}
.glossary-template-row {
    color: var(--muted);
}
.glossary-template-link {
    color: var(--sem-blue);
}
.glossary-import-header {
    border-bottom: 1px solid var(--line);
}
.glossary-import-form .confirmation-actions {
    border-top: 1px solid var(--line);
}

/* ---------- Pemakaian AI ---------- */
.ai-usage-period {
    color: var(--muted);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .8);
}
.ai-usage-metric-card {
    background: var(--sem-surface);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(11, 37, 69, .07);
}
.ai-usage-metric-card > strong {
    color: var(--text);
}
.ai-usage-metric-card.has-failure {
    border-color: rgba(214, 69, 69, .38);
}
.ai-budget-status {
    color: #0a6b46;
    border: 1px solid rgba(18, 160, 106, .3);
    background: rgba(18, 160, 106, .1);
}
.ai-budget-status.is-warning {
    color: #7a5c00;
    border-color: rgba(196, 158, 0, .4);
    background: rgba(240, 216, 12, .16);
}
.ai-budget-status.is-exceeded {
    color: #a32020;
    border-color: rgba(214, 69, 69, .35);
    background: rgba(214, 69, 69, .1);
}
.ai-budget-progress {
    background: rgba(0, 84, 168, .08);
    border: 1px solid var(--line);
}
.ai-budget-progress span {
    background: linear-gradient(90deg, var(--sem-blue), var(--sem-blue-bright));
}
.ai-budget-facts {
    border: 1px solid var(--line);
}
.ai-budget-facts div {
    background: rgba(255, 255, 255, .8);
}
.ai-budget-facts div + div {
    border-top: 1px solid var(--line);
}
.ai-usage-log-header {
    border-bottom: 1px solid var(--line);
}
.ai-budget-form-header {
    border-bottom: 1px solid var(--line);
}
.ai-budget-form .choice-card {
    color: var(--text);
}
.ai-budget-form .confirmation-actions {
    border-top: 1px solid var(--line);
}

/* ---------- Arsip ---------- */
.archive-overview::after {
    background: rgba(0, 84, 168, .06);
}
.archive-meeting-meta {
    border: 1px solid var(--line);
    background: var(--line);
}
.archive-meeting-meta div {
    background: rgba(255, 255, 255, .88);
}
.archive-meeting-meta dt {
    color: var(--muted);
}
.archive-page .metric-card {
    border: 1px solid var(--line);
    background: var(--sem-surface);
}
.archive-page .metric-card strong {
    color: var(--text);
}
.archive-section-nav {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 24px rgba(11, 37, 69, .07);
}
.archive-section-nav a {
    color: var(--muted);
}
.archive-section-nav a:hover,
.archive-section-nav a:focus-visible {
    color: var(--sem-blue);
    background: var(--panel-hi);
}
.archive-section-header {
    border-bottom: 1px solid var(--line);
}
.archive-section-count {
    color: var(--muted);
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--line);
}
.archive-table-grid > div + div {
    border-top: 1px solid var(--line);
}
.language-pair {
    color: var(--sem-blue);
}
.archive-transcript {
    border: 1px solid var(--line);
    background: #fff;
}
.archive-transcript > header {
    border-bottom: 1px solid var(--line);
}
.archive-transcript time {
    color: var(--muted);
}
.archive-speaker-avatar {
    color: #fff;
    background: var(--sem-blue);
}
.archive-speaker small {
    color: var(--muted);
}
.archive-copy-label {
    color: var(--muted);
}
.archive-translation {
    border-top: 1px solid var(--line);
    background: rgba(0, 84, 168, .035);
}
.archive-revision-list {
    border-top: 1px dashed var(--line);
}
.archive-revision span {
    border-left: 2px solid #d64545;
}
.archive-revision .archive-revision-new {
    color: var(--text);
    border-left-color: var(--success);
}
.archive-summary-card {
    border: 1px solid var(--line);
    background: #fff;
}
.archive-summary-card h3 {
    border-top: 1px solid var(--line);
}
.archive-empty-state {
    color: var(--muted);
    border: 1px dashed var(--line);
}
.archive-email-form fieldset {
    border: 1px solid var(--line);
}
.archive-email-form legend,
.archive-email-form .form-field {
    color: var(--muted);
}
.summary-list-item {
    border-bottom: 1px solid var(--line);
}
.summary-status-bar {
    color: var(--muted);
}

/* ---------- Halaman login ---------- */
.login-shell {
    border: 1px solid var(--line);
    box-shadow: 0 24px 60px rgba(11, 37, 69, .16);
}
.login-intro {
    background: linear-gradient(145deg, rgba(0, 84, 168, .1), rgba(204, 228, 252, .5));
    color: var(--text);
}
.login-intro p:not(.eyebrow) {
    color: var(--muted);
}
.login-card {
    background: rgba(255, 255, 255, .95);
}
.login-card h2 {
    color: var(--text);
}
.guest-language-switch .language-switcher {
    background: rgba(255, 255, 255, .9);
}

/* ---------- Halaman peserta & live ---------- */
/* live.css memuat baseline gelapnya di baris 1-245 dengan campuran variabel
   dan warna hardcoded; variabel sudah ditangani di :root, sisanya ditimpa
   di sini. */
.participant-page {
    color: var(--text);
}
.participant-brand small {
    color: var(--muted);
}
.participant-card {
    background: var(--sem-surface);
    border: 1px solid var(--line);
    box-shadow: 0 20px 60px rgba(11, 37, 69, .14);
}
.capacity-card,
.room-stage,
.language-panel {
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--line);
}
.capacity-card span {
    color: var(--muted);
}
.room-stage h2,
.language-panel h2 {
    color: var(--text);
}
.language-panel form + form {
    border-top: 1px solid var(--line);
}
.invitation-copy label {
    color: var(--muted);
}
.qr-frame {
    border: 1px dashed var(--line);
    background: #fff;
}
.qr-frame span {
    color: var(--muted);
}
.meeting-unavailable-icon {
    border: 1px solid var(--line);
    color: var(--sem-blue);
    background: rgba(0, 84, 168, .07);
}

.participant-command-center,
.talk-controller {
    background: var(--sem-surface);
    border: 1px solid var(--line);
    box-shadow: 0 20px 60px rgba(11, 37, 69, .14);
}
.command-header {
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--line);
}
.command-heading p {
    color: var(--muted);
}
.command-status {
    color: var(--muted);
}
.command-divider {
    background: var(--line);
}
.command-end-meeting {
    color: #a32020;
    border: 1px solid rgba(214, 69, 69, .4);
    background: rgba(214, 69, 69, .08);
}
.command-end-meeting:hover,
.command-end-meeting:focus-visible {
    color: #fff;
    border-color: #d64545;
    background: #d64545;
}
.command-sidebar {
    background: rgba(255, 255, 255, .82);
    border-right: 1px solid var(--line);
}
.meeting-room-summary {
    background: #fff;
    border: 1px solid var(--line);
}
.meeting-room-summary small {
    color: var(--muted);
}
.room-symbol {
    color: var(--sem-blue);
    background: rgba(0, 84, 168, .1);
}
.participant-navigation a {
    color: var(--muted);
}
.participant-navigation a:hover,
.participant-navigation a.active {
    color: var(--sem-blue);
    background: rgba(0, 84, 168, .05);
    border-left-color: var(--sem-blue);
}
.participant-settings {
    border-top: 1px solid var(--line);
}
.participant-settings summary,
.compact-form label {
    color: var(--muted);
}
.command-leave button {
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.command-leave button:hover {
    color: var(--danger);
}
.admin-room-note {
    border: 1px solid rgba(0, 84, 168, .2);
    background: rgba(0, 84, 168, .05);
}
.admin-room-note strong {
    color: var(--text);
}
.admin-room-note p {
    color: var(--muted);
}

.seating-stage {
    background: transparent;
}
.seat-legend {
    color: var(--muted);
}
.seat-legend i {
    background: var(--line);
}
.seat-legend i.occupied {
    background: var(--success);
}
.seat-legend i.you {
    background: var(--sem-blue);
}
.meeting-table {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .9);
}
.meeting-table::before {
    border: 2px solid rgba(0, 84, 168, .16);
}
.table-label {
    color: rgba(0, 84, 168, .07);
}
.seat-avatar,
.empty-seat > span {
    color: var(--text);
    background: var(--panel-hi);
}
.seat-card strong {
    color: var(--text);
}
.seat-card small {
    color: var(--muted);
}
.current-seat .seat-avatar {
    color: #fff;
    border-color: var(--sem-blue);
    background: var(--sem-blue);
    box-shadow: 0 0 20px rgba(0, 84, 168, .28);
}
.current-seat small {
    color: #fff;
    background: var(--sem-blue);
}
.speaking-label {
    color: #0a6b46;
    border: 1px solid rgba(18, 160, 106, .45);
    background: #e6f7f0;
}
.invitation-seat:hover > span,
.invitation-seat:focus-visible > span {
    color: var(--sem-blue);
    border-color: var(--sem-blue);
    background: rgba(0, 84, 168, .08);
}
.invitation-seat:focus-visible {
    outline: 2px solid var(--sem-blue);
}
.occupied-seat-action:hover .seat-avatar {
    border-color: var(--sem-blue);
}
.occupied-seat-action:focus-visible .seat-avatar {
    outline: 3px solid rgba(0, 84, 168, .55);
}
.participant-remove-confirmation {
    border: 1px solid rgba(214, 69, 69, .35);
    background: rgba(214, 69, 69, .07);
}
.participant-remove-confirmation p {
    color: var(--muted);
}
.overview-mic-button {
    color: #fff;
    background: var(--success);
    box-shadow: 0 14px 34px rgba(11, 37, 69, .25);
}
.overview-mic-button:focus-visible {
    outline: 3px solid var(--sem-blue);
}
.mic-tooltip {
    color: var(--text);
    border: 1px solid var(--line);
    background: #fff;
}

.participant-invitation-modal,
.talk-language-modal {
    color: var(--text);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 30px 90px rgba(11, 37, 69, .3);
}
.participant-invitation-modal::backdrop,
.talk-language-modal::backdrop {
    background: rgba(11, 37, 69, .45);
}
.participant-invitation-card header p:last-child,
.participant-invitation-expiry,
.participant-invitation-url {
    color: var(--muted);
}
.participant-invitation-close,
.talk-language-modal header > button {
    color: var(--muted);
    border: 1px solid var(--line);
    background: var(--panel-hi);
}
.participant-invitation-close:hover,
.participant-invitation-close:focus-visible,
.talk-language-modal header > button:hover,
.talk-language-modal header > button:focus-visible {
    color: var(--sem-blue);
    border-color: var(--sem-blue);
}
.participant-invitation-empty {
    border: 1px dashed var(--line);
}
.participant-invitation-empty p {
    color: var(--muted);
}
.participant-invitation-card > footer,
.talk-language-modal footer {
    border-top: 1px solid var(--line);
}
.participant-invitation-card > label {
    color: var(--text);
}
.participant-invitation-card > input,
.participant-invitation-card > textarea,
.participant-invitation-card > select {
    color: var(--text);
    border: 1px solid var(--line);
    background: #fff;
}
.participant-invitation-card > input:focus,
.participant-invitation-card > textarea:focus,
.participant-invitation-card > select:focus {
    border-color: var(--sem-blue);
    outline: 2px solid rgba(0, 84, 168, .18);
}
.participant-invitation-card .form-error {
    color: #a32020;
}
.talk-language-fields label {
    color: var(--muted);
}

.transcript-sidebar {
    background: rgba(255, 255, 255, .82);
    border-left: 1px solid var(--line);
}
.transcript-heading {
    border-bottom: 1px solid var(--line);
}
.transcript-heading > div > span {
    color: var(--sem-blue);
}
.translation-indicator {
    color: var(--muted);
    background: var(--panel-hi);
}
.transcript-entry {
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 6px 20px rgba(11, 37, 69, .07);
}
.transcript-entry.live-entry {
    border-color: rgba(0, 84, 168, .45);
}
.transcript-speaker {
    border-bottom: 1px solid var(--line);
}
.transcript-speaker-avatar {
    color: #fff;
    border: 1px solid rgba(0, 84, 168, .5);
    background: var(--sem-blue);
}
.transcript-speaker-identity strong {
    color: var(--text);
}
.transcript-speaker-role,
.transcript-speaker time,
.transcript-language {
    color: var(--muted);
}
.transcript-language.source-language {
    color: var(--sem-blue);
}
.transcript-language.target-language {
    color: #0a6b46;
}
.transcript-entry p {
    color: var(--muted);
    border-left: 2px solid var(--line);
    background: rgba(0, 84, 168, .03);
}
.transcript-entry .translation-copy {
    color: var(--text);
    border-left-color: var(--success);
}
.empty-transcript {
    color: var(--muted);
}
.empty-transcript span {
    color: var(--sem-blue);
}

.talk-header {
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--line);
}
.talk-header-action {
    color: var(--muted);
}
.talk-header-action:hover,
.talk-header-action:focus-visible {
    color: var(--sem-blue);
    background: var(--panel-hi);
    outline: 2px solid var(--sem-blue);
}
.talk-header strong {
    color: var(--sem-blue);
}
.talk-header small,
.talk-connection {
    color: var(--muted);
}
.talk-state-dot {
    background: var(--muted);
}
.talk-timer {
    color: var(--sem-blue);
}
.push-to-talk {
    color: var(--text);
    border: 3px solid rgba(0, 84, 168, .3);
    background: radial-gradient(circle at 30% 30%, #ffffff, #eef5fd);
    box-shadow: 0 14px 34px rgba(11, 37, 69, .16);
}
.push-to-talk.recording {
    border-color: var(--danger);
    background: radial-gradient(circle at 30% 30%, #ffe3e3, #ffc9c9);
    box-shadow: 0 0 38px rgba(214, 69, 69, .24);
}
.push-to-talk-icon {
    color: var(--sem-blue);
}
.push-to-talk.recording .push-to-talk-icon {
    color: #a32020;
}
.push-to-talk small {
    color: var(--muted);
}
.live-message {
    color: var(--muted);
}
.talk-data-grid article,
.live-result-card {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .9);
}
.talk-data-grid small,
.live-result-card small {
    color: var(--muted);
}
.talk-data-grid strong {
    color: var(--sem-blue);
}
.live-result-card p {
    color: var(--muted);
}
.talk-navigation {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 12px 32px rgba(11, 37, 69, .14);
}
.talk-navigation a,
.talk-navigation button {
    color: var(--muted);
}
.talk-navigation a:focus-visible,
.talk-navigation button:focus-visible {
    outline: 2px solid var(--sem-blue);
}
.talk-navigation a.active {
    color: #fff;
    background: var(--sem-blue);
}

/* ---------- Landing page publik ---------- */
/* app.css menulis landing dengan latar gelap dan teks terang hardcoded, jadi
   bagian ini paling banyak menimpa. */
.landing-page {
    color: var(--text);
    background: transparent;
}
.landing-header {
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(18px);
}
.landing-nav-links a {
    color: var(--muted);
}
.landing-nav-links a:hover,
.landing-nav-links a:focus-visible {
    color: var(--sem-blue);
}
.landing-status {
    color: var(--sem-blue);
    border: 1px solid rgba(0, 84, 168, .2);
    background: rgba(0, 84, 168, .06);
}
.landing-hero-copy h1 {
    /* Gradien teks bawaan memakai warna terang yang tak terbaca di latar
       cerah, jadi diganti gradien biru PUSRI seperti judul halaman seminar. */
    background: linear-gradient(135deg, #0b2545, #1b7fd4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.landing-lead {
    color: var(--muted);
}
.landing-trust-list {
    color: var(--muted);
}
.landing-trust-list li span {
    color: #fff;
    background: var(--success);
}
.landing-preview-window {
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 30px 70px rgba(11, 37, 69, .18), 0 0 0 1px rgba(255, 255, 255, .4) inset;
}
.landing-preview-glow {
    background: rgba(0, 84, 168, .1);
}
.landing-preview-bar {
    border-bottom: 1px solid var(--line);
    background: var(--panel-hi);
}
.preview-dots i {
    background: #c2d4e8;
}
.preview-live {
    color: #0a6b46;
}
.preview-live i {
    background: var(--success);
    box-shadow: 0 0 12px rgba(18, 160, 106, .5);
}
.preview-meeting-heading small,
.preview-section-label {
    color: var(--muted);
}
.preview-meeting-heading > span {
    color: var(--sem-blue);
    border: 1px solid rgba(0, 84, 168, .22);
    background: rgba(0, 84, 168, .06);
}
.preview-language-flow {
    border: 1px solid var(--line);
    background: rgba(0, 84, 168, .04);
}
.preview-language-flow span {
    color: var(--sem-blue);
    background: rgba(0, 84, 168, .1);
}
.preview-language-flow i {
    color: var(--muted);
}
.preview-participants,
.preview-transcript {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .9);
}
.preview-participants article {
    border-bottom: 1px solid var(--line);
}
.preview-participants article > span,
.preview-transcript header > span {
    color: #fff;
    background: var(--sem-blue);
}
.preview-participants small {
    color: var(--muted);
}
.preview-participants article > i {
    background: var(--success);
}
.preview-transcript article {
    background: rgba(0, 84, 168, .04);
}
.preview-transcript header time {
    color: var(--muted);
}
.preview-transcript p {
    color: var(--muted);
}
.preview-transcript blockquote {
    color: var(--text);
    border-left: 2px solid var(--sem-blue);
    background: rgba(0, 84, 168, .06);
}
.preview-processing {
    color: var(--muted);
}
.preview-processing span {
    background: var(--sem-blue);
}
.landing-section-heading > p:last-child {
    color: var(--muted);
}
.landing-feature-card {
    border: 1px solid var(--line);
    background: var(--sem-surface);
}
.landing-feature-card::before {
    background: rgba(0, 84, 168, .07);
}
.landing-feature-card > span {
    color: var(--sem-blue);
}
.landing-feature-card p {
    color: var(--muted);
}
.landing-feature-card > i {
    color: var(--muted);
}
.landing-workflow {
    border-block: 1px solid var(--line);
    background: rgba(255, 255, 255, .6);
}
.landing-workflow-grid li {
    border-left: 1px solid var(--line);
}
.landing-workflow-grid li > span {
    color: var(--sem-blue);
}
.landing-workflow-grid p {
    color: var(--muted);
}
.landing-cta {
    border: 1px solid rgba(0, 84, 168, .2);
    background: linear-gradient(120deg, rgba(255, 255, 255, .96), rgba(234, 243, 252, .96));
    box-shadow: 0 20px 60px rgba(11, 37, 69, .12);
}
.landing-cta::after {
    background: rgba(0, 84, 168, .08);
}
.landing-cta p:last-child {
    color: var(--muted);
}
.landing-footer {
    border-top: 1px solid var(--line);
}
.landing-footer .landing-container {
    color: var(--muted);
}
.landing-footer span {
    color: var(--text);
}