/* ═══════════════════════════════════════════════════════════════
   Splash / Initial Loader
   Self-contained CSS — no dependency on theme variables.
   Imported by src/splash.js, bundled by Vite into the main CSS chunk.
   ═══════════════════════════════════════════════════════════════ */

/* Overlay */
#app-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #fef7db 0%, #ece5be 58%, #dceee2 100%);
  transition: opacity 0.48s ease, visibility 0.48s ease;
  opacity: 1;
  visibility: visible;
}

#app-loader.app-loader--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Watermark ── */
/* Subtle diagonal repeating "EODB" tile — pure CSS, no extra DOM */
.apl-watermark {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='100'%3E%3Ctext x='10' y='60' font-family='Arial,sans-serif' font-size='30' font-weight='700' letter-spacing='10' fill='rgba(47,141,93,0.055)' transform='rotate(-18 100 50)'%3EEODB%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  user-select: none;
}

/* ── Center card ── */
.apl-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 2.5rem;
  max-width: 400px;
  width: 90%;
}

/* ── Logo row ── */
.apl-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.apl-brand-sep {
  width: 1px;
  height: 46px;
  background: rgba(47, 141, 93, 0.28);
  flex-shrink: 0;
}

.apl-emblem {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
}

.apl-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Title block ── */
.apl-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: #173248;
  margin: 0 0 0.18rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.apl-state {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  color: #2f8d5d;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

/* ── Divider ── */
.apl-divider {
  width: 52px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2f8d5d 0%, #2e73b4 100%);
  margin: 1.1rem auto;
  flex-shrink: 0;
}

/* ── Portal badge ── */
.apl-portal {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #466075;
  margin: 0 0 1.5rem;
}

/* ── Spinner ── */
.apl-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(47, 141, 93, 0.16);
  border-top-color: #2f8d5d;
  border-radius: 50%;
  animation: apl-spin 0.78s linear infinite;
  flex-shrink: 0;
  margin-bottom: 0.8rem;
}

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

/* ── Loading label ── */
.apl-loading {
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 0.79rem;
  color: #64788b;
  margin: 0;
  letter-spacing: 0.04em;
  animation: apl-pulse 1.9s ease-in-out infinite;
}

@keyframes apl-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.42; }
}

/* ── Footer attribution ── */
.apl-footer {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  text-align: center;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 0.69rem;
  color: rgba(70, 96, 117, 0.52);
  margin: 0;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .apl-title  { font-size: 1.4rem; }
  .apl-card   { padding: 1.5rem 1.25rem; }
  .apl-emblem { width: 44px; height: 44px; }
  .apl-logo   { height: 30px; }
  .apl-brand  { gap: 0.9rem; margin-bottom: 1.2rem; }
}

@media (max-width: 360px) {
  .apl-title  { font-size: 1.2rem; }
  .apl-portal { font-size: 0.68rem; letter-spacing: 0.14em; }
}

/* ── Respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .apl-spinner { animation: none; }
  .apl-loading { animation: none; }
  #app-loader  { transition: none; }
}
/* ── Hero background carousel ─────────────────────────────────── */

.lp-bg-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.lp-bg-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}

.lp-bg-slide--active {
    opacity: 1;
}
/* ── NAVBAR ── flex-shrink: 0, compact ─────────────────────────── */

.lp-navbar {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 30;
    padding: 10px 40px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(0, 18, 8, 0.42);
    border-bottom: 1px solid rgba(0, 255, 136, 0.09);
    gap: 10px;
    height: 69px;
    box-sizing: border-box;
}

.lp-nav-left {
    display: flex;
    align-items: center;
    gap: 11px;
    width: auto;
    height: auto;
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
}

.lp-logo-flip {
    width: 48px;
    height: 48px;
    position: relative;
    flex-shrink: 0;
    -webkit-perspective: 600px;
    perspective: 600px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.lp-logo-flip img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    object-fit: contain;
    padding: 3px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.lp-logo-flip img:nth-child(1) {
    transform: rotateY(0deg);
    animation: lpLogoFlipFront 6s ease-in-out infinite;
}

.lp-logo-flip img:nth-child(2) {
    display: block;
    transform: rotateY(180deg);
    animation: lpLogoFlipBack 6s ease-in-out infinite;
}

@keyframes lpLogoFlipFront {
    0%, 22% {
        transform: rotateY(0deg);
        opacity: 1;
    }
    50%, 72% {
        transform: rotateY(180deg);
        opacity: 0.95;
    }
    100% {
        transform: rotateY(360deg);
        opacity: 1;
    }
}

@keyframes lpLogoFlipBack {
    0%, 22% {
        transform: rotateY(180deg);
        opacity: 0.95;
    }
    50%, 72% {
        transform: rotateY(360deg);
        opacity: 1;
    }
    100% {
        transform: rotateY(540deg);
        opacity: 0.95;
    }
}

.lp-logo-text-group {
    width: auto;
    min-width: 0;
    height: auto;
    line-height: 1.15;
    overflow: visible;
}

.lp-main-title {
    font-weight: 700;
    font-size: 17px;
    line-height: 19.55px;
    letter-spacing: 0.04em;
    white-space: normal;
    overflow-wrap: anywhere;
}

.lp-tagline {
    font-size: 10px;
    line-height: 11.5px;
    opacity: 0.68;
    white-space: normal;
}

.lp-sub-title {
    color: #00ff88;
    font-size: 11px;
    line-height: 12.65px;
    font-weight: 600;
    white-space: nowrap;
}

/* Navbar brand — always English (no HI font / language fade) */
.lp-logo-text-group .lp-main-title,
.lp-logo-text-group .lp-tagline,
.lp-logo-text-group .lp-sub-title {
    font-family: var(--lp-font-en);
    transition: none;
}

/* Navbar lang toggle + admin btn — no blink; font follows EN/HI */
.lp-lang-toggle,
.lp-lang-toggle .lp-lang-btn,
.lp-chat-btn {
    font-family: var(--lp-font-active);
    transition: color 170ms ease, background 170ms ease, filter 160ms ease, box-shadow 170ms ease;
}

.lp-root.lp-font-phase-out .lp-nav-right :is(button, .lp-lang-btn, .lp-chat-btn),
.lp-root.lp-font-phase-in .lp-nav-right :is(button, .lp-lang-btn, .lp-chat-btn),
.lp-root.lp-font-phase-out .lp-lang-toggle,
.lp-root.lp-font-phase-in .lp-lang-toggle {
    opacity: 1;
}

.lp-nav-right {
    display: flex;
    align-items: center;
    gap: 7px;
    position: relative;
}

/* ── Language toggle for Login page ────────────────────────────── */

.lp-lang-toggle {
    display: flex;
    align-items: stretch;
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    width: 134px;
    height: 31.39px;
    flex: 0 0 134px;
    box-sizing: border-box;
}

.lp-lang-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 5px 11px;
    cursor: pointer;
    transition: color 170ms ease, background 170ms ease;
    font-family: var(--lp-font-active);
    white-space: nowrap;
    line-height: 1.4;
    flex: 1;
    min-width: 64px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
    border-radius: 18px;
}

.lp-lang-btn:hover:not(.lp-lang-btn--active) {
    background: rgba(0, 255, 136, 0.10);
    color: #00ff88;
}

