/* ── india.census.living — Neural dark theme ── */

:root {
    color-scheme: dark;
    --g0: #0B0B10; --g1: #14141C; --g2: #1A1A25; --g3: #23232F;
    --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.13);
    --ink: #EDECF6; --ink2: #B7B6CA; --ink3: #9392A8;
    --v: #8B5CF6; --m: #D946EF; --b: #3B82F6;
    --v-l: #C4B5FD; --m-l: #F0ABFC; --b-l: #93C5FD;
    --grad: linear-gradient(110deg, #8B5CF6 0%, #D946EF 52%, #3B82F6 100%);
    --grad-l: linear-gradient(110deg, #C4B5FD 0%, #F0ABFC 50%, #93C5FD 100%);
    --display: 'Sora', system-ui, 'Segoe UI', sans-serif;
    --body: 'Inter', system-ui, 'Segoe UI', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--g0); }
body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(1100px 620px at 78% -8%, rgba(139,92,246,.1), transparent 62%),
        radial-gradient(800px 520px at 18% 12%, rgba(59,130,246,.06), transparent 60%),
        var(--g0);
    font: 400 14.5px/1.55 var(--body);
    font-variant-numeric: tabular-nums lining-nums;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--v-l); text-decoration: none; }
a:hover { color: #fff; }

.content { padding-top: 0; }
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ── Home page hero ── */
.home-hero {
    background: linear-gradient(135deg, var(--g1) 0%, rgba(26,21,42,.8) 50%, var(--g2) 100%);
    color: #fff;
    padding: 3rem 2rem 2rem;
    margin: -1rem -2rem 2rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.home-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.6), rgba(217,70,239,.6), rgba(59,130,246,.6), transparent);
}
.hero-bg-pattern {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(99,102,241,0.12) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(139,92,246,0.1) 0%, transparent 50%);
    pointer-events: none;
}
.home-hero-inner { position: relative; z-index: 1; }
.home-hero-text { margin-bottom: 1.5rem; }
.hero-badge {
    display: inline-block;
    font: 600 10.5px var(--mono);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--v-l);
    background: rgba(139,92,246,0.12);
    border: 1px solid rgba(139,92,246,0.28);
    border-radius: 100px;
    padding: .3rem .9rem;
    margin-bottom: .6rem;
}
.home-hero h1 {
    font: 600 clamp(28px, 3.3vw, 46px)/1.08 var(--display);
    margin: 0 0 .5rem;
    letter-spacing: -0.035em;
}
.home-hero p {
    color: var(--ink2);
    font-size: 1rem;
    margin: 0;
    max-width: 66ch;
}

/* ── Hero stat cards (shared between Home & GeoView) ── */
.hero-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .75rem;
}
.hero-cards-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .8rem;
}
.hero-card {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
    border: 1px solid var(--line2);
    border-radius: 14px;
    padding: .8rem 1rem;
    min-width: 130px;
    transition: all .25s;
    position: relative;
    overflow: hidden;
}
.hero-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--grad);
    opacity: 0;
    transition: opacity .25s;
}
.hero-card:hover {
    background: rgba(139,92,246,.06);
    border-color: rgba(217,70,239,.35);
    transform: translateY(-1px);
}
.hero-card:hover::before { opacity: 1; }
.hero-card-pop {
    border-color: rgba(217,70,239,.35);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(217,70,239,.12), transparent 60%),
        linear-gradient(180deg, rgba(139,92,246,.08), rgba(255,255,255,.01));
}
.hero-card-icon {
    font-size: 1.3rem;
    margin-bottom: .3rem;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.15));
}
.hero-card-label {
    font: 600 10.5px var(--mono);
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink3);
}
.hero-card-value {
    font: 700 1.3rem/1.2 var(--display);
    color: #fff;
    margin: .2rem 0;
    letter-spacing: -0.02em;
}
.hero-card-sub {
    font: 500 11px var(--mono);
    color: var(--ink2);
    display: flex;
    gap: .6rem;
}
.hero-spark {
    width: 100%;
    max-height: 36px;
    margin-top: .4rem;
    opacity: .85;
}

