body {
    background: #f5ecd9;
    color: #2f2a22;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

a { color: #315f4b; }

.navbar-default {
    background: #fff8e8;
    border: 0;
    border-bottom: 1px solid #d8c49a;
    box-shadow: 0 8px 24px rgba(74, 53, 31, .08);
}

.navbar-default .navbar-brand {
    color: #264f3d;
    font-weight: 700;
}

.navbar-default .navbar-nav > li > a { color: #4b3c27; }
.navbar-default .navbar-nav > li > a:hover { color: #9a6b22; }

.app-shell { padding-bottom: 40px; }

.page-header {
    border-bottom: 1px solid #d8c49a;
    color: #284b3a;
    font-weight: 700;
}

.panel {
    border: 1px solid rgba(142, 111, 58, .22);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(72, 52, 30, .08);
}

.panel-default > .panel-heading {
    background: #fff8e8;
    border-color: #e0cfa7;
    color: #315f4b;
    border-radius: 8px 8px 0 0;
}

.btn { border-radius: 6px; }

.btn-primary {
    background: #315f4b;
    border-color: #264f3d;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #264f3d;
    border-color: #1e3f31;
}

.btn-default {
    background: #fffaf0;
    border-color: #d6bf8d;
    color: #4b3c27;
}

.form-control {
    border-color: #d6bf8d;
    border-radius: 6px;
    box-shadow: none;
}

.form-control:focus {
    border-color: #9a6b22;
    box-shadow: 0 0 0 3px rgba(154, 107, 34, .14);
}

.dashboard-hero {
    align-items: center;
    background: linear-gradient(135deg, #fff8e8, #e8dfc6);
    border: 1px solid #d8c49a;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    padding: 22px;
}

.dashboard-hero .page-header {
    border: 0;
    margin: 0 0 6px;
}

.dashboard-actions {
    display: flex;
    gap: 8px;
}

.stats-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: 20px;
}

.stat-card {
    background: #fffaf0;
    border: 1px solid #d8c49a;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(72, 52, 30, .07);
    min-height: 106px;
}

.stat-number {
    color: #8a621f;
    font-size: 30px;
    font-weight: 700;
}

.stat-label {
    color: #315f4b;
    font-size: 13px;
    text-transform: uppercase;
}

.search-panel {
    background: #fff8e8;
    border: 1px solid #d8c49a;
    border-radius: 8px;
    padding: 14px;
}

.search-panel-modern .search-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(230px, 2fr) repeat(4, minmax(140px, 1fr));
}

.search-panel-modern .search-generation-row {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(260px, 2fr);
}

.search-help-cell {
    align-items: center;
    display: flex;
}

.search-actions {
    margin-top: 10px;
}

.privacy-note {
    background: #fff8e8;
    border: 1px solid #d8c49a;
    border-left: 4px solid #315f4b;
    border-radius: 8px;
    color: #4b3c27;
    margin: 0 0 14px;
    padding: 11px 14px;
}

.privacy-note-strong {
    border-left-color: #8a621f;
}

.search-generation-row {
    margin-top: 10px;
}

.form-help {
    color: #6d5d42;
    font-size: 12px;
    margin: 8px 0 0;
}

.generation-badge {
    border: 1px solid rgba(47, 42, 34, .08);
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(72, 52, 30, .08);
    color: #2f2a22;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    margin: 2px 3px;
    padding: 5px 9px;
    transition: transform .18s ease, box-shadow .18s ease;
    vertical-align: middle;
}

.generation-badge:hover {
    box-shadow: 0 8px 18px rgba(72, 52, 30, .16);
    transform: translateY(-1px);
}

.generation-badge-unknown { background: #e7e1d4; color: #6d5d42; }
.generation-badge-0 { background: #244d3a; color: #fff8e8; }
.generation-badge-1 { background: #d9ead3; color: #244d3a; }
.generation-badge-2 { background: #cfe2f3; color: #1d4e75; }
.generation-badge-3 { background: #fce5cd; color: #8a4d13; }
.generation-badge-4 { background: #eadcf8; color: #5b3b78; }
.generation-badge-5 { background: #fff2cc; color: #8a621f; }
.generation-badge-6 { background: #d0e0e3; color: #315f4b; }
.generation-badge-7 { background: #f4cccc; color: #8d2d2d; }
.generation-badge-8 { background: #d9d2e9; color: #46326a; }
.generation-badge-9 { background: #c9b79a; color: #3c2c19; }
.generation-badge-10 { background: #2f2a22; color: #fff8e8; }

.generation-card-badge {
    margin: 8px 0;
}

.profile-generation-badge {
    font-size: 13px;
}

.generation-timeline {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.generation-timeline-item {
    background: #fffaf0;
    border: 1px solid #d8c49a;
    border-radius: 8px;
    color: #2f2a22;
    display: block;
    padding: 12px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
    min-height: 98px;
}

.generation-timeline-item:hover,
.generation-timeline-item:focus {
    box-shadow: 0 12px 24px rgba(72, 52, 30, .12);
    color: #2f2a22;
    text-decoration: none;
    transform: translateY(-2px);
}

.generation-timeline-item strong,
.generation-timeline-item small {
    display: block;
}

.generation-reference-hero {
    background: linear-gradient(135deg, #fff8e8, #dde7d5);
}

.generation-mode-note {
    min-width: 230px;
    text-align: right;
}

.tree-toolbar {
    background: #fff8e8;
    border: 1px solid #d8c49a;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 10px;
}

.perspective-selector {
    background: #fff8e8;
    border: 1px solid #d8c49a;
    border-radius: 8px;
    margin: 0 0 16px;
    padding: 10px 12px;
}

.perspective-selector label {
    color: #315f4b;
    margin-right: 6px;
}

.perspective-current {
    color: #6d5d42;
    font-size: 12px;
    margin-top: 6px;
}

.javanese-tree-wrapper {
    overflow-x: auto;
    padding: 18px 0 26px;
    width: 100%;
}

#wrapper.javanese-tree-wrapper span.label,
.javanese-tree-node {
    border: 2px solid rgba(49, 95, 75, .2);
    border-radius: 6px;
    display: block;
    font-size: 12px;
    line-height: 1.25;
    max-width: 180px;
    min-height: 42px;
    min-width: 180px;
    overflow: visible;
    padding: 8px 10px;
    text-align: center;
    white-space: normal;
}

.javanese-tree-node small {
    display: block;
    font-size: 10px;
    font-weight: 600;
    margin-top: 4px;
    opacity: .85;
}

.javanese-tree-node a {
    display: block;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.archive-card .panel-title {
    color: #315f4b;
    font-weight: 700;
    margin-bottom: 8px;
}

.gallery-photo {
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    margin-bottom: 12px;
    object-fit: cover;
    width: 100%;
}

.child-order-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 10px 0;
}

.child-order-grid label {
    color: #315f4b;
    font-weight: 600;
}

.child-order-grid span {
    display: block;
    margin-bottom: 4px;
}

.table > tbody > tr > th {
    color: #315f4b;
}

@media (max-width: 767px) {
    .dashboard-hero {
        align-items: stretch;
        display: block;
    }

    .dashboard-actions {
        margin-top: 12px;
    }

    .search-panel .col-md-2,
    .search-panel .col-md-4 {
        margin-bottom: 8px;
    }

    .search-panel-modern .search-grid,
    .search-panel-modern .search-generation-row {
        grid-template-columns: 1fr;
    }

    .profile-generation-badge {
        display: block;
        float: none !important;
        margin-top: 8px;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background: #1f211d;
        color: #eee5d4;
    }

    .navbar-default,
    .panel-default > .panel-heading,
    .dashboard-hero,
    .search-panel,
    .perspective-selector,
    .tree-toolbar {
        background: #2b2a23;
        border-color: #5d5037;
    }

    .panel,
    .stat-card,
    .generation-timeline-item {
        background: #262720;
        border-color: #5d5037;
        color: #eee5d4;
    }

    .page-header,
    .panel-default > .panel-heading,
    .table > tbody > tr > th,
    .stat-label,
    a {
        color: #b9d8bb;
    }

    .form-control {
        background: #1f211d;
        border-color: #5d5037;
        color: #eee5d4;
    }
}

@media print {
    body {
        background: #fff;
        color: #111;
        font-size: 12px;
    }

    .navbar,
    .no-print,
    .btn,
    .alert,
    form,
    script {
        display: none !important;
    }

    .app-shell {
        width: 100%;
        padding: 0;
    }

    .page-header {
        border-bottom: 1px solid #999;
        margin-top: 0;
    }

    .panel {
        border: 1px solid #bbb;
        box-shadow: none;
        page-break-inside: avoid;
    }

    .panel-default > .panel-heading {
        background: #f3f3f3 !important;
        border-color: #bbb;
        color: #111;
    }

    a[href]:after {
        content: "";
    }
}