:root {
    /* Government-portal colour scheme (Navodaya-like design idiom) */
    --gov-navy: #002855;
    --gov-navy-dark: #001c3d;
    --gov-navy-light: #073b75;
    --gov-saffron: #f58220;
    --gov-saffron-dark: #c2410c;
    --gov-saffron-light: #fff7ed;
    --gov-green: #138808;
    --gov-red: #c8102e;

    --bg-page: #f1f5f9;
    --bg-card: #ffffff;
    --border-card: #cbd5e1;
    --border-subtle: #e2e8f0;
    
    --bg-dark: #f1f5f9;
    --accent-blue: #002855;
    --accent-glow: rgba(0, 40, 85, 0.2);
    --glass-bg: rgba(255, 255, 255, 0.98);
    --glass-border: #cbd5e1;
    --text-main: #0f172a;
    --text-muted: #475569;
    
    --color-contained: #138808; /* Indian Green */
    --color-majority: #f58220;  /* saffron */
    --color-conflict: #c8102e;  /* Postal Red */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    width: 100%;
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow: hidden;
}

#app-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#map {
    position: absolute;
    top: 154px;
    bottom: 0;
    width: 100%;
    z-index: 1;
}

/* Card utilities */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 30px rgba(0, 40, 85, 0.12);
    color: var(--text-main);
}

/* Sidebar */
.sidebar {
    position: absolute;
    top: 168px;
    left: 20px;
    width: 370px;
    max-height: calc(100vh - 188px);
    z-index: 10;
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 10px 32px rgba(0, 40, 85, 0.14);
}

.sidebar::-webkit-scrollbar {
    display: none;
}

/* Right Sidebar */
.right-sidebar {
    position: absolute;
    top: 168px;
    right: 20px;
    width: 320px;
    max-height: calc(100vh - 188px);
    z-index: 10;
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 10px 32px rgba(0, 40, 85, 0.14);
}

.right-sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar-header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.sidebar-header .logo i {
    font-size: 28px;
    color: var(--gov-navy);
    filter: drop-shadow(0 1px 3px rgba(0, 40, 85, 0.2));
}

.sidebar-header h1 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--gov-navy);
}

.subtitle {
    font-size: 12px;
    color: #475569;
    margin-bottom: 12px;
    line-height: 1.4;
}

.badges {
    display: flex;
    gap: 8px;
}

.badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-ai {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.badge-gis {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* Stats */
.stats-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stat-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-box:hover {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(0, 40, 85, 0.08);
}

.stat-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--gov-navy);
    margin-bottom: 4px;
}

.stat-label {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
}

/* Legend */
.legend-container {
    color: #0f172a;
}

.legend-container h3 {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--gov-navy);
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.legend-item:last-child {
    margin-bottom: 0;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.legend-color.contained { background: var(--color-contained); box-shadow: 0 0 6px rgba(19, 136, 8, 0.4); }
.legend-color.majority { background: var(--color-majority); box-shadow: 0 0 6px rgba(245, 130, 32, 0.4); }
.legend-color.conflict { background: var(--color-conflict); box-shadow: 0 0 6px rgba(200, 16, 46, 0.4); }

/* Property Card */
.property-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #cbd5e1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 40, 85, 0.05);
}

.property-card.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    display: none;
}

.property-card h3 {
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--gov-navy);
}

.prop-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 12.5px;
    gap: 12px;
}
.prop-row:last-of-type {
    border-bottom: none;
}

.prop-label {
    display: inline-flex;
    align-items: center;
    color: #475569;
    font-weight: 600;
    flex-shrink: 0;
}

.prop-value {
    font-weight: 700;
    color: #0f172a;
    text-align: right;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 60%;
}
.prop-value.highlight {
    color: var(--gov-saffron-dark);
    font-family: monospace;
    font-size: 13.5px;
}
.prop-value.parcel-id {
    color: var(--gov-navy);
    font-family: monospace;
    font-weight: 800;
}

.status-unverified {
    color: var(--color-conflict);
    background: rgba(239, 68, 68, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.warning-banner {
    margin-top: 16px;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--color-majority);
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    border-radius: 0 6px 6px 0;
}
.warning-banner i {
    color: var(--color-majority);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}
.warning-banner p {
    font-size: 11px;
    line-height: 1.4;
    color: #fde68a;
}

/* Loader */
.loader-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    padding: 24px 40px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: opacity 0.5s ease;
}

