:root {
    --color-bg: #0b132b;            /* background di luar frame */
    --color-surface: #1c2541;       /* topbar/nav */
    --color-primary: #3a86ff;       /* aksen biru */
    --color-accent: #2ec4b6;        /* aksen teal */
    --color-text: #e6e6e6;          /* teks utama */
    --color-muted: #9aa4b2;         /* teks sekunder */
    --radius-xl: 18px;
    --radius-lg: 14px;
    --radius-md: 12px;
    --shadow-1: 0 8px 24px rgba(0,0,0,0.25);
    --shadow-2: 0 2px 12px rgba(0,0,0,0.18);
}

/* Variasi tema: atur variabel global sesuai pilihan */
[data-theme="dark"] {
    --color-bg: #0b132b;
    --color-surface: #1c2541;
    --color-text: #e6e6e6;
    --color-muted: #9aa4b2;
}

[data-theme="white"] {
    --color-bg: #f5f7fb;
    --color-surface: #ffffff;
    --color-text: #111111;
    --color-muted: #555555;
}

[data-theme="blue"] {
    --color-bg: #0e3a8a;
    --color-surface: #0b2b6a;
    --color-text: #ffffff;
    --color-muted: #c5d4ff;
}

/* Paksa layout seperti smartphone */
html, body {
    height: 100%;
    background: var(--color-bg);
}
/* Global: set all form labels to white for consistency */
label {
    color: #fff;
}
.app-outer {
    min-height: 100%;
    display: grid;
    place-items: center;
}
.app-frame {
    width: 100%;
    max-width: 420px;          /* lebar maksimal seperti HP modern */
    min-width: 320px;
    min-height: 100vh;
    background: var(--color-surface);       /* permukaan utama mengikuti tema */
    color: var(--color-text);
    position: relative;
    box-shadow: var(--shadow-1);
    border-radius: 0;
}

/* Topbar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(90deg, var(--color-surface), #243b55);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar-inner {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 14px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: .2px;
}
.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
}
.brand i {
    color: var(--color-accent);
    font-size: 20px;
}
.brand-logo {
    height: 26px;        /* seragam tinggi untuk tampilan mobile */
    width: auto;         /* proporsi asli logo */
    object-fit: contain; /* jaga agar tidak terpotong */
    display: block;
}
/* Konten */
.content {
    padding: 14px;
    padding-bottom: 80px; /* beri ruang bottom nav */
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px;
    background: linear-gradient(0deg, var(--color-surface), #1f2a44);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 8px 12px;
}
.bottom-nav .nav-item {
    text-decoration: none;
    color: var(--color-muted);
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    transition: all .15s ease;
}
.bottom-nav .nav-item i {
    font-size: 18px;
}
.bottom-nav .nav-item.active,
.bottom-nav .nav-item:hover {
    color: var(--color-text);
    background: rgba(255,255,255,0.06);
}

/* Beranda: Grid Cards */
.home-section .section-title,
.page-section .section-title {
    font-size: 18px;
    font-weight: 600;
    margin: 4px 2px 12px;
    color: var(--color-text);
}
.cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.card-tile {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--tile-bg, #172036);
    color: var(--tile-fg, #eaeaea);
    box-shadow: var(--shadow-2);
    transition: transform .12s ease, box-shadow .12s ease;
}
.card-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
}
.tile-icon i {
    font-size: 20px;
}
.tile-label {
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1.2;
}

/* Halaman fitur */
.feature-hero {
    width: 100%;
    padding: 28px;
    border-radius: var(--radius-xl);
    background: var(--tile-bg, #172036);
    display: grid;
    place-items: center;
    margin-bottom: 12px;
}
.feature-hero i {
    font-size: 32px;
    color: #fff;
}
.page-content {
    font-size: 14px;
    color: var(--color-muted);
}

/* Responsif di HP: tetap penuh layar */
@media (max-width: 480px) {
    .app-frame,
    .bottom-nav {
        max-width: 100%;
    }
}

/* Compact modal untuk gaya mobile */
.modal-compact .modal-dialog {
    max-width: 360px;   /* lebih kecil dari lebar app-frame (420px) */
    margin-left: auto;
    margin-right: auto;
}
.modal-compact .modal-content {
    border-radius: var(--radius-lg);
}
.modal-compact label {
    font-size: 12px;
    color: var(--color-text);
    margin-bottom: 4px;
}

/* Daftar card harga pasar */
.price-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: 12px;
    color: var(--color-text);
}

/* Header kartu */
.price-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-muted);
    font-size: 12px;
    margin-bottom: 6px;
}
/* Perbesar nama pada header kartu */
.price-card-header .price-market {
    font-size: 16px;         /* sebelumnya ikut 12px dari header */
    font-weight: 700;
    color: var(--color-text);          /* mengikuti tema */
}
.price-card-body {
    display: block; /* agar baris bisa fleksibel */
}