/* ── Topic grid ── */
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.topic-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border: 1px solid var(--line2);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: all .2s;
}
.topic-card:hover {
    border-color: rgba(217,70,239,.45);
    background: rgba(139,92,246,.06);
    transform: translateY(-2px);
    text-decoration: none;
}
.topic-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    background: rgba(139,92,246,.1);
    border: 1px solid rgba(139,92,246,.2);
}
.topic-card h3 {
    margin: 0 0 .3rem;
    font: 600 15px/1.2 var(--display);
    color: #fff;
}
.topic-card p {
    margin: 0;
    font-size: .8rem;
    color: var(--ink2);
    line-height: 1.4;
}

/* ── Hero (census data pages) ── */
.hero {
    position: relative;
    background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%);
    color: var(--ink);
    padding: 1.5rem 2rem 1.5rem;
    border-bottom: 1px solid var(--line);
}
.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.6), rgba(217,70,239,.6), rgba(59,130,246,.6), transparent);
}
.hero h1 {
    font: 600 clamp(22px, 2.5vw, 34px)/1.1 var(--display);
    color: #fff;
    margin: 0 0 .2rem;
    letter-spacing: -0.02em;
}
.hero .lead { color: var(--ink2); font-size: .9rem; margin: 0 0 .8rem; }

.crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font: 500 12px var(--mono);
    color: var(--ink3);
    margin-bottom: .6rem;
}
.crumbs a { color: var(--ink2); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs span[aria-hidden] { color: rgba(255,255,255,.2); }

/* ── Gradient text ── */
.gt {
    background: var(--grad-l);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-split { display: flex; gap: 2rem; align-items: stretch; }
.hero-text { flex: 1; min-width: 0; }
.hero-map { width: 50%; flex-shrink: 0; display: flex; flex-direction: column; }
.geo-map {
    width: 100%;
    height: 100%;
    min-height: 220px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line);
    overflow: hidden;
}

/* ── Filter bar ── */
.filter-bar { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.filter-bar label { display: flex; flex-direction: column; gap: .15rem; }
.filter-label { font: 500 10px var(--mono); text-transform: uppercase; color: var(--ink3); letter-spacing: .1em; }
.filter-bar select {
    background: var(--g1);
    color: var(--ink);
    border: 1px solid var(--line2);
    border-radius: 8px;
    padding: .4rem .6rem;
    font: 500 13px var(--body);
    min-width: 140px;
    color-scheme: dark;
}
.filter-bar select option {
    background: var(--g1);
    color: var(--ink);
}
.filter-bar select:focus {
    border-color: var(--v);
    outline: none;
    box-shadow: 0 0 0 3px rgba(139,92,246,.25);
}

/* ── Stats cards (summary profile) ── */
.prof {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin: 1.5rem 0;
}
.stat {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--line2);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
    transition: border-color .2s, background .2s;
}
.stat:hover {
    border-color: rgba(139,92,246,.3);
    background: rgba(139,92,246,.05);
}
.stat.big {
    border-color: rgba(217,70,239,.35);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(217,70,239,.14), transparent 60%),
        linear-gradient(180deg, rgba(139,92,246,.08), rgba(255,255,255,.01));
    grid-column: span 2;
}
.stat .lab {
    display: block;
    font: 600 10.5px var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink3);
}
.stat .fig {
    display: block;
    font: 700 28px/1.1 var(--display);
    color: #fff;
    margin: .3rem 0;
    letter-spacing: -0.02em;
}
.stat .fig .u { font-size: .45em; color: var(--v-l); margin-left: 4px; font-weight: 600; }
.stat .sub { display: block; font: 500 12px var(--mono); color: var(--ink2); margin-top: .3rem; }

.empty-hint { text-align: center; padding: 2.5rem; color: var(--ink3); font-size: .95rem; }
.section-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.3) 20%, rgba(217,70,239,.2) 80%, transparent);
    margin: 28px 0;
}

/* ── Panels (gradient-bordered) ── */
.panel {
    position: relative;
    min-width: 0;
    border-radius: 16px;
    border: 1px solid transparent;
    padding: 20px 22px;
    margin-bottom: 20px;
    background:
        linear-gradient(180deg, #17171F, #111118) padding-box,
        linear-gradient(140deg, rgba(139,92,246,.45), rgba(217,70,239,.15) 32%, rgba(255,255,255,.05) 58%, rgba(59,130,246,.35)) border-box;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -30px rgba(0,0,0,.6);
}
.ph { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.ph h2 { font: 600 18px/1.25 var(--display); letter-spacing: -0.015em; margin: 0; color: #fff; }
.ph .eb {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 10.5px var(--mono);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink3);
    margin-bottom: 6px;
}
.ph .eb::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--grad);
    box-shadow: 0 0 10px var(--m);
    flex: none;
}