.lp-lang-btn--active {
    background: linear-gradient(90deg, #00ff88, #00cc66);
    color: #022010;
    box-shadow: 0 6px 14px rgba(0, 255, 136, 0.28);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
    border-radius: 18px;
}

.lp-lang-btn--active:hover {
    background: linear-gradient(90deg, #00ff88, #00cc66);
    color: #022010;
}

.lp-lang-btn+.lp-lang-btn {
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.lp-chat-btn {
    background: linear-gradient(90deg, #00cc66, #009944);
    border: none;
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    height: 28px;
    min-height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 16px;
    color: #000d04;
    font-weight: 700;
    font-family: var(--lp-font-active);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    transition: background 160ms ease, filter 160ms ease;
}

.lp-chat-btn:hover {
    filter: brightness(0.92);
}


/* ── RESPONSIVE ─────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .lp-navbar {
        padding: 10px 20px;
    }
}

@media (max-width: 700px) {
    .lp-navbar {
        padding: 10px 12px;
        height: auto;
        min-height: 62px;
        gap: 8px;
    }

    .lp-nav-left {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        height: auto;
        overflow: visible;
    }

    .lp-logo-text-group {
        width: auto;
        min-width: 0;
        height: auto;
        overflow: visible;
    }

    .lp-main-title {
        font-size: 16px;
        line-height: 1.15;
    }

    .lp-tagline {
        font-size: 9px;
        line-height: 1.2;
    }

    .lp-sub-title {
        font-size: 10px;
        line-height: 1.2;
    }

    .lp-nav-right {
        gap: 6px;
        margin-left: auto;
        flex-wrap: nowrap;
    }

    .lp-lang-toggle {
        width: 118px;
        flex: 0 0 118px;
        height: 30px;
    }

    .lp-lang-btn {
        min-width: 54px;
        padding: 4px 8px;
        font-size: 10px;
        letter-spacing: 0.02em;
    }

    .lp-chat-btn {
        width: 110px;
        min-width: 110px;
        max-width: 110px;
        height: 28px;
        min-height: 28px;
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* Very small phones: keep header controls readable and avoid squeeze */
@media (max-width: 430px) {
    .lp-tagline {
        display: none;
    }

    .lp-logo-flip {
        width: 42px;
        height: 42px;
    }

    .lp-lang-toggle {
        width: 108px;
        flex-basis: 108px;
    }

    .lp-chat-btn {
        width: 110px;
        min-width: 110px;
        max-width: 110px;
        height: 28px;
        padding: 7px 10px;
        font-size: 12px;
    }
}

/* Tablet landscape only */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
    .lp-navbar {
        padding: 8px 20px;
        gap: 8px;
    }

    .lp-logo-flip {
        width: 40px;
        height: 40px;
    }

    .lp-main-title {
        font-size: 15px;
    }

    .lp-tagline {
        font-size: 9px;
    }

    .lp-sub-title {
        font-size: 10px;
    }

    .lp-nav-right {
        gap: 6px;
        margin-left: auto;
        flex-wrap: nowrap;
    }

    .lp-lang-btn {
        padding: 4px 9px;
        font-size: 10px;
    }

    .lp-chat-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
}

/* Mobile landscape only */
@media (orientation: landscape) and (max-height: 550px) {
    .lp-navbar {
        padding: 6px 12px;
        gap: 6px;
    }

    .lp-logo-flip {
        width: 34px;
        height: 34px;
    }

    .lp-main-title {
        font-size: 13px;
    }

    .lp-tagline {
        font-size: 8px;
    }

    .lp-sub-title {
        font-size: 9px;
    }

    .lp-nav-right {
        gap: 5px;
        margin-left: auto;
        flex-wrap: nowrap;
    }

    .lp-lang-btn {
        padding: 3px 8px;
        font-size: 9.5px;
    }

    .lp-chat-btn {
        padding: 5px 10px;
        font-size: 10px;
    }
}

/* Strict compact landscape mode */
@media (orientation: landscape) and (max-height: 600px) {
    .lp-navbar {
        padding: 6px 12px;
        gap: 6px;
    }

    .lp-logo-flip {
        width: 32px;
        height: 32px;
    }

    .lp-main-title {
        font-size: 12px;
    }

    .lp-tagline {
        font-size: 8px;
    }

    .lp-sub-title {
        font-size: 9px;
    }

    .lp-nav-right {
        margin-left: auto;
        gap: 5px;
        flex-wrap: nowrap;
    }

    .lp-lang-btn {
        padding: 3px 8px;
        font-size: 9px;
    }
}
/* ── LEFT / HERO SECTION ─────────────────────────────────────────── */

.lp-left {
    grid-area: hero;
    align-self: start;
    min-width: 0;
    min-height: 288.39px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    overflow: visible;
}


/* Badge pill — fixed box; font family follows EN/HI toggle (no fade/resize) */
.lp-badge {
    font-family: var(--lp-font-active);
    transition: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
    color: #00ff88;
    padding: 7px 12px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(0, 255, 136, 0.16);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    width: 290px;
    max-width: 100%;
    height: 29.8px;
    min-height: 29.8px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.lp-headline {
    font-size: clamp(1.3rem, 2.2vw, 1.85rem);
    line-height: 1.48;
    min-height: calc(1em * 1.48 * 3);
    height: auto;
    margin: 0 0 4px;
    padding-bottom: 0;
    font-weight: 700;
    overflow: hidden;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.lp-green {
    color: #00ff88;
}

.lp-desc {
    opacity: 0.76;
    max-width: 480px;
    line-height: 1.6;
    font-size: 13px;
    margin: 0 0 14px;
    height: calc(13px * 1.6 * 2);
    overflow: hidden;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}


/* ── Stats ── */

.lp-stats {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 0;
    min-height: 55.34px;
    height: auto;
    overflow: visible;
}

.lp-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 11px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.09);
    text-align: center;
    min-width: 68px;
    min-height: 58px;
    height: auto;
    flex: 0 0 68px;
    box-sizing: border-box;
    overflow: visible;
    transition: background 180ms ease;
}

.lp-stat-card:nth-child(1) {
    flex-basis: 69.11px;
    width: 69.11px;
}

.lp-stat-card:nth-child(2) {
    flex-basis: 68px;
    width: 68px;
}

.lp-stat-card:nth-child(3) {
    flex-basis: 72.03px;
    width: 72.03px;
}

.lp-stat-card:nth-child(4) {
    flex-basis: 98.5px;
    width: 98.5px;
}

.lp-stat-card:hover {
    background: rgba(0, 255, 136, 0.1);
}

.lp-stat-card h3 {
    margin: 0 0 2px;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #00ff88;
    font-weight: 700;
    white-space: nowrap;
}

.lp-stat-card p {
    margin: 0;
    font-size: 11px;
    line-height: 1.2;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hindi stat labels — smaller type + room for matras; box size unchanged */
.lp-root[data-lang="hi"] .lp-stat-card h3 {
    margin-bottom: 0;
    line-height: 1.1;
}

.lp-root[data-lang="hi"] .lp-stat-card p {
    font-size: clamp(8px, 0.62vw, 9.25px);
    line-height: 1.55;
    overflow: visible;
    text-overflow: clip;
    padding-top: 2px;
    transform: translateY(1px);
}


/* ── RESPONSIVE ─────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .lp-stats {
        flex-wrap: wrap;
    }
}

@media (max-width: 960px) {
    .lp-left {
        max-width: 100%;
    }

    .lp-headline {
        min-height: 0;
    }
}

@media (max-width: 700px) {
    .lp-left {
        height: auto;
        overflow: visible;
    }

    .lp-badge {
        width: min(290px, 100%);
        height: 29.8px;
        min-height: 29.8px;
    }

    .lp-headline {
        height: auto;
        min-height: calc(1em * 1.48 * 3);
        padding-bottom: 0;
        margin-bottom: 4px;
    }

    .lp-desc {
        height: auto;
        max-height: none;
        margin-bottom: 12px;
    }

    .lp-stats {
        height: auto;
        flex-wrap: wrap;
        gap: 8px;
    }

    .lp-stat-card,
    .lp-stat-card:nth-child(1),
    .lp-stat-card:nth-child(2),
    .lp-stat-card:nth-child(3),
    .lp-stat-card:nth-child(4) {
        width: calc(50% - 4px);
        flex: 0 0 calc(50% - 4px);
        min-width: 0;
        height: auto;
        flex-basis: calc(50% - 4px);
    }
}

/* Tablet landscape only */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
    .lp-headline {
        font-size: clamp(1.05rem, 1.7vw, 1.35rem);
        margin-bottom: 4px;
    }

    .lp-desc {
        margin-bottom: 10px;
        font-size: 12px;
        line-height: 1.45;
    }

    .lp-stats {
        gap: 8px;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .lp-stat-card {
        padding: 7px 10px;
        min-width: 60px;
    }
}

/* Mobile landscape only */
@media (orientation: landscape) and (max-height: 550px) {
    .lp-headline {
        font-size: clamp(0.95rem, 1.6vw, 1.15rem);
        line-height: 1.45;
        min-height: calc(1em * 1.45 * 3);
        height: auto;
        padding-bottom: 0;
        margin-bottom: 4px;
    }

    .lp-desc {
        margin-bottom: 8px;
        font-size: 11px;
        line-height: 1.35;
    }

    .lp-stats {
        gap: 6px;
        margin-bottom: 8px;
        flex-wrap: wrap;
    }

    .lp-stat-card {
        padding: 6px 8px;
        min-width: 54px;
    }

    .lp-stat-card h3 {
        font-size: 0.92rem;
    }

    .lp-stat-card p {
        font-size: 9.5px;
    }

    .lp-root[data-lang="hi"] .lp-stat-card p {
        font-size: 8.5px;
        line-height: 1.55;
    }
}

/* Strict compact landscape mode */
@media (orientation: landscape) and (max-height: 600px) {
    .lp-left {
        min-height: 0;
        justify-content: center;
    }

    .lp-badge {
        padding: 5px 9px;
        font-size: 10px;
        margin-bottom: 6px;
    }

    .lp-headline {
        font-size: clamp(0.9rem, 2.2vh, 1.1rem);
        line-height: 1.45;
        min-height: calc(1em * 1.45 * 3);
        height: auto;
        padding-bottom: 0;
        margin-bottom: 4px;
    }

    .lp-desc {
        font-size: 10.5px;
        line-height: 1.3;
        margin-bottom: 6px;
        width: min(256.94px, 100%);
        max-width: 256.94px;
    }

    .lp-stats {
        gap: 6px;
        margin-bottom: 0;
        flex-wrap: nowrap;
    }

    .lp-stat-card {
        min-width: 52px;
        padding: 5px 7px;
    }

    .lp-stat-card h3 {
        font-size: 0.9rem;
        margin-bottom: 1px;
    }

    .lp-stat-card p {
        font-size: 9px;
    }

    .lp-root[data-lang="hi"] .lp-stat-card p {
        font-size: 8px;
        line-height: 1.55;
    }
}
/* ── Form fields ── */

.lp-label {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    height: 14.39px;
    opacity: 0.80;
    margin-bottom: 5px;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lp-input-row {
    display: flex;
    align-items: stretch;
    gap: 7px;
    margin-bottom: 14px;
    min-width: 0;
    height: 39.19px;
    overflow: hidden;
}

.lp-country {
    width: 55.36px;
    height: 39.19px;
    flex: 0 0 55.36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 11px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(0, 255, 136, 0.38);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.2;
    font-family: inherit;
    color: #ffffff;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: background 160ms ease;
    user-select: none;
}

.lp-country:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: rgba(0, 255, 136, 0.95);
    box-shadow: inset 0 0 0 1px rgba(0, 255, 136, 0.55);
}

.lp-phone-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    height: 39.19px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 136, 0.38);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.2;
    outline: none;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.lp-full-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 136, 0.38);
    margin-bottom: 11px;
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    box-sizing: border-box;
    outline: none;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.lp-phone-input:hover,
.lp-full-input:hover {
    border-color: rgba(0, 255, 136, 0.95);
    background: rgba(0, 255, 136, 0.06);
    box-shadow: inset 0 0 0 1px rgba(0, 255, 136, 0.55);
}

.lp-phone-input:focus,
.lp-full-input:focus {
    border-color: rgba(0, 255, 136, 1);
    background: rgba(0, 255, 136, 0.07);
    box-shadow: inset 0 0 0 1px rgba(0, 255, 136, 0.7);
}

.lp-phone-input::placeholder,
.lp-full-input::placeholder {
    color: rgba(255, 255, 255, 0.52);
    opacity: 1;
    font-weight: 300;
}

/* ── CAPTCHA ─────────────────────────────────── */
.lp-captcha {
    margin-bottom: 11px;
}

.lp-captcha-row {
    display: flex;
    align-items: stretch;
    gap: 7px;
    margin-bottom: 9px;
    min-width: 0;
}

.lp-captcha-image {
    flex: 1;
    min-width: 0;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 136, 0.38);
    background: #f1f5f9;
    overflow: hidden;
    user-select: none;
}

.lp-captcha-image img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
}