/* Baris komoditas + gambar kecil */
.price-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.price-thumb {
    width: 42px;       /* kecil dan seragam */
    height: 42px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: var(--shadow-2);
}

.price-info {
    display: grid;
    gap: 2px;
}

.price-commodity {
    font-weight: 600;
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.2;
}

.price-value {
    font-weight: 700;
    font-size: 16px;
    color: var(--color-accent);
}

.price-unit {
    font-weight: 500;
    font-size: 12px;
    color: var(--color-muted);
    margin-left: 4px;
}

.empty-hint {
    text-align: center;
    color: var(--color-muted);
    font-size: 13px;
    padding: 10px;
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: var(--radius-md);
}

/* Gambar pada card harga pasar */
.price-card-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}
.price-image-box {
    margin-top: 6px;   /* jarak dari teks pasar */
}

.price-image-link {
    display: inline-block;
    cursor: pointer;
}

/* Thumbnail gambar kotak di kartu */
.profil-page .price-thumb-square {
    width: 96px;
    height: 96px;
}

/* Opsional: sedikit beri jarak agar seimbang saat di tengah */
.profil-page .price-image-box {
    margin-top: 10px;
    margin-bottom: 6px;
}

/* Tema putih: pastikan kartu dan teks kontras (latar putih, teks hitam) */
[data-theme="white"] .price-card {
    background: #ffffff !important;
}
[data-theme="white"] .price-card,
[data-theme="white"] .price-card .price-card-header h3,
[data-theme="white"] .price-card .price-date,
[data-theme="white"] .price-card .price-commodity,
[data-theme="white"] .price-card .price-unit,
[data-theme="white"] .price-card small,
[data-theme="white"] .price-cards .empty-hint {
    color: #111111 !important;
}
.price-thumb-square {
    width: 64px;             /* sebelumnya 48px */
    height: 64px;            /* sebelumnya 48px */
    border-radius: var(--radius-md);
    object-fit: cover;
    display: block;
    box-shadow: var(--shadow-2);
}

/* Harga Pasar: perbesar thumbnail agar kartu tampak lebih padat */
.harga-pasar-page .price-thumb-square {
    width: 120px;
    height: 120px;
}
@media (max-width: 576px) {
    .harga-pasar-page .price-thumb-square {
        width: 88px;
        height: 88px;
    }
}

/* Data Perikanan: samakan ukuran thumbnail dengan Harga Pasar */
.data-perikanan-page .price-thumb-square {
    width: 120px;
    height: 120px;
}
@media (max-width: 576px) {
    .data-perikanan-page .price-thumb-square {
        width: 88px;
        height: 88px;
    }
}

/* Hasil Tangkapan: samakan ukuran thumbnail dan posisi dengan Harga Pasar */
.hasil-tangkapan-page .price-thumb-square {
    width: 120px;
    height: 120px;
}
@media (max-width: 576px) {
    .hasil-tangkapan-page .price-thumb-square {
        width: 88px;
        height: 88px;
    }
}
.hasil-tangkapan-page .price-image-box {
    margin-top: 0; /* gambar di dalam body tidak perlu offset */
}

/* Peta Lokasi: samakan ukuran thumbnail dan posisi dengan Harga Pasar */
.peta-lokasi-page .price-thumb-square {
    width: 120px;
    height: 120px;
}
@media (max-width: 576px) {
    .peta-lokasi-page .price-thumb-square {
        width: 88px;
        height: 88px;
    }
}
.peta-lokasi-page .price-image-box {
    margin-top: 0; /* gambar di dalam body kartu, tanpa offset */
}