.loader-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    display: none !important;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Reviewer Action Buttons */
.btn {
    padding: 7px 12px;
    font-size: 10.5px;
    font-weight: 800;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.btn-approve { background: #138808; color: #ffffff; box-shadow: 0 2px 6px rgba(19, 136, 8, 0.25); }
.btn-approve:hover { background: #0e6306; }

.btn-correct { background: #f58220; color: #ffffff; box-shadow: 0 2px 6px rgba(245, 130, 32, 0.25); }
.btn-correct:hover { background: #d96b0f; }

.btn-reject { background: #c8102e; color: #ffffff; box-shadow: 0 2px 6px rgba(200, 16, 46, 0.25); }
.btn-reject:hover { background: #9b0b21; }

.btn-unresolved { background: #475569; color: #ffffff; box-shadow: 0 2px 6px rgba(71, 85, 105, 0.25); }
.btn-unresolved:hover { background: #334155; }

/* Tooltip Styles */
.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: bold;
    margin-left: 6px;
    cursor: help;
    position: relative;
}

.tooltip-icon:hover {
    background: var(--accent-blue);
    color: #fff;
}

.tooltip-text {
    visibility: hidden;
    width: 220px;
    background-color: #1e293b;
    color: var(--text-main);
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 11px;
    font-weight: normal;
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    pointer-events: none;
    line-height: 1.4;
}

.tooltip-icon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* Toggle Switch Styles */
.resolution-toggle {
    background: rgba(255, 255, 255, 0.02);
}
.switch-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}
.switch-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.3s ease;
}
.switch-label.highlight {
    color: var(--text-main);
}
.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: .3s;
    border: 1px solid var(--glass-border);
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: .3s;
}
input:checked + .slider {
    background-color: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.5);
}
input:checked + .slider:before {
    transform: translateX(16px);
    background-color: var(--color-contained);
}
.slider.round {
    border-radius: 20px;
}
.slider.round:before {
    border-radius: 50%;
}

/* Top Controls */
.top-controls {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 30px;
    z-index: 50;
    transition: background 0.3s ease;
}

.control-btn {
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s, color 0.3s;
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Additive: "on" state for the NDVI vegetation-highlight toggle. */
.control-btn.active-veg {
    background: rgba(16, 185, 129, 0.22);
    color: #34d399;
}

.sidebar.hidden-bar {
    transform: translateX(-120%);
    opacity: 0;
    pointer-events: none;
}

.right-sidebar.hidden-bar {
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none;
}

.sidebar, .right-sidebar {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Mode Overrides */
body.light-mode {
    --bg-dark: #f8fafc;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.1);
    --text-main: #0f172a;
    --text-muted: #475569;
}

body.light-mode .property-card {
    background: rgba(255, 255, 255, 0.9);
}

body.light-mode .tooltip-text {
    background-color: #ffffff;
    color: #0f172a;
    border-color: rgba(0,0,0,0.1);
}

body.light-mode .tooltip-text::after {
    border-color: #ffffff transparent transparent transparent;
}

body.light-mode .control-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.light-mode .stat-box {
    background: rgba(0, 0, 0, 0.03);
}

body.light-mode .stat-box:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Sidebar Tabs */
.sidebar-tabs { 
    display: flex; 
    gap: 6px; 
    margin-bottom: 16px; 
    background: #f1f5f9; 
    padding: 4px; 
    border-radius: 8px; 
    border: 1px solid #e2e8f0; 
}
.tab-btn { 
    flex: 1; 
    background: transparent; 
    border: none; 
    color: #475569; 
    font-size: 12px; 
    font-weight: 700; 
    cursor: pointer; 
    padding: 8px 10px; 
    border-radius: 6px; 
    transition: all 0.2s ease; 
}
.tab-btn:hover { 
    color: #002855; 
}
.tab-btn.active { 
    background: #002855; 
    color: #ffffff; 
    box-shadow: 0 2px 6px rgba(0, 40, 85, 0.25); 
}

/* Logs UI */
.logs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.logs-header h3 { font-size: 14px; font-weight: 800; color: #002855; }
.logs-container { display: flex; flex-direction: column; gap: 12px; max-height: 400px; overflow-y: auto; padding-right: 4px; }
.logs-container::-webkit-scrollbar { width: 4px; display: block; }
.logs-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.log-entry { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; font-size: 12px; border-left: 4px solid; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.log-entry.APPROVE { border-left-color: #138808; }
.log-entry.CORRECT { border-left-color: #f58220; }
.log-entry.REJECT { border-left-color: #c8102e; }
.log-entry.UNRESOLVED { border-left-color: #475569; }

.log-meta { display: flex; justify-content: space-between; color: #64748b; font-size: 10px; margin-bottom: 6px; font-weight: 600; }
.log-ulpin { font-family: monospace; color: #002855; font-weight: 700; word-break: break-all; line-height: 1.4; margin-bottom: 4px; }
.log-action { font-weight: 800; text-transform: uppercase; }
.log-action.APPROVE { color: #15803d; }
.log-action.CORRECT { color: #c2410c; }
.log-action.REJECT { color: #b91c1c; }
.log-action.UNRESOLVED { color: #475569; }


/* ===== Additive: Floor-Level Spatial Inspection panel (Phase 12) ===== */
#floor-panel {
    position: absolute;
    top: 168px;
    left: 406px;
    width: 360px;
    max-height: calc(100vh - 188px);
    z-index: 12;
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    scrollbar-width: none;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 10px 32px rgba(0, 40, 85, 0.14);
    color: #0f172a;
}
#floor-panel::-webkit-scrollbar { display: none; }
#floor-panel[hidden] { display: none; }
.floor-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.floor-panel-title { min-width: 0; }
.floor-panel-head h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: #002855; font-weight: 800; margin: 0; line-height: 1.3; }
.floor-panel-sub { font-size: 10.5px; color: #475569; margin-top: 4px; word-break: break-all; font-weight: 600; }
#floor-panel-close {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; line-height: 1; cursor: pointer;
    background: #f1f5f9; color: #0f172a;
    border: 1px solid #cbd5e1; transition: background 0.15s, color 0.15s;
}
#floor-panel-close:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

/* elevation view - interactive 3D model (Three.js), SVG schematic as fallback */
.floor-panel-diagram { position: relative; display: block; padding: 0; }
.floor-panel-diagram:empty { display: none; }
.floor-panel-diagram svg { width: 100%; max-width: 300px; height: auto; display: block; margin: 6px auto; }
.fpd-band { cursor: pointer; transition: fill-opacity 0.15s; }
.fpd-band:hover { fill-opacity: 0.55; }
.fpd-band.selected { fill-opacity: 0.85; stroke: #38bdf8; stroke-width: 1.5; }
.fpd-label { font: 700 9px/1 system-ui, sans-serif; fill: var(--text-main); }
.fpd-axis { font: 500 8px/1 system-ui, sans-serif; fill: var(--text-muted); }

/* 3D building model canvas + in-scene chips */
.f3d-wrap {
    position: relative;
    width: 100%;
    height: 232px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: radial-gradient(120% 110% at 50% 12%, rgba(56,189,248,0.12), rgba(11,18,32,0.62) 68%);
}
.f3d-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;          /* pinch-zoom the model, don't scroll the panel */
    cursor: grab;
}
.f3d-wrap canvas:active { cursor: grabbing; }
.f3d-badge {
    position: absolute; top: 8px; right: 10px; pointer-events: none;
    font: 800 8.5px/1 system-ui, sans-serif; letter-spacing: 0.7px;
    color: #fbbf24; background: rgba(245,158,11,0.16);
    padding: 2px 5px; border-radius: 4px;
}
.f3d-hint {
    position: absolute; bottom: 6px; left: 9px; pointer-events: none;
    font: 500 8px/1.3 system-ui, sans-serif; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.f3d-tip {
    position: absolute; bottom: 6px; right: 8px; max-width: 74%; pointer-events: none;
    font: 600 9px/1.4 system-ui, sans-serif; text-align: right;
    color: var(--text-main); background: rgba(9,15,26,0.85);
    border: 1px solid var(--glass-border); border-radius: 8px; padding: 5px 7px;
}
.f3d-tip[hidden] { display: none; }
.f3d-tip .f3d-tip-lab { font-weight: 700; }
.f3d-tip .f3d-tip-id { color: #7dd3fc; font-weight: 700; word-break: break-all; margin-top: 2px; }
body.light-mode .f3d-tip { background: rgba(255,255,255,0.92); }

.floor-panel-summary { font-size: 12px; line-height: 1.7; border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border); }
.floor-panel-summary .fp-k { color: var(--text-muted); }
.floor-panel-summary .fp-v { font-weight: 700; }
.floor-panel-state { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-top: 6px; }
.fp-state-HIGH { background: rgba(16,185,129,0.18); color: #34d399; }
.fp-state-MEDIUM { background: rgba(245,158,11,0.18); color: #fbbf24; }
.fp-state-LOW { background: rgba(239,68,68,0.18); color: #f87171; }
.fp-state-NOT_DETERMINABLE { background: rgba(148,163,184,0.18); color: #cbd5e1; }

.floor-panel-actions { display: flex; }
.fp-btn {
    width: 100%; font-size: 11px; font-weight: 600; padding: 8px 10px; border-radius: 8px; cursor: pointer;
    background: rgba(56,189,248,0.12); color: #38bdf8; border: 1px solid rgba(56,189,248,0.3);
    transition: background 0.15s;
}
.fp-btn:hover { background: rgba(56,189,248,0.22); }

.floor-panel-body { display: flex; flex-direction: column; gap: 8px; }
.floor-row {
    border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px 12px;
    background: rgba(255,255,255,0.03); cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.floor-row:hover { border-color: rgba(245,158,11,0.5); background: rgba(245,158,11,0.06); }
.floor-row.selected {
    border-color: #f59e0b;
    background: rgba(245,158,11,0.18);
    box-shadow: 0 0 14px rgba(245,158,11,0.25), inset 0 0 0 1px rgba(245,158,11,0.4);
}
.floor-row.selected .fr-name { color: #fbbf24; }
.floor-row.selected .fr-id { color: #fde68a; font-weight: 700; }
.floor-row .fr-tag { font-size: 8px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 4px; }
.fr-tag.REFERENCE { background: rgba(16,185,129,0.18); color: #34d399; }
.fr-tag.MODELLED { background: rgba(245,158,11,0.18); color: #fbbf24; }
.floor-row .fr-id { font-size: 10px; color: #7dd3fc; font-family: ui-monospace, monospace; word-break: break-all; margin: 5px 0; display: flex; align-items: center; gap: 6px; }
.floor-row .fr-copy { flex-shrink: 0; font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); color: var(--text-muted); cursor: pointer; }
.floor-row .fr-copy:hover { color: var(--text-main); }
.floor-row .fr-meta { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }

.floor-panel-unavail { font-size: 11.5px; color: var(--text-muted); line-height: 1.65; }
.floor-panel-unavail b { color: var(--text-main); }
.floor-panel-unavail ul { margin: 6px 0 6px 16px; padding: 0; }
.floor-panel-unavail li { margin: 2px 0; }
.floor-panel-foot { font-size: 9px; font-weight: 700; letter-spacing: 0.3px; color: var(--color-majority); text-align: center; padding-top: 6px; border-top: 1px solid var(--glass-border); }
.control-btn.active-floors { background: rgba(56,189,248,0.22); color: #7dd3fc; }

body.light-mode #floor-panel { background: rgba(255,255,255,0.9); }
body.light-mode .floor-panel-summary,
body.light-mode .floor-row { background: rgba(0,0,0,0.03); }
body.light-mode #floor-panel-close { background: rgba(0,0,0,0.05); }

@media (max-width: 1100px) {
    #floor-panel { left: 20px; top: auto; bottom: 20px; width: calc(100vw - 40px); max-width: 380px; max-height: 60vh; }
}

/* ===== Floor detection v2: coverage, tooltip contrast, panel extras ===== */
.floor-coverage { border-radius: 12px; padding: 12px 14px; font-size: 11px; margin-top: 4px; }
.floor-coverage:empty { display: none; }
.fcov-title { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 6px; }
.fcov-row { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; color: var(--text-main); }
.fcov-row b { font-size: 13px; }
.fcov-sub { font-size: 9px; color: var(--text-muted); letter-spacing: 0.3px; margin: -1px 0 3px; padding-left: 2px; }
.fcov-note { margin-top: 6px; font-size: 9.5px; color: var(--text-muted); line-height: 1.4; }

/* "EST." marker on every model-predicted floor figure (never on OBSERVED) */
.fp-est {
    font-size: 8.5px; font-weight: 800; letter-spacing: 0.7px; vertical-align: middle;
    color: #fbbf24; background: rgba(245,158,11,0.16);
    padding: 1px 4px; border-radius: 4px; margin-left: 4px;
}
.fpd-est { fill: #fbbf24; font: 700 8px system-ui, sans-serif; letter-spacing: 0.6px; }

/* high-contrast building hover tooltip (government theme) */
.floor-tooltip .maplibregl-popup-content {
    background: #002855; color: #ffffff; border: 2px solid #f58220;
    border-radius: 10px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(0, 40, 85, 0.45);
}
.floor-tooltip .maplibregl-popup-tip { border-top-color: #002855 !important; border-bottom-color: #002855 !important; }
.ftt { font: 12px/1.45 system-ui, sans-serif; min-width: 190px; }
.ftt-h { font-weight: 800; color: #ffffff; }
.ftt-s { font-size: 10px; color: #cbd5e1; margin-bottom: 6px; }
.ftt-k { font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px; color: #fed7aa; margin-top: 6px; text-transform: uppercase; }
.ftt-v { font-size: 12px; color: #ffffff; }
.ftt-go { margin-top: 8px; font-size: 10.5px; color: #f58220; font-weight: 700; }

/* "why this floor count?" evidence list */
.fp-why { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #f0fdf4; border: 1px solid #bbf7d0; }
.fp-why-h { font-size: 10px; font-weight: 800; letter-spacing: 0.4px; color: #15803d; margin-bottom: 4px; }
.fp-why-i { font-size: 11px; color: #0f172a; line-height: 1.5; }

/* NOT_DETERMINABLE key/value rows */
.fu-kv { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed #e2e8f0; font-size: 11.5px; }
.fu-kv b { color: #002855; }

.floor-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-btn-sm { width: auto; flex: 0 0 auto; padding: 8px 12px; font-size: 13px; }

body.light-mode .floor-tooltip .maplibregl-popup-content { background: #002855; color: #ffffff; }

/* v3 floor: OBSERVED vs PREDICTED source chips + explode toggle */
.fp-src { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 0.6px; padding: 3px 8px; border-radius: 5px; }
.fp-src-obs { background: rgba(52,211,153,0.18); color: #34d399; }
.fp-src-pred { background: rgba(251,191,36,0.18); color: #fbbf24; }
.fp-btn.on { background: rgba(56,189,248,0.3); color: #e0f2fe; }

/* =========================================================================
 * AERONERDS OMNIVERSE MULTI-PERSONA STYLES
 * ========================================================================= */

/* Persona Trigger Pill in Top Bar */
.persona-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    color: var(--gov-navy);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 40, 85, 0.08);
    transition: all 0.2s ease;
}
.persona-pill-btn:hover {
    background: #dbeafe;
    border-color: var(--gov-navy);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 40, 85, 0.15);
}
.persona-pill-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gov-navy);
    color: #ffffff;
    font-size: 12px;
}
.persona-pill-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.1;
}
.persona-pill-name {
    font-size: 11px;
    font-weight: 800;
    color: var(--gov-navy);
}
.persona-pill-role {
    font-size: 9px;
    color: #475569;
    font-weight: 600;
}
.persona-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
}
.badge-resident { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.badge-rider { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.badge-lead { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-admin { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }

/* Universal Search Container in Top Bar */
.omni-search-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.omni-search-input {
    width: 250px;
    height: 38px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    padding: 0 12px 0 36px;
    color: #0f172a;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s ease;
}
.omni-search-input:focus {
    width: 320px;
    border-color: var(--gov-navy);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.12);
}
.omni-search-icon {
    position: absolute;
    left: 12px;
    font-size: 15px;
    color: var(--gov-navy);
    pointer-events: none;
}
.omni-search-results {
    position: absolute;
    top: 44px;
    left: 0;
    width: 420px;
    max-height: 380px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 40, 85, 0.22);
    z-index: 1000;
    display: none;
}
.search-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.search-item:hover {
    background: #eff6ff;
}
.search-item.empty {
    color: #64748b;
    font-size: 11px;
    text-align: center;
    padding: 16px;
    cursor: default;
}
.search-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gov-navy);
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 2px;
}
.search-item-icon.UNDERGROUND_METRO {
    background: #e0f2fe;
    color: #0284c7;
}
.search-item-icon.ACTIVE_3D_PARCEL {
    background: #dcfce7;
    color: #15803d;
}
.search-item-icon.PILOT_3D_CITY {
    background: #eff6ff;
    color: #1d4ed8;
}
.search-item-icon.PAN_INDIA_GATEWAY {
    background: #fef3c7;
    color: #b45309;
}
.search-item-icon.RESOLVED_ULPIN {
    background: #f3e8ff;
    color: #7e22ce;
}
.search-item-info {
    flex: 1;
    min-width: 0;
}
.search-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.search-item-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-badge {
    font-size: 8.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.search-badge.ACTIVE_3D_PARCEL { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.search-badge.PILOT_3D_CITY { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.search-badge.UNDERGROUND_METRO { background: #e0f2fe; color: #0284c7; border: 1px solid #7dd3fc; }
.search-badge.PAN_INDIA_GATEWAY { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.search-badge.RESOLVED_ULPIN { background: #f3e8ff; color: #7e22ce; border: 1px solid #d8b4fe; }
.search-badge.NATIONAL_REGISTRY { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

.search-item-sub {
    font-size: 10px;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35;
}
.search-item-ulpin {
    font-family: monospace;
    font-size: 10px;
    font-weight: 800;
    color: #c2410c;
    margin-top: 3px;
    letter-spacing: 0.5px;
}

/* Modals */
.omni-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 20, 50, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}
.omni-modal-card {
    background: #ffffff;
    border: 2px solid var(--gov-navy);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 40, 85, 0.35);
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
    color: #0f172a;
}
.omni-modal-card::-webkit-scrollbar { display: none; }
.omni-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.omni-modal-close:hover {
    background: #fee2e2;
    color: #c8102e;
    border-color: #fca5a5;
}

/* Persona Grid in Modal */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .persona-grid { grid-template-columns: 1fr; }
}
.persona-card {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.persona-card:hover {
    transform: translateY(-3px);
    border-color: #f58220;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(245, 130, 32, 0.2);
}
.persona-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.persona-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.persona-card.citizen .persona-card-icon { background: #dcfce7; color: #15803d; }
.persona-card.planner .persona-card-icon { background: #eff6ff; color: #1d4ed8; }
.persona-card.admin .persona-card-icon { background: #fff7ed; color: #c2410c; }

.persona-card-name { font-size: 15px; font-weight: 800; color: var(--gov-navy); }
.persona-card-title { font-size: 11px; color: #475569; font-weight: 600; }
.persona-card-desc { font-size: 12px; color: #334155; line-height: 1.5; margin-bottom: 14px; }
.persona-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.persona-tag { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: #e2e8f0; color: var(--gov-navy); }
.persona-card-btn {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: filter 0.2s;
}
.persona-card.citizen .persona-card-btn { background: #138808; color: #ffffff; }
.persona-card.planner .persona-card-btn { background: var(--gov-navy); color: #ffffff; }
.persona-card.admin .persona-card-btn { background: #c2410c; color: #ffffff; }
.persona-card-btn:hover { filter: brightness(1.1); }

/* Vertical property record Card (Citizen) */
.bhu-passbook-card {
    background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
    border: 1px solid #f58220;
    border-radius: 16px;
    padding: 18px;
    position: relative;
    box-shadow: 0 4px 16px rgba(245, 130, 32, 0.12);
    margin-top: 10px;
}
.bhu-passbook-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.bhu-passbook-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #c2410c;
}
.bhu-qr-wrap {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 12px;
}
.bhu-qr-canvas {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    padding: 2px;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bhu-qr-canvas svg,
.pvc-qr-box svg,
.cert-qr-box svg,
#prop-qr-box svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
    shape-rendering: crispEdges;
}

/* =========================================================================
   CITIZEN AUTO-GPS 3D FLOOR & ULPIN LOCATOR STYLES
   ========================================================================= */
.header-gps-btn {
    height: 34px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 800;
    background: #138808;
    color: #ffffff;
    border: 1px solid #16a34a;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(19, 136, 8, 0.4);
    transition: all 0.2s ease;
}
.header-gps-btn:hover {
    background: #15803d;
    transform: translateY(-1px);
    box-shadow: 0 2px 14px rgba(19, 136, 8, 0.6);
}
.citizen-gps-box {
    margin-bottom: 14px;
    background: linear-gradient(135deg, rgba(0, 40, 85, 0.04) 0%, rgba(19, 136, 8, 0.08) 100%);
    border: 1.5px solid #138808;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(19, 136, 8, 0.12);
    position: relative;
    overflow: hidden;
}
.gps-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    box-shadow: 0 0 8px #10b981;
    animation: pulseGps 1.8s infinite;
}
.gps-floor-pills {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 3px 0;
}
.gps-floor-btn {
    flex: 1;
    min-width: 44px;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}
.gps-floor-btn:hover {
    border-color: #138808;
    color: #138808;
}
.gps-floor-btn.active {
    background: #138808;
    color: #ffffff;
    border-color: #138808;
    box-shadow: 0 2px 6px rgba(19, 136, 8, 0.35);
}
.lan-host-label {
    font-weight: 700;
}
.gps-radar-beacon {
    position: relative;
    width: 44px;
    height: 44px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.radar-center {
    width: 20px;
    height: 20px;
    background: #138808;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 0 10px #138808, 0 0 20px rgba(19, 136, 8, 0.6);
    border: 2px solid #ffffff;
    z-index: 2;
}
.radar-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #10b981;
    animation: radarPulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.radar-ring.r2 {
    animation-delay: 0.9s;
}
@keyframes radarPulse {
    0% { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(2.8); opacity: 0; }
}
@keyframes pulseGps {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}
.bhu-info { min-width: 0; }
.bhu-unit { font-size: 14px; font-weight: 800; color: var(--gov-navy); }
.bhu-khasra { font-size: 11px; color: #475569; margin-top: 2px; font-weight: 600; }
.bhu-ulpin { font-family: monospace; font-size: 11.5px; color: var(--gov-navy); font-weight: 800; word-break: break-all; margin-top: 4px; }
.bhu-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}
.bhu-btn {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}
.bhu-btn.primary { background: var(--gov-navy); color: #ffffff; border: none; }
.bhu-btn.primary:hover { background: #001c3d; }
.bhu-btn.secondary { background: #ffffff; color: var(--gov-navy); border: 1px solid var(--gov-navy); }
.bhu-btn.secondary:hover { background: #eff6ff; }

/* Town Planning FSI Card */
.planner-fsi-card {
    background: #ffffff;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: 16px;
    margin-top: 12px;
    box-shadow: 0 2px 8px rgba(0, 40, 85, 0.05);
}
.fsi-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 12px 0;
}
.fsi-stat-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}
.fsi-val { font-size: 18px; font-weight: 800; color: var(--gov-navy); font-family: monospace; }
.fsi-lbl { font-size: 9.5px; font-weight: 700; color: #64748b; text-transform: uppercase; margin-top: 2px; }

/* Official 3D Land Title Certificate Modal */
.gov-cert-card {
    background: #ffffff;
    border: 3px double #f58220;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 40, 85, 0.35);
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    position: relative;
    color: #0f172a;
}
.cert-header {
    text-align: center;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 16px;
    margin-bottom: 20px;
}
.cert-emblem {
    font-size: 38px;
    color: #b45309;
    display: block;
    margin-bottom: 6px;
}
.cert-title-hi {
    font-size: 15px;
    font-weight: 700;
    color: #c2410c;
    letter-spacing: 0.5px;
}
.cert-title-en {
    font-size: 18px;
    font-weight: 800;
    color: var(--gov-navy);
    letter-spacing: -0.3px;
    margin-top: 2px;
}
.cert-sub {
    font-size: 11px;
    color: #138808;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
}

.cert-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 12px;
}
.cert-table tr {
    border-bottom: 1px solid #e2e8f0;
}
.cert-table td {
    padding: 8px 12px;
}
.cert-table td.cert-label {
    color: #475569;
    font-weight: 600;
    width: 35%;
}
.cert-table td.cert-value {
    color: #0f172a;
    font-weight: 700;
    font-family: inherit;
}

.cert-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
    margin-top: 16px;
}
.cert-seal {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cert-seal-icon {
    width: 48px;
    height: 48px;
    border: 2px dashed #f58220;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #f58220;
}

/* Toast System */
.omni-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.omni-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(11, 18, 32, 0.95);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 12px;
    padding: 12px 18px;
    color: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    animation: toastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 380px;
}
.omni-toast.out {
    animation: toastOut 0.3s forwards ease;
}
@keyframes toastIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
    to { transform: translateX(100%); opacity: 0; }
}
.omni-toast-icon {
    font-size: 22px;
    color: #38bdf8;
    flex-shrink: 0;
}
.omni-toast-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #ffffff;
}
.omni-toast-msg {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.35;
}

/* =========================================================================
 * GOVERNMENT PORTAL STYLES & BILINGUAL LOCALISATION
 * ========================================================================= */

.gov-top-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    background: #081325;
}

/* 1. Tricolor Top Strip */
.gov-top-strip {
    position: relative;
    background: #050c18;
    color: #cbd5e1;
    font-size: 11px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-top: 3px solid;
    border-image: linear-gradient(to right, #FF9933 33.3%, #FFFFFF 33.3%, #FFFFFF 66.6%, #138808 66.6%) 3;
    font-weight: 500;
}
.gov-top-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gov-flag-icon {
    font-size: 14px;
}
.gov-top-sep {
    color: #475569;
}
.gov-top-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.gov-access-link {
    color: #94a3b8;
    text-decoration: none;
    font-size: 10.5px;
    transition: color 0.15s;
}
.gov-access-link:hover {
    color: #ffffff;
}
.font-resizer {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
}
.font-btn {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 3px;
}
.font-btn:hover {
    color: #38bdf8;
}
.lang-switcher {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 14px;
    padding: 1px;
}
.lang-btn {
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.lang-btn.active {
    background: var(--gov-saffron);
    color: #ffffff;
    box-shadow: 0 0 8px rgba(245, 130, 32, 0.5);
}

/* 2. Main brand header */
.gov-portal-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    box-shadow: 0 2px 6px rgba(0, 40, 85, 0.05);
}
.gov-branding {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ashoka-emblem-box {
    width: 36px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ashoka-svg {
    height: 100%;
    width: auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.gov-title-group {
    display: flex;
    flex-direction: column;
}
.gov-logo-text {
    font-size: 18px;
    font-weight: 800;
    color: var(--gov-navy);
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gov-hindi-brand {
    font-family: 'Outfit', 'Inter', sans-serif;
    color: var(--gov-saffron-dark);
    font-size: 20px;
    font-weight: 900;
}
.gov-sunburst-crest {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gov-saffron) 20%, var(--gov-saffron-dark) 85%);
    box-shadow: 0 0 10px rgba(245, 130, 32, 0.4);
}
.gov-sub-dept {
    font-size: 11px;
    color: #475569;
    margin-top: 1px;
    font-weight: 600;
}
.gov-header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 3. Main navigation bar */
.gov-main-nav {
    background: var(--gov-navy);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 3px solid var(--gov-saffron);
    display: flex;
    align-items: center;
    padding: 0 20px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    box-shadow: 0 2px 8px rgba(0, 40, 85, 0.2);
}
.gov-main-nav::-webkit-scrollbar {
    display: none;
}
.gov-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    transition: all 0.15s ease;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}
.gov-nav-link i {
    font-size: 15px;
    color: #fed7aa;
}
.gov-nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-bottom-color: var(--gov-saffron);
}
.gov-nav-link.active {
    background: rgba(245, 130, 32, 0.2);
    color: #ffffff;
    border-bottom-color: var(--gov-saffron);
}

/* 4. News ticker & Quick Controls Bar */
.gov-ticker-bar {
    background: #eef4fc;
    border-bottom: 1px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 34px;
    font-size: 11.5px;
}
.ticker-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
}
.ticker-badge {
    background: var(--gov-red);
    color: #ffffff;
    font-weight: 800;
    font-size: 9.5px;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.ticker-marquee {
    color: var(--gov-navy);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
}
.ticker-quick-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.tqa-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: var(--gov-navy);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.tqa-btn:hover {
    background: var(--gov-navy);
    border-color: var(--gov-navy);
    color: #ffffff;
}
.tqa-btn.active {
    background: var(--gov-saffron);
    border-color: var(--gov-saffron);
    color: #ffffff;
}
.tqa-btn.active-underground {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.45);
}
.tqa-btn.active-veg {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(22, 163, 74, 0.4);
}
.tqa-btn.active-cadastral {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
}

/* 4-Tier Provenance Badges */
.prov-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    display: inline-block;
}
.prov-badge.auth { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.prov-badge.gis { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }
.prov-badge.ml { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.prov-badge.rule8 { background: #f3e8ff; color: #7e22ce; border: 1px solid #d8b4fe; }

/* Explode View Slider */
.fp-explode-wrap input[type="range"] {
    accent-color: #f58220;
    cursor: pointer;
}

/* =========================================================================
 * 5. ICONIC PHYSICAL 3D 3D ULPIN PVC CARD MODAL
 * ========================================================================= */
.bhu-card-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.bhu-pvc-card {
    width: 580px;
    max-width: 95vw;
    background: #ffffff;
    color: #1e293b;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.3);
    position: relative;
    border: 2px solid #e2e8f0;
    font-family: 'Inter', -apple-system, sans-serif;
}
.pvc-header {
    padding: 10px 18px 8px 18px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #f59e0b;
    position: relative;
}
.pvc-tricolor-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, #FF9933 33.3%, #FFFFFF 33.3%, #FFFFFF 66.6%, #138808 66.6%);
}
.pvc-gov-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pvc-ashoka {
    height: 38px;
    width: auto;
}
.pvc-gov-text {
    line-height: 1.15;
}
.pvc-gt-hi {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
}
.pvc-gt-en {
    font-size: 10px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.5px;
}
.pvc-logo-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pvc-bhu-logo-text {
    text-align: right;
    line-height: 1.1;
}
.pvc-bl-hi {
    font-size: 15px;
    font-weight: 900;
    color: #b45309;
}
.pvc-bl-en {
    font-size: 8.5px;
    color: #64748b;
    font-weight: 700;
}
.pvc-sunburst {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, #f59e0b 20%, #b45309 85%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}
.pvc-body {
    padding: 18px 20px;
    display: flex;
    gap: 18px;
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f8fafc 100%);
    position: relative;
}
.pvc-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.05;
    pointer-events: none;
    width: 240px;
    height: auto;
}
.pvc-left-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 130px;
    flex-shrink: 0;
}
.pvc-3d-box {
    width: 125px;
    height: 135px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}
.pvc-hologram {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a7f3d0, #67e8f9, #fbcfe8, #fde047);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 8px rgba(103, 232, 249, 0.8);
    opacity: 0.9;
}
.pvc-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pvc-field {
    line-height: 1.25;
}
.pvc-field-lbl {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.pvc-field-val {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
}
.pvc-field-val.highlight {
    color: #b45309;
    font-size: 13px;
}
.pvc-qr-box {
    position: absolute;
    bottom: 18px;
    right: 20px;
    width: 90px;
    height: 90px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px;
}
.pvc-ulpin-banner {
    background: #f1f5f9;
    border-top: 1px dashed #cbd5e1;
    border-bottom: 1px dashed #cbd5e1;
    padding: 10px 18px;
    text-align: center;
}
.pvc-ulpin-lbl {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.8px;
}
.pvc-ulpin-code {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: 3px;
    font-family: ui-monospace, 'Courier New', monospace;
    margin-top: 2px;
}
.pvc-footer {
    padding: 8px 18px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    color: #64748b;
    border-bottom: 4px solid #138808;
}
.pvc-tagline {
    font-weight: 800;
    color: #b45309;
    letter-spacing: 0.3px;
}
.pvc-actions-bar {
    padding: 14px 20px;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Light-mode overrides */
body.light-mode .gov-top-wrapper {
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
body.light-mode .gov-top-strip {
    background: #f8fafc;
    color: #334155;
}
body.light-mode .gov-portal-header {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}
body.light-mode .gov-logo-text {
    color: #0f172a;
}
body.light-mode .gov-sub-dept {
    color: #475569;
}
body.light-mode .gov-main-nav {
    background: #003366;
}
body.light-mode .gov-ticker-bar {
    background: #f1f5f9;
    border-bottom: 1px solid #cbd5e1;
}
body.light-mode .ticker-marquee {
    color: #334155;
}



/* =========================================================================
   AUTHENTICATION GATE
   Sign-in overlay. Rendered above the portal and removed only after the
   server confirms a session, so the map/cadastral UI is never shown to an
   unauthenticated visitor.
   ========================================================================= */

.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 15%, rgba(0, 40, 85, 0.55), transparent 55%),
        radial-gradient(circle at 85% 85%, rgba(19, 136, 8, 0.28), transparent 55%),
        linear-gradient(160deg, #001c3d 0%, #002855 45%, #00162c 100%);
    overflow-y: auto;
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
    overflow: hidden;
}

.auth-tricolor {
    height: 5px;
    background: linear-gradient(90deg, #f58220 0 33.33%, #ffffff 33.33% 66.66%, #138808 66.66% 100%);
}

.auth-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px 22px 14px;
    border-bottom: 1px solid #e2e8f0;
}

.auth-crest {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f58220, #c2410c);
    box-shadow: 0 2px 8px rgba(194, 65, 12, 0.35);
}

.auth-gov-hi { font-size: 12px; font-weight: 800; color: #c2410c; letter-spacing: 0.4px; }
.auth-gov-en { font-size: 9px; font-weight: 700; color: #64748b; letter-spacing: 0.3px; }

.auth-head h1 {
    margin: 6px 0 2px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #002855;
}

.auth-sub { font-size: 10.5px; color: #475569; line-height: 1.4; }

.auth-api-warning {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 14px 22px 0;
    padding: 11px 12px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 11.5px;
    line-height: 1.5;
}
.auth-api-warning i { font-size: 17px; flex-shrink: 0; }
.auth-api-warning code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #fee2e2;
    padding: 1px 5px;
    border-radius: 4px;
}

.auth-form { padding: 18px 22px 4px; display: flex; flex-direction: column; gap: 13px; }
.auth-field { display: block; }

.auth-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.auth-input-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    height: 42px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-input-wrap:focus-within {
    border-color: #002855;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.12);
}
.auth-input-wrap i { font-size: 16px; color: #64748b; flex-shrink: 0; }

.auth-input-wrap input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    font-family: inherit;
    color: #0f172a;
}
.auth-input-wrap input::placeholder { color: #94a3b8; }

.auth-status { min-height: 16px; font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.auth-status:empty { display: none; }
.auth-status.tone-warn { color: #b45309; }
.auth-status.tone-error { color: #c8102e; }
.auth-status.tone-ok { color: #138808; }
.auth-status.tone-info { color: #0369a1; }

.auth-submit {
    height: 44px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #002855, #073b75);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter .15s, transform .05s;
}
.auth-submit:hover:not(:disabled) { filter: brightness(1.15); }
.auth-submit:active:not(:disabled) { transform: translateY(1px); }
.auth-submit:disabled { opacity: .65; cursor: progress; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 22px 10px;
    font-size: 9.5px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.auth-role-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 22px;
}

.auth-role-card {
    padding: 9px 11px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.auth-role-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #002855;
    display: flex;
    align-items: center;
    gap: 6px;
}
.auth-role-dept { font-size: 9.5px; color: #64748b; margin-top: 2px; line-height: 1.35; }
.auth-role-caps { font-size: 9px; font-weight: 700; color: #138808; margin-top: 4px; }

.auth-demo-accounts { display: flex; flex-direction: column; gap: 5px; padding: 0 22px; }

.auth-demo-row {
    display: grid;
    grid-template-columns: 96px 92px 1fr;
    gap: 8px;
    align-items: center;
    text-align: left;
    padding: 7px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.auth-demo-row:hover { border-color: #002855; background: #f8fafc; }
.auth-demo-row.is-highlighted {
    border-color: #f58220; background: #fff7ed;
    box-shadow: 0 0 0 3px rgba(245, 130, 32, .15);
}
.auth-demo-row.is-highlighted .auth-demo-user { color: #c2410c; }

.auth-demo-user { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; color: #002855; }
.auth-demo-role { font-size: 10px; font-weight: 700; color: #c2410c; }
.auth-demo-seat { font-size: 9.5px; color: #64748b; }

.auth-footnote {
    margin: 14px 0 0;
    padding: 12px 22px 18px;
    font-size: 10px;
    line-height: 1.55;
    color: #64748b;
    border-top: 1px solid #e2e8f0;
}
.auth-footnote strong { color: #c2410c; }

/* ---- session bar in the portal header ---- */
.session-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 11px;
    border-radius: 8px;
    background: rgba(0, 40, 85, 0.06);
    border: 1px solid #cbd5e1;
    font-size: 10.5px;
    color: #002855;
}
.session-chip .session-name { font-weight: 800; }
.session-chip .session-sep { color: #94a3b8; }
.session-chip .session-role { color: #475569; }

.session-signout {
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    background: #c8102e;
    color: #ffffff;
    border: none;
    font-size: 10.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.session-signout:hover { filter: brightness(1.1); }

@media (max-width: 520px) {
    .auth-role-grid { grid-template-columns: 1fr; }
    .auth-demo-row { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-submit, .auth-demo-row, .auth-input-wrap { transition: none; }
}

/* ---- RBAC additions ---- */
.badge-sdm { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.persona-card.sdm .persona-card-icon { background: #fef2f2; color: #991b1b; }
.persona-card.sdm .persona-card-btn { background: #991b1b; color: #ffffff; }

.gov-persona-notice {
    margin: 10px 0 4px;
    padding: 9px 11px;
    border-radius: 8px;
    background: rgba(0, 40, 85, 0.06);
    border: 1px solid rgba(0, 40, 85, 0.16);
    font-size: 11px;
    line-height: 1.5;
    color: #002855;
}
.gov-persona-notice:empty { display: none; }

.grievance-form textarea {
    width: 100%;
    min-height: 84px;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    color: #0f172a;
    outline: none;
    resize: vertical;
}
.grievance-form textarea:focus {
    border-color: #002855;
    box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.12);
}
.grievance-form input {
    width: 100%;
    height: 40px;
    padding: 0 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    outline: none;
}
.grievance-form input:focus {
    border-color: #002855;
    box-shadow: 0 0 0 3px rgba(0, 40, 85, 0.12);
}
.grievance-form label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}