.lp-captcha-placeholder {
    color: #64748b;
    font-size: 20px;
    font-weight: 600;
}

.lp-captcha-refresh {
    flex: 0 0 44px;
    width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 136, 0.38);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.lp-captcha-refresh:hover:not(:disabled) {
    background: rgba(0, 255, 136, 0.1);
    border-color: rgba(0, 255, 136, 0.95);
    box-shadow: inset 0 0 0 1px rgba(0, 255, 136, 0.55);
}

.lp-captcha-refresh:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.lp-captcha-spin {
    animation: lp-captcha-rotate 0.8s linear infinite;
}

@keyframes lp-captcha-rotate {
    to {
        transform: rotate(360deg);
    }
}

.lp-admin-card-form {
    display: flex;
    flex-direction: column;
}

.lp-back-public-btn {
    color: rgba(255, 255, 255, 0.82);
}


/* ── Validation error ── */

.lp-error {
    color: #ff7070;
    font-size: 11.5px;
    margin: -4px 0 9px;
    padding: 7px 10px;
    background: rgba(255, 80, 80, 0.1);
    border-radius: 8px;
    border-left: 3px solid #ff6060;
    line-height: 1.4;
}


/* ── Submit button ── */

.lp-btn-green {
    width: 100%;
    min-height: 38.8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px;
    background: linear-gradient(90deg, #00ff88, #00cc66);
    border: none;
    border-radius: 11px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    font-family: inherit;
    color: #001a0a;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 6px 18px rgba(0, 255, 136, 0.20);
    transition: opacity 160ms ease, box-shadow 160ms ease;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    gap: 8px;
}

.lp-btn-loading-icon {
    width: 16px;
    height: 16px;
    animation: spinner-rotate 800ms linear infinite;
}

@keyframes spinner-rotate {
    100% {
        transform: rotate(360deg);
    }
}

.lp-card .lp-btn-green {
    height: 38.8px;
}

.lp-btn-green:hover {
    opacity: 0.90;
    box-shadow: 0 10px 24px rgba(0, 255, 136, 0.30);
}

.lp-btn-green:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
}


