:root {
    --sky: #36aeea;
    --sky-dark: #147fb8;
    --sky-soft: #eaf8ff;
    --ink: #17324d;
    --muted: #6b7c8f;
    --line: #d9ebf5;
}

body {
    background: linear-gradient(180deg, #f3fbff 0%, #ffffff 36%);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.app-navbar {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

.hero-panel,
.upload-panel,
.content-panel,
.public-query,
.partner-card,
.empty-state {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(25, 105, 160, 0.08);
}

.hero-panel {
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

.display-title {
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.eyebrow {
    color: var(--sky-dark);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .78rem;
}

.privacy-box {
    background: var(--sky-soft);
    border: 1px solid #c9edf9;
    border-radius: 8px;
    padding: 1.25rem;
}

.upload-panel,
.public-query,
.partner-card,
.content-panel {
    padding: 1rem;
}

.partner-card {
    background: linear-gradient(135deg, #ffffff 0%, #f0fbff 100%);
}

.visit-counter {
    color: var(--muted);
    font-size: .92rem;
}

.visit-counter span {
    color: var(--sky-dark);
    font-weight: 800;
}

#dropZone.dragover {
    border-color: var(--sky);
    background: var(--sky-soft);
}

.btn-primary {
    --bs-btn-bg: var(--sky);
    --bs-btn-border-color: var(--sky);
    --bs-btn-hover-bg: var(--sky-dark);
    --bs-btn-hover-border-color: var(--sky-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--sky-dark);
    --bs-btn-border-color: var(--sky);
    --bs-btn-hover-bg: var(--sky);
    --bs-btn-hover-border-color: var(--sky);
}

.nav-pills {
    gap: .5rem;
}

.nav-pills .nav-link {
    color: var(--sky-dark);
    white-space: nowrap;
}

.nav-pills .nav-link.active {
    background: var(--sky);
}

.summary-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
    min-height: 104px;
}

.summary-card .label {
    color: var(--muted);
    font-size: .82rem;
}

.summary-card .value {
    font-size: 1.05rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.data-table {
    margin-bottom: 0;
}

.data-table th {
    width: 32%;
    color: var(--muted);
    font-weight: 600;
}

.json-view {
    background: #092033;
    color: #d8f3ff;
    border-radius: 8px;
    padding: 1rem;
    min-height: 360px;
    max-height: 70vh;
    overflow: auto;
    font-size: .88rem;
}

@media (max-width: 576px) {
    .data-table th,
    .data-table td {
        display: block;
        width: 100%;
    }

    .content-panel,
    .public-query,
    .upload-panel {
        padding: .85rem;
    }
}