/* Berita: ukuran thumbnail dan posisi seragam seperti Harga Pasar */
.berita-page .price-thumb-square {
    width: 100%;
    height: 220px; /* seragam: gambar penuh lebar dengan tinggi tetap */
    object-fit: cover;
    border-radius: 8px;
}
@media (max-width: 576px) {
    .berita-page .price-thumb-square {
        width: 100%;
        height: 200px; /* sedikit lebih rendah di layar kecil */
    }
}
.berita-page .price-image-box,
.lihat-berita-page .price-image-box {
    margin-top: 0; /* gambar berada di dalam body, rata vertikal */
}

/* Paragraf konten berita: rata kiri-kanan agar tampak seperti kotak teks */
.berita-page .berita-content,
.lihat-berita-page .berita-content {
    text-align: justify;
    text-justify: inter-word;
    white-space: normal; /* hindari baris pendek akibat newline di data */
    line-height: 1.5;
    word-break: break-word;
    hyphens: auto;
}

/* Besarkan gambar: gunakan separuh lebar card untuk kolom gambar */
/* Layout vertikal untuk kartu Berita */
.berita-page .price-card-body,
.berita-page .berita-stack,
.lihat-berita-page .price-card-body,
.lihat-berita-page .berita-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.price-cards.berita-page {
    display: flex;
    flex-direction: column;
    gap: 12px; /* jarak antar card berita, dibuat lebih dekat */
}
.berita-page .price-card {
    margin-bottom: 12px; /* fallback jika gap tidak diterapkan */
}
.price-cards.berita-page .price-card:last-child {
    margin-bottom: 0;
}