/* ── Outline buttons ── */

.lp-btn-outline {
    width: 100%;
    padding: 9px;
    margin-top: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 11px;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.lp-btn-outline:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(0, 255, 136, 0.32);
}


/* ── OTP CONTAINER ── */

.otp-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 14px;
}


/* OTP INPUT BOX */

.otp-input {
    width: 55px;
    height: 55px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 400px) {
    .otp-input {
        width: calc((100% - 30px) / 4);
        height: 48px;
        font-size: 18px;
    }
    .otp-container {
        gap: 8px;
    }
}


/* FOCUS EFFECT (MATCH GREEN THEME) */

.otp-input:focus {
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.08);
    box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.2);
}

.lp-otp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -2px 0 10px;
}

.lp-otp-timer {
    margin: 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.82);
}

.lp-otp-timer.is-expired {
    color: #ff8585;
}

.lp-resend-btn {
    border: none;
    background: transparent;
    color: #00ff88;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-resend-btn:disabled {
    color: rgba(255, 255, 255, 0.55);
    cursor: not-allowed;
    text-decoration: none;
}


/* ── RESPONSIVE ─────────────────────────────────────────────────── */

/* Tighten card for very short screens */
@media (max-height: 700px) {
    .lp-btn-green {
        padding: 9px;
    }
    .lp-btn-outline {
        padding: 7px;
        margin-top: 6px;
    }
}

/* Tablet landscape only */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
    .lp-btn-green {
        padding: 9px;
        font-size: 13px;
    }

    .lp-btn-outline {
        padding: 8px;
        font-size: 12px;
    }
}