/* ── Data groups ── */
.dgroup-body { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.data-cards { display: flex; flex-wrap: wrap; gap: .6rem; flex: 1; min-width: 280px; }
.dcard {
    background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    border: 1px solid var(--line);
    border-left: 3px solid rgba(139,92,246,.4);
    border-radius: 12px;
    padding: 12px 14px;
    min-width: 100px;
    text-align: center;
    transition: border-color .2s, background .2s, transform .15s;
}
.dcard:hover {
    border-left-color: var(--m);
    background: rgba(139,92,246,.06);
    transform: translateY(-1px);
}
.dcard-lab {
    display: block;
    font: 600 10px var(--mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink3);
}
.dcard-val {
    display: block;
    font: 700 20px/1.2 var(--mono);
    color: #fff;
    margin: .2rem 0;
    letter-spacing: -0.02em;
}
.dcard-val .u { font-size: 13px; font-weight: 500; color: var(--v-l); margin-left: 2px; }
.dcard-unit { display: block; font: 500 11px var(--mono); color: var(--ink3); }
.dgroup-chart { width: 320px; min-height: 260px; flex-shrink: 0; }

/* ── Chart wrap ── */
.chart-wrap { max-width: 700px; margin: 0 auto; }

/* ── Table ── */
.tbl-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--line2);
    background: linear-gradient(180deg, rgba(23,23,31,.9), rgba(17,17,24,.9));
}
.tbl-wrap table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.tbl-wrap th, .tbl-wrap td { padding: .55rem .75rem; border-bottom: 1px solid var(--line); }
.tbl-wrap th {
    background: rgba(255,255,255,.03);
    font: 600 10px var(--mono);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink3);
    position: sticky;
    top: 0;
}
.tbl-wrap tbody tr { transition: background .15s; }
.tbl-wrap tbody tr:hover { background: rgba(139,92,246,.06); }
.tbl-wrap .r { text-align: right; }
.tbl-wrap .num { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 13px; color: #fff; }
.tbl-wrap td { color: var(--ink2); }
.tbl-wrap a { color: var(--v-l); text-decoration: none; font-weight: 600; }
.tbl-wrap a:hover { color: #fff; text-decoration: underline; }
.tbl-scroll { max-height: 600px; overflow-y: auto; }

/* ── Alert ── */
.alert-warning {
    background: rgba(245,158,11,.1);
    color: #F59E0B;
    border: 1px solid rgba(245,158,11,.25);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

/* ── Footer ── */
.site-footer {
    text-align: center;
    padding: 1.5rem 1rem;
    font: 500 12px var(--mono);
    color: var(--ink3);
    border-top: 1px solid var(--line);
    margin-top: 2rem;
}
.footer-brand { font-weight: 600; color: var(--ink2); }
.footer-sep { margin: 0 .5rem; }

/* ── Leaflet overrides ── */
.geo-map .leaflet-control-zoom a {
    background: rgba(11,11,16,0.85) !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}
.geo-map .leaflet-control-attribution { display: none !important; }
.geo-map .leaflet-popup-content-wrapper {
    background: rgba(17,17,24,0.95);
    color: var(--ink);
    border-radius: 10px;
    border: 1px solid var(--line2);
    font-size: .8rem;
    box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.geo-map .leaflet-popup-tip { background: rgba(17,17,24,0.95); }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hero-split { flex-direction: column; }
    .hero-map { width: 100%; }
}

@media (max-width: 768px) {
    .hero { padding: 1.2rem 1rem; }
    .dgroup-body { flex-direction: column; }
    .dgroup-chart { width: 100%; }
    .prof { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .stat.big { grid-column: span 1; }
    .stat .fig { font-size: 22px; }
    .home-hero { padding: 2rem 1rem 1.5rem; margin: -1rem -1rem 1.5rem; }
    .home-hero h1 { font-size: 1.6rem; }
    .hero-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-card { min-width: 110px; }
    .topic-grid { grid-template-columns: 1fr; }
    .panel { padding: 16px; border-radius: 12px; }
}

@media (max-width: 560px) {
    .prof { grid-template-columns: 1fr 1fr; }
    .prof .big { grid-column: span 2; }
    .hero-cards-grid { grid-template-columns: 1fr; }
}