/* Share toolbar - Detail Berita */
.lihat-berita-page .share-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.3);
    background: transparent;
    color: #000000; /* ikon hitam */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.share-btn:hover {
    background: rgba(0,0,0,0.06); /* hover halus tetap hitam */
    color: #000000;
    border-color: #000000;
}
.share-btn svg {
    width: 18px;
    height: 18px;
}
.share-btn.telegram:hover, .share-btn.telegram.copied { color: #000000; border-color: #000000; }
.share-btn.whatsapp:hover, .share-btn.whatsapp.copied { color: #000000; border-color: #000000; }
.share-btn.facebook:hover { color: #000000; border-color: #000000; }
.share-btn.copy.copied { color: #000000; border-color: #000000; }
.share-btn.print:hover { color: #000000; border-color: #000000; }
.berita-page .price-card-body > .price-image-box,
.berita-page .berita-stack > .price-image-box,
.lihat-berita-page .price-card-body > .price-image-box,
.lihat-berita-page .berita-stack > .price-image-box {
    width: 100%;
}

/* Gambar memenuhi lebar kartu, proporsional */
.berita-page .price-image-box .price-thumb-square,
.berita-page .price-image-box img,
.lihat-berita-page .price-image-box .price-thumb-square,
.lihat-berita-page .price-image-box img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    display: block; /* seragam: hilangkan space bawaan inline images */
}

/* Gambar di dalam modal viewer */
.modal-view-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
}

/* Aksi card */
.price-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px; /* lebih dekat ke stok */
}
.price-card-actions .btn {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: var(--radius-md);
}

/* Compact modal tetap untuk mobile */
.modal-compact .modal-dialog {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Override khusus tema putih */
[data-theme="white"] html,
[data-theme="white"] body {
    background: #f5f7fb;
}
[data-theme="white"] .topbar {
    background: linear-gradient(90deg, #f7fafc, #e2e8f0);
    border-bottom-color: rgba(0,0,0,0.06);
}
[data-theme="white"] .bottom-nav {
    background: linear-gradient(0deg, #ffffff, #f1f5f9);
    border-top-color: rgba(0,0,0,0.06);
}
[data-theme="white"] .bottom-nav .nav-item.active,
[data-theme="white"] .bottom-nav .nav-item:hover {
    color: #111;
    background: rgba(0,0,0,0.06);
}
[data-theme="white"] .price-card {
    background: #f4f6f8;
    color: #111;
}
[data-theme="white"] .price-card-header {
    color: #555;
}
[data-theme="white"] .price-card-header .price-market {
    color: #111;
}
/* Ikon kartu di tema putih: gunakan warna gelap agar jelas */
[data-theme="white"] .tile-icon {
    background: rgba(0,0,0,0.06);
    color: #000;
}
/* Netralisir gaya inline di halaman Hasil Tangkapan agar kontras di tema putih */
[data-theme="white"] .price-cards .price-card,
[data-theme="white"] .price-cards .price-card .price-card-header h3,
[data-theme="white"] .price-cards .price-card .price-date,
[data-theme="white"] .price-cards .price-card .price-commodity,
[data-theme="white"] .price-cards .price-card .price-unit,
[data-theme="white"] .price-cards .price-card small,
[data-theme="white"] .price-cards .empty-hint {
    color: #111 !important;
}

/* Override khusus tema biru */
[data-theme="blue"] html,
[data-theme="blue"] body {
    background: #0e3a8a;
}
[data-theme="blue"] .topbar {
    background: linear-gradient(90deg, #0b2b6a, #0e3a8a);
}
[data-theme="blue"] .bottom-nav {
    background: linear-gradient(0deg, #0b2b6a, #0e3a8a);
}
[data-theme="blue"] .bottom-nav .nav-item.active,
[data-theme="blue"] .bottom-nav .nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
}
[data-theme="blue"] .price-card {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
[data-theme="blue"] .price-card-header {
    color: #c5d4ff;
}
[data-theme="blue"] .price-card-header .price-market {
    color: #fff;
}

/* Tombol warna khusus untuk tema tambahan */
.btn-teal {
    background-color: #2ec4b6;
    border-color: #2ec4b6;
    color: #062b29;
}
.btn-teal:hover { filter: brightness(0.92); color: #062b29; }

.btn-purple {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: #fff;
}
.btn-purple:hover { filter: brightness(0.92); color: #fff; }

.btn-indigo {
    background-color: #3f51b5;
    border-color: #3f51b5;
    color: #fff;
}
.btn-indigo:hover { filter: brightness(0.92); color: #fff; }

.btn-pink {
    background-color: #e83e8c;
    border-color: #e83e8c;
    color: #fff;
}
.btn-pink:hover { filter: brightness(0.92); color: #fff; }

/* Variabel tema untuk sinkronisasi kartu dan form */
[data-theme="white"] {
    --color-bg: #f5f7fb;
    --color-surface: #ffffff;
    --color-text: #111111;
    --color-muted: #4b5563;
    --color-accent: #2563eb;
    --tile-bg: #f4f6f8;
    --tile-fg: #111111;
}
[data-theme="blue"] {
    --color-bg: #0e3a8a;
    --color-surface: #0b2b6a;
    --color-text: #ffffff;
    --color-muted: #c5d4ff;
    --color-accent: #60a5fa;
    --tile-bg: rgba(255,255,255,0.12);
    --tile-fg: #ffffff;
}
[data-theme="green"] {
    --color-bg: #0d2515;
    --color-surface: #103220;
    --color-text: #e8f5e9;
    --color-muted: #b9e5c9;
    --color-accent: #2ecc71;
    --tile-bg: rgba(255,255,255,0.10);
    --tile-fg: #e8f5e9;
}
[data-theme="red"] {
    --color-bg: #2b0d12;
    --color-surface: #40161b;
    --color-text: #ffe5e5;
    --color-muted: #ffc9c9;
    --color-accent: #ff6b6b;
    --tile-bg: rgba(255,255,255,0.10);
    --tile-fg: #ffe5e5;
}
[data-theme="orange"] {
    --color-bg: #2a1a0a;
    --color-surface: #3a240e;
    --color-text: #fff1e6;
    --color-muted: #ffd7ba;
    --color-accent: #ff9f43;
    --tile-bg: rgba(255,255,255,0.10);
    --tile-fg: #fff1e6;
}
[data-theme="teal"] {
    --color-bg: #0b2d2b;
    --color-surface: #10403b;
    --color-text: #e6fffb;
    --color-muted: #b2f5ea;
    --color-accent: #2ec4b6;
    --tile-bg: rgba(255,255,255,0.10);
    --tile-fg: #e6fffb;
}
[data-theme="purple"] {
    --color-bg: #1a103d;
    --color-surface: #2b1d66;
    --color-text: #efeaff;
    --color-muted: #d8ccff;
    --color-accent: #a78bfa;
    --tile-bg: rgba(255,255,255,0.10);
    --tile-fg: #efeaff;
}
[data-theme="indigo"] {
    --color-bg: #0f224a;
    --color-surface: #1b3570;
    --color-text: #e6ecff;
    --color-muted: #c7d2fe;
    --color-accent: #6366f1;
    --tile-bg: rgba(255,255,255,0.10);
    --tile-fg: #e6ecff;
}
[data-theme="pink"] {
    --color-bg: #2b0f24;
    --color-surface: #521d45;
    --color-text: #ffe6f2;
    --color-muted: #ffc1e3;
    --color-accent: #f472b6;
    --tile-bg: rgba(255,255,255,0.10);
    --tile-fg: #ffe6f2;
}

/* Form mengikuti tema */
.form-control,
.form-select {
    background: rgba(255,255,255,0.08);
    color: var(--color-text);
    border-color: rgba(255,255,255,0.18);
}
.form-control::placeholder {
    color: var(--color-muted);
    opacity: 0.85;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 .2rem rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.10);
    color: var(--color-text);
}

/* Override form untuk tema putih */
[data-theme="white"] .form-control,
[data-theme="white"] .form-select {
    background: #ffffff;
    color: #111111;
    border-color: #cbd5e1;
}
[data-theme="white"] .form-control::placeholder,
[data-theme="white"] .form-select::placeholder {
    color: #111111;
    opacity: 0.7;
}
[data-theme="white"] .input-group-text {
    background: #ffffff;
    color: #111111;
    border-color: #cbd5e1;
}
[data-theme="white"] .form-check-input {
    background-color: #ffffff;
    border-color: #cbd5e1;
}
[data-theme="white"] .form-check-input:checked {
    background-color: #2563eb; /* gunakan aksen tema untuk status checked */
    border-color: #2563eb;
}
[data-theme="white"] .form-check-label,
[data-theme="white"] .form-label {
    color: #111111;
}
[data-theme="white"] .form-control:focus,
[data-theme="white"] .form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 .2rem rgba(37,99,235,0.18);
}

/* Khusus halaman Akun: pastikan seluruh form tampil putih saat tema putih */
[data-theme="white"] .akun-page .form-control,
[data-theme="white"] .akun-page .form-select,
[data-theme="white"] .akun-page .input-group-text,
[data-theme="white"] .akun-page .form-check-input {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #cbd5e1 !important;
}
[data-theme="white"] .akun-page .form-label,
[data-theme="white"] .akun-page .form-check-label {
    color: #111111 !important;
}
[data-theme="white"] .akun-page .form-control:focus,
[data-theme="white"] .akun-page .form-select:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 .2rem rgba(37,99,235,0.18) !important;
}
[data-theme="white"] .akun-page .modal-content {
    background: #ffffff !important;
    color: #111111 !important;
}
[data-theme="white"] .akun-page .price-card {
    background: #ffffff !important;
    color: #111111 !important;
}

/* Modal mengikuti tema */
.modal-content {
    background: var(--color-surface);
    color: var(--color-text);
}

/* Tombol utama mengikuti aksen tema */
.btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.btn-primary:hover { filter: brightness(0.92); color: #fff; }

/* Sesuaikan warna ikon close untuk tema putih agar terlihat */
[data-theme="white"] .btn-close-white {
    filter: invert(1) brightness(0.2);
}

/* Tema hijau */
[data-theme="green"] html,
[data-theme="green"] body { background: #0d2515; }
[data-theme="green"] .topbar { background: linear-gradient(90deg, #103220, #145c38); }
[data-theme="green"] .bottom-nav { background: linear-gradient(0deg, #103220, #145c38); }
[data-theme="green"] .bottom-nav .nav-item.active,
[data-theme="green"] .bottom-nav .nav-item:hover { color: #e8f5e9; background: rgba(255,255,255,0.12); }
[data-theme="green"] .price-card { background: rgba(255,255,255,0.12); color: #e8f5e9; }
[data-theme="green"] .price-card-header { color: #b9e5c9; }
[data-theme="green"] .price-card-header .price-market { color: #fff; }

/* Tema merah */
[data-theme="red"] html,
[data-theme="red"] body { background: #2b0d12; }
[data-theme="red"] .topbar { background: linear-gradient(90deg, #40161b, #6b2028); }
[data-theme="red"] .bottom-nav { background: linear-gradient(0deg, #40161b, #6b2028); }
[data-theme="red"] .bottom-nav .nav-item.active,
[data-theme="red"] .bottom-nav .nav-item:hover { color: #ffe5e5; background: rgba(255,255,255,0.12); }
[data-theme="red"] .price-card { background: rgba(255,255,255,0.12); color: #ffe5e5; }
[data-theme="red"] .price-card-header { color: #ffc9c9; }
[data-theme="red"] .price-card-header .price-market { color: #fff; }

/* Tema oranye */
[data-theme="orange"] html,
[data-theme="orange"] body { background: #2a1a0a; }
[data-theme="orange"] .topbar { background: linear-gradient(90deg, #3a240e, #8a4b0e); }
[data-theme="orange"] .bottom-nav { background: linear-gradient(0deg, #3a240e, #8a4b0e); }
[data-theme="orange"] .bottom-nav .nav-item.active,
[data-theme="orange"] .bottom-nav .nav-item:hover { color: #fff1e6; background: rgba(255,255,255,0.12); }
[data-theme="orange"] .price-card { background: rgba(255,255,255,0.12); color: #fff1e6; }
[data-theme="orange"] .price-card-header { color: #ffd7ba; }
[data-theme="orange"] .price-card-header .price-market { color: #fff; }

/* Tema teal */
[data-theme="teal"] html,
[data-theme="teal"] body { background: #0b2d2b; }
[data-theme="teal"] .topbar { background: linear-gradient(90deg, #0b2d2b, #10403b); }
[data-theme="teal"] .bottom-nav { background: linear-gradient(0deg, #0b2d2b, #10403b); }
[data-theme="teal"] .bottom-nav .nav-item.active,
[data-theme="teal"] .bottom-nav .nav-item:hover { color: #e6fffb; background: rgba(255,255,255,0.12); }
[data-theme="teal"] .price-card { background: rgba(255,255,255,0.12); color: #e6fffb; }
[data-theme="teal"] .price-card-header { color: #b2f5ea; }
[data-theme="teal"] .price-card-header .price-market { color: #fff; }

/* Tema ungu */
[data-theme="purple"] html,
[data-theme="purple"] body { background: #1a103d; }
[data-theme="purple"] .topbar { background: linear-gradient(90deg, #1a103d, #2b1d66); }
[data-theme="purple"] .bottom-nav { background: linear-gradient(0deg, #1a103d, #2b1d66); }
[data-theme="purple"] .bottom-nav .nav-item.active,
[data-theme="purple"] .bottom-nav .nav-item:hover { color: #efeaff; background: rgba(255,255,255,0.12); }
[data-theme="purple"] .price-card { background: rgba(255,255,255,0.12); color: #efeaff; }
[data-theme="purple"] .price-card-header { color: #d8ccff; }
[data-theme="purple"] .price-card-header .price-market { color: #fff; }

/* Tema indigo */
[data-theme="indigo"] html,
[data-theme="indigo"] body { background: #0f224a; }
[data-theme="indigo"] .topbar { background: linear-gradient(90deg, #0f224a, #1b3570); }
[data-theme="indigo"] .bottom-nav { background: linear-gradient(0deg, #0f224a, #1b3570); }
[data-theme="indigo"] .bottom-nav .nav-item.active,
[data-theme="indigo"] .bottom-nav .nav-item:hover { color: #e6ecff; background: rgba(255,255,255,0.12); }
[data-theme="indigo"] .price-card { background: rgba(255,255,255,0.12); color: #e6ecff; }
[data-theme="indigo"] .price-card-header { color: #c7d2fe; }
[data-theme="indigo"] .price-card-header .price-market { color: #fff; }

/* Tema pink */
[data-theme="pink"] html,
[data-theme="pink"] body { background: #2b0f24; }
[data-theme="pink"] .topbar { background: linear-gradient(90deg, #2b0f24, #521d45); }
[data-theme="pink"] .bottom-nav { background: linear-gradient(0deg, #2b0f24, #521d45); }
[data-theme="pink"] .bottom-nav .nav-item.active,
[data-theme="pink"] .bottom-nav .nav-item:hover { color: #ffe6f2; background: rgba(255,255,255,0.12); }
[data-theme="pink"] .price-card { background: rgba(255,255,255,0.12); color: #ffe6f2; }
[data-theme="pink"] .price-card-header { color: #ffc1e3; }
[data-theme="pink"] .price-card-header .price-market { color: #fff; }
.harga-pasar-page .price-image-box,
.data-perikanan-page .price-image-box {
    margin-top: 0; /* saat gambar berada di dalam body kartu, pusatkan tanpa offset */
}