/* Mobile landscape only */
@media (orientation: landscape) and (max-height: 550px) {
    .lp-label {
        font-size: 11px;
        margin-bottom: 4px;
    }

    .lp-country,
    .lp-phone-input,
    .lp-full-input {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .lp-btn-green {
        padding: 8px;
        font-size: 12px;
    }

    .lp-btn-outline {
        padding: 7px;
        font-size: 11px;
    }
}

/* Strict compact landscape mode */
@media (orientation: landscape) and (max-height: 600px) {
    .lp-label {
        font-size: 10.5px;
        margin-bottom: 3px;
    }

    .lp-input-row {
        gap: 6px;
        margin-bottom: 7px;
    }

    .lp-country {
        padding: 6px 8px;
        font-size: 10.5px;
    }

    .lp-phone-input {
        padding: 6px 8px;
        font-size: 13px;
    }

    .lp-full-input {
        padding: 6px 8px;
        font-size: 11px;
        margin-bottom: 7px;
    }

    .lp-btn-green {
        padding: 7px;
        font-size: 11px;
        margin-top: 2px;
    }

    .lp-btn-outline {
        padding: 6px;
        font-size: 10.5px;
        margin-top: 5px;
    }
}
/* ── LOGIN CARD ─────────────────────────────────────────────────── */

.lp-card {
    grid-area: card;
    align-self: center;
    width: 100%;
    max-width: 355px;
    min-width: 0;
    min-height: 425.81px;
    flex-shrink: 0;
    padding: 20px 22px 16px;
    border-radius: 20px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background: rgba(0, 28, 14, 0.86);
    border: 1px solid rgba(0, 255, 136, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.lp-lock-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 22px;
}

.lp-card-title {
    text-align: center;
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    height: 23px;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: break-word;
}

.lp-subtext {
    text-align: center;
    opacity: 0.70;
    font-size: 11.5px;
    margin: 0 0 16px;
    line-height: 1.45;
    height: 33.34px;
    overflow: hidden;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

/* ── Tabs ── */

.lp-tabs {
    display: flex;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 3px;
    gap: 3px;
    height: 37px;
    box-sizing: border-box;
    overflow: hidden;
}

.lp-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    padding: 8px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    border-radius: 10px;
    font-size: 12.5px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lp-tab:hover:not(.lp-tab--active) {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.lp-tab--active {
    background: linear-gradient(90deg, #00ff88, #00cc66);
    color: #001a0a;
    font-weight: 700;
}

.lp-tabs--single .lp-tab {
    cursor: default;
}

.lp-tabs--single .lp-tab:hover {
    background: linear-gradient(90deg, #00ff88, #00cc66);
    color: #001a0a;
}


/* ── Terms ── */

.lp-terms {
    font-size: 11px;
    margin-top: 10px;
    opacity: 0.58;
    text-align: center;
    line-height: 1.55;
    height: 34.09px;
    overflow: hidden;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.lp-terms span {
    color: #00ff88;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 160ms ease;
}

.lp-terms span:hover {
    opacity: 0.70;
}


/* ── RESPONSIVE ─────────────────────────────────────────────────── */

/* Desktop: match login card height with left-side content column */
@media (min-width: 821px) {
    .lp-card {
        align-self: center;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .lp-card-main {
        display: flex;
        flex-direction: column;
    }

    .lp-terms {
        margin-top: 10px;
        padding-top: 0;
    }
}

@media (max-width: 960px) {
    .lp-card {
        width: 100%;
        max-width: 100%;
        min-height: 425.81px;
        box-sizing: border-box;
        align-self: stretch;
    }
}

@media (max-width: 700px) {
    .lp-card {
        min-height: 425.81px;
        padding: 16px 14px 12px;
    }
}

/* Tighten card for very short screens */
@media (max-height: 700px) {
    .lp-card {
        padding: 14px 18px 12px;
    }
    .lp-lock-circle {
        width: 50px;
        height: 50px;
        font-size: 18px;
        margin-bottom: 7px;
    }
    .lp-card-title {
        font-size: 1rem;
    }
    .lp-subtext {
        margin-bottom: 9px;
    }
    .lp-tabs {
        margin-bottom: 9px;
    }
    .lp-terms {
        margin-top: 7px;
    }
}

/* Tablet landscape only */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
    .lp-card {
        width: 330px;
        max-height: calc(100dvh - 140px);
        padding: 14px 16px 12px;
        overflow-y: auto;
    }

    .lp-lock-circle {
        width: 50px;
        height: 50px;
        margin-bottom: 8px;
    }

    .lp-card-title {
        font-size: 1rem;
    }

    .lp-subtext {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .lp-tab {
        padding: 7px;
        font-size: 12px;
    }
}

/* Mobile landscape only */
@media (orientation: landscape) and (max-height: 550px) {
    .lp-card {
        width: min(300px, 44vw);
        max-height: calc(100dvh - 110px);
        padding: 11px 12px 10px;
        border-radius: 16px;
        overflow-y: auto;
    }

    .lp-lock-circle {
        width: 42px;
        height: 42px;
        margin-bottom: 6px;
        font-size: 16px;
    }

    .lp-card-title {
        font-size: 0.95rem;
    }

    .lp-subtext {
        font-size: 10px;
        margin-bottom: 8px;
    }

    .lp-tabs {
        margin-bottom: 8px;
        padding: 2px;
    }

    .lp-tab {
        padding: 6px;
        font-size: 11px;
    }

    .lp-terms {
        font-size: 10px;
        margin-top: 6px;
    }
}

/* Strict compact landscape mode */
@media (orientation: landscape) and (max-height: 600px) {
    .lp-card {
        width: min(320px, 44vw);
        max-height: 100%;
        align-self: stretch;
        padding: 10px 11px 8px;
        border-radius: 14px;
        overflow: hidden;
    }

    .lp-lock-circle {
        width: 40px;
        height: 40px;
        font-size: 15px;
        margin-bottom: 5px;
    }

    .lp-card-title {
        font-size: 0.92rem;
        margin-bottom: 2px;
    }

    .lp-subtext {
        font-size: 10px;
        margin-bottom: 7px;
        line-height: 1.3;
    }

    .lp-tabs {
        margin-bottom: 7px;
        padding: 2px;
        gap: 2px;
    }

    .lp-tab {
        padding: 5px;
        font-size: 10.5px;
    }

    .lp-terms {
        font-size: 9.5px;
        margin-top: 5px;
        line-height: 1.3;
    }
}
/* ── Live System Overview (compact dark-green panel) ── */

.lp-live-overview {
    --lp-live-panel-h: 176px;
    --lp-live-header-h: 24px;
    --lp-live-card-h: 56px;
    --lp-live-label-max-h: 2.65em;

    grid-area: news;
    align-self: start;
    width: 100%;
    max-width: 380px;
    min-width: 0;
    height: var(--lp-live-panel-h);
    min-height: var(--lp-live-panel-h);
    max-height: var(--lp-live-panel-h);
    box-sizing: border-box;
    padding: 10px 12px 12px;
    border-radius: 20px;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background: rgba(0, 28, 14, 0.86);
    border: 1px solid rgba(0, 255, 136, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lp-live-overview__header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 var(--lp-live-header-h);
    height: var(--lp-live-header-h);
    min-height: var(--lp-live-header-h);
    max-height: var(--lp-live-header-h);
    margin-bottom: 6px;
    color: #00ff88;
    overflow: hidden;
}

.lp-live-overview__header svg {
    flex-shrink: 0;
    stroke-width: 2.25px;
    filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.35));
}

.lp-live-overview__header h4 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    line-height: var(--lp-live-header-h);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-live-overview__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, var(--lp-live-card-h));
    gap: 7px;
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
}

.lp-live-overview__card {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    height: var(--lp-live-card-h);
    min-height: var(--lp-live-card-h);
    max-height: var(--lp-live-card-h);
    padding: 7px 9px;
    border-radius: 11px;
    background: linear-gradient(145deg, #0c1810 0%, #0a140a 100%);
    border: 1px solid rgba(0, 255, 136, 0.14);
    box-shadow: inset 0 1px 0 rgba(0, 255, 136, 0.04);
    box-sizing: border-box;
    overflow: hidden;
}

.lp-live-overview__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    align-self: center;
    justify-self: center;
    flex-shrink: 0;
    background: #060e08;
    border: 1px solid rgba(0, 255, 136, 0.38);
    color: #00ff88;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.08);
}

.lp-live-overview__meta {
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 32px;
    padding: 0;
}

.lp-live-overview__meta h3 {
    margin: 0;
    padding: 0;
    height: auto;
    line-height: 1.05;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.lp-live-overview__meta p {
    margin: 0;
    height: auto;
    min-height: 0;
    max-height: var(--lp-live-label-max-h);
    color: rgba(168, 190, 176, 0.88);
    font-size: 0.64rem;
    line-height: 1.25;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hindi: smaller glyphs only — same fixed panel/card/label box sizes */
.lp-root[data-lang="hi"] .lp-live-overview__header h4 {
    font-size: 10.5px;
}

.lp-root[data-lang="hi"] .lp-live-overview__meta p {
    font-size: 0.54rem;
    line-height: 1.38;
}


/* ── RESPONSIVE ─────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .lp-live-overview {
        max-width: 100%;
    }
}

@media (max-width: 960px) {
    .lp-live-overview {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    .lp-live-overview {
        width: 100%;
        max-width: 100%;
    }
}

/* Tablet landscape only */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
    .lp-live-overview {
        padding: 10px 12px;
        max-width: 100%;
    }
}

/* Mobile landscape only */
@media (orientation: landscape) and (max-height: 550px) {
    .lp-live-overview {
        padding: 8px 10px;
        border-radius: 12px;
        max-width: 100%;
    }
}

/* Strict compact landscape mode */
@media (orientation: landscape) and (max-height: 600px) {
    .lp-live-overview {
        --lp-live-panel-h: 156px;
        --lp-live-header-h: 22px;
        --lp-live-card-h: 50px;
        --lp-live-label-max-h: 2.5em;

        display: flex;
        grid-area: news;
        padding: 8px 10px 10px;
        border-radius: 12px;
        max-width: 100%;
    }

    .lp-live-overview__header h4 {
        font-size: 11px;
    }

    .lp-live-overview__grid {
        gap: 6px;
    }

    .lp-live-overview__card {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 7px;
        padding: 6px 8px;
        border-radius: 10px;
    }

    .lp-live-overview__icon {
        width: 28px;
        height: 28px;
        font-size: 12px;
        border-radius: 8px;
    }

    .lp-live-overview__meta {
        min-height: 28px;
        gap: 2px;
    }

    .lp-live-overview__meta h3 {
        font-size: 0.84rem;
        line-height: 1.05;
    }

    .lp-live-overview__meta p {
        font-size: 0.6rem;
    }

    .lp-root[data-lang="hi"] .lp-live-overview__header h4 {
        font-size: 9.5px;
    }

    .lp-root[data-lang="hi"] .lp-live-overview__meta p {
        font-size: 0.5rem;
        line-height: 1.36;
    }
}
/* ── FOOTER: flex-shrink: 0, compact ───────────────────────────── */

.lp-footer {
    flex-shrink: 0;
    background: rgba(0, 16, 7, 0.96);
    border-top: 1px solid rgba(0, 255, 136, 0.12);
    padding: 10px 40px;
    height: auto;
    box-sizing: border-box;
    overflow: visible;
}

.lp-footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 8px;
}

.lp-footer-bottom p {
    width: min(371.91px, 100%);
    margin: 0;
    font-size: 11px;
    line-height: 13px;
    height: 13px;
    opacity: 0.45;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-socials {
    display: flex;
    gap: 6px;
}

[data-lang="hi"] .lp-footer-bottom p {
    font-size: clamp(9.5px, 0.75vw, 10.5px);
    line-height: 13px;
}


/* ── RESPONSIVE ─────────────────────────────────────────────────── */

@media (max-width: 960px) {
    .lp-footer {
        padding: 10px 20px;
    }
}

/* Tablet landscape only */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
    .lp-footer {
        padding: 8px 20px;
    }
}

/* Mobile landscape only */
@media (orientation: landscape) and (max-height: 550px) {
    .lp-footer {
        padding: 7px 12px;
    }
}

/* Strict compact landscape mode */
@media (orientation: landscape) and (max-height: 600px) {
    .lp-footer {
        padding: 5px 12px;
    }

    .lp-footer-bottom {
        padding-top: 0;
        border-top: 0;
    }

    .lp-footer-bottom p {
        font-size: 9px;
    }
}
/*
 * Login.css  — no-scroll, 100vh layout
 * All classes prefixed "lp-" to prevent conflicts with main.css
 * Component-specific styles live alongside their components in ./components.
 * This file keeps only the shared root, language-fade and page-grid layout.
 */


/* ── ROOT: exact viewport, no overflow ─────────────────────────── */

.lp-root {
    font-family: "Poppins", sans-serif;
    --lp-font-en: "Poppins", sans-serif;
    --lp-font-hi: "Noto Sans Devanagari", "Mukta", "Hind", "Poppins", sans-serif;
    --lp-font-active: var(--lp-font-en);
    --lp-font-fade-duration: 0.38s;
    --lp-font-fade-ease: cubic-bezier(0.4, 0, 0.2, 1);
    color: #ffffff;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #0a1520;
}

.lp-root[data-lang="hi"] {
    --lp-font-active: var(--lp-font-hi);
}

/* Smooth EN ↔ HI font change — typography opacity + font-size only (login page) */
.lp-root :is(
    h1, h2, h3, h4, h5,
    p, label, a, small, strong,
    .lp-headline, .lp-desc,
    .lp-stat-card h3, .lp-stat-card p,
    .lp-footer-bottom p
) {
    font-family: var(--lp-font-active);
    transition:
        opacity var(--lp-font-fade-duration) var(--lp-font-fade-ease),
        font-size 0.45s var(--lp-font-fade-ease);
}

.lp-root.lp-font-phase-out :is(
    h1, h2, h3, h4, h5,
    p, label, a, small, strong,
    .lp-headline, .lp-desc,
    .lp-stat-card h3, .lp-stat-card p,
    .lp-footer-bottom p
) {
    opacity: 0.12;
}

.lp-root.lp-font-phase-in :is(
    h1, h2, h3, h4, h5,
    p, label, a, small, strong,
    .lp-headline, .lp-desc,
    .lp-stat-card h3, .lp-stat-card p,
    .lp-footer-bottom p
) {
    opacity: 1;
}

.lp-root.lp-font-phase-out img,
.lp-root.lp-font-phase-in img,
.lp-root.lp-font-phase-out .lp-logo-flip,
.lp-root.lp-font-phase-in .lp-logo-flip {
    opacity: 1;
    transition: none;
}

/* Login + live overview cards — font only; fixed layout on EN/HI (all breakpoints) */
.lp-card :is(
    h2, p, label, button, input,
    .lp-card-title, .lp-subtext, .lp-tab,
    .lp-label, .lp-btn-green, .lp-btn-outline, .lp-back-public-btn,
    .lp-error, .lp-otp-timer, .lp-resend-btn,
    .lp-terms, .lp-terms span,
    .lp-phone-input, .lp-full-input,
    .otp-input
),
.lp-live-overview :is(
    h4, h3, p,
    .lp-live-overview__header h4,
    .lp-live-overview__meta h3,
    .lp-live-overview__meta p
) {
    font-family: var(--lp-font-active);
    /* Opacity only — no font-size transition (keeps panel footprint static EN/HI) */
    transition: opacity var(--lp-font-fade-duration) var(--lp-font-fade-ease);
}

.lp-root.lp-font-phase-out .lp-card,
.lp-root.lp-font-phase-in .lp-card,
.lp-root.lp-font-phase-out .lp-card *,
.lp-root.lp-font-phase-in .lp-card *,
.lp-root.lp-font-phase-out .lp-live-overview,
.lp-root.lp-font-phase-in .lp-live-overview,
.lp-root.lp-font-phase-out .lp-live-overview *,
.lp-root.lp-font-phase-in .lp-live-overview * {
    opacity: 1;
}

.lp-root::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}

.lp-root > *:not(.lp-bg-carousel) {
    position: relative;
    z-index: 2;
}


/* ── MAIN: CSS grid — left hero | card (spans rows) ────────────── */


/* Desktop:  [lp-left      ] [lp-card (rows 1–2)]                  */


/*           [lp-live-overview]                                      */


/* Mobile:   [lp-left] → [lp-card] → [lp-live-overview]            */

.lp-main {
    flex: 1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 355px);
    grid-template-rows: auto auto;
    grid-template-areas: "hero  card" "news  card";
    align-content: center;
    column-gap: 32px;
    row-gap: 10px;
    padding: 16px 48px;
    overflow: visible;
}


/* ── Source caption ────────────────────────────────────────────── */

.lp-source-caption-wrap {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    padding: 0 8px 2px;
    box-sizing: border-box;
}

.lp-source-caption {
    max-width: min(680px, 100%);
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── RESPONSIVE (page-level grid + root) ───────────────────────── */

@media (max-width: 1100px) {
    .lp-main {
        padding: 14px 24px;
        column-gap: 20px;
        row-gap: 10px;
    }
}

/* Tablet / fold portrait (e.g. 853px): stack hero → card → news */
@media (max-width: 960px) {
    .lp-root {
        height: 100dvh;
        overflow-y: auto;
    }

    .lp-source-caption-wrap {
        justify-content: center;
        padding: 0 16px 10px;
    }
    /* chnage by himanshu */
    .lp-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: "hero" "card" "news";
        column-gap: 0;
        row-gap: 12px;
        padding: 20px;
        align-content: start;
        overflow: visible;
    }
}

/* Phone portrait: remove fixed desktop dimensions that cause clipping/overflow */
@media (max-width: 700px) {
    .lp-main {
        padding: 14px 12px 16px;
        row-gap: 14px;
    }
}

/* Tablet landscape only: compact, two-column fit without overlap */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: landscape) {
    .lp-root {
        min-height: 100dvh;
        overflow-y: auto;
    }

    .lp-main {
        grid-template-columns: minmax(0, 1fr) 330px;
        column-gap: 20px;
        row-gap: 12px;
        padding: 10px 20px;
        align-content: start;
    }
}

/* Mobile landscape only: keep two-column compact and allow vertical scroll when short */
@media (orientation: landscape) and (max-height: 550px) {
    .lp-root {
        min-height: 100dvh;
        overflow-y: auto;
    }

    .lp-main {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
        grid-template-rows: auto auto;
        grid-template-areas: "hero card" "news card";
        column-gap: 14px;
        row-gap: 10px;
        padding: 8px 12px;
        align-content: start;
    }
}

/* Strict compact landscape mode: fit everything in viewport without scroll */
@media (orientation: landscape) and (max-height: 600px) {
    .lp-root {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .lp-main {
        flex: 1;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
        grid-template-rows: auto auto;
        grid-template-areas: "hero card" "news card";
        align-items: center;
        align-content: start;
        column-gap: 12px;
        row-gap: 8px;
        padding: 6px 12px;
        overflow: hidden;
    }
}
/* =========================
   Global — Reset, Base, Layout, Cross-Component Overrides
   Imports theme.css for CSS variables.
========================= */

/* =========================
   Theme — CSS Variables
   Design tokens: colors, spacing, shadows, radii.
   Imported by global.css which is loaded in main.jsx.
========================= */

/* ── Light theme (default) ──────────────────────────────────────── */

:root {
  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  /* Backgrounds */
  --bg: #edf3ee;
  --bg-secondary: #f6faf7;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-strong: #ffffff;
  --surface-muted: rgba(248, 250, 248, 0.88);

  /* Text */
  --ink: #173248;
  --ink-soft: #466075;
  --ink-muted: #64788b;

  /* Borders & Lines */
  --border: rgba(23, 50, 72, 0.11);
  --line: rgba(41, 86, 107, 0.08);

  /* Shadows */
  --shadow-soft: 0 14px 30px rgba(25, 54, 74, 0.09);
  --shadow-strong: 0 24px 60px rgba(32, 64, 86, 0.16);

  /* Brand colours */
  --green: #2f8d5d;
  --green-soft: #e7f4ed;
  --blue: #2e73b4;
  --blue-soft: #eaf2fb;
  --orange: #d98e2b;
  --orange-soft: #fff2df;
  --mint: #1b9b8b;

  /* Radii */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;

  /* Layout */
  --app-height: 100vh;
  --app-height: 100dvh;
  --header-height: 74px;

  /* Interactive hover — subtle scale-up on buttons/toggles */
  --interactive-hover-scale: 1.05;

  /* Popup card tokens */
  --popup-card-bg:
    linear-gradient(180deg, rgba(255, 252, 244, 0.28), rgba(238, 231, 203, 0.22)),
    rgba(247, 242, 220, 0.18);
  --popup-card-border: rgba(255, 255, 255, 0.24);
  --popup-card-shadow: 0 24px 52px rgba(29, 53, 72, 0.08);
  --popup-hero-bg:
    linear-gradient(135deg, rgba(254, 247, 219, 0.32), rgba(236, 229, 190, 0.26) 58%, rgba(220, 239, 226, 0.2));
  --popup-hero-ink: #173248;
  --popup-hero-soft: rgba(53, 77, 92, 0.84);
  --popup-selector-bg: rgba(255, 255, 255, 0.68);
  --popup-selector-border: rgba(23, 50, 72, 0.08);
  --popup-metric-bg: rgba(255, 255, 255, 0.5);
  --popup-metric-border: rgba(23, 50, 72, 0.06);
  --popup-action-bg: rgba(255, 255, 255, 0.58);
  --popup-action-border: rgba(23, 50, 72, 0.08);
  --popup-row-border: rgba(41, 86, 107, 0.09);
  --popup-note-bg: rgba(255, 255, 255, 0.38);
  --popup-note-ink: rgba(58, 77, 89, 0.78);
  --popup-focus-ring: rgba(46, 115, 180, 0.28);
}

/* ── Dark theme overrides ───────────────────────────────────────── */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b1620;
  --bg-secondary: #122230;
  --surface: rgba(14, 28, 40, 0.9);
  --surface-strong: #132433;
  --surface-muted: rgba(19, 35, 50, 0.88);

  --ink: #e4eef7;
  --ink-soft: #bfd0dc;
  --ink-muted: #8fa4b4;

  --border: rgba(159, 181, 198, 0.14);
  --line: rgba(163, 186, 204, 0.11);

  --shadow-soft: 0 18px 34px rgba(0, 0, 0, 0.28);
  --shadow-strong: 0 28px 72px rgba(0, 0, 0, 0.42);

  --green: #63c189;
  --green-soft: rgba(99, 193, 137, 0.16);
  --blue: #7db5ff;
  --blue-soft: rgba(125, 181, 255, 0.16);
  --orange: #ffb45f;
  --orange-soft: rgba(255, 180, 95, 0.16);
  --mint: #4fc7b4;

  --popup-card-bg:
    linear-gradient(180deg, rgba(17, 31, 45, 0.22), rgba(10, 22, 33, 0.18)),
    rgba(10, 22, 31, 0.14);
  --popup-card-border: rgba(176, 201, 218, 0.1);
  --popup-card-shadow: 0 28px 60px rgba(0, 0, 0, 0.1);
  --popup-hero-bg:
    linear-gradient(135deg, rgba(31, 57, 70, 0.26), rgba(17, 33, 45, 0.22) 58%, rgba(18, 52, 47, 0.18));
  --popup-hero-ink: #eef7ff;
  --popup-hero-soft: rgba(205, 223, 236, 0.82);
  --popup-selector-bg: rgba(255, 255, 255, 0.06);
  --popup-selector-border: rgba(173, 196, 211, 0.12);
  --popup-metric-bg: rgba(255, 255, 255, 0.04);
  --popup-metric-border: rgba(173, 196, 211, 0.1);
  --popup-action-bg: rgba(255, 255, 255, 0.06);
  --popup-action-border: rgba(173, 196, 211, 0.1);
  --popup-row-border: rgba(173, 196, 211, 0.1);
  --popup-note-bg: rgba(255, 255, 255, 0.04);
  --popup-note-ink: rgba(205, 223, 236, 0.74);
  --popup-focus-ring: rgba(125, 181, 255, 0.3);
}

/* =========================
   Base Reset
========================= */

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

html,
body,
#root {
  width: 100%;
  min-height: var(--app-height);
  height: var(--app-height);
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(62, 146, 95, 0.12), transparent 22%),
    radial-gradient(circle at right 15%, rgba(50, 116, 181, 0.11), transparent 18%),
    linear-gradient(180deg, #f6f9f5 0%, #edf3ee 42%, #e9f0ec 100%);
  color: var(--ink);
  font-family: "Public Sans", sans-serif;
  overflow: hidden;
  transition: background 220ms ease, color 220ms ease;
  background: var(--popup-hero-bg);
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(79, 199, 180, 0.15), transparent 20%),
    radial-gradient(circle at right 10%, rgba(125, 181, 255, 0.16), transparent 22%),
    linear-gradient(180deg, #101c28 0%, #0b1620 42%, #09131c 100%);
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

/* =========================
   Interactive Hover Scale
   Subtle scale-up on buttons/toggles (composes with existing transform hovers).
========================= */

:where(
  button:not(:disabled):not(.no-hover-scale),
  label.toggle-row,
  input[type="checkbox"],
  input[type="radio"],
  [role="button"]:not([aria-disabled="true"]),
  .icon-button,
  .header-action-button,
  .app-header__menu-button,
  .app-header__settings-item,
  .profile-chip,
  .lang-toggle__btn,
  .sidebar__nav-item,
  .sidebar-toggle,
  .map-toolbar__button,
  .basemap-switcher__option,
  .toggle-row--group,
  .measurement-panel__close-btn,
  .measurement-panel__action-btn,
  .search-section__trigger,
  .search-section__print-btn,
  .search-shell__submit,
  .search-shell__suggestion,
  .parcel-table-toggle,
  .parcel-table-panel__print,
  .parcel-table-panel__whatsapp,
  .parcel-table-panel__close,
  .action-link,
  .feedback-fab,
  .feedback-modal__close,
  .feedback-form__submit,
  .voice-mic-btn,
  .voice-chips__chip,
  .voice-bar__speak-btn,
  .voice-bar__badge--actionable,
  .zws__label,
  .ncc__toggle,
  .ncc__close,
  .ncc__center,
  .admin-table-pagination__button,
  .admin-log-device__toggle,
  .admin-read-more-btn,
  .admin-api-url-copy-btn,
  .admin-action-btn
) {
  transform-origin: center;
  transition: scale 180ms ease, transform 180ms ease, background 180ms ease,
    background-color 180ms ease, box-shadow 180ms ease, color 180ms ease,
    border-color 180ms ease, opacity 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    button:not(:disabled):not(.no-hover-scale):hover,
    label.toggle-row:hover,
    input[type="checkbox"]:hover,
    input[type="radio"]:hover,
    [role="button"]:not([aria-disabled="true"]):hover,
    .icon-button:hover,
    .header-action-button:hover,
    .app-header__menu-button:hover,
    .app-header__settings-item:hover,
    .profile-chip:hover,
    .lang-toggle__btn:hover,
    .sidebar__nav-item:hover,
    .sidebar-toggle:hover,
    .map-toolbar__button:hover,
    .basemap-switcher__option:hover,
    .toggle-row--group:hover,
    .measurement-panel__close-btn:hover,
    .measurement-panel__action-btn:hover:not(:disabled),
    .search-section__trigger:hover,
    .search-section__print-btn:hover,
    .search-shell__submit:hover,
    .search-shell__suggestion:hover,
    .parcel-table-toggle:hover,
    .parcel-table-panel__print:hover,
    .parcel-table-panel__whatsapp:hover,
    .parcel-table-panel__close:hover,
    .action-link:hover,
    .feedback-fab:hover,
    .feedback-modal__close:hover,
    .feedback-form__submit:hover:not(:disabled),
    .voice-mic-btn:hover,
    .voice-chips__chip:hover:not(:disabled),
    .voice-bar__speak-btn:hover:not(:disabled),
    .voice-bar__badge--actionable:hover,
    .zws__label:hover,
    .ncc__toggle:hover,
    .ncc__close:hover,
    .ncc__center:hover,
    .admin-table-pagination__button:hover:not(:disabled),
    .admin-log-device__toggle:hover,
    .admin-read-more-btn:hover,
    .admin-api-url-copy-btn:hover,
    .admin-action-btn:hover
  ) {
    scale: var(--interactive-hover-scale);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    button:not(:disabled),
    label.toggle-row,
    input[type="checkbox"],
    input[type="radio"],
    [role="button"],
    .icon-button,
    .header-action-button,
    .sidebar__nav-item,
    .map-toolbar__button,
    .basemap-switcher__option,
    .toggle-row--group
  ) {
    transition: none;
  }

  :where(
    button:not(:disabled):hover,
    label.toggle-row:hover,
    .icon-button:hover,
    .sidebar__nav-item:hover,
    .map-toolbar__button:hover,
    .basemap-switcher__option:hover,
    .toggle-row--group:hover
  ) {
    scale: 1;
  }
}

/* =========================
   Utility Classes
========================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}

.eyebrow--light {
  color: rgba(255, 255, 255, 0.86);
}

/* =========================
   App Shell Layout
========================= */

.app-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--app-height);
  height: var(--app-height);
  max-height: var(--app-height);
  overflow: hidden;
  box-sizing: border-box;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.app-shell > .app-header {
  flex: 0 0 auto;
}

.app-overlay {
  position: fixed;
  inset: calc(var(--header-height) + 0.4rem) 0 0;
  z-index: 60;
  border: 0;
  background: rgba(16, 34, 48, 0.22);
  backdrop-filter: blur(6px);
}

:root[data-theme="dark"] .app-overlay {
  background: rgba(4, 11, 17, 0.42);
}

/* =========================
   Dashboard Shell Layout
========================= */

.dashboard-shell {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0.9rem;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding: 0.85rem;
  overflow: hidden;
  transition: grid-template-columns 280ms ease, gap 280ms ease;
}

.dashboard-shell--sidebar-closed {
  grid-template-columns: 0 minmax(0, 1fr);
  gap: 0;
}

:root[data-theme="dark"] .dashboard-shell {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
}

/* =========================
   Main Workspace
========================= */

.workspace {
  min-width: 0;
  min-height: 0;
  height: 100%;
}

/* =========================
   Focus Styles (Accessibility)
========================= */

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(46, 115, 180, 0.22);
  outline-offset: 2px;
}

/* =========================
   Hindi / Devanagari Font
   Applied when root carries data-lang="hi" (set by LanguageContext).
========================= */

[data-lang="hi"],
[data-lang="hi"] body,
[data-lang="hi"] h1,
[data-lang="hi"] h2,
[data-lang="hi"] h3,
[data-lang="hi"] h4,
[data-lang="hi"] h5,
[data-lang="hi"] p,
[data-lang="hi"] span,
[data-lang="hi"] button,
[data-lang="hi"] label,
[data-lang="hi"] select,
[data-lang="hi"] input,
[data-lang="hi"] td,
[data-lang="hi"] th,
[data-lang="hi"] small,
[data-lang="hi"] strong {
  font-family: "Noto Sans Devanagari", "Mukta", "Hind", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* =========================
   Cross-Component Dark Theme Overrides
   These selectors span multiple components and are kept here
   to avoid duplicating shared declarations across component files.
========================= */

/* Map-stage, toolbar, layer-panel, basemap, record-panel, parcel-panel, modal — dark */

:root[data-theme="dark"] .map-stage__status,
:root[data-theme="dark"] .map-toolbar__button,
:root[data-theme="dark"] .layer-panel,
:root[data-theme="dark"] .basemap-switcher,
:root[data-theme="dark"] .record-panel__surface,
:root[data-theme="dark"] .parcel-table-panel,
:root[data-theme="dark"] .parcel-modal {
  background:
    linear-gradient(180deg, rgba(19, 35, 49, 0.94), rgba(12, 25, 36, 0.92)),
    rgba(11, 22, 31, 0.9);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.28);
}

/* Toggle rows, action links, field selects, modal cards — dark */

:root[data-theme="dark"] .toggle-row,
:root[data-theme="dark"] .basemap-switcher__option,
:root[data-theme="dark"] .action-link,
:root[data-theme="dark"] .modal-info-card,
:root[data-theme="dark"] .parcel-table-toggle,
:root[data-theme="dark"] .parcel-table-panel__print,
:root[data-theme="dark"] .parcel-table-panel__close,
:root[data-theme="dark"] .field select {
  background: rgba(23, 40, 56, 0.92);
  color: var(--ink);
}

:root[data-theme="dark"] .map-toolbar__button:hover,
:root[data-theme="dark"] .map-toolbar__button.map-toolbar__button--active,
:root[data-theme="dark"] .parcel-table-toggle:hover {
  background: linear-gradient(135deg, rgba(47, 141, 93, 0.95), rgba(46, 115, 180, 0.87));
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(46, 115, 180, 0.28);
}

:root[data-theme="dark"] .basemap-switcher__option.basemap-switcher__option--active {
  background: linear-gradient(135deg, rgba(65, 174, 121, 0.96), rgba(72, 140, 214, 0.92));
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(40, 109, 171, 0.32);
}

:root[data-theme="dark"] .basemap-switcher__option.basemap-switcher__option--active .basemap-switcher__option-text small {
  color: rgba(255, 255, 255, 0.9);
}

/* ArcGIS attribution strip: keep it transparent (no visible white line bar) */

.esri-attribution,
.esri-attribution--open,
.esri-attribution--closed,
.esri-attribution__sources,
.esri-attribution__powered-by {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .field select {
  border-color: rgba(171, 194, 208, 0.1);
}

/* LayerPanel footer + info rows — dark */

:root[data-theme="dark"] .layer-panel__footer,
:root[data-theme="dark"] .info-row {
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}

/* Modal info card — dark */

:root[data-theme="dark"] .modal-info-card {
  box-shadow: inset 0 0 0 1px rgba(171, 194, 208, 0.05);
}

/* =========================
   Responsive — Layout breakpoints
   JS: src/constants/layoutBreakpoints.js (1024 / 768)
========================= */

/* Tablet and below: sidebar is a fixed overlay, workspace takes full width.
   --header-height fallback until AppHeader measures actual height. */

@media (max-width: 1024px) {
  :root {
    --header-height: 124px;
  }

  .dashboard-shell {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0.65rem;
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 132px;
  }

  .dashboard-shell {
    padding: 0.4rem 0.28rem;
    padding-bottom: max(0.4rem, env(safe-area-inset-bottom, 0px));
  }
}

/* Tablet landscape: restore compact single-row header height */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  :root {
    --header-height: 82px;
  }

  .dashboard-shell {
    gap: 0.55rem;
    padding: 0.65rem;
  }
}

/* Mobile landscape: keep controls visible and map using remaining height */

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-height: 68px;
  }

  .dashboard-shell {
    gap: 0.35rem;
    padding: 0.35rem 0.22rem;
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
  }
}

/* Small mobile: constrain floating panels to viewport */

@media (max-width: 480px) {
  .record-panel {
    left: 0.8rem;
    right: 0.8rem;
    width: auto;
    max-width: 100%;
